[DE] added plugins to toolbar
This commit is contained in:
Maxim Kadushkin
parent
8de318a9b1
commit
52a8419371
|
|
@ -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"> </span></button>
|
||||
* <button type="button" class="btn" id="id-button"><span class="icon"> </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"> </span>
|
||||
* <span class="icon"> </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"> </span></button>
|
||||
* <button type="button" class="btn"><span class="icon"> </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 %>"> </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 %>"> </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,
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -114,9 +114,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.x-huge {
|
||||
&.x-huge,
|
||||
.x-huge {
|
||||
min-width: 45px;
|
||||
height: 45px;
|
||||
|
||||
img {
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
.inner-box-icon {
|
||||
|
|
|
|||
|
|
@ -187,7 +187,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel" data-tab="plugins">plugins panel</section>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -72,8 +72,7 @@ define([
|
|||
{ caption: 'File', action: 'file'},
|
||||
{ caption: 'Home', action: 'home'},
|
||||
{ caption: 'Insert', action: 'ins'},
|
||||
{ caption: 'Page Layout', action: 'layout'},
|
||||
{ caption: 'Plugins', action: 'plugins' }
|
||||
{ caption: 'Page Layout', action: 'layout'}
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue