From 7fbce6170b4732b1ead95637d6aa27f39954573e Mon Sep 17 00:00:00 2001 From: Alexei Koshelev Date: Thu, 22 Sep 2022 22:06:58 +0300 Subject: [PATCH] [SSE] Added cell styles menu in Ole editor --- .../main/app/controller/Toolbar.js | 126 +++++++++++++++--- .../main/app/template/ToolbarAnother.template | 1 + .../main/app/view/Toolbar.js | 38 +++--- apps/spreadsheeteditor/main/locale/en.json | 14 +- apps/spreadsheeteditor/main/locale/ru.json | 15 ++- .../main/resources/less/toolbar.less | 4 +- 6 files changed, 148 insertions(+), 50 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 0f93b1ac1..771747696 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -335,6 +335,7 @@ define([ toolbar.btnMerge.on('click', _.bind(this.onMergeCellsMenu, this, toolbar.btnMerge.menu, toolbar.btnMerge.menu.items[0])); toolbar.btnMerge.menu.on('item:click', _.bind(this.onMergeCellsMenu, this)); toolbar.btnTableTemplate.menu.on('show:after', _.bind(this.onTableTplMenuOpen, this)); + toolbar.btnCellStyle.menu.on('show:after', _.bind(this.onCellStyleMenuOpen, this)); toolbar.btnVisibleArea.menu.on('item:click', _.bind(this.onVisibleAreaMenu, this)); toolbar.btnVisibleAreaClose.on('click', _.bind(this.onVisibleAreaClose, this)); toolbar.cmbFontName.on('selected', _.bind(this.onFontNameSelect, this)); @@ -2251,11 +2252,77 @@ define([ } }, + + onCellStyleMenuOpen: function(menu) { + if (menu && this.toolbar.mnuCellStylePicker) { + var picker = this.toolbar.mnuCellStylePicker, + columnCount = 6; + + if (picker.cmpEl) { + var itemEl = $(picker.cmpEl.find('.dataview.inner .item').get(0)), + itemMargin = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right')), + itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) : 106; + + var menuWidth = columnCount * (itemMargin + itemWidth) + 15, // for scroller + menuMargins = parseFloat(picker.cmpEl.css('margin-left')) + parseFloat(picker.cmpEl.css('margin-right')); + if (menuWidth + menuMargins>Common.Utils.innerWidth()) + menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-menuMargins-11)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 11; + picker.cmpEl.css({ + 'width': menuWidth + }); + menu.alignPosition(); + } + } + + var scroller = this.toolbar.mnuCellStylePicker.scroller; + if (scroller) { + scroller.update({alwaysVisibleY: true}); + scroller.scrollTop(0); + } + + var val = this.toolbar.mnuCellStylePicker.store.findWhere({name: this._state.prstyle}); + if (val) + this.toolbar.mnuCellStylePicker.selectRecord(val); + else + this.toolbar.mnuCellStylePicker.deselectAll(); + }, + onApiInitEditorStyles: function(styles){ window.styles_loaded = false; + if(this.toolbar.mode.isEditOle) { + var me = this; + function createPicker(element, menu) { + var picker = new Common.UI.DataView({ + el: element, + parentMenu : menu, + restoreHeight: 380, + groups: new Common.UI.DataViewGroupStore(), + store : new Common.UI.DataViewStore(), + style: 'max-height: 380px;', + itemTemplate: _.template('
'), + delayRenderTips: true + }); + + picker.on('item:click', function(picker, item, record) { + me.onListStyleSelect(picker, record); + }); + + if (picker.scroller) { + picker.scroller.update({alwaysVisibleY: true}); + } + + return picker; + } + + if (_.isUndefined(this.toolbar.mnuCellStylePicker)) { + this.toolbar.mnuCellStylePicker = createPicker($('#id-toolbar-menu-cell-styles'), this.toolbar.btnCellStyle.menu); + } + } + var self = this, - listStyles = self.toolbar.listStyles; + listStyles = this.toolbar.mode.isEditOle ? self.toolbar.mnuCellStylePicker: self.toolbar.listStyles, + menuPicker = this.toolbar.mode.isEditOle ? listStyles: listStyles.menuPicker; if (!listStyles) { self.styles = styles; @@ -2263,8 +2330,17 @@ define([ } var mainController = this.getApplication().getController('Main'); - var count = listStyles.menuPicker.store.length; - var rec = listStyles.menuPicker.getSelectedRec(); + var count = menuPicker.store.length; + var rec = menuPicker.getSelectedRec(); + var groupStore = [ + {id: 'menu-style-group-custom', caption: this.txtGroupCell_Custom}, + {id: 'menu-style-group-color', caption: this.txtGroupCell_GoodBadAndNeutral}, + {id: 'menu-style-group-model', caption: this.txtGroupCell_DataAndModel}, + {id: 'menu-style-group-title', caption: this.txtGroupCell_TitlesAndHeadings}, + {id: 'menu-style-group-themed', caption: this.txtGroupCell_ThemedCallStyles}, + {id: 'menu-style-group-number', caption: this.txtGroupCell_NumberFormat}, + {id: 'menu-style-group-no-name', caption: this.txtGroupCell_NoName} + ]; var groups = []; for (var i = 0; i < 4; i++) { groups.push('menu-style-group-color'); } for (var i = 0; i < 8; i++) { groups.push('menu-style-group-model'); } @@ -2273,7 +2349,7 @@ define([ for (var i = 0; i < 5; i++) { groups.push('menu-style-group-number'); } if (count>0 && count==styles.length) { - var data = listStyles.menuPicker.dataViewItems; + var data = menuPicker.dataViewItems; data && _.each(styles, function(style, index){ var img = style.asc_getImage(); data[index].model.set('imageUrl', img, {silent: true}); @@ -2315,24 +2391,18 @@ define([ }); if(countCustomStyles == 0){ - listStyles.groups.models.forEach(function(style) { - if(style.id === 'menu-style-group-custom'){ - listStyles.groups.remove(style); - } - }); + groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-custom'; }); } if(hasNoNameGroup === false){ - listStyles.groups.models.forEach(function(style) { - if(style.id === 'menu-style-group-no-name'){ - listStyles.groups.remove(style); - } - }); + groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-no-name'; }); } - listStyles.menuPicker.store.reset(arr); + + menuPicker.groups.reset(groupStore); + menuPicker.store.reset(arr); } - if (listStyles.menuPicker.store.length > 0 && listStyles.rendered) { - rec = rec ? listStyles.menuPicker.store.findWhere({name: rec.get('name')}) : null; - listStyles.fillComboView(rec ? rec : listStyles.menuPicker.store.at(0), true, true); + if (!this.toolbar.mode.isEditOle && menuPicker.store.length > 0 && listStyles.rendered) { + rec = rec ? menuPicker.store.findWhere({name: rec.get('name')}) : null; + listStyles.fillComboView(rec ? rec : menuPicker.store.at(0), true, true); } window.styles_loaded = true; }, @@ -3544,6 +3614,19 @@ define([ } } + val = info.asc_getStyleName(); + if (this._state.prstyle != val && this.toolbar.mnuCellStylePicker) { + + val = this.toolbar.mnuCellStylePicker.store.findWhere({name: val}); + if (val) { + this.toolbar.mnuCellStylePicker.selectRecord(val); + this._state.prstyle = val.get('name'); + } else { + this.toolbar.mnuCellStylePicker.deselectAll(); + this._state.prstyle = null; + } + } + var old_name = this._state.tablename; this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined; @@ -5177,6 +5260,13 @@ define([ txtGroupTable_Light: 'Light', txtGroupTable_Medium: 'Medium', txtGroupTable_Dark: 'Dark', + txtGroupCell_Custom: 'Custom', + txtGroupCell_GoodBadAndNeutral: 'Good, Bad, and Neutral', + txtGroupCell_DataAndModel: 'Data and Model', + txtGroupCell_TitlesAndHeadings: 'Titles and Headings', + txtGroupCell_ThemedCallStyles: 'Themed Call Styles', + txtGroupCell_NumberFormat: 'Number Format', + txtGroupCell_NoName: 'No name', textInsert: 'Insert', txtInsertCells: 'Insert Cells', txtDeleteCells: 'Delete Cells', diff --git a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template index 039541518..b2c161b2c 100644 --- a/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template +++ b/apps/spreadsheeteditor/main/app/template/ToolbarAnother.template @@ -108,6 +108,7 @@ +
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 40ed35503..6e6ce7bdc 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -532,6 +532,20 @@ define([ dataHintDirection: 'bottom' }); + me.btnCellStyle = new Common.UI.Button({ + id : 'id-toolbar-btn-cstyle', + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-menu-table', + lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.multiselect, _set.cantModifyFilter, _set.wsLock, _set.editVisibleArea], + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') } + ] + }), + dataHint : '1', + dataHintDirection: 'bottom' + }); + me.btnTextFormatting = new Common.UI.Button({ id : 'id-toolbar-btn-formatting', cls : 'btn-toolbar no-caret', @@ -1304,15 +1318,7 @@ define([ itemWidth : 100, itemHeight : 20, style: 'min-width:135px; max-width: 660px;', - groups: new Common.UI.DataViewGroupStore([ - {id: 'menu-style-group-custom', caption: this.textCustom }, - {id: 'menu-style-group-color', caption: this.textGoodBadAndNeutral }, - {id: 'menu-style-group-model', caption: this.textDataAndModel }, - {id: 'menu-style-group-title', caption: this.textTitlesAndHeadings }, - {id: 'menu-style-group-themed', caption: this.textThemedCallStyles }, - {id: 'menu-style-group-number', caption: this.textNumberFormat }, - {id: 'menu-style-group-no-name', caption: this.textNoName } - ]), + groups: new Common.UI.DataViewGroupStore(), menuMaxHeight : 380, lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells']], dataHint : '1', @@ -2059,7 +2065,7 @@ define([ me.btnAlignMiddle, me.btnAlignBottom, me.btnWrap, me.btnTextOrient, me.btnBackColor, me.btnInsertTable, me.btnMerge, me.btnInsertFormula, me.btnNamedRange, me.btnIncDecimal, me.btnInsertShape, me.btnInsertEquation, me.btnInsertSymbol, me.btnInsertSlicer, me.btnInsertText, me.btnInsertTextArt, me.btnSortUp, me.btnSortDown, me.btnSetAutofilter, me.btnClearAutofilter, - me.btnTableTemplate, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell, me.btnCondFormat, + me.btnTableTemplate, me.btnCellStyle, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell, me.btnCondFormat, me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink, me.btnInsertChart, me.btnColorSchemas, me.btnInsertSparkline, me.btnCopy, me.btnPaste, me.btnCut, me.btnSelectAll, me.listStyles, me.btnPrint, @@ -2250,6 +2256,7 @@ define([ _injectComponent('#slot-btn-setfilter', this.btnSetAutofilter); _injectComponent('#slot-btn-clear-filter', this.btnClearAutofilter); _injectComponent('#slot-btn-table-tpl', this.btnTableTemplate); + _injectComponent('#slot-btn-cell-style', this.btnCellStyle); _injectComponent('#slot-btn-format', this.cmbNumberFormat); _injectComponent('#slot-btn-percents', this.btnPercentStyle); _injectComponent('#slot-btn-currency', this.btnCurrencyStyle); @@ -2348,6 +2355,7 @@ define([ _updateHint(this.btnClearAutofilter, this.txtClearFilter); _updateHint(this.btnSearch, this.txtSearch); _updateHint(this.btnTableTemplate, this.txtTableTemplate); + _updateHint(this.btnCellStyle, this.txtCellStyle); _updateHint(this.btnPercentStyle, this.tipDigStylePercent); _updateHint(this.btnCurrencyStyle, this.tipDigStyleAccounting); _updateHint(this.btnDecDecimal, this.tipDecDecimal); @@ -3171,6 +3179,7 @@ define([ txtSortZA: 'Sort Z to A', txtFilter: 'Filter', txtTableTemplate: 'Format As Table Template', + txtCellStyle: 'Cell Style', textHorizontal: 'Horizontal Text', textCounterCw: 'Angle Counterclockwise', textClockwise: 'Angle Clockwise', @@ -3317,13 +3326,6 @@ define([ tipHAlighOle: 'Horizontal Align', tipVAlighOle: 'Vertical Align', tipSelectAll: 'Select all', - tipCut: 'Cut', - textCustom: 'Custom', - textGoodBadAndNeutral: 'Good, Bad, and Neutral', - textDataAndModel: 'Data and Model', - textTitlesAndHeadings: 'Titles and Headings', - textThemedCallStyles: 'Themed Call Styles', - textNumberFormat: 'Number Format', - textNoName: 'No name' + tipCut: 'Cut' }, SSE.Views.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 524103d76..ccb29f757 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -1504,6 +1504,13 @@ "SSE.Controllers.Toolbar.txtGroupTable_Light": "Light", "SSE.Controllers.Toolbar.txtGroupTable_Medium": "Medium", "SSE.Controllers.Toolbar.txtGroupTable_Dark": "Dark", + "SSE.Controllers.Toolbar.txtGroupCell_Custom": "Custom", + "SSE.Controllers.Toolbar.txtGroupCell_GoodBadAndNeutral": "Good, Bad and Neutral", + "SSE.Controllers.Toolbar.txtGroupCell_DataAndModel": "Data and Model", + "SSE.Controllers.Toolbar.txtGroupCell_TitlesAndHeadings": "Titles and Headings", + "SSE.Controllers.Toolbar.txtGroupCell_ThemedCallStyles": "Themed Call Styles", + "SSE.Controllers.Toolbar.txtGroupCell_NumberFormat": "Number Format", + "SSE.Controllers.Toolbar.txtGroupCell_NoName": "No Name", "SSE.Controllers.Toolbar.warnLongOperation": "The operation you are about to perform might take rather much time to complete.
Are you sure you want to continue?", "SSE.Controllers.Toolbar.warnMergeLostData": "Only the data from the upper-left cell will remain in the merged cell.
Are you sure you want to continue?", "SSE.Controllers.Viewport.textFreezePanes": "Freeze Panes", @@ -3494,12 +3501,6 @@ "SSE.Views.Toolbar.textWidth": "Width", "SSE.Views.Toolbar.textZoom": "Zoom", "SSE.Views.Toolbar.textCustom": "Custom", - "SSE.Views.Toolbar.textGoodBadAndNeutral": "Good, Bad and Neutral", - "SSE.Views.Toolbar.textDataAndModel": "Data and Model", - "SSE.Views.Toolbar.textTitlesAndHeadings": "Titles and Headings", - "SSE.Views.Toolbar.textThemedCallStyles": "Themed Call Styles", - "SSE.Views.Toolbar.textNumberFormat": "Number Format", - "SSE.Views.Toolbar.textNoName": "No Name", "SSE.Views.Toolbar.tipAlignBottom": "Align bottom", "SSE.Views.Toolbar.tipAlignCenter": "Align center", "SSE.Views.Toolbar.tipAlignJust": "Justified", @@ -3640,6 +3641,7 @@ "SSE.Views.Toolbar.txtSortZA": "Sort descending", "SSE.Views.Toolbar.txtSpecial": "Special", "SSE.Views.Toolbar.txtTableTemplate": "Format as table template", + "SSE.Views.Toolbar.txtCellStyle": "Cell Style", "SSE.Views.Toolbar.txtText": "Text", "SSE.Views.Toolbar.txtTime": "Time", "SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells", diff --git a/apps/spreadsheeteditor/main/locale/ru.json b/apps/spreadsheeteditor/main/locale/ru.json index 1d3fb07ef..47ae23f64 100644 --- a/apps/spreadsheeteditor/main/locale/ru.json +++ b/apps/spreadsheeteditor/main/locale/ru.json @@ -1500,6 +1500,13 @@ "SSE.Controllers.Toolbar.txtGroupTable_Light": "Светлый", "SSE.Controllers.Toolbar.txtGroupTable_Medium": "Средний", "SSE.Controllers.Toolbar.txtGroupTable_Dark": "Тёмный", + "SSE.Controllers.Toolbar.txtGroupCell_Custom": "Пользовательский", + "SSE.Controllers.Toolbar.txtGroupCell_GoodBadAndNeutral": "Хороший, плохой и нейтральный", + "SSE.Controllers.Toolbar.txtGroupCell_DataAndModel": "Данные и модель", + "SSE.Controllers.Toolbar.txtGroupCell_TitlesAndHeadings": "Названия и заголовки", + "SSE.Controllers.Toolbar.txtGroupCell_ThemedCallStyles": "Стили ячеек с темой", + "SSE.Controllers.Toolbar.txtGroupCell_NumberFormat": "Числовой формат", + "SSE.Controllers.Toolbar.txtGroupCell_NoName": "Без имени", "SSE.Controllers.Toolbar.warnLongOperation": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.
Вы действительно хотите продолжить?", "SSE.Controllers.Toolbar.warnMergeLostData": "В объединенной ячейке останутся только данные из левой верхней ячейки.
Вы действительно хотите продолжить?", "SSE.Controllers.Viewport.textFreezePanes": "Закрепить области", @@ -3487,13 +3494,6 @@ "SSE.Views.Toolbar.textVertical": "Вертикальный текст", "SSE.Views.Toolbar.textWidth": "Ширина", "SSE.Views.Toolbar.textZoom": "Масштаб", - "SSE.Views.Toolbar.textCustom": "Пользовательский", - "SSE.Views.Toolbar.textGoodBadAndNeutral": "Хороший, плохой и нейтральный", - "SSE.Views.Toolbar.textDataAndModel": "Данные и модель", - "SSE.Views.Toolbar.textTitlesAndHeadings": "Названия и заголовки", - "SSE.Views.Toolbar.textThemedCallStyles": "Стили ячеек с темой", - "SSE.Views.Toolbar.textNumberFormat": "Числовой формат", - "SSE.Views.Toolbar.textNoName": "Без имени", "SSE.Views.Toolbar.tipAlignBottom": "Выровнять по нижнему краю", "SSE.Views.Toolbar.tipAlignCenter": "Выровнять по центру", "SSE.Views.Toolbar.tipAlignJust": "Выровнять по ширине", @@ -3634,6 +3634,7 @@ "SSE.Views.Toolbar.txtSortZA": "Сортировка по убыванию", "SSE.Views.Toolbar.txtSpecial": "Дополнительный", "SSE.Views.Toolbar.txtTableTemplate": "Форматировать как шаблон таблицы", + "SSE.Views.Toolbar.txtCellStyle": "Стиль ячейки", "SSE.Views.Toolbar.txtText": "Текстовый", "SSE.Views.Toolbar.txtTime": "Время", "SSE.Views.Toolbar.txtUnmerge": "Отменить объединение ячеек", diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index 408d7bdba..6a5cc8481 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less @@ -168,8 +168,8 @@ } } -.combo-cell-styles { +.combo-cell-styles, #id-toolbar-btn-cstyle { .dropdown-menu { padding: 5px 0px !important; } @@ -188,6 +188,8 @@ padding-right: 1px; } .grouped-data .group-items-container .item { + padding: @scaled-two-px-value; + border: @scaled-one-px-value solid @border-regular-control; margin: 0px calc(-1 * @scaled-one-px-value) calc(-1 * @scaled-one-px-value) 0px; box-shadow: none; &:hover {