From 7cb81cda0c41e274f399c2311189c0ecab8c2eba Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 8 Sep 2023 20:56:14 +0300
Subject: [PATCH] [DE PE SSE] Style background plugins menu

---
 apps/common/main/lib/controller/Plugins.js   | 11 ++--
 apps/common/main/lib/view/Plugins.js         |  3 +-
 apps/common/main/resources/less/toolbar.less | 55 +++++++++++++++++++-
 3 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js
index 3ec03a6289..e97dc020aa 100644
--- a/apps/common/main/lib/controller/Plugins.js
+++ b/apps/common/main/lib/controller/Plugins.js
@@ -274,15 +274,18 @@ define([
                 iconImg: model.get('baseUrl') + parsedIcons['normal'],
                 template: _.template([
                     '<a id="<%= id %>" class="menu-item">',
-                    '<img class="menu-item-icon" src="<%= options.iconImg %>">',
-                    '<%= caption %>',
-                    '<span class="menu-item-toggle"></span>',
+                        '<img class="menu-item-icon" src="<%= options.iconImg %>">',
+                        '<span class="plugin-caption"><%= caption %></span>',
+                        '<span class="plugin-tools">',
+                            '<span class="plugin-toggle"></span>',
+                            '<span class="plugin-arrow"><span class="arrow-icon"></span></span>',
+                        '</span>',
                     '</a>'
                 ].join(''))
             });
             this.viewPlugins.backgroundBtn.menu.addItem(menuItem);
             var switcher = new Common.UI.Switcher({
-                el: menuItem.$el.find('.menu-item-toggle')[0],
+                el: menuItem.$el.find('.plugin-toggle')[0],
                 value: true
             });
             this.backgroundPlugins.push(menuItem);
diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js
index 128986edd2..79afdd65ef 100644
--- a/apps/common/main/lib/view/Plugins.js
+++ b/apps/common/main/lib/view/Plugins.js
@@ -310,8 +310,9 @@ define([
                 caption: this.textBackgroundPlugins,
                 menu: new Common.UI.Menu({
                     cls: 'background-plugins',
+                    style: 'min-width: 230px;',
                     items: [
-                        {template: _.template('<span>' + this.textTheListOfBackgroundPlugins + '</span>')}
+                        {template: _.template('<span class="menu-header">' + this.textTheListOfBackgroundPlugins + '</span>')}
                     ]
                 }),
                 hint: this.textBackgroundPlugins,
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index bfaa252a9c..0c6c18e220 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -996,5 +996,58 @@ section .field-styles {
 }
 
 .background-plugins {
-    
+    .menu-header {
+        display: block;
+        font-weight: bold;
+        padding: 10px 20px;
+    }
+    .menu-item {
+        display: flex;
+        align-items: center;
+        .menu-item-icon {
+            float: none;
+            margin: 0;
+            .margin-right(5px);
+            width: 28px;
+            height: 28px;
+        }
+        .plugin-caption {
+            flex-basis: 100%;
+        }
+        .plugin-tools {
+            display: flex;
+            .float-right();
+            .plugin-toggle {
+                display: flex;
+                align-items: center;
+            }
+            .plugin-arrow {
+                display: flex;
+                justify-content: start;
+                align-items: center;
+                width: 20px;
+                height: 20px;
+                .margin-left-8();
+                .arrow-icon {
+                    display: block;
+                    content: " ";
+                    width: 0;
+                    height: 0;
+                    border-color: transparent;
+                    border-style: solid;
+                    border-width: 3px 0 3px 3px;
+                    border-left-color: @icon-normal-ie;
+                    border-left-color: @icon-normal;
+                    .margin-left(9px);
+
+                    .rtl & {
+                        border-color: transparent;
+                        border-width: 3px 3px 3px 0;
+                        border-right-color: @icon-normal-ie;
+                        border-right-color: @icon-normal;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file