[PE] Change shape menu in toolbar (bug 43485)

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

@@ -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);
+            }
+        }
+    }));
+
 });

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

@@ -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 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) {

apps/presentationeditor/main/resources/less/app.less

@@ -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;
+    }
 }