From 75fa8c5c10a4b83b8a920b034c484c2c205ce3fe Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 20 Sep 2021 19:51:32 +0300
Subject: [PATCH] [DE] Fix style for disabled item Add new style

---
 apps/common/main/lib/component/MenuItem.js    |  4 +++
 .../main/app/controller/Toolbar.js            |  2 --
 apps/documenteditor/main/app/view/Toolbar.js  |  7 +----
 .../main/resources/less/toolbar.less          | 27 ++-----------------
 4 files changed, 7 insertions(+), 33 deletions(-)

diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js
index 8f2078738..8b2af5156 100644
--- a/apps/common/main/lib/component/MenuItem.js
+++ b/apps/common/main/lib/component/MenuItem.js
@@ -137,6 +137,7 @@ define([
             this.toggleGroup    = me.options.toggleGroup;
             this.template       = me.options.template || this.template;
             this.iconCls        = me.options.iconCls;
+            this.liCls          = me.options.liCls;
             this.hint           = me.options.hint;
             this.rendered       = false;
 
@@ -216,6 +217,9 @@ define([
                         });
                     }
 
+                    if (this.liCls)
+                        el.addClass(this.liCls);
+
                     if (this.disabled)
                         el.toggleClass('disabled', this.disabled);
 
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 3ca7e25b8..0bc6d2fd2 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -357,8 +357,6 @@ define([
             Common.Gateway.on('insertimage',                            _.bind(this.insertImage, this));
             Common.Gateway.on('setmailmergerecipients',                 _.bind(this.setMailMergeRecipients, this));
             $('#id-toolbar-menu-new-control-color').on('click',         _.bind(this.onNewControlsColor, this));
-
-            // $('#id-save-style-plus, #id-save-style-link', toolbar.$el).on('click', this.onMenuSaveStyle.bind(this));
             toolbar.listStylesAdditionalMenuItem.on('click', this.onMenuSaveStyle.bind(this));
 
             this.onSetupCopyStyleButton();
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 99efa6dab..a236c4f96 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1286,14 +1286,9 @@ define([
                     this.paragraphControls.push(this.cmbFontName);
 
                     this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({
-                        cls: 'save-style-container',
+                        liCls: 'save-style-container',
                         iconCls: 'menu__icon btn-zoomup',
                         caption: me.textStyleMenuNew
-                        // template: _.template(
-                        //     '<div id="id-save-style-container" class = "save-style-container">' +
-                        //     '<span id="id-save-style-plus" class="plus img-commonctrl"  ></span>' +
-                        //     '<label id="id-save-style-link" class="save-style-link" >' + me.textStyleMenuNew + '</label>' +
-                        //     '</div>')
                     });
 
                     this.listStyles = new Common.UI.ComboDataView({
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index b7b8056a5..648bd6fe6 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -152,36 +152,13 @@
 }
 
 .save-style-container {
-    //cursor: default;
-    //position: relative;
-    //padding: 14px 11px;
-    padding: 14px 20px !important;
     border-left: @scaled-one-px-value-ie solid @border-regular-control-ie;
     border-left: @scaled-one-px-value solid @border-regular-control;
     border-top: @scaled-one-px-value-ie solid @border-regular-control-ie;
     border-top: @scaled-one-px-value solid @border-regular-control;
-}
 
-.save-style-link {
-    border-bottom: @scaled-one-px-value-ie dotted @text-secondary-ie;
-    border-bottom: @scaled-one-px-value dotted @text-secondary;
-    cursor: pointer;
-    margin-left: 22px;
-}
-
-.plus {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    position: absolute;
-    background-position: @plus-offset-x @plus-offset-y;
-}
-
-.dropdown-menu > .disabled {
-    .plus, .save-style-link {
-        cursor: default;
-        color: @dropdown-link-disabled-color;
-        background-position: @plus-offset-x @plus-offset-y - 16;
+    a {
+        padding: 14px 20px !important;
     }
 }