From ffca06badb574a39357e5556ffc7394a7d78be15 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 18 Aug 2020 14:02:44 +0300
Subject: [PATCH] [DE] Add icons to button menu and context menu

---
 apps/common/main/lib/component/ColorButton.js |  4 +-
 apps/common/main/lib/component/Menu.js        | 10 ++--
 apps/common/main/lib/component/MenuItem.js    | 10 ++++
 .../main/resources/less/dropdown-menu.less    | 21 +++++++
 .../main/app/view/ControlSettingsDialog.js    |  2 +-
 .../main/app/view/DocumentHolder.js           | 56 ++++++++++++++++++-
 apps/documenteditor/main/app/view/Links.js    |  6 +-
 apps/documenteditor/main/app/view/Toolbar.js  | 24 ++++++--
 .../main/app/view/WatermarkSettingsDialog.js  |  6 +-
 9 files changed, 121 insertions(+), 18 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index c01bcd325..75a7205a4 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -107,10 +107,12 @@ define([
                 var id = Common.UI.getId(),
                     menu = new Common.UI.Menu({
                     id: id,
+                    cls: 'shifted-left',
+                    custom: true,
                     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;
diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index e528612c6..e232b8bf8 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -150,11 +150,12 @@ define([
                 offset      : [0, 0],
                 cyclic      : true,
                 search      : false,
-                scrollAlwaysVisible: true
+                scrollAlwaysVisible: true,
+                custom      : false
             },
 
             template: _.template([
-                '<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu"></ul>'
+                '<ul class="dropdown-menu <% if(!options.custom) { %> shifted-right <% } %> <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu"></ul>'
             ].join('')),
 
             initialize : function(options) {
@@ -620,11 +621,12 @@ define([
             offset      : [0, 0],
             cyclic      : true,
             search      : false,
-            scrollAlwaysVisible: true
+            scrollAlwaysVisible: true,
+            custom      : false
         },
 
         template: _.template([
-            '<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu">',
+            '<ul class="dropdown-menu <% if(!options.custom) { %> shifted-right <% } %> <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu">',
                 '<% _.each(items, function(item) { %>',
                     '<% if (!item.id) item.id = Common.UI.getId(); %>',
                     '<% item.checked = item.checked || false;  %>',
diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js
index 6d710cbec..cb1e7159b 100644
--- a/apps/common/main/lib/component/MenuItem.js
+++ b/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);
         },
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 557526847..6c7b595c3 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -84,4 +84,25 @@
             }
         }
     }
+
+    &.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;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js
index 15ba936c1..5b4d78bee 100644
--- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js
+++ b/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,
diff --git a/apps/documenteditor/main/app/view/DocumentHolder.js b/apps/documenteditor/main/app/view/DocumentHolder.js
index cac724954..475388a20 100644
--- a/apps/documenteditor/main/app/view/DocumentHolder.js
+++ b/apps/documenteditor/main/app/view/DocumentHolder.js
@@ -1986,11 +1986,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 +2003,7 @@ define([
             });
 
             var menuViewAddComment = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-menu-comments',
                 caption: me.addCommentText
             }).on('click', _.bind(me.addComment, me));
 
@@ -2011,6 +2014,7 @@ 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));
 
