[PE] Change shape menu in toolbar (bug 43485)
This commit is contained in:
JuliaSvinareva
parent
a7d388b996
commit
d0810f4363
|
|
@ -874,7 +874,8 @@ define([
|
|||
this.cmpEl.html(this.template({
|
||||
items: me.store.toJSON(),
|
||||
itemTemplate: me.itemTemplate,
|
||||
style: me.style
|
||||
style: me.style,
|
||||
options: me.options
|
||||
}));
|
||||
}
|
||||
var modalParents = this.cmpEl.closest('.asc-window');
|
||||
|
|
@ -1257,4 +1258,72 @@ define([
|
|||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
Common.UI.DataViewShape = Common.UI.DataViewSimple.extend(_.extend({
|
||||
template: _.template([
|
||||
'<div class="dataview inner" style="<%= style %>">',
|
||||
'<% _.each(options.groups, function(group) { %>',
|
||||
'<div class="grouped-data <% if (!_.isEmpty(group.groupName)) { %> margin <% } %>" id="<%= group.id %>">',
|
||||
'<% if (!_.isEmpty(group.groupName)) { %>',
|
||||
'<div class="group-description">',
|
||||
'<span><%= group.groupName %></span>',
|
||||
'</div>',
|
||||
'<% } %>',
|
||||
'<div class="group-items-container">',
|
||||
'<% _.each(group.groupStore.toJSON(), function(item) { %>',
|
||||
'<% if (!item.id) item.id = Common.UI.getId(); %>',
|
||||
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
|
||||
'<% }); %>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<% }); %>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
onAfterShowMenu: function(e) {
|
||||
if (!this.dataViewItems) {
|
||||
var me = this;
|
||||
_.each(me.options.groups, function (group) {
|
||||
me.store.models = me.store.models.concat(group.groupStore.models);
|
||||
});
|
||||
this.dataViewItems = [];
|
||||
_.each(me.cmpEl.find('div.grouped-data'), function (group, indexGroup) {
|
||||
_.each($(group).find('div.item'), function (item, index) {
|
||||
var $item = $(item),
|
||||
rec = me.options.groups.at(indexGroup).groupStore.at(index);
|
||||
me.dataViewItems.push({el: $item, groupIndex: indexGroup, index: index});
|
||||
if (rec.get('tip')) {
|
||||
$item.tooltip({
|
||||
title: rec.get('tip'),
|
||||
placement: 'cursor',
|
||||
zIndex: me.tipZIndex
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
onClickItem: function(e) {
|
||||
if ( this.disabled ) return;
|
||||
|
||||
window._event = e; // for FireFox only
|
||||
|
||||
var groupIndex = $(e.currentTarget).closest('div.grouped-data').index(),
|
||||
itemIndex = $(e.currentTarget).closest('div.item').index();
|
||||
var index = _.findIndex(this.dataViewItems, function (item) {
|
||||
return (item.groupIndex === groupIndex && item.index === itemIndex);
|
||||
});
|
||||
var record = (index>=0) ? this.store.at(index) : null,
|
||||
view = (index>=0) ? this.dataViewItems[index] : null;
|
||||
if (!record || !view) return;
|
||||
|
||||
record.set({selected: true});
|
||||
var tip = view.el.data('bs.tooltip');
|
||||
if (tip) (tip.tip()).remove();
|
||||
|
||||
if (!this.isSuspendEvents) {
|
||||
this.trigger('item:click', this, view.el, record, e);
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
@ -1688,38 +1688,24 @@ define([
|
|||
|
||||
updateAutoshapeMenu: function (menuShape, collection) {
|
||||
var me = this;
|
||||
var onShowAfter = function(menu) {
|
||||
for (var i = 0; i < collection.length; i++) {
|
||||
var shapePicker = new Common.UI.DataViewSimple({
|
||||
el: $('.shapegroup-' + i, menu.items[i].$el),
|
||||
store: collection.at(i).get('groupStore'),
|
||||
parentMenu: menu.items[i].menu,
|
||||
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
|
||||
});
|
||||
shapePicker.on('item:click', function(picker, item, record, e) {
|
||||
if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
|
||||
if (record)
|
||||
me.fireEvent('insert:shape', [record.get('data').shapeType]);
|
||||
});
|
||||
}
|
||||
menu.off('show:after', onShowAfter);
|
||||
};
|
||||
menuShape.on('show:after', onShowAfter);
|
||||
|
||||
for (var i = 0; i < collection.size(); i++) {
|
||||
var group = collection.at(i);
|
||||
var menuitem = new Common.UI.MenuItem({
|
||||
template: _.template('<div id="id-toolbar-menu-insertshape" class="menu-insertshape"></div>')
|
||||
});
|
||||
menuShape.addItem(menuitem);
|
||||
|
||||
var menuitem = new Common.UI.MenuItem({
|
||||
caption: group.get('groupName'),
|
||||
menu: new Common.UI.Menu({
|
||||
menuAlign: 'tl-tr',
|
||||
items: [
|
||||
{template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
|
||||
]
|
||||
})
|
||||
});
|
||||
menuShape.addItem(menuitem);
|
||||
}
|
||||
var shapePicker = new Common.UI.DataViewShape({
|
||||
el: $('#id-toolbar-menu-insertshape'),
|
||||
itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
|
||||
groups: collection.toJSON(),
|
||||
parentMenu: menuShape,
|
||||
restoreHeight: true
|
||||
});
|
||||
shapePicker.on('item:click', function(picker, item, record, e) {
|
||||
if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
|
||||
if (record)
|
||||
me.fireEvent('insert:shape', [record.get('data').shapeType]);
|
||||
});
|
||||
},
|
||||
|
||||
updateAddSlideMenu: function(collection) {
|
||||
|
|
|
|||
|
|
@ -255,4 +255,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-shapes {
|
||||
width: 358px;
|
||||
padding-top: 8px;
|
||||
.menu-insertshape {
|
||||
margin: 5px 5px 0 10px;
|
||||
.group-description {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
.dataview .grouped-data .group-items-container .item {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue