diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index 05a85f7c9a..92a0380f12 100644 --- a/apps/common/main/lib/controller/Plugins.js +++ b/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) { diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js index bf5d4b2bd8..5de009b372 100644 --- a/apps/common/main/lib/view/Plugins.js +++ b/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([ '', '
', '
', + '', + '' ].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('
' + '<%= baseUrl %>' + '<% } else { %>' + this.pluginsPath + '<% } %>' + '<%= variations[currentVariation].get("icons")[(window.devicePixelRatio > 1) ? 1 : 0] %>); background-position: 0 0;">
') + itemTemplate: _.template([ + '
', + '
' + '<%= baseUrl %>' + '<% } else { %>' + this.pluginsPath + '<% } %>' + '<%= variations[currentVariation].get("icons")[(window.devicePixelRatio > 1) ? 1 : 0] %>);">
', + '<% if (variations.length>1) { %>', + '
', + '<% } %>', + '<%= name %>', + '
' + ].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 || {})); diff --git a/apps/common/main/resources/img/plugin/icon_add_on_default.png b/apps/common/main/resources/img/plugin/icon_add_on_default.png new file mode 100644 index 0000000000..0ecbe7474d Binary files /dev/null and b/apps/common/main/resources/img/plugin/icon_add_on_default.png differ diff --git a/apps/common/main/resources/img/plugin/icon_add_on_default@2x.png b/apps/common/main/resources/img/plugin/icon_add_on_default@2x.png new file mode 100644 index 0000000000..151ae0dfbf Binary files /dev/null and b/apps/common/main/resources/img/plugin/icon_add_on_default@2x.png differ diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less index 3577df2dd0..46b3dc4552 100644 --- a/apps/common/main/resources/less/plugins.less +++ b/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; } } } diff --git a/apps/documenteditor/main/app/controller/LeftMenu.js b/apps/documenteditor/main/app/controller/LeftMenu.js index bdd66a471d..f16dd7d38d 100644 --- a/apps/documenteditor/main/app/controller/LeftMenu.js +++ b/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; }, diff --git a/apps/documenteditor/main/app/view/LeftMenu.js b/apps/documenteditor/main/app/view/LeftMenu.js index 061e5570e0..78ae7fa344 100644 --- a/apps/documenteditor/main/app/view/LeftMenu.js +++ b/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); } diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index f177f9bada..857f32aa1d 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/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",