[DE PE SSE] Style background plugins menu

ONLYOFFICE · Sep 8, 2023 · 7cb81cd · 7cb81cd
1 parent 778d36c
commit 7cb81cd
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
+                    }
+                }
+            }
+        }
+    }
 }