[PE] Change shape menu in toolbar (bug 43485)
This commit is contained in:
parent
a7d388b996
commit
d0810f4363
|
@ -874,7 +874,8 @@ define([
|
||||||
this.cmpEl.html(this.template({
|
this.cmpEl.html(this.template({
|
||||||
items: me.store.toJSON(),
|
items: me.store.toJSON(),
|
||||||
itemTemplate: me.itemTemplate,
|
itemTemplate: me.itemTemplate,
|
||||||
style: me.style
|
style: me.style,
|
||||||
|
options: me.options
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
var modalParents = this.cmpEl.closest('.asc-window');
|
var modalParents = this.cmpEl.closest('.asc-window');
|
||||||
|
@ -1257,4 +1258,72 @@ define([
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 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) {
|
updateAutoshapeMenu: function (menuShape, collection) {
|
||||||
var me = this;
|
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 menuitem = new Common.UI.MenuItem({
|
||||||
var group = collection.at(i);
|
template: _.template('<div id="id-toolbar-menu-insertshape" class="menu-insertshape"></div>')
|
||||||
|
});
|
||||||
|
menuShape.addItem(menuitem);
|
||||||
|
|
||||||
var menuitem = new Common.UI.MenuItem({
|
var shapePicker = new Common.UI.DataViewShape({
|
||||||
caption: group.get('groupName'),
|
el: $('#id-toolbar-menu-insertshape'),
|
||||||
menu: new Common.UI.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>'),
|
||||||
menuAlign: 'tl-tr',
|
groups: collection.toJSON(),
|
||||||
items: [
|
parentMenu: menuShape,
|
||||||
{template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
|
restoreHeight: true
|
||||||
]
|
});
|
||||||
})
|
shapePicker.on('item:click', function(picker, item, record, e) {
|
||||||
});
|
if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
|
||||||
menuShape.addItem(menuitem);
|
if (record)
|
||||||
}
|
me.fireEvent('insert:shape', [record.get('data').shapeType]);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
updateAddSlideMenu: function(collection) {
|
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