[DE] Панель плагинов изменена в соответствии с макетами.

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

@@ -119,8 +119,12 @@ define([
             this.api.asc_pluginsRegister(this.panelPlugins.pluginsPath, arr);
         },
 
-        onSelectPlugin: function(picker, item, record){
-            this.api.asc_pluginRun(record.get('guid'), record.get('currentVariation'), '');
+        onSelectPlugin: function(picker, item, record, e){
+            var btn = $(e.target);
+            if (btn && btn.hasClass('plugin-caret')) {
+                // show plugin menu
+            } else
+                this.api.asc_pluginRun(record.get('guid'), record.get('currentVariation'), '');
         },
 
         onPluginShow: function(plugin) {

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

@@ -50,7 +50,7 @@ define([
     'use strict';
 
     Common.Views.Plugins = Common.UI.BaseView.extend(_.extend({
-        el: '#left-panel-plugins',
+        el: '#id-plugins-settings',
 
         storePlugins: undefined,
         template: _.template([
@@ -58,31 +58,68 @@ define([
                 '<label id="plugins-header"><%= scope.strPlugins %></label>',
                 '<div id="plugins-list" class="">',
                 '</div>',
+            '</div>',
+            '<div id="current-plugin-box" class="layout-ct vbox hidden">',
+                '<label id="current-plugin-header"><%= scope.strPlugins %></label>',
+                '<div id="current-plugin-frame" class="">',
+                '</div>',
             '</div>'
         ].join('')),
 
         initialize: function(options) {
             _.extend(this, options);
             this.pluginsPath = '../../../../sdkjs-plugins/';
+            this._locked = false;
+            this._state = {
+                DisabledControls: true
+            };
+            this.lockedControls = [];
             Common.UI.BaseView.prototype.initialize.call(this, arguments);
         },
 
         render: function(el) {
             el = el || this.el;
             $(el).html(this.template({scope: this}));
+            this.$el = $(el);
 
             this.viewPluginsList = new Common.UI.DataView({
                 el: $('#plugins-list'),
                 store: this.storePlugins,
                 enableKeyEvents: false,
-                itemTemplate: _.template('<div id="<%= id %>" class="item-plugins" style="background-image: url(' + '<% if (baseUrl !=="") { %>' + '<%= baseUrl %>'  + '<% } else { %>' + this.pluginsPath + '<% } %>' + '<%= variations[currentVariation].get("icons")[(window.devicePixelRatio > 1) ? 1 : 0] %>); background-position: 0 0;"></div>')
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="item-plugins" style="display: block;">',
+                        '<div class="plugin-icon" style="background-image: url(' + '<% if (baseUrl !=="") { %>' + '<%= baseUrl %>'  + '<% } else { %>' + this.pluginsPath + '<% } %>' + '<%= variations[currentVariation].get("icons")[(window.devicePixelRatio > 1) ? 1 : 0] %>);"></div>',
+                        '<% if (variations.length>1) { %>',
+                        '<div class="plugin-caret img-commonctrl"></div>',
+                        '<% } %>',
+                        '<%= name %>',
+                    '</div>'
+                ].join(''))
             });
+            this.lockedControls.push(this.viewPluginsList);
 
             this.trigger('render:after', this);
             return this;
         },
 
-        strPlugins: 'Plugins'
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+
+        ChangeSettings: function(props) {
+            this.disableControls(this._locked);
+        },
+
+        disableControls: function(disable) {
+            if (this._state.DisabledControls!==disable) {
+                this._state.DisabledControls = disable;
+                _.each(this.lockedControls, function(item) {
+                    item.setDisabled(disable);
+                });
+            }
+        },
+
+        strPlugins: 'Add-ons'
 
     }, Common.Views.Plugins || {}));
 

apps/common/main/resources/less/plugins.less

@@ -16,11 +16,51 @@
     #plugins-list {
         height: 100%;
         overflow: hidden;
-        padding: 30px 0 10px 10px;
+        padding: 30px 0 10px 0;
+
+        .item {
+            display: block;
+            width: 100%;
+            .box-shadow(none);
+            margin: 0;
+
+            &:hover,
+            &.over {
+                background-color: @secondary;
+
+                .plugin-icon {
+                    .box-shadow(0 0 0 2px @primary);
+                }
+            }
+        }
 
         .item-plugins {
-            width: 40px;
-            height: 40px;
+            width: 100%;
+            padding: 7px 1px 7px 12px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .plugin-icon {
+            width: 31px;
+            height: 31px;
+            display: inline-block;
+            .box-shadow(0 0 0 1px @gray);
+            vertical-align: middle;
+            background-position: 0 0;
+            background-size: cover;
+            margin-right: 10px;
+
+            .background-ximage('@{common-image-path}/plugin/icon_add_on_default.png', '@{common-image-path}/plugin/icon_add_on_default@2x.png', 31px);
+        }
+
+        .plugin-caret {
+            float: right;
+            width: 16px;
+            height: 16px;
+            background-position: -42px -195px;
+            margin: 7px;
         }
     }
 }

apps/documenteditor/main/app/controller/LeftMenu.js

@@ -174,8 +174,6 @@ define([
             if (this.mode.canUseHistory)
                 this.leftMenu.setOptionsPanel('history', this.getApplication().getController('Common.Controllers.History').getView('Common.Views.History'));
 
-            this.enablePlugins();
-
             Common.util.Shortcuts.resumeEvents();
             return this;
         },

apps/documenteditor/main/app/view/LeftMenu.js

@@ -227,7 +227,7 @@ define([
                 }
             }
             /** coauthoring end **/
-            if (this.mode.canPlugins) {
+            if (this.mode.canPlugins && this.panelPlugins) {
                 if (this.btnPlugins.pressed) {
                     this.panelPlugins.show();
                 } else
@@ -279,7 +279,7 @@ define([
                     this.panelChat['hide']();
                     this.btnChat.toggle(false, true);
                 }
-                if (this.mode.canPlugins) {
+                if (this.mode.canPlugins && this.panelPlugins) {
                     this.panelPlugins['hide']();
                     this.btnPlugins.toggle(false, true);
                 }

apps/documenteditor/main/locale/en.json

@@ -157,6 +157,7 @@
   "Common.Views.OpenDialog.okButtonText": "OK",
   "Common.Views.OpenDialog.txtEncoding": "Encoding ",
   "Common.Views.OpenDialog.txtTitle": "Choose %1 options",
+  "Common.Views.Plugins.strPlugins": "Add-ons",
   "Common.Views.ReviewChanges.txtAccept": "Accept",
   "Common.Views.ReviewChanges.txtAcceptAll": "Accept All Changes",
   "Common.Views.ReviewChanges.txtAcceptCurrent": "Accept Current Change",