[DE] added plugins to toolbar

apps/common/main/lib/component/Button.js

@@ -45,12 +45,12 @@
  *  <button type="button" class="btn" id="id-button">Caption</button>
  *
  *  A simple button with icon:
- *  <button type="button" class="btn" id="id-button"><span class="btn-icon">&nbsp;</span></button>
+ *  <button type="button" class="btn" id="id-button"><span class="icon">&nbsp;</span></button>
  *
  *  A button with menu:
  *  <div class="btn-group" id="id-button">
  *      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
- *          <span class="btn-icon">&nbsp;</span>
+ *          <span class="icon">&nbsp;</span>
  *          <span class="caret"></span>
  *      </button>
  *      <ul class="dropdown-menu" role="menu">
@@ -59,7 +59,7 @@
  *
  *  A split button:
  *  <div class="btn-group split" id="id-button">
- *      <button type="button" class="btn"><span class="btn-icon">&nbsp;</span></button>
+ *      <button type="button" class="btn"><span class="icon">&nbsp;</span></button>
  *      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
  *          <span class="caret"></span>
  *          <span class="sr-only"></span>
@@ -120,9 +120,13 @@ define([
     'use strict';
 
     var templateHugeCaption =
-        '<div class="btn-group" id="<%= id %>" style="<%= style %>">' +
+        '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
             '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' +
+                '<% if ( iconImg ) { %>' +
+                    '<img src="<%= iconImg %>">' +
+                '<% } else { %>' +
                     '<i class="icon <%= iconCls %>">&nbsp;</i>' +
+                '<% } %>' +
                 '<div class="inner-box-caption">' +
                     '<span class="caption"><%= caption %></span>' +
                     '<span class="caret img-commonctrl"></span>' +
@@ -158,7 +162,7 @@ define([
         },
 
         template: _.template([
-            '<% if (menu == null) { %>',
+            '<% if ( !menu ) { %>',
                 '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<% if (iconCls != "") { %>',
                         '<i class="icon <%= iconCls %>">&nbsp;</i>',
@@ -202,6 +206,7 @@ define([
             me.allowDepress = me.options.allowDepress;
             me.cls          = me.options.cls;
             me.iconCls      = me.options.iconCls;
+            me.iconImg      = me.options.iconImg,
             me.menu         = me.options.menu;
             me.split        = me.options.split;
             me.toggleGroup  = me.options.toggleGroup;
@@ -242,6 +247,7 @@ define([
                         id           : me.id,
                         cls          : me.cls,
                         iconCls      : me.iconCls,
+                        iconImg      : me.iconImg,
                         menu         : me.menu,
                         split        : me.split,
                         disabled     : me.disabled,

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

@@ -53,6 +53,17 @@ define([
         ],
 
         initialize: function() {
+            var me = this;
+            this.addListeners({
+                'Toolbar': {
+                    'render:before' : function (toolbar) {
+                        var tab = {action: 'plugins', caption: 'Addons'};
+                        var $panel = me.panelPlugins.getPanel();
+
+                        toolbar.addTab(tab, $panel, 'review');
+                    }
+                }
+            });
         },
 
         events: function() {
@@ -85,6 +96,12 @@ define([
         setMode: function(mode) {
             if (mode.canPlugins) {
                 this.updatePluginsList();
+
+                var toolbar = this.getApplication().getController('Toolbar').getView('Toolbar');
+                var $panel = toolbar.$el.find('#plugins-panel');
+                if ( $panel ) {
+                    this.panelPlugins.renderTo( $panel );
+                }
             }
         },
 

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

@@ -117,6 +117,51 @@ define([
             return this;
         },
 
+        getPanel: function () {
+            var _panel = $('<section id="plugins-panel" class="panel" data-tab="plugins"></section>');
+            if ( !this.storePlugins.isEmpty() ) {
+                var _group = $('<div class="group"></div>');
+                this.storePlugins.each(function (model) {
+                    var btn = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'img-commonctrl review-prev',
+                        caption: model.get('name'),
+                        value: model.get('guid')
+                    });
+
+                    var $slot = $('<span class="slot"></span>').appendTo(_group);
+                    btn.render($slot);
+                });
+
+                _group.appendTo(_panel);
+            }
+
+            return _panel;
+        },
+
+        renderTo: function (parent) {
+            if ( !this.storePlugins.isEmpty() ) {
+                var _group = $('<div class="group"></div>');
+                this.storePlugins.each(function (model) {
+                    var modes = model.get('variations');
+                    var _icon_url = model.get('baseUrl') + modes[model.get('currentVariation')].get('icons')[(window.devicePixelRatio > 1) ? 1 : 0];
+                    var btn = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'img-commonctrl review-prev',
+                        iconImg: _icon_url,
+                        caption: model.get('name'),
+                        menu: modes && modes.length > 1,
+                        value: model.get('guid')
+                    });
+
+                    var $slot = $('<span class="slot"></span>').appendTo(_group);
+                    btn.render($slot);
+                });
+
+                parent.html(_group);
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },

apps/common/main/resources/less/buttons.less

@@ -114,9 +114,14 @@
         }
     }
 
-    &.x-huge {
+    &.x-huge,
+      .x-huge {
         min-width: 45px;
         height: 45px;
+
+        img {
+            height: 27px;
+        }
     }
 
     .inner-box-icon {

apps/documenteditor/main/app/template/Toolbar.template

@@ -187,7 +187,6 @@
                     </div>
                 </div>
             </section>
-            <section class="panel" data-tab="plugins">plugins panel</section>
         </section>
     </section>
 </div>

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

@@ -72,8 +72,7 @@ define([
                 { caption: 'File', action: 'file'},
                 { caption: 'Home', action: 'home'},
                 { caption: 'Insert', action: 'ins'},
-                { caption: 'Page Layout', action: 'layout'},
+                { caption: 'Page Layout', action: 'layout'}
-                { caption: 'Plugins', action: 'plugins' }
             ]
         };