From 586e3adc237b39ce5a71f0355f525745a22a3229 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Fri, 1 Oct 2021 16:40:38 +0300
Subject: [PATCH 1/2] Fix bug

---
 apps/common/main/lib/view/Plugins.js         |  2 +-
 apps/common/main/resources/less/plugins.less | 36 ++++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js
index 6e05ee478..574333e82 100644
--- a/apps/common/main/lib/view/Plugins.js
+++ b/apps/common/main/lib/view/Plugins.js
@@ -62,7 +62,7 @@ define([
             '<div id="current-plugin-box" class="layout-ct vbox hidden">',
                 '<div id="current-plugin-header">',
                     '<label></label>',
-                    '<div id="id-plugin-close" class="plugin-close img-commonctrl"></div>',
+                    '<div id="id-plugin-close" class="plugin-close close"></div>',
                 '</div>',
                 '<div id="current-plugin-frame" class="">',
                 '</div>',
diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less
index 1e5ac5ded..13f03b700 100644
--- a/apps/common/main/resources/less/plugins.less
+++ b/apps/common/main/resources/less/plugins.less
@@ -11,6 +11,7 @@
         font-weight: bold;
         margin-top: 10px;
         margin-left: 12px;
+
     }
 
     #plugins-list {
@@ -103,10 +104,41 @@
         right: 7px;
         width: 16px;
         height: 16px;
-        background-position: -26px -150px;
         cursor: pointer;
-    }
 
+        &.close {
+            opacity: 0.8;
+            &:hover {
+                opacity: 1;
+            }
+
+            &.disabled {
+                cursor: default;
+            }
+
+            &:before, &:after {
+                content: ' ';
+                position: absolute;
+                left: 7px;
+                left: calc(7px / @pixel-ratio-factor);
+                top: @scaled-one-px-value-ie;
+                top: @scaled-one-px-value;
+                height: 14px;
+                width: 2px;
+                width: @scaled-two-px-value;
+                background-color: @icon-normal-ie;
+                background-color: @icon-normal;
+            }
+
+            &:before {
+                transform: rotate(45deg);
+            }
+
+            &:after {
+                transform: rotate(-45deg);
+            }
+        }
+    }
     #current-plugin-frame {
         width: 100%;
         height: 100%;

From 901d50cd0107d82f4993558ec26e049f2b236766 Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Wed, 6 Oct 2021 02:02:31 +0300
Subject: [PATCH 2/2] Refactoring

---
 apps/common/main/lib/view/Plugins.js         |   2 +-
 apps/common/main/resources/less/plugins.less |  43 +------
 apps/common/main/resources/less/window.less  | 118 +++++++++----------
 3 files changed, 66 insertions(+), 97 deletions(-)

diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js
index 574333e82..449bf4be3 100644
--- a/apps/common/main/lib/view/Plugins.js
+++ b/apps/common/main/lib/view/Plugins.js
@@ -62,7 +62,7 @@ define([
             '<div id="current-plugin-box" class="layout-ct vbox hidden">',
                 '<div id="current-plugin-header">',
                     '<label></label>',
-                    '<div id="id-plugin-close" class="plugin-close close"></div>',
+                    '<div id="id-plugin-close" class="tool close"></div>',
                 '</div>',
                 '<div id="current-plugin-frame" class="">',
                 '</div>',
diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less
index 13f03b700..059e6abb3 100644
--- a/apps/common/main/resources/less/plugins.less
+++ b/apps/common/main/resources/less/plugins.less
@@ -98,46 +98,15 @@
         }
     }
 
-    .plugin-close {
+    .tool {
         position: absolute;
         top: 9px;
         right: 7px;
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-
-        &.close {
-            opacity: 0.8;
-            &:hover {
-                opacity: 1;
-            }
-
-            &.disabled {
-                cursor: default;
-            }
-
-            &:before, &:after {
-                content: ' ';
-                position: absolute;
-                left: 7px;
-                left: calc(7px / @pixel-ratio-factor);
-                top: @scaled-one-px-value-ie;
-                top: @scaled-one-px-value;
-                height: 14px;
-                width: 2px;
-                width: @scaled-two-px-value;
-                background-color: @icon-normal-ie;
-                background-color: @icon-normal;
-            }
-
-            &:before {
-                transform: rotate(45deg);
-            }
-
-            &:after {
-                transform: rotate(-45deg);
-            }
-        }
+        margin: 0;
+        /*&:before, &:after {
+            width: 2px;
+            width: @scaled-two-px-value;
+        }*/
     }
     #current-plugin-frame {
         width: 100%;
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 10de57b8e..ee6e29a2b 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -22,6 +22,50 @@
         opacity: 0.6;
     }
 }
+.tool {
+    float: right;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 0px;
+    margin: 4px 3px 0px 0px;
+
+    &.close {
+        position: relative;
+        opacity: 0.7;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &.disabled {
+            cursor: default;
+        }
+
+        &:before, &:after {
+            content: ' ';
+            position: absolute;
+            left: 7px;
+            left: calc(7px / @pixel-ratio-factor);
+            top: @scaled-one-px-value-ie;
+            top: @scaled-one-px-value;
+            height: 14px;
+            width: @scaled-one-px-value-ie;
+            width: @scaled-one-px-value;
+            background-color: @icon-normal-ie;
+            background-color: @icon-normal;
+        }
+
+        &:before {
+            transform: rotate(45deg);
+        }
+
+        &:after {
+            transform: rotate(-45deg);
+        }
+    }
+}
 
 .asc-window {
     min-height: 50px;
@@ -73,71 +117,27 @@
             padding-right: 6px;
         }
 
-        .tool {
-            float: right;
-            width: 16px;
-            height: 16px;
-            cursor: pointer;
-            overflow: hidden;
-            padding: 0px;
-            margin: 4px 3px 0px 0px;
+        .tool.help {
+            width: 20px;
+            margin-right:0;
+            line-height: 14px;
+            font-size: 14px;
+            font-weight: bold;
+            color: @text-normal-ie;
+            color: @text-normal;
+            opacity: 0.7;
 
-            &.close {
-                position: relative;
-                opacity: 0.7;
-
-                &:hover {
-                    opacity: 1;
-                }
-
-                &.disabled {
-                    cursor: default;
-                }
-
-                &:before, &:after {
-                    content: ' ';
-                    position: absolute;
-                    left: 7px;
-                    left: calc(7px/@pixel-ratio-factor);
-                    top: @scaled-one-px-value-ie;
-                    top: @scaled-one-px-value;
-                    height: 14px;
-                    width: @scaled-one-px-value-ie;
-                    width: @scaled-one-px-value;
-                    background-color: @icon-normal-ie;
-                    background-color: @icon-normal;
-                }
-
-                &:before {
-                    transform: rotate(45deg);
-                }
-
-                &:after {
-                    transform: rotate(-45deg);
-                }
+            &:hover {
+                opacity: 1;
             }
 
-            &.help {
-                width: 20px;
-                margin-right:0;
-                line-height: 14px;
-                font-size: 14px;
-                font-weight: bold;
-                color: @text-normal-ie;
-                color: @text-normal;
-                opacity: 0.7;
-
-                &:hover {
-                    opacity: 1;
-                }
-
-                &.disabled {
-                    opacity: @component-disabled-opacity;
-                    cursor: default;
-                }
+            &.disabled {
+                opacity: @component-disabled-opacity;
+                cursor: default;
             }
         }
 
+
         &.resizing {
             cursor: inherit !important;
         }