From e0e316d9635e96f2bf6d14cb9890acba502c87ca Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 20 Aug 2020 21:03:07 +0300 Subject: [PATCH] Dynamically changing context menu icons --- apps/common/main/lib/component/MenuItem.js | 2 +- .../main/app/view/DocumentHolder.js | 57 ++++++++++++++++++- .../main/app/view/DocumentHolder.js | 52 ++++++++++++++++- .../main/app/controller/DocumentHolder.js | 26 +++++++++ .../main/app/view/DocumentHolder.js | 2 + 5 files changed, 134 insertions(+), 5 deletions(-) diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index cb1e7159b..ab04de056 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/apps/common/main/lib/component/MenuItem.js @@ -244,8 +244,8 @@ define([ if (firstChild) { firstChild.find('.menu-item-icon').removeClass(this.iconCls).addClass(iconCls); } - this.iconCls = iconCls; } + this.iconCls = iconCls; }, setChecked: function(check, suppressEvent) { diff --git a/apps/documenteditor/main/app/view/DocumentHolder.js b/apps/documenteditor/main/app/view/DocumentHolder.js index 7e173a31c..b12b7c8c8 100644 --- a/apps/documenteditor/main/app/view/DocumentHolder.js +++ b/apps/documenteditor/main/app/view/DocumentHolder.js @@ -2744,6 +2744,7 @@ define([ }; var menuTableCellAlign = new Common.UI.MenuItem({ + iconCls: 'menu__icon btn-align-top', caption : me.cellAlignText, menu : new Common.UI.Menu({ cls: 'shifted-right', @@ -3019,6 +3020,7 @@ define([ }; var menuTableDirection = new Common.UI.MenuItem({ + iconCls: 'menu__icon text-orient-hor', caption : me.directionText, menu : new Common.UI.Menu({ cls: 'ppm-toolbar shifted-right', @@ -3105,11 +3107,37 @@ define([ } var align = value.tableProps.value.get_CellsVAlign(); + var cls = ''; + switch (align) { + case Asc.c_oAscVertAlignJc.Top: + cls = 'menu__icon btn-align-top'; + break; + case Asc.c_oAscVertAlignJc.Center: + cls = 'menu__icon btn-align-middle'; + break; + case Asc.c_oAscVertAlignJc.Bottom: + cls = 'menu__icon btn-align-bottom'; + break; + } + menuTableCellAlign.setIconCls(cls); me.menuTableCellTop.setChecked(align == Asc.c_oAscVertAlignJc.Top); me.menuTableCellCenter.setChecked(align == Asc.c_oAscVertAlignJc.Center); me.menuTableCellBottom.setChecked(align == Asc.c_oAscVertAlignJc.Bottom); var dir = value.tableProps.value.get_CellsTextDirection(); + cls = ''; + switch (dir) { + case Asc.c_oAscCellTextDirection.LRTB: + cls = 'menu__icon text-orient-hor'; + break; + case Asc.c_oAscCellTextDirection.TBRL: + cls = 'menu__icon text-orient-rdown'; + break; + case Asc.c_oAscCellTextDirection.BTLR: + cls = 'menu__icon btn-align-rup'; + break; + } + menuTableDirection.setIconCls(cls); me.menuTableDirectH.setChecked(dir == Asc.c_oAscCellTextDirection.LRTB); me.menuTableDirect90.setChecked(dir == Asc.c_oAscCellTextDirection.TBRL); me.menuTableDirect270.setChecked(dir == Asc.c_oAscCellTextDirection.BTLR); @@ -3127,7 +3155,6 @@ define([ menuTableDistCols.setDisabled(disabled); menuTableCellAlign.setDisabled(disabled); menuTableDirection.setDisabled(disabled); - menuTableAdvanced.setDisabled(disabled); var cancopy = me.api && me.api.can_CopyCut(); @@ -3430,6 +3457,7 @@ define([ }; var menuParagraphVAlign = new Common.UI.MenuItem({ + iconCls: 'menu__icon btn-align-top', caption : me.vertAlignText, menu : new Common.UI.Menu({ cls: 'shifted-right', @@ -3475,6 +3503,7 @@ define([ }; var menuParagraphDirection = new Common.UI.MenuItem({ + iconCls: 'menu__icon text-orient-hor', caption : me.directionText, menu : new Common.UI.Menu({ cls: 'ppm-toolbar shifted-right', @@ -3755,11 +3784,37 @@ define([ menuParagraphDirection.setVisible(isInShape && !isInChart && !isEquation); // после того, как заголовок можно будет растягивать по вертикали, вернуть "|| isInChart" !! if ( isInShape || isInChart ) { var align = value.imgProps.value.get_VerticalTextAlign(); + var cls = ''; + switch (align) { + case Asc.c_oAscVAlign.Top: + cls = 'menu__icon btn-align-top'; + break; + case Asc.c_oAscVAlign.Center: + cls = 'menu__icon btn-align-middle'; + break; + case Asc.c_oAscVAlign.Bottom: + cls = 'menu__icon btn-align-bottom'; + break; + } + menuParagraphVAlign.setIconCls(cls); me.menuParagraphTop.setChecked(align == Asc.c_oAscVAlign.Top); me.menuParagraphCenter.setChecked(align == Asc.c_oAscVAlign.Center); me.menuParagraphBottom.setChecked(align == Asc.c_oAscVAlign.Bottom); var dir = value.imgProps.value.get_Vert(); + cls = ''; + switch (dir) { + case Asc.c_oAscVertDrawingText.normal: + cls = 'menu__icon text-orient-hor'; + break; + case Asc.c_oAscVertDrawingText.vert: + cls = 'menu__icon text-orient-rdown'; + break; + case Asc.c_oAscVertDrawingText.vert270: + cls = 'menu__icon btn-align-rup'; + break; + } + menuParagraphDirection.setIconCls(cls); me.menuParagraphDirectH.setChecked(dir == Asc.c_oAscVertDrawingText.normal); me.menuParagraphDirect90.setChecked(dir == Asc.c_oAscVertDrawingText.vert); me.menuParagraphDirect270.setChecked(dir == Asc.c_oAscVertDrawingText.vert270); diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js index 2c76e8f93..7cee7a225 100644 --- a/apps/presentationeditor/main/app/view/DocumentHolder.js +++ b/apps/presentationeditor/main/app/view/DocumentHolder.js @@ -2188,6 +2188,7 @@ define([ }); var menuTableCellAlign = new Common.UI.MenuItem({ + iconCls: 'menu__icon btn-align-top', caption : me.cellAlignText, menu : (function(){ function onItemClick(item, e) { @@ -2766,6 +2767,7 @@ define([ }).on('click', _.bind(me.editChartClick, me, undefined)); var menuParagraphVAlign = new Common.UI.MenuItem({ + iconCls: 'menu__icon btn-align-top', caption : me.vertAlignText, menu : (function(){ function onItemClick(item) { @@ -2824,6 +2826,7 @@ define([ }; var menuParagraphDirection = new Common.UI.MenuItem({ + iconCls: 'menu__icon text-orient-hor', caption : me.directionText, menu : new Common.UI.Menu({ cls: 'shifted-right', @@ -3100,14 +3103,43 @@ define([ menuParagraphDirection.setVisible(isInShape && !isInChart && !isEquation); // после того, как заголовок можно будет растягивать по вертикали, вернуть "|| isInChart" !! if (isInShape || isInChart) { var align = value.shapeProps.value.get_VerticalTextAlign(); + var cls = ''; + switch (align) { + case Asc.c_oAscVAlign.Top: + cls = 'menu__icon btn-align-top'; + break; + case Asc.c_oAscVAlign.Center: + cls = 'menu__icon btn-align-middle'; + break; + case Asc.c_oAscVAlign.Bottom: + cls = 'menu__icon btn-align-bottom'; + break; + } + menuParagraphVAlign.setIconCls(cls); me.menuParagraphTop.setChecked(align == Asc.c_oAscVAlign.Top); me.menuParagraphCenter.setChecked(align == Asc.c_oAscVAlign.Center); me.menuParagraphBottom.setChecked(align == Asc.c_oAscVAlign.Bottom); var dir = value.shapeProps.value.get_Vert(); + cls = ''; + switch (dir) { + case Asc.c_oAscVertDrawingText.normal: + cls = 'menu__icon text-orient-hor'; + break; + case Asc.c_oAscVertDrawingText.vert: + cls = 'menu__icon text-orient-rdown'; + break; + case Asc.c_oAscVertDrawingText.vert270: + cls = 'menu__icon btn-align-rup'; + break; + } + menuParagraphDirection.setIconCls(cls); me.menuParagraphDirectH.setChecked(dir == Asc.c_oAscVertDrawingText.normal); me.menuParagraphDirect90.setChecked(dir == Asc.c_oAscVertDrawingText.vert); me.menuParagraphDirect270.setChecked(dir == Asc.c_oAscVertDrawingText.vert270); + } else { + menuParagraphVAlign.setIconCls(''); + menuParagraphDirection.setIconCls(''); } menuParagraphVAlign.setDisabled(disabled); menuParagraphDirection.setDisabled(disabled); @@ -3224,9 +3256,23 @@ define([ var disabled = (value.slideProps!==undefined && value.slideProps.locked); - me.menuTableCellTop.setChecked(value.tableProps.value.get_CellsVAlign() == Asc.c_oAscVertAlignJc.Top); - me.menuTableCellCenter.setChecked(value.tableProps.value.get_CellsVAlign() == Asc.c_oAscVertAlignJc.Center); - me.menuTableCellBottom.setChecked(value.tableProps.value.get_CellsVAlign() == Asc.c_oAscVertAlignJc.Bottom); + var align = value.tableProps.value.get_CellsVAlign(); + var cls = ''; + switch (align) { + case Asc.c_oAscVertAlignJc.Top: + cls = 'menu__icon btn-align-top'; + break; + case Asc.c_oAscVertAlignJc.Center: + cls = 'menu__icon btn-align-middle'; + break; + case Asc.c_oAscVertAlignJc.Bottom: + cls = 'menu__icon btn-align-bottom'; + break; + } + menuTableCellAlign.setIconCls(cls); + me.menuTableCellTop.setChecked(align == Asc.c_oAscVertAlignJc.Top); + me.menuTableCellCenter.setChecked(align == Asc.c_oAscVertAlignJc.Center); + me.menuTableCellBottom.setChecked(align == Asc.c_oAscVertAlignJc.Bottom); if (me.api) { mnuTableMerge.setDisabled(value.tableProps.locked || disabled || !me.api.CheckBeforeMergeCells()); diff --git a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js index a9ed8aa3c..ccc2e3b2e 100644 --- a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js +++ b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js @@ -1778,10 +1778,36 @@ define([ direct = value.asc_getVert(), listtype = this.api.asc_getCurrentListType(); isObjLocked = isObjLocked || value.asc_getLocked(); + var cls = ''; + switch (align) { + case Asc.c_oAscVAlign.Top: + cls = 'menu__icon btn-align-top'; + break; + case Asc.c_oAscVAlign.Center: + cls = 'menu__icon btn-align-middle'; + break; + case Asc.c_oAscVAlign.Bottom: + cls = 'menu__icon btn-align-bottom'; + break; + } + documentHolder.menuParagraphVAlign.setIconCls(cls); documentHolder.menuParagraphTop.setChecked(align == Asc.c_oAscVAlign.Top); documentHolder.menuParagraphCenter.setChecked(align == Asc.c_oAscVAlign.Center); documentHolder.menuParagraphBottom.setChecked(align == Asc.c_oAscVAlign.Bottom); + cls = ''; + switch (direct) { + case Asc.c_oAscVertDrawingText.normal: + cls = 'menu__icon text-orient-hor'; + break; + case Asc.c_oAscVertDrawingText.vert: + cls = 'menu__icon text-orient-rdown'; + break; + case Asc.c_oAscVertDrawingText.vert270: + cls = 'menu__icon btn-align-rup'; + break; + } + documentHolder.menuParagraphDirection.setIconCls(cls); documentHolder.menuParagraphDirectH.setChecked(direct == Asc.c_oAscVertDrawingText.normal); documentHolder.menuParagraphDirect90.setChecked(direct == Asc.c_oAscVertDrawingText.vert); documentHolder.menuParagraphDirect270.setChecked(direct == Asc.c_oAscVertDrawingText.vert270); diff --git a/apps/spreadsheeteditor/main/app/view/DocumentHolder.js b/apps/spreadsheeteditor/main/app/view/DocumentHolder.js index defd8073b..28378eec1 100644 --- a/apps/spreadsheeteditor/main/app/view/DocumentHolder.js +++ b/apps/spreadsheeteditor/main/app/view/DocumentHolder.js @@ -822,6 +822,7 @@ define([ }); this.menuParagraphVAlign = new Common.UI.MenuItem({ + iconCls: 'menu__icon btn-align-top', caption : this.vertAlignText, menu : new Common.UI.Menu({ cls: 'shifted-right', @@ -856,6 +857,7 @@ define([ }); me.menuParagraphDirection = new Common.UI.MenuItem({ + iconCls: 'menu__icon text-orient-hor', caption : me.directionText, menu : new Common.UI.Menu({ cls: 'shifted-right',