From 50dec941497c39f775b2ec6dd330b0ccadd418e3 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 18 Aug 2020 14:50:10 +0300
Subject: [PATCH] [DE] Shift text in menu items with icons ( + all context
 menu).

---
 apps/common/main/lib/component/ColorButton.js |  1 -
 apps/common/main/lib/component/Menu.js        | 10 ++---
 .../main/resources/less/dropdown-menu.less    |  1 +
 .../main/app/view/DocumentHolder.js           | 39 ++++++++++++++++---
 apps/documenteditor/main/app/view/Links.js    |  2 -
 apps/documenteditor/main/app/view/Toolbar.js  | 29 +++++++-------
 .../main/app/view/WatermarkSettingsDialog.js  |  1 -
 .../main/resources/less/toolbar.less          |  2 +-
 8 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 75a7205a4..15b02c0bb 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -108,7 +108,6 @@ define([
                     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>') },
diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index e232b8bf8..e528612c6 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -150,12 +150,11 @@ define([
                 offset      : [0, 0],
                 cyclic      : true,
                 search      : false,
-                scrollAlwaysVisible: true,
-                custom      : false
+                scrollAlwaysVisible: true
             },
 
             template: _.template([
-                '<ul class="dropdown-menu <% if(!options.custom) { %> shifted-right <% } %> <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu"></ul>'
+                '<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu"></ul>'
             ].join('')),
 
             initialize : function(options) {
@@ -621,12 +620,11 @@ define([
             offset      : [0, 0],
             cyclic      : true,
             search      : false,
-            scrollAlwaysVisible: true,
-            custom      : false
+            scrollAlwaysVisible: true
         },
 
         template: _.template([
-            '<ul class="dropdown-menu <% if(!options.custom) { %> shifted-right <% } %> <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu">',
+            '<ul class="dropdown-menu <%= 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/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 6c7b595c3..1f002b7c7 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -102,6 +102,7 @@
         li {
             & > a {
                 padding-left: 12px;
+                padding-right: 12px;
             }
         }
     }
diff --git a/apps/documenteditor/main/app/view/DocumentHolder.js b/apps/documenteditor/main/app/view/DocumentHolder.js
index 475388a20..1aa958669 100644
--- a/apps/documenteditor/main/app/view/DocumentHolder.js
+++ b/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   : [
                                     {
@@ -2019,6 +2025,7 @@ define([
             }).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())),
@@ -2122,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({
@@ -2208,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({
@@ -2277,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({
@@ -2411,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({
@@ -2478,6 +2486,7 @@ 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({
@@ -2508,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({
@@ -2529,6 +2539,7 @@ define([
             });
 
             this.pictureMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     if (_.isUndefined(value.imgProps))
                         return;
@@ -2734,6 +2745,7 @@ define([
             var menuTableCellAlign = new Common.UI.MenuItem({
                 caption     : me.cellAlignText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuTableCellTop = new Common.UI.MenuItem({
@@ -2795,6 +2807,7 @@ define([
             var menuHyperlinkTable = new Common.UI.MenuItem({
                 caption     : me.hyperlinkText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuEditHyperlinkTable,
@@ -2816,6 +2829,7 @@ define([
             var menuTableControl = new Common.UI.MenuItem({
                 caption: me.textContentControls,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuTableRemoveControl,
@@ -2827,6 +2841,7 @@ define([
             var menuTableTOC = new Common.UI.MenuItem({
                 caption     : me.textTOC,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         {
@@ -2871,6 +2886,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   : [
@@ -2935,6 +2951,7 @@ define([
                 iconCls: 'menu__icon btn-ic-docspell',
                 caption     : me.spellcheckText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuSpellTable,
@@ -3003,7 +3020,7 @@ define([
             var menuTableDirection = new Common.UI.MenuItem({
                 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({
@@ -3052,6 +3069,7 @@ define([
             var menuNumberingTable = new Common.UI.MenuItem({
                 caption     : me.bulletsText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuTableStartNewList,
@@ -3073,6 +3091,7 @@ define([
             });
 
             this.tableMenu = new Common.UI.Menu({
+                cls: 'shifted-right',
                 initMenu: function(value){
                     // table properties
                     if (_.isUndefined(value.tableProps))
@@ -3244,6 +3263,7 @@ define([
                     {
                         caption     : me.selectText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             style   : 'width: 100px',
                             items   : [
@@ -3277,6 +3297,7 @@ define([
                     {
                         caption     : me.insertText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             style   : 'width: 100px',
                             items   : [
@@ -3315,6 +3336,7 @@ define([
                     {
                         caption     : me.deleteText,
                         menu        : new Common.UI.Menu({
+                            cls: 'shifted-right',
                             menuAlign: 'tl-tr',
                             style   : 'width: 100px',
                             items   : [
@@ -3407,6 +3429,7 @@ define([
             var menuParagraphVAlign = new Common.UI.MenuItem({
                 caption     : me.vertAlignText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         me.menuParagraphTop = new Common.UI.MenuItem({
@@ -3451,7 +3474,7 @@ define([
             var menuParagraphDirection = new Common.UI.MenuItem({
                 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({
@@ -3527,6 +3550,7 @@ define([
             var menuHyperlinkPara = new Common.UI.MenuItem({
                 caption     : me.hyperlinkText,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         menuEditHyperlinkPara,
@@ -3539,6 +3563,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({
@@ -3559,6 +3584,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: []
@@ -3658,6 +3684,7 @@ define([
             var menuParaTOCRefresh = new Common.UI.MenuItem({
                 caption     : me.textUpdateTOC,
                 menu        : new Common.UI.Menu({
+                    cls: 'shifted-right',
                     menuAlign: 'tl-tr',
                     items   : [
                         {
@@ -3715,6 +3742,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()));
@@ -3948,6 +3976,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) {
diff --git a/apps/documenteditor/main/app/view/Links.js b/apps/documenteditor/main/app/view/Links.js
index 6eeed0f1d..f3fcf5c7f 100644
--- a/apps/documenteditor/main/app/view/Links.js
+++ b/apps/documenteditor/main/app/view/Links.js
@@ -196,7 +196,6 @@ define([
 
                         var _menu = new Common.UI.Menu({
                             cls: 'toc-menu shifted-left',
-                            custom: true,
                             items: [
                                 {template: contentsTemplate, offsety: 0, value: 0},
                                 {template: contentsTemplate, offsety: 72, value: 1},
@@ -210,7 +209,6 @@ define([
 
                     me.contentsMenu = new Common.UI.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 ff373417f..70d219108 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -261,7 +261,6 @@ define([
                         split: true,
                         menu: new Common.UI.Menu({
                             cls: 'shifted-left',
-                            custom: true,
                             items: [
                                 {
                                     id: 'id-toolbar-menu-auto-fontcolor',
@@ -439,9 +438,8 @@ define([
                         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 12px;"></div>')},
+                                {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
                                 {caption: this.mniCustomTable, value: 'custom'},
                                 {caption: this.mniDrawTable, value: 'draw', checkable: true},
                                 {caption: this.mniEraseTable, value: 'erase', checkable: true}
@@ -569,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,
@@ -609,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'
                                 },
                                 {
@@ -674,7 +672,7 @@ define([
                                 {caption: '--'},
                                 {
                                     caption: this.textRemoveControl,
-                                    // iconCls: 'menu__icon cc-remove',
+                                    iconCls: 'menu__icon cc-remove',
                                     value: 'remove'
                                 },
                                 {caption: '--'},
@@ -710,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,
@@ -997,7 +995,6 @@ define([
                         iconCls: 'toolbar__icon btn-colorschemas',
                         menu: new Common.UI.Menu({
                             cls: 'shifted-left',
-                            custom: true,
                             items: [],
                             restoreHeight: true
                         })
@@ -1473,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',
@@ -1652,10 +1650,9 @@ 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 12px;"></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,
@@ -1668,9 +1665,8 @@ 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 12px;"></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,
@@ -1683,10 +1679,9 @@ 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 12px;"></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,
@@ -1706,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({
diff --git a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
index 07962eaaf..5c6b08055 100644
--- a/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
@@ -330,7 +330,6 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                 hint        : this.textColor,
                 menu        : new Common.UI.Menu({
                     cls: 'shifted-left',
-                    custom: true,
                     items: [
                     {
                         id: 'watermark-auto-color',
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 1719ba5e4..a79310a9a 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -117,7 +117,7 @@
     .dataview {
         width: 125px;
         height: 85px;
-        margin: 0 auto;
+        margin: 0 10px;
 
         &.disabled {
             > .item {