@@ -2246,6 +2250,7 @@ define([
             });
 
             this.menuImageWrap = new Common.UI.MenuItem({
+                iconCls: 'menu__icon wrap-inline',
                 caption : me.textWrap,
                 menu    : (function(){
                     function onItemClick(item, e) {
@@ -2339,6 +2344,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;
@@ -2444,11 +2450,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 +2467,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));
 
@@ -2472,19 +2481,23 @@ define([
                     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))
@@ -2525,50 +2538,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);
@@ -2711,22 +2737,28 @@ define([
                     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 +2768,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));
 
@@ -2816,6 +2850,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 **/
@@ -2851,6 +2886,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,6 +2932,7 @@ define([
             });
 
             me.menuSpellCheckTable = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-ic-docspell',
                 caption     : me.spellcheckText,
                 menu        : new Common.UI.Menu({
                     menuAlign: 'tl-tr',
@@ -2913,11 +2950,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 +2967,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));
 
@@ -3370,21 +3410,27 @@ define([
                     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',
@@ -3440,6 +3486,7 @@ define([
             });
 
             var menuParagraphAdvanced = new Common.UI.MenuItem({
+                iconCls: 'menu__icon btn-paragraph',
                 caption     : me.advancedParagraphText
             }).on('click', _.bind(me.advancedParagraphClick, me));
 
@@ -3453,6 +3500,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 **/
@@ -3518,6 +3566,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 +3608,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 +3625,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));
 
diff --git a/apps/documenteditor/main/app/view/Links.js b/apps/documenteditor/main/app/view/Links.js
index e8bcc4880..6eeed0f1d 100644
--- a/apps/documenteditor/main/app/view/Links.js
+++ b/apps/documenteditor/main/app/view/Links.js
@@ -195,7 +195,8 @@ define([
                         btn.updateHint( me.tipContents );
 
                         var _menu = new Common.UI.Menu({
-                            cls: 'toc-menu',
+                            cls: 'toc-menu shifted-left',
+                            custom: true,
                             items: [
                                 {template: contentsTemplate, offsety: 0, value: 0},
                                 {template: contentsTemplate, offsety: 72, value: 1},
@@ -208,7 +209,8 @@ define([
                     });
 
                     me.contentsMenu = new Common.UI.Menu({
-                        cls: 'toc-menu',
+                        cls: 'toc-menu shifted-left',
+                        custom: true,
                         items: [
                             {template: contentsTemplate, offsety: 0, value: 0},
                             {template: contentsTemplate, offsety: 72, value: 1},
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index b740bd2d8..ff373417f 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -260,15 +260,17 @@ define([
                         iconCls: 'toolbar__icon btn-fontcolor',
                         split: true,
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
+                            custom: true,
                             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,8 +438,10 @@ define([
                         iconCls: 'toolbar__icon btn-inserttable',
                         caption: me.capBtnInsTable,
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
+                            custom: true,
                             items: [
-                                {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 12px;"></div>')},
                                 {caption: this.mniCustomTable, value: 'custom'},
                                 {caption: this.mniDrawTable, value: 'draw', checkable: true},
                                 {caption: this.mniEraseTable, value: 'erase', checkable: true}
@@ -992,6 +996,8 @@ define([
                         cls: 'btn-toolbar',
                         iconCls: 'toolbar__icon btn-colorschemas',
                         menu: new Common.UI.Menu({
+                            cls: 'shifted-left',
+                            custom: true,
                             items: [],
                             restoreHeight: true
                         })
@@ -1645,9 +1651,11 @@ define([
 
                 this.btnMarkers.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
+                        custom: true,
                         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 12px;"></div>')},
                             this.mnuMarkerSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
@@ -1659,8 +1667,10 @@ define([
 
                 this.btnNumbers.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
+                        custom: true,
                         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 12px;"></div>')},
                             this.mnuNumberSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
@@ -1672,9 +1682,11 @@ define([
 
                 this.btnMultilevels.setMenu(
                     new Common.UI.Menu({
+                        cls: 'shifted-left',
+                        custom: true,
                         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 12px;"></div>')},
                             this.mnuMultilevelSettings = new Common.UI.MenuItem({
                                 caption: this.textListSettings,
                                 disabled: (this.mnuMultilevelPicker.conf.index || 0)==0,
diff --git a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
index dd3c195bc..07962eaaf 100644
--- a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
@@ -329,15 +329,17 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                 iconCls     : 'toolbar__icon btn-fontcolor',
                 hint        : this.textColor,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-left',
+                    custom: true,
                     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>') }
                     ]
                 })
             });