Merge pull request #2495 from ONLYOFFICE/feature/plugin-buttons

Feature/plugin buttons

apps/common/main/lib/controller/Plugins.js

@@ -490,8 +490,8 @@ define([
             this.parsePlugins(pluginsdata)
         },
 
-        onPluginShowButton: function(id) {
-            this.pluginDlg && this.pluginDlg.showButton(id);
+        onPluginShowButton: function(id, toRight) {
+            this.pluginDlg && this.pluginDlg.showButton(id, toRight);
         },
 
         onPluginHideButton: function(id) {

apps/common/main/lib/view/PluginDlg.js

@@ -200,29 +200,25 @@ define([
             }
         },
 
-        showButton: function(id) {
-            var header = this.$window.find('.header .tools.left');
-            if (id=='back') {
-                var btn = header.find('#id-plugindlg-' + id);
-                if (btn.length<1) {
-                    btn = $('<div id="id-plugindlg-' + id + '" class="tool help" style="font-size:20px;">←</div>');
-                    btn.on('click', _.bind(function() {
-                        this.fireEvent('header:click',id);
-                    }, this));
-                    header.prepend(btn);
-                }
-                btn.show();
-                header.removeClass('hidden');
+        showButton: function(id, toRight) {
+            var header = this.$window.find(toRight ? '.header .tools:not(.left)' : '.header .tools.left'),
+                btn = header.find('#id-plugindlg-' + id);
+            if (btn.length<1) {
+                var iconCls = (id ==='back') ? 'btn-promote' : 'btn-' + Common.Utils.String.htmlEncode(id);
+                btn = $('<div id="id-plugindlg-' + id + '" class="tool custom toolbar__icon ' + iconCls + '"></div>');
+                btn.on('click', _.bind(function() {
+                    this.fireEvent('header:click',id);
+                }, this));
+                header.append(btn);
             }
+            btn.show();
+            header.removeClass('hidden');
         },
 
         hideButton: function(id) {
-            var header = this.$window.find('.header .tools.left');
-            if (id=='back') {
-                var btn = header.find('#id-plugindlg-' + id);
-                if (btn.length>0) {
-                    btn.hide();
-                }
+            var btn = this.$window.find('.header #id-plugindlg-' + id);
+            if (btn.length>0) {
+                btn.hide();
             }
         },
 

apps/common/main/resources/img/toolbar/2.5x/btn-developer.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9.015 16 2.75-11h-1.03l-2.75 11h1.03Zm-5.558-5.5 2.897-2.9-.708-.706L2.043 10.5l3.603 3.603.708-.707L3.457 10.5Zm10.897-3.605 3.603 3.605-3.603 3.603-.707-.707 2.896-2.896-2.896-2.9.707-.706Z" fill="#000"/></svg>

apps/common/main/resources/less/window.less

@@ -24,16 +24,12 @@
 }
 .tool {
     .float-right();
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
     cursor: pointer;
     overflow: hidden;
     padding: 0px;
-    margin: 4px 3px 0px 0px;
-
-    .rtl & {
-        margin: 4px 0 0px 3px;
-    }
+    margin: 0;
 
     &.close {
         position: relative;
@@ -50,8 +46,7 @@
         &:before, &:after {
             content: ' ';
             position: absolute;
-            left: 8px;
-            //left: calc(8px / @pixel-ratio-factor);
+            left: 9px;
             top: @scaled-one-px-value-ie;
             top: @scaled-one-px-value;
             height: 14px;
@@ -59,6 +54,7 @@
             width: @scaled-one-px-value;
             background-color: @icon-normal-ie;
             background-color: @icon-normal;
+            margin-top: 4px;
         }
 
         &:before {
@@ -135,30 +131,46 @@
                     right: 0;
                 }
             }
-        }
 
-        .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;
+            .tool {
+                &.help {
+                    line-height: 14px;
+                    font-size: 14px;
+                    .font-weight-bold();
+                    color: @text-normal-ie;
+                    color: @text-normal;
+                    opacity: 0.7;
+                    margin-top: 4px;
 
-            &:hover {
-                opacity: 1;
-            }
+                    &:hover {
+                        opacity: 1;
+                    }
 
-            &.disabled {
-                opacity: @component-disabled-opacity-ie;
-                opacity: @component-disabled-opacity;
-                cursor: default;
+                    &.disabled {
+                        opacity: @component-disabled-opacity-ie;
+                        opacity: @component-disabled-opacity;
+                        cursor: default;
+                    }
+                }
+
+                &.custom {
+                    opacity: 0.6;
+                    margin-top: 2px;
+                    .margin-right-2();
+
+                    &:hover {
+                        opacity: 0.8;
+                    }
+
+                    &.disabled {
+                        opacity: @component-disabled-opacity-ie;
+                        opacity: @component-disabled-opacity;
+                        cursor: default;
+                    }
+                }
             }
         }
 
-
         &.resizing {
             cursor: inherit !important;
         }