Merge pull request #475 from ONLYOFFICE/feature/menu-icons

Feature/menu icons

apps/common/main/lib/component/ColorButton.js

@@ -107,10 +107,11 @@ define([
                 var id = Common.UI.getId(),
                     menu = new Common.UI.Menu({
                     id: id,
+                    cls: 'shifted-left',
                     additionalAlign: options.additionalAlign,
                     items: (options.additionalItems ? options.additionalItems : []).concat([
                         { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="' + id + '-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
+                        { template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') }
                     ])
                 });
                 return menu;

apps/common/main/lib/component/MenuItem.js

@@ -238,6 +238,16 @@ define([
                 this.cmpEl.find('a').contents().last()[0].textContent = (noencoding) ? caption : Common.Utils.String.htmlEncode(caption);
         },
 
+        setIconCls: function(iconCls) {
+            if (this.rendered && !_.isEmpty(this.iconCls)) {
+                var firstChild = this.cmpEl.children(':first');
+                if (firstChild) {
+                    firstChild.find('.menu-item-icon').removeClass(this.iconCls).addClass(iconCls);
+                }
+            }
+            this.iconCls = iconCls;
+        },
+
         setChecked: function(check, suppressEvent) {
             this.toggle(check, suppressEvent);
         },

apps/common/main/resources/less/dropdown-menu.less

@@ -84,4 +84,26 @@
             }
         }
     }
+
+    &.shifted-right {
+        li {
+            & > a {
+                padding-left: 28px;
+            }
+            .menu-item-icon {
+                margin: -3px 0 0 -24px;
+            }
+            .checked:not(.no-checkmark):before  {
+                margin-left: -22px;
+            }
+        }
+    }
+    &.shifted-left {
+        li {
+            & > a {
+                padding-left: 12px;
+                padding-right: 12px;
+            }
+        }
+    }
 }

apps/documenteditor/main/app/view/ControlSettingsDialog.js

@@ -132,7 +132,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                 additionalItems: [{
                         id: 'control-settings-system-color',
                         caption: this.textSystemColor,
-                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #dcdcdc;"></span><%= caption %></a>')
+                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #dcdcdc;"></span><%= caption %></a>')
                     },
                     {caption: '--'}],
                 additionalAlign: this.menuAddAlign,

apps/documenteditor/main/app/view/DocumentHolder.js

@@ -883,6 +883,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1053,6 +1054,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1080,6 +1082,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1099,6 +1102,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1128,6 +1132,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1180,6 +1185,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1986,11 +1992,13 @@ define([
             var me = this;
 
             var menuViewCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption: me.textCopy,
                 value: 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuViewUndo = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-undo',
                 caption: me.textUndo
             }).on('click', function () {
                 me.api.Undo();
@@ -2001,6 +2009,7 @@ define([
             });
 
             var menuViewAddComment = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption: me.addCommentText
             }).on('click', _.bind(me.addComment, me));
 
@@ -2011,10 +2020,12 @@ define([
             var menuViewSignSeparator   = new Common.UI.MenuItem({caption: '--' });
 
             var menuViewPrint = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-print',
                 caption : me.txtPrintSelection
             }).on('click', _.bind(me.onPrintSelection, me));
 
             this.viewModeMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function (value) {
                     var isInChart = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ChartProperties())),
                         isInShape = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ShapeProperties())),
@@ -2118,7 +2129,7 @@ define([
                         me.fireEvent('editcomplete', me);
                     }
                     return new Common.UI.Menu({
-                        cls: 'ppm-toolbar',
+                        cls: 'ppm-toolbar shifted-right',
                         menuAlign: 'tl-tr',
                         items: [
                             new Common.UI.MenuItem({
@@ -2204,7 +2215,7 @@ define([
                     }
 
                     return new Common.UI.Menu({
-                        cls: 'ppm-toolbar',
+                        cls: 'ppm-toolbar shifted-right',
                         menuAlign: 'tl-tr',
                         items: [
                             new Common.UI.MenuItem({
@@ -2246,6 +2257,7 @@ define([
             });
 
             this.menuImageWrap = new Common.UI.MenuItem({
+                iconCls: 'menu__icon wrap-inline',
                 caption : me.textWrap,
                 menu    : (function(){
                     function onItemClick(item, e) {
@@ -2272,7 +2284,7 @@ define([
                     }
 
                     return new Common.UI.Menu({
-                        cls: 'ppm-toolbar',
+                        cls: 'ppm-toolbar shifted-right',
                         menuAlign: 'tl-tr',
                         items: [
                             new Common.UI.MenuItem({
@@ -2339,6 +2351,7 @@ define([
             });
 
             var menuImageAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-image',
                 caption : me.advancedText
             }).on('click', function(item, e) {
                 var elType, elValue;
@@ -2405,6 +2418,7 @@ define([
             var menuImgReplace = new Common.UI.MenuItem({
                 caption     : me.textReplace,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
@@ -2444,11 +2458,13 @@ define([
             });
 
             var menuImgCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption : me.textCopy,
                 value : 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuImgPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption : me.textPaste,
                 value : 'paste'
             }).on('click', _.bind(me.onCutCopyPaste, me));
@@ -2459,6 +2475,7 @@ define([
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuImgPrint = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-print',
                 caption : me.txtPrintSelection
             }).on('click', _.bind(me.onPrintSelection, me));
 
@@ -2469,22 +2486,27 @@ define([
             var menuImgRotate = new Common.UI.MenuItem({
                 caption     : me.textRotate,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-rotate-90',
                             caption: this.textRotate90,
                             value  : 1
                         }).on('click', _.bind(me.onImgRotate, me)),
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-rotate-270',
                             caption: this.textRotate270,
                             value  : 0
                         }).on('click', _.bind(me.onImgRotate, me)),
                         { caption: '--' },
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-flip-hor',
                             caption: this.textFlipH,
                             value  : 1
                         }).on('click', _.bind(me.onImgFlip, me)),
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-flip-vert',
                             caption: this.textFlipV,
                             value  : 0
                         }).on('click', _.bind(me.onImgFlip, me))
@@ -2495,6 +2517,7 @@ define([
             me.menuImgCrop = new Common.UI.MenuItem({
                 caption     : me.textCrop,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
@@ -2516,6 +2539,7 @@ define([
             });
 
             this.pictureMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     if (_.isUndefined(value.imgProps))
                         return;
@@ -2525,50 +2549,63 @@ define([
 
                     me.menuImageWrap._originalProps = value.imgProps.value;
 
+                    var cls = 'menu__icon ';
                     if (notflow) {
                         for (var i = 0; i < 6; i++) {
                             me.menuImageWrap.menu.items[i].setChecked(false);
                         }
+                        cls += 'wrap-inline';
                     } else {
                         switch (wrapping) {
                             case Asc.c_oAscWrapStyle2.Inline:
                                 me.menuImageWrap.menu.items[0].setChecked(true);
+                                cls += 'wrap-inline';
                                 break;
                             case Asc.c_oAscWrapStyle2.Square:
                                 me.menuImageWrap.menu.items[1].setChecked(true);
+                                cls += 'wrap-square';
                                 break;
                             case Asc.c_oAscWrapStyle2.Tight:
                                 me.menuImageWrap.menu.items[2].setChecked(true);
+                                cls += 'wrap-tight';
                                 break;
                             case Asc.c_oAscWrapStyle2.Through:
                                 me.menuImageWrap.menu.items[3].setChecked(true);
+                                cls += 'wrap-through';
                                 break;
                             case Asc.c_oAscWrapStyle2.TopAndBottom:
                                 me.menuImageWrap.menu.items[4].setChecked(true);
+                                cls += 'wrap-topandbottom';
                                 break;
                             case Asc.c_oAscWrapStyle2.Behind:
                                 me.menuImageWrap.menu.items[6].setChecked(true);
+                                cls += 'wrap-behind';
                                 break;
                             case Asc.c_oAscWrapStyle2.InFront:
                                 me.menuImageWrap.menu.items[5].setChecked(true);
+                                cls += 'wrap-infront';
                                 break;
                             default:
                                 for (var i = 0; i < 6; i++) {
                                     me.menuImageWrap.menu.items[i].setChecked(false);
                                 }
+                                cls += 'wrap-infront';
                                 break;
                         }
                     }
+                    me.menuImageWrap.setIconCls(cls);
                     _.each(me.menuImageWrap.menu.items, function(item) {
                         item.setDisabled(notflow);
                     });
 
                     var onlyCommonProps = ( value.imgProps.isImg && value.imgProps.isChart || value.imgProps.isImg && value.imgProps.isShape ||
                                                        value.imgProps.isShape && value.imgProps.isChart);
-                    if (onlyCommonProps)
+                    if (onlyCommonProps) {
                         menuImageAdvanced.setCaption(me.advancedText, true);
-                    else {
+                        menuImageAdvanced.setIconCls('menu__icon btn-menu-image');
+                    } else {
                         menuImageAdvanced.setCaption((value.imgProps.isImg) ? me.imageText : ((value.imgProps.isChart) ? me.chartText : me.shapeText), true);
+                        menuImageAdvanced.setIconCls('menu__icon ' + (value.imgProps.isImg ? 'btn-menu-image' : (value.imgProps.isChart ? 'btn-menu-chart' : 'btn-menu-shape')));
                     }
 
                     menuChartEdit.setVisible(!_.isNull(value.imgProps.value.get_ChartProperties()) && !onlyCommonProps);
@@ -2672,6 +2709,7 @@ define([
             }).on('click', _.bind(me.onInsertCaption, me));
 
             var mnuTableMerge = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-merge',
                 caption     : me.mergeCellsText
             }).on('click', function(item) {
                 if (me.api)
@@ -2706,27 +2744,35 @@ define([
             };
 
             var menuTableCellAlign = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-align-top',
                 caption     : me.cellAlignText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuTableCellTop = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-top',
                             caption     : me.textShapeAlignTop,
                             toggleGroup : 'popuptablecellalign',
+                            checkmark   : false,
                             checkable   : true,
                             checked     : false,
                             valign      : Asc.c_oAscVertAlignJc.Top
                         }).on('click', _.bind(tableCellsVAlign, me)),
                         me.menuTableCellCenter = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-middle',
                             caption     : me.textShapeAlignMiddle,
                             toggleGroup : 'popuptablecellalign',
+                            checkmark   : false,
                             checkable   : true,
                             checked     : false,
                             valign      : Asc.c_oAscVertAlignJc.Center
                         }).on('click', _.bind(tableCellsVAlign, me)),
                         me.menuTableCellBottom = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-bottom',
                             caption     : me.textShapeAlignBottom,
                             toggleGroup : 'popuptablecellalign',
+                            checkmark   : false,
                             checkable   : true,
                             checked     : false,
                             valign      : Asc.c_oAscVertAlignJc.Bottom
@@ -2736,10 +2782,12 @@ define([
             });
 
             var menuTableAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-table',
                 caption        : me.advancedTableText
             }).on('click', _.bind(me.advancedTableClick, me));
 
             var menuParagraphAdvancedInTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paragraph',
                 caption     : me.advancedParagraphText
             }).on('click', _.bind(me.advancedParagraphClick, me));
 
@@ -2761,6 +2809,7 @@ define([
             var menuHyperlinkTable = new Common.UI.MenuItem({
                 caption     : me.hyperlinkText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuEditHyperlinkTable,
@@ -2782,6 +2831,7 @@ define([
             var menuTableControl = new Common.UI.MenuItem({
                 caption: me.textContentControls,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuTableRemoveControl,
@@ -2793,6 +2843,7 @@ define([
             var menuTableTOC = new Common.UI.MenuItem({
                 caption     : me.textTOC,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         {
@@ -2816,6 +2867,7 @@ define([
 
             /** coauthoring begin **/
             var menuAddCommentTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption     : me.addCommentText
             }).on('click', _.bind(me.addComment, me));
             /** coauthoring end **/
@@ -2836,6 +2888,7 @@ define([
             me.menuSpellMoreTable = new Common.UI.MenuItem({
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     restoreHeight: true,
                     items   : [
@@ -2851,6 +2904,7 @@ define([
             ].join(''));
 
             me.langTableMenu = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-ic-doclang',
                 caption     : me.langText,
                 menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
@@ -2896,8 +2950,10 @@ define([
             });
 
             me.menuSpellCheckTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-ic-docspell',
                 caption     : me.spellcheckText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuSpellTable,
@@ -2913,11 +2969,13 @@ define([
             });
 
             var menuTableCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption : me.textCopy,
                 value : 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuTablePaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption : me.textPaste,
                 value : 'paste'
             }).on('click', _.bind(me.onCutCopyPaste, me));
@@ -2928,6 +2986,7 @@ define([
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuTablePrint = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-print',
                 caption : me.txtPrintSelection
             }).on('click', _.bind(me.onPrintSelection, me));
 
@@ -2961,9 +3020,10 @@ define([
             };
 
             var menuTableDirection = new Common.UI.MenuItem({
+                iconCls: 'menu__icon text-orient-hor',
                 caption     : me.directionText,
                 menu        : new Common.UI.Menu({
-                    cls: 'ppm-toolbar',
+                    cls: 'ppm-toolbar shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuTableDirectH = new Common.UI.MenuItem({
@@ -3012,6 +3072,7 @@ define([
             var menuNumberingTable = new Common.UI.MenuItem({
                 caption     : me.bulletsText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuTableStartNewList,
@@ -3033,6 +3094,7 @@ define([
             });
 
             this.tableMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     // table properties
                     if (_.isUndefined(value.tableProps))
@@ -3045,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);
@@ -3067,7 +3155,6 @@ define([
                     menuTableDistCols.setDisabled(disabled);
                     menuTableCellAlign.setDisabled(disabled);
                     menuTableDirection.setDisabled(disabled);
-
                     menuTableAdvanced.setDisabled(disabled);
 
                     var cancopy = me.api && me.api.can_CopyCut();
@@ -3204,6 +3291,7 @@ define([
                     {
                         caption     : me.selectText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             style   : 'width: 100px',
                             items   : [
@@ -3235,8 +3323,10 @@ define([
                         })
                     },
                     {
+                        iconCls: 'menu__icon btn-addcell',
                         caption     : me.insertText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             style   : 'width: 100px',
                             items   : [
@@ -3273,8 +3363,10 @@ define([
                         })
                     },
                     {
+                        iconCls: 'menu__icon btn-delcell',
                         caption     : me.deleteText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             style   : 'width: 100px',
                             items   : [
@@ -3365,26 +3457,34 @@ define([
             };
 
             var menuParagraphVAlign = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-align-top',
                 caption     : me.vertAlignText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuParagraphTop = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-top',
                             caption     : me.textShapeAlignTop,
+                            checkmark   : false,
                             checkable   : true,
                             checked     : false,
                             toggleGroup : 'popupparagraphvalign',
                             valign      : Asc.c_oAscVAlign.Top
                         }).on('click', _.bind(paragraphVAlign, me)),
                         me.menuParagraphCenter = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-middle',
                             caption     : me.textShapeAlignMiddle,
+                            checkmark   : false,
                             checkable   : true,
                             checked     : false,
                             toggleGroup : 'popupparagraphvalign',
                             valign      : Asc.c_oAscVAlign.Center
                         }).on('click', _.bind(paragraphVAlign, me)),
                         me.menuParagraphBottom = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-bottom',
                             caption     : me.textShapeAlignBottom,
+                            checkmark   : false,
                             checkable   : true,
                             checked     : false,
                             toggleGroup : 'popupparagraphvalign',
@@ -3403,9 +3503,10 @@ define([
             };
 
             var menuParagraphDirection = new Common.UI.MenuItem({
+                iconCls: 'menu__icon text-orient-hor',
                 caption     : me.directionText,
                 menu        : new Common.UI.Menu({
-                    cls: 'ppm-toolbar',
+                    cls: 'ppm-toolbar shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuParagraphDirectH = new Common.UI.MenuItem({
@@ -3440,6 +3541,7 @@ define([
             });
 
             var menuParagraphAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paragraph',
                 caption     : me.advancedParagraphText
             }).on('click', _.bind(me.advancedParagraphClick, me));
 
@@ -3453,6 +3555,7 @@ define([
             });
 
             var menuAddCommentPara = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption     : me.addCommentText
             }).on('click', _.bind(me.addComment, me));
             /** coauthoring end **/
@@ -3479,6 +3582,7 @@ define([
             var menuHyperlinkPara = new Common.UI.MenuItem({
                 caption     : me.hyperlinkText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuEditHyperlinkPara,
@@ -3491,6 +3595,7 @@ define([
             var menuStyle = new Common.UI.MenuItem({
                 caption: me.styleText,
                 menu: new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         me.menuStyleSave = new Common.UI.MenuItem({
@@ -3511,6 +3616,7 @@ define([
             me.menuSpellMorePara = new Common.UI.MenuItem({
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     restoreHeight: true,
                     items: []
@@ -3518,6 +3624,7 @@ define([
             });
 
             me.langParaMenu = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-ic-doclang',
                 caption     : me.langText,
                 menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
@@ -3559,11 +3666,13 @@ define([
             });
 
             var menuParaCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption : me.textCopy,
                 value : 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuParaPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption : me.textPaste,
                 value : 'paste'
             }).on('click', _.bind(me.onCutCopyPaste, me));
@@ -3574,6 +3683,7 @@ define([
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuParaPrint = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-print',
                 caption : me.txtPrintSelection
             }).on('click', _.bind(me.onPrintSelection, me));
 
@@ -3606,6 +3716,7 @@ define([
             var menuParaTOCRefresh = new Common.UI.MenuItem({
                 caption     : me.textUpdateTOC,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         {
@@ -3663,6 +3774,7 @@ define([
             });
 
             this.textMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     var isInShape = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ShapeProperties()));
                     var isInChart = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ChartProperties()));
@@ -3672,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);
@@ -3896,6 +4034,7 @@ define([
             });
 
             this.hdrMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     menuEditHeaderFooter.setCaption(value.Header ? me.editHeaderText : me.editFooterText, true);
                     menuEditHeaderFooter.off('click').on('click', function(item) {

apps/documenteditor/main/app/view/Links.js

@@ -195,7 +195,7 @@ define([
                         btn.updateHint( me.tipContents );
 
                         var _menu = new Common.UI.Menu({
-                            cls: 'toc-menu',
+                            cls: 'toc-menu shifted-left',
                             items: [
                                 {template: contentsTemplate, offsety: 0, value: 0},
                                 {template: contentsTemplate, offsety: 72, value: 1},
@@ -208,7 +208,7 @@ define([
                     });
 
                     me.contentsMenu = new Common.UI.Menu({
-                        cls: 'toc-menu',
+                        cls: 'toc-menu shifted-left',
                         items: [
                             {template: contentsTemplate, offsety: 0, value: 0},
                             {template: contentsTemplate, offsety: 72, value: 1},

apps/documenteditor/main/app/view/ShapeSettings.js

@@ -1419,7 +1419,7 @@ define([
                 cls: 'btn-toolbar',
                 iconCls: 'toolbar__icon btn-add-breakpoint',
                 disabled: this._locked,
-                hint: this.tipAddGradientPoint,
+                hint: this.tipAddGradientPoint
             });
             this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
             this.lockedControls.push(this.btnAddGradientStep);

apps/documenteditor/main/app/view/Toolbar.js

@@ -260,15 +260,16 @@ define([
                         iconCls: 'toolbar__icon btn-fontcolor',
                         split: true,
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
                             items: [
                                 {
                                     id: 'id-toolbar-menu-auto-fontcolor',
                                     caption: this.textAutoColor,
-                                    template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #000;"></span><%= caption %></a>')
+                                    template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
                                 },
                                 {caption: '--'},
                                 {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
-                                {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + this.textNewColor + '</a>')}
+                                {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="">' + this.textNewColor + '</a>')}
                             ]
                         })
                     });
@@ -436,6 +437,7 @@ define([
                         iconCls: 'toolbar__icon btn-inserttable',
                         caption: me.capBtnInsTable,
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
                             items: [
                                 {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
                                 {caption: this.mniCustomTable, value: 'custom'},
@@ -565,7 +567,7 @@ define([
                         iconCls: 'toolbar__icon btn-dropcap',
                         caption: me.capBtnInsDropcap,
                         menu: new Common.UI.Menu({
-                            cls: 'ppm-toolbar',
+                            cls: 'ppm-toolbar shifted-right',
                             items: [
                                 {
                                     caption: this.textNone,
@@ -605,16 +607,16 @@ define([
                         iconCls: 'toolbar__icon btn-controls',
                         caption: me.capBtnInsControls,
                         menu: new Common.UI.Menu({
-                            cls: 'ppm-toolbar',
+                            cls: 'ppm-toolbar shifted-right',
                             items: [
                                 {
                                     caption: this.textPlainControl,
-                                    // iconCls: 'menu__icon cc-plaintext',
+                                    iconCls: 'menu__icon cc-plaintext',
                                     value: 'plain'
                                 },
                                 {
                                     caption: this.textRichControl,
-                                    // iconCls: 'menu__icon cc-richtext',
+                                    iconCls: 'menu__icon cc-richtext',
                                     value: 'rich'
                                 },
                                 {
@@ -670,7 +672,7 @@ define([
                                 {caption: '--'},
                                 {
                                     caption: this.textRemoveControl,
-                                    // iconCls: 'menu__icon cc-remove',
+                                    iconCls: 'menu__icon cc-remove',
                                     value: 'remove'
                                 },
                                 {caption: '--'},
@@ -706,7 +708,7 @@ define([
                         iconCls: 'toolbar__icon btn-columns',
                         caption: me.capBtnColumns,
                         menu: new Common.UI.Menu({
-                            cls: 'ppm-toolbar',
+                            cls: 'ppm-toolbar shifted-right',
                             items: [
                                 {
                                     caption: this.textColumnsOne,
@@ -992,6 +994,7 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-colorschemas',
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
                             items: [],
                             restoreHeight: true
                         })
@@ -1467,6 +1470,7 @@ define([
                     });
 
                     me.btnImgAlign.setMenu(new Common.UI.Menu({
+                        cls: 'shifted-right',
                         items: [{
                                 caption : _holder_view.textShapeAlignLeft,
                                 iconCls : 'menu__icon shape-align-left',
@@ -1645,9 +1649,10 @@ define([
 
                 this.btnMarkers.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
                         style: 'min-width: 139px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 16px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 9px;"></div>')},
                             this.mnuMarkerSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
@@ -1659,8 +1664,9 @@ define([
 
                 this.btnNumbers.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 16px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 9px;"></div>')},
                             this.mnuNumberSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
@@ -1672,9 +1678,10 @@ define([
 
                 this.btnMultilevels.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
                         style: 'min-width: 90px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 93px; margin: 0 16px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 93px; margin: 0 9px;"></div>')},
                             this.mnuMultilevelSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuMultilevelPicker.conf.index || 0)==0,
@@ -1694,7 +1701,9 @@ define([
                                 caption: this.textInsertPageNumber,
                                 disabled: this.mnuInsertPageNum.isDisabled(),
                                 menu: new Common.UI.Menu({
+                                    cls: 'shifted-left',
                                     menuAlign: 'tl-tr',
+                                    style: 'min-width: 90px;',
                                     items: [
                                         {template: _.template('<div id="id-toolbar-menu-pageposition" class="menu-pageposition"></div>')},
                                         this.mnuPageNumCurrentPos = new Common.UI.MenuItem({
@@ -1997,6 +2006,7 @@ define([
 
                 if (this.mnuColorSchema == null) {
                     this.mnuColorSchema = new Common.UI.Menu({
+                        cls: 'shifted-left',
                         restoreHeight: true
                     });
                 }

apps/documenteditor/main/app/view/WatermarkSettingsDialog.js

@@ -329,15 +329,16 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                 iconCls     : 'toolbar__icon btn-fontcolor',
                 hint        : this.textColor,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-left',
                     items: [
                     {
                         id: 'watermark-auto-color',
                         caption: this.textAuto,
-                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 -7px; background-color: #000;"></span><%= caption %></a>')
+                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>')
                     },
                     {caption: '--'},
                         { template: _.template('<div id="watermark-menu-textcolor" style="width: 169px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="watermark-menu-textcolor-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
+                        { template: _.template('<a id="watermark-menu-textcolor-new">' + this.textNewColor + '</a>') }
                     ]
                 })
             });

apps/documenteditor/main/resources/less/toolbar.less

@@ -117,7 +117,7 @@
     .dataview {
         width: 125px;
         height: 85px;
-        margin: 0 auto;
+        margin: 0 10px;
 
         &.disabled {
             > .item {

apps/presentationeditor/main/app/view/DocumentHolder.js

@@ -821,6 +821,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -991,6 +992,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1018,6 +1020,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1037,6 +1040,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1066,6 +1070,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1118,6 +1123,7 @@ define([
                             equation    : true,
                             disabled    : me._currentParaObjDisabled,
                             menu        : new Common.UI.Menu({
+                                cls: 'shifted-right',
                                 menuAlign: 'tl-tr',
                                 items   : [
                                     {
@@ -1774,11 +1780,13 @@ define([
             var me = this;
 
             var menuViewCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption: me.textCopy,
                 value: 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuViewUndo = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-undo',
                 caption: me.textUndo
             }).on('click', function () {
                 me.api.Undo();
@@ -1789,10 +1797,12 @@ define([
             });
 
             var menuViewAddComment = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption: me.addCommentText
             }).on('click', _.bind(me.addComment, me));
 
             this.viewModeMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function (value) {
                     menuViewUndo.setVisible(me.mode.canCoAuthoring && me.mode.canComments && !me._isDisabled);
                     menuViewUndo.setDisabled(!me.api.asc_getCanUndo() && !me._isDisabled);
@@ -1817,6 +1827,7 @@ define([
             });
 
             var mnuPreview = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-preview',
                 caption : me.txtPreview
             }).on('click', function(item) {
                 var current = me.api.getCurrentPage();
@@ -1835,6 +1846,7 @@ define([
             });
 
             var mnuPrintSelection = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-print',
                 caption : me.txtPrintSelection
             }).on('click', function(item){
                 if (me.api){
@@ -1849,6 +1861,7 @@ define([
             });
 
             this.viewModeMenuSlide = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function (value) {
                     mnuSelectAll.setDisabled(me.slidesCount<2);
                     mnuPrintSelection.setVisible(me.mode.canPrint && value.fromThumbs===true);
@@ -1888,6 +1901,7 @@ define([
             });
 
             var mnuChangeSlide = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-changeslide',
                 caption     : me.txtChangeLayout,
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
@@ -1919,6 +1933,7 @@ define([
             });
 
             var mnuPreview = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-preview',
                 caption : me.txtPreview
             }).on('click', function(item) {
                 var current = me.api.getCurrentPage();
@@ -1937,6 +1952,7 @@ define([
             });
 
             var mnuPrintSelection = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-print',
                 caption : me.txtPrintSelection
             }).on('click', function(item){
                 if (me.api){
@@ -1951,11 +1967,13 @@ define([
             });
 
             var menuSlidePaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption : me.textPaste,
                 value : 'paste'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuSlideSettings = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-slide',
                 caption : me.textSlideSettings,
                 value : null
             }).on('click', function(item){
@@ -1976,6 +1994,7 @@ define([
             });
 
             me.slideMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value) {
                     menuSlidePaste.setVisible(value.fromThumbs!==true);
                     me.slideMenu.items[1].setVisible(value.fromThumbs===true); // New Slide
@@ -2142,6 +2161,7 @@ define([
             });
 
             var mnuTableMerge = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-merge',
                 caption     : me.mergeCellsText
             }).on('click', function(item) {
                 if (me.api)
@@ -2168,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) {
@@ -2182,23 +2203,30 @@ define([
                     }
 
                     return new Common.UI.Menu({
+                        cls: 'shifted-right',
                         menuAlign: 'tl-tr',
                         items: [
                             me.menuTableCellTop = new Common.UI.MenuItem({
+                                iconCls: 'menu__icon btn-align-top',
                                 caption     : me.textShapeAlignTop,
                                 checkable   : true,
+                                checkmark   : false,
                                 toggleGroup : 'popuptablecellalign',
                                 value       : Asc.c_oAscVertAlignJc.Top
                             }).on('click', _.bind(onItemClick, me)),
                             me.menuTableCellCenter = new Common.UI.MenuItem({
+                                iconCls: 'menu__icon btn-align-middle',
                                 caption     : me.textShapeAlignMiddle,
                                 checkable   : true,
+                                checkmark   : false,
                                 toggleGroup : 'popuptablecellalign',
                                 value       : Asc.c_oAscVertAlignJc.Center
                             }).on('click', _.bind(onItemClick, me)),
                             me.menuTableCellBottom = new Common.UI.MenuItem({
+                                iconCls: 'menu__icon btn-align-bottom',
                                 caption     : me.textShapeAlignBottom,
                                 checkable   : true,
+                                checkmark   : false,
                                 toggleGroup : 'popuptablecellalign',
                                 value       : Asc.c_oAscVertAlignJc.Bottom
                             }).on('click', _.bind(onItemClick, me))
@@ -2231,6 +2259,7 @@ define([
             me.menuSpellMoreTable = new Common.UI.MenuItem({
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     restoreHeight: true,
                     items   : []
@@ -2245,6 +2274,7 @@ define([
             ].join(''));
 
             me.langTableMenu = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-ic-doclang',
                 caption     : me.langText,
                 menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
@@ -2290,8 +2320,10 @@ define([
             });
 
             me.menuSpellCheckTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-ic-docspell',
                 caption     : me.spellcheckText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuSpellTable,
@@ -2314,6 +2346,7 @@ define([
             me.menuSpellMorePara = new Common.UI.MenuItem({
                 caption     : me.moreText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     restoreHeight: true,
                     items: []
@@ -2321,6 +2354,7 @@ define([
             });
 
             me.langParaMenu = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-ic-doclang',
                 caption     : me.langText,
                 menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
@@ -2362,6 +2396,7 @@ define([
             });
 
             var menuTableAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-table',
                 caption     : me.advancedTableText
             }).on('click', function(item) {
                 if (me.api) {
@@ -2395,6 +2430,7 @@ define([
             });
 
             var menuImageAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-image',
                 caption     : me.advancedImageText
             }).on('click', function(item) {
                 if (me.api){
@@ -2437,6 +2473,7 @@ define([
             });
 
             var menuShapeAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-shape',
                 caption     : me.advancedShapeText
             }).on('click', function(item) {
                 if (me.api){
@@ -2468,6 +2505,7 @@ define([
             });
 
             var menuParagraphAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paragraph',
                 caption     : me.advancedParagraphText
             }).on('click', function(item) {
                 if (me.api){
@@ -2527,6 +2565,7 @@ define([
             var menuHyperlinkPara = new Common.UI.MenuItem({
                 caption     : me.hyperlinkText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         menuEditHyperlinkPara,
@@ -2557,6 +2596,7 @@ define([
             var menuHyperlinkTable = new Common.UI.MenuItem({
                 caption     : me.hyperlinkText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         menuEditHyperlinkTable,
@@ -2596,6 +2636,7 @@ define([
             var menuImgShapeArrange = new Common.UI.MenuItem({
                 caption     : me.txtArrange,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
@@ -2671,6 +2712,7 @@ define([
                     }
 
                     return new Common.UI.Menu({
+                        cls: 'shifted-right',
                         menuAlign: 'tl-tr',
                         items: [
                             new Common.UI.MenuItem({
@@ -2720,10 +2762,12 @@ define([
             });
 
             var menuChartEdit = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-chart',
                 caption     : me.editChartText
             }).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) {
@@ -2739,23 +2783,30 @@ define([
                     }
 
                     return new Common.UI.Menu({
+                        cls: 'shifted-right',
                         menuAlign: 'tl-tr',
                         items: [
                             me.menuParagraphTop = new Common.UI.MenuItem({
+                                iconCls: 'menu__icon btn-align-top',
                                 caption     : me.textShapeAlignTop,
                                 checkable   : true,
+                                checkmark   : false,
                                 toggleGroup : 'popupparagraphvalign',
                                 value       : Asc.c_oAscVAlign.Top
                             }).on('click', _.bind(onItemClick, me)),
                             me.menuParagraphCenter = new Common.UI.MenuItem({
+                                iconCls: 'menu__icon btn-align-middle',
                                 caption     : me.textShapeAlignMiddle,
                                 checkable   : true,
+                                checkmark   : false,
                                 toggleGroup : 'popupparagraphvalign',
                                 value       : Asc.c_oAscVAlign.Center
                             }).on('click', _.bind(onItemClick, me)),
                             me.menuParagraphBottom = new Common.UI.MenuItem({
+                                iconCls: 'menu__icon btn-align-bottom',
                                 caption     : me.textShapeAlignBottom,
                                 checkable   : true,
+                                checkmark   : false,
                                 toggleGroup : 'popupparagraphvalign',
                                 value       : Asc.c_oAscVAlign.Bottom
                             }).on('click', _.bind(onItemClick, me))
@@ -2775,8 +2826,10 @@ define([
             };
 
             var menuParagraphDirection = new Common.UI.MenuItem({
+                iconCls: 'menu__icon text-orient-hor',
                 caption     : me.directionText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuParagraphDirectH = new Common.UI.MenuItem({
@@ -2837,6 +2890,7 @@ define([
             var menuImgReplace = new Common.UI.MenuItem({
                 caption     : me.textReplace,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
@@ -2878,22 +2932,27 @@ define([
             var menuImgShapeRotate = new Common.UI.MenuItem({
                 caption     : me.textRotate,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-rotate-90',
                             caption: me.textRotate90,
                             value  : 1
                         }).on('click', _.bind(onImgRotate, me)),
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-rotate-270',
                             caption: me.textRotate270,
                             value  : 0
                         }).on('click', _.bind(onImgRotate, me)),
                         { caption: '--' },
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-flip-hor',
                             caption: me.textFlipH,
                             value  : 1
                         }).on('click', _.bind(onImgFlip, me)),
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-flip-vert',
                             caption: me.textFlipV,
                             value  : 0
                         }).on('click', _.bind(onImgFlip, me))
@@ -2915,6 +2974,7 @@ define([
             me.menuImgCrop = new Common.UI.MenuItem({
                 caption     : me.textCrop,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
@@ -2937,11 +2997,13 @@ define([
 
             /** coauthoring begin **/
             var menuAddCommentPara = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption     : me.addCommentText
             }).on('click', _.bind(me.addComment, me));
             menuAddCommentPara.hide();
 
             var menuAddCommentTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption     : me.addCommentText
             }).on('click', _.bind(me.addComment, me));
             menuAddCommentTable.hide();
@@ -2952,6 +3014,7 @@ define([
             menuCommentSeparatorImg.hide();
 
             var menuAddCommentImg = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption     : me.addCommentText
             }).on('click', _.bind(me.addComment, me));
             menuAddCommentImg.hide();
@@ -2962,11 +3025,13 @@ define([
             }).on('click', _.bind(me.addToLayout, me));
 
             var menuParaCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption : me.textCopy,
                 value : 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuParaPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption : me.textPaste,
                 value : 'paste'
             }).on('click', _.bind(me.onCutCopyPaste, me));
@@ -2977,11 +3042,13 @@ define([
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuImgCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption : me.textCopy,
                 value : 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuImgPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption : me.textPaste,
                 value : 'paste'
             }).on('click', _.bind(me.onCutCopyPaste, me));
@@ -2992,11 +3059,13 @@ define([
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuTableCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption : me.textCopy,
                 value : 'copy'
             }).on('click', _.bind(me.onCutCopyPaste, me));
 
             var menuTablePaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption : me.textPaste,
                 value : 'paste'
             }).on('click', _.bind(me.onCutCopyPaste, me));
@@ -3019,6 +3088,7 @@ define([
             }).on('click', _.bind(me.addToLayout, me));
 
             me.textMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     var isInShape = (value.shapeProps && !_.isNull(value.shapeProps.value));
                     var isInChart = (value.chartProps && !_.isNull(value.chartProps.value));
@@ -3033,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);
@@ -3144,6 +3243,7 @@ define([
             });
 
             me.tableMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     // table properties
                     if (_.isUndefined(value.tableProps))
@@ -3156,9 +3256,23 @@ define([
 
                     var disabled = (value.slideProps!==undefined && value.slideProps.locked);
 
-                    me.menuTableCellTop.setChecked(value.tableProps.value.get_CellsVAlign() == Asc.c_oAscVertAlignJc.Top);
+                    var align = value.tableProps.value.get_CellsVAlign();
-                    me.menuTableCellCenter.setChecked(value.tableProps.value.get_CellsVAlign() == Asc.c_oAscVertAlignJc.Center);
+                    var cls = '';
-                    me.menuTableCellBottom.setChecked(value.tableProps.value.get_CellsVAlign() == Asc.c_oAscVertAlignJc.Bottom);
+                    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());
@@ -3240,6 +3354,7 @@ define([
                     new Common.UI.MenuItem({
                         caption     : me.selectText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items: [
                                 new Common.UI.MenuItem({
@@ -3258,8 +3373,10 @@ define([
                         })
                     }),
                     {
+                        iconCls: 'menu__icon btn-addcell',
                         caption     : me.insertText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             style   : 'width: 100px',
                             items   : [
@@ -3291,8 +3408,10 @@ define([
                         })
                     },
                     new Common.UI.MenuItem({
+                        iconCls: 'menu__icon btn-delcell',
                         caption     : me.deleteText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items: [
                                 new Common.UI.MenuItem({
@@ -3337,6 +3456,7 @@ define([
             });
 
             me.pictureMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     if (me.api) {
                         mnuUnGroupImg.setDisabled(!me.api.canUnGroup());
@@ -3576,6 +3696,7 @@ define([
 
             if (!menu) {
                 this.placeholderMenuTable = menu = new Common.UI.Menu({
+                    cls: 'shifted-left',
                     items: [
                         {template: _.template('<div id="id-placeholder-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
                         {caption: me.mniCustomTable, value: 'custom'}

apps/presentationeditor/main/app/view/Toolbar.js

@@ -324,6 +324,7 @@ define([
                         lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
                         split: true,
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
                             items: [
                                 {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 220px; margin: 10px;"></div>')},
                                 {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="padding-left:12px;">' + me.textNewColor + '</a>')}
@@ -521,6 +522,7 @@ define([
                         caption: me.capInsertTable,
                         lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
                             items: [
                                 {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
                                 {caption: me.mniCustomTable, value: 'custom'}
@@ -636,6 +638,7 @@ define([
                         iconCls: 'toolbar__icon btn-colorschemas',
                         lock: [_set.themeLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
                             items: [],
                             restoreHeight: true
                         })
@@ -676,6 +679,7 @@ define([
                         iconCls: 'toolbar__icon shape-align-left',
                         lock: [_set.slideDeleted, _set.shapeLock, _set.lostConnect, _set.noSlides, _set.noObjectSelected, _set.disableOnStart],
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-right',
                             items: [
                                 {
                                     caption: me.textShapeAlignLeft,
@@ -1106,9 +1110,10 @@ define([
 
                 this.btnMarkers.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
                         style: 'min-width: 139px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 16px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 139px; margin: 0 9px;"></div>')},
                             this.mnuMarkerSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 value: 'settings'
@@ -1119,8 +1124,9 @@ define([
 
                 this.btnNumbers.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 16px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 185px; margin: 0 9px;"></div>')},
                             this.mnuNumberSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 value: 'settings'
@@ -1296,6 +1302,7 @@ define([
 
                     if (mnuColorSchema == null) {
                         mnuColorSchema = new Common.UI.Menu({
+                            cls: 'shifted-left',
                             restoreHeight: true
                         });
                     }

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

@@ -1701,7 +1701,7 @@ define([
                             documentHolder.mnuChartEdit.chartInfo = elValue;
                             ischartmenu = true;
                             has_chartprops = true;
-                        }  if ( elValue.asc_getSlicerProperties() ) {
+                        }  else if ( elValue.asc_getSlicerProperties() ) {
                             documentHolder.mnuSlicerAdvanced.imageInfo = elValue;
                             isslicermenu = true;
                         } else {
@@ -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);
@@ -2726,6 +2752,7 @@ define([
                         equation    : true,
                         disabled    : me._currentParaObjDisabled,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items   : [
                                 {
@@ -2896,6 +2923,7 @@ define([
                         equation    : true,
                         disabled    : me._currentParaObjDisabled,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items   : [
                                 {
@@ -2923,6 +2951,7 @@ define([
                         equation    : true,
                         disabled    : me._currentParaObjDisabled,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items   : [
                                 {
@@ -2942,6 +2971,7 @@ define([
                         equation    : true,
                         disabled    : me._currentParaObjDisabled,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items   : [
                                 {
@@ -2971,6 +3001,7 @@ define([
                         equation    : true,
                         disabled    : me._currentParaObjDisabled,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items   : [
                                 {
@@ -3023,6 +3054,7 @@ define([
                         equation    : true,
                         disabled    : me._currentParaObjDisabled,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             items   : [
                                 {

apps/spreadsheeteditor/main/app/view/DocumentHolder.js

@@ -90,11 +90,13 @@ define([
             var me = this;
 
             me.menuViewCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption: me.txtCopy,
                 value: 'copy'
             });
 
             me.menuViewUndo = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-undo',
                 caption: me.textUndo
             });
 
@@ -103,6 +105,7 @@ define([
             });
 
             me.menuViewAddComment = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 id: 'id-context-menu-item-view-add-comment',
                 caption: me.txtAddComment
             });
@@ -114,6 +117,7 @@ define([
             me.menuViewSignSeparator   = new Common.UI.MenuItem({caption: '--' });
 
             this.viewModeMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 items: [
                     me.menuViewCopy,
                     me.menuViewUndo,
@@ -139,11 +143,13 @@ define([
             });
 
             me.pmiCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption     : me.txtCopy,
                 value       : 'copy'
             });
 
             me.pmiPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption     : me.txtPaste,
                 value       : 'paste'
             });
@@ -151,6 +157,7 @@ define([
             me.pmiSelectTable = new Common.UI.MenuItem({
                 caption     : me.txtSelect,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         { caption: this.selectRowText,      value:  Asc.c_oAscChangeSelectionFormatTable.row},
@@ -166,8 +173,10 @@ define([
             });
 
             me.pmiInsertCells = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-addcell',
                 caption     : me.txtInsert,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         {
@@ -188,8 +197,10 @@ define([
             });
             
             me.pmiInsertTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-addcell',
                 caption     : me.txtInsert,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         { caption: me.insertRowAboveText, value: Asc.c_oAscInsertOptions.InsertTableRowAbove},
@@ -205,8 +216,10 @@ define([
             });
 
             me.pmiDeleteCells = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-delcell',
                 caption     : me.txtDelete,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         {
@@ -227,8 +240,10 @@ define([
             });
 
             me.pmiDeleteTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-delcell',
                 caption     : me.txtDelete,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         { caption: this.deleteRowText,      value: Asc.c_oAscDeleteOptions.DeleteRows},
@@ -239,8 +254,10 @@ define([
             });
 
             me.pmiClear = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-clearstyle',
                 caption     : me.txtClear,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         {
@@ -270,12 +287,15 @@ define([
             me.pmiSortCells = new Common.UI.MenuItem({
                 caption     : me.txtSort,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         {
+                            iconCls: 'menu__icon btn-sort-down',
                             caption : me.txtAscending,
                             value   : Asc.c_oAscSortOptions.Ascending
                         },{
+                            iconCls: 'menu__icon btn-sort-up',
                             caption : me.txtDescending,
                             value   : Asc.c_oAscSortOptions.Descending
                         },{
@@ -290,8 +310,10 @@ define([
             });
 
             me.pmiFilterCells = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-autofilter',
                 caption     : me.txtFilter,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         {
@@ -313,6 +335,7 @@ define([
             });
 
             me.pmiInsFunction = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-function',
                 caption     : me.txtFormula
             });
 
@@ -333,6 +356,7 @@ define([
             me.menuHyperlink = new Common.UI.MenuItem({
                 caption     : me.txtInsHyperlink,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuEditHyperlink,
@@ -344,6 +368,7 @@ define([
             me.pmiRowHeight = new Common.UI.MenuItem({
                 caption     : me.txtRowHeight,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         { caption: me.txtAutoRowHeight, value: 'auto-row-height' },
@@ -355,6 +380,7 @@ define([
             me.pmiColumnWidth = new Common.UI.MenuItem({
                 caption     : me.txtColumnWidth,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         { caption: me.txtAutoColumnWidth, value: 'auto-column-width' },
@@ -372,6 +398,7 @@ define([
             });
 
             me.pmiAddComment = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 id          : 'id-context-menu-item-add-comment',
                 caption     : me.txtAddComment
             });
@@ -396,6 +423,7 @@ define([
             me.pmiSparklines = new Common.UI.MenuItem({
                 caption     : me.txtSparklines,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         { caption: me.txtClearSparklines, value: Asc.c_oAscCleanOptions.Sparklines },
@@ -413,6 +441,7 @@ define([
             me.pmiNumFormat = new Common.UI.MenuItem({
                 caption: me.txtNumFormat,
                 menu: new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         {
@@ -505,6 +534,7 @@ define([
             });
 
             me.ssMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 id          : 'id-context-menu-cell',
                 items       : [
                     me.pmiCut,
@@ -560,10 +590,12 @@ define([
             });
 
             me.mnuShapeAdvanced = new Common.UI.MenuItem({
+                iconCls     : 'menu__icon btn-menu-shape',
                 caption : me.advancedShapeText
             });
 
             me.mnuImgAdvanced = new Common.UI.MenuItem({
+                iconCls     : 'menu__icon btn-menu-image',
                 caption : me.advancedImgText
             });
 
@@ -572,10 +604,12 @@ define([
             });
 
             me.mnuSlicerAdvanced = new Common.UI.MenuItem({
+                iconCls     : 'menu__icon btn-slicer',
                 caption : me.advancedSlicerText
             });
 
             me.mnuChartEdit = new Common.UI.MenuItem({
+                iconCls     : 'menu__icon btn-menu-chart',
                 caption : me.chartText
             });
 
@@ -585,11 +619,13 @@ define([
             });
 
             me.pmiImgCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption     : me.txtCopy,
                 value       : 'copy'
             });
 
             me.pmiImgPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption     : me.txtPaste,
                 value       : 'paste'
             });
@@ -605,6 +641,7 @@ define([
             me.menuImgReplace = new Common.UI.MenuItem({
                 caption     : me.textReplace,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({caption     : this.textFromFile, value: 'file'}),
@@ -617,6 +654,7 @@ define([
             me.menuImgCrop = new Common.UI.MenuItem({
                 caption     : me.textCrop,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
@@ -665,6 +703,7 @@ define([
             me.menuImageArrange = new Common.UI.MenuItem({
                 caption : me.textArrange,
                 menu    : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         me.mnuBringToFront,
@@ -681,6 +720,7 @@ define([
             me.menuImageAlign = new Common.UI.MenuItem({
                 caption     : me.textAlign,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [{
                         caption : me.textShapeAlignLeft,
@@ -724,25 +764,30 @@ define([
             me.menuImgRotate = new Common.UI.MenuItem({
                 caption     : me.textRotate,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-rotate-90',
                             caption: me.textRotate90,
                             type   : 'rotate',
                             value  : 1
                         }),
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-rotate-270',
                             caption: me.textRotate270,
                             type   : 'rotate',
                             value  : 0
                         }),
                         { caption: '--' },
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-flip-hor',
                             caption: me.textFlipH,
                             type   : 'flip',
                             value  : 1
                         }),
                         new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-flip-vert',
                             caption: me.textFlipV,
                             type   : 'flip',
                             value  : 0
@@ -752,6 +797,7 @@ define([
             });
 
             this.imgMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 items: [
                     me.pmiImgCut,
                     me.pmiImgCopy,
@@ -776,25 +822,33 @@ define([
             });
 
             this.menuParagraphVAlign = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-align-top',
                 caption     : this.vertAlignText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign   : 'tl-tr',
                     items: [
                         me.menuParagraphTop = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-top',
                             caption     : me.topCellText,
                             checkable   : true,
+                            checkmark   : false,
                             toggleGroup : 'popupparagraphvalign',
                             value       : Asc.c_oAscVAlign.Top
                         }),
                         me.menuParagraphCenter = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-middle',
                             caption     : me.centerCellText,
                             checkable   : true,
+                            checkmark   : false,
                             toggleGroup : 'popupparagraphvalign',
                             value       : Asc.c_oAscVAlign.Center
                         }),
                         this.menuParagraphBottom = new Common.UI.MenuItem({
+                            iconCls: 'menu__icon btn-align-bottom',
                             caption     : me.bottomCellText,
                             checkable   : true,
+                            checkmark   : false,
                             toggleGroup : 'popupparagraphvalign',
                             value       : Asc.c_oAscVAlign.Bottom
                         })
@@ -803,8 +857,10 @@ define([
             });
 
             me.menuParagraphDirection = new Common.UI.MenuItem({
+                iconCls: 'menu__icon text-orient-hor',
                 caption     : me.directionText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuParagraphDirectH = new Common.UI.MenuItem({
@@ -839,8 +895,10 @@ define([
             });
 
             me.menuParagraphBullets = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-setmarkers',
                 caption     : me.bulletsText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         { template: _.template('<div id="id-docholder-menu-bullets" class="menu-layouts" style="width: 184px; margin: 0 4px;"></div>') },
@@ -897,6 +955,7 @@ define([
             me.menuHyperlinkShape = new Common.UI.MenuItem({
                 caption     : me.txtInsHyperlink,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuEditHyperlinkShape,
@@ -906,6 +965,7 @@ define([
             });
 
             this.pmiTextAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paragraph',
                 caption     : me.txtTextAdvanced
             });
 
@@ -915,16 +975,19 @@ define([
             });
 
             me.pmiTextCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption     : me.txtCopy,
                 value       : 'copy'
             });
 
             me.pmiTextPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption     : me.txtPaste,
                 value       : 'paste'
             });
 
             this.textInShapeMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 items: [
                     me.pmiTextCut,
                     me.pmiTextCopy,
@@ -946,16 +1009,19 @@ define([
             });
 
             me.pmiCommonCopy = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-copy',
                 caption     : me.txtCopy,
                 value       : 'copy'
             });
 
             me.pmiCommonPaste = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paste',
                 caption     : me.txtPaste,
                 value       : 'paste'
             });
 
             this.copyPasteMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 items: [
                     me.pmiCommonCut,
                     me.pmiCommonCopy,

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -1046,6 +1046,7 @@ define([
                     iconCls     : 'toolbar__icon toolbar__icon btn-colorschemas',
                     lock        : [_set.editCell, _set.lostConnect, _set.coAuth],
                     menu        : new Common.UI.Menu({
+                        cls: 'shifted-left',
                         items: [],
                         restoreHeight: true
                     })
@@ -1985,6 +1986,7 @@ define([
 
             if (this.mnuColorSchema == null) {
                 this.mnuColorSchema = new Common.UI.Menu({
+                    cls: 'shifted-left',
                     restoreHeight: true
                 });
             }