[SSE] Added cell styles menu in Ole editor

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('<div class="style"><img src="<%= imageUrl %>" id="<%= id %>" style="width:100px;height:20px;"></div>'),
+                        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 count = menuPicker.store.length;
-            var rec = listStyles.menuPicker.getSelectedRec();
+            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) {
+                    groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-custom'; });
-                        if(style.id === 'menu-style-group-custom'){
-                            listStyles.groups.remove(style);
-                        }
-                    });
                 }
                 if(hasNoNameGroup === false){
-                    listStyles.groups.models.forEach(function(style) {
+                    groupStore = groupStore.filter(function(item) { return item.id != 'menu-style-group-no-name'; });
-                        if(style.id === 'menu-style-group-no-name'){
-                            listStyles.groups.remove(style);
                 }
-                    });
+                
+                menuPicker.groups.reset(groupStore);
+                menuPicker.store.reset(arr);
             }
-                listStyles.menuPicker.store.reset(arr);
+            if (!this.toolbar.mode.isEditOle && menuPicker.store.length > 0 && listStyles.rendered) {
-            }
+                rec = rec ? menuPicker.store.findWhere({name: rec.get('name')}) : null;
-            if (listStyles.menuPicker.store.length > 0 && listStyles.rendered) {
+                listStyles.fillComboView(rec ? rec : menuPicker.store.at(0), true, true);
-                rec = rec ? listStyles.menuPicker.store.findWhere({name: rec.get('name')}) : null;
-                listStyles.fillComboView(rec ? rec : listStyles.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',

apps/spreadsheeteditor/main/app/template/ToolbarAnother.template

@@ -108,6 +108,7 @@
                     <span class="btn-slot split" id="slot-btn-borders"></span>
                     <span class="btn-slot split" id="slot-btn-fillparag"></span>
                     <span class="btn-slot split" id="slot-btn-table-tpl"></span>
+                    <span class="btn-slot split" id="slot-btn-cell-style"></span>
                 </div>
             </div>
             <div class="separator short"></div>

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('<div id="id-toolbar-menu-cell-styles" style="width: 645px; height: 306px; margin: 0px 4px;"></div>') }
+                            ]
+                        }),
+                        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([
+                    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 }
-                    ]),
                     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',
+        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'
     }, SSE.Views.Toolbar || {}));
 });

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.<br>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. <br>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",

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": "Для завершения операции, которую вы собираетесь выполнить, может потребоваться довольно много времени.<br>Вы действительно хотите продолжить?",
   "SSE.Controllers.Toolbar.warnMergeLostData": "В объединенной ячейке останутся только данные из левой верхней ячейки.<br>Вы действительно хотите продолжить?",
   "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": "Отменить объединение ячеек",

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 {