[PE] Add animation effect

apps/presentationeditor/main/app/controller/Animation.js

@@ -140,9 +140,9 @@ define([
             })).show();
         },
 
-        onAddAnimation: function(combo, record) {
+        onAddAnimation: function(picker, record) {
             var type = record.get('value');
-            var group = Common.define.effectData.getEffectGroupData().findWhere({id: record.group}).value;
+            var group = _.findWhere(Common.define.effectData.getEffectGroupData(),{id: record.get('group')}).value;
             this.addNewEffect(type, group);
             this._state.EffectGroups = group;
             this._state.Effect = type;

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

@@ -80,11 +80,6 @@ define([
                     me.fireEvent('animation:animationpane', [me.btnAnimationPane]);
                 }, me));
             }
-            if (me.btnAddAnimation) {
-                me.btnAddAnimation.on('click', _.bind(function(btn) {
-                    me.fireEvent('animation:addanimation', [me.btnAddAnimation]);
-                }, me));
-            }
 
             if (me.numDuration) {
                 me.numDuration.on('change', function(bth) {
@@ -217,7 +212,6 @@ define([
                 this.btnAddAnimation = new Common.UI.Button({
                     cls: 'btn-toolbar  x-huge  icon-top',
                     caption: this.txtAddEffect,
-                    split: true,
                     iconCls: 'toolbar__icon icon btn-addslide',
                     menu: true,
                     //lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
@@ -367,8 +361,39 @@ define([
                 (new Promise(function (accept, reject) {
                     accept();
                 })).then(function() {
-
                     setEvents.call(me);
+
+                    me.btnAddAnimation.setMenu( new Common.UI.Menu({
+                        style: 'width: 403px;padding-top: 12px;',
+                        items: [
+                            {template: _.template('<div id="id-toolbar-menu-addanimation" class="menu-animation"></div>')}
+                        ]
+                    }));
+
+                    var itemWidth = 87,
+                        itemHeight = 40;
+                    var onShowBefore = function(menu) {
+                        var picker = new Common.UI.DataView({
+                            el: $('#id-toolbar-menu-addanimation'),
+                            parentMenu: menu,
+                            showLast: false,
+                            restoreHeight: 465,
+                            groups: new Common.UI.DataViewGroupStore(Common.define.effectData.getEffectGroupData()),
+                            store: new Common.UI.DataViewStore(Common.define.effectData.getEffectData()),
+                            itemTemplate: _.template([
+                                '<div  class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
+                                    '<div class = "icon toolbar__icon <%= iconCls %>"></div>',
+                                    '<div class = "caption"><%= displayValue %></div>',
+                                '</div>'
+                            ].join(''))
+                        });
+                        picker.on('item:click', function (picker, item, record, e) {
+                            if (record)
+                                me.fireEvent('animation:addanimation', [picker, record]);
+                        });
+                        menu.off('show:before', onShowBefore);
+                    };
+                    me.btnAddAnimation.menu.on('show:before', onShowBefore);
                 });
             },
 

apps/presentationeditor/main/resources/less/animation.less

@@ -35,18 +35,49 @@
       }
     }
     .menu-picker-container .dataview {
-      padding: 10px 0 0;
+      padding: 10px 0 0 2px;
+
       .group-description {
         padding: 3px 0 3px 10px;
         font-weight: bold;
       }
 
       .group-items-container > div {
-        margin: 0 -1px -1px 0;
+        margin: 0;
-        margin: 0 calc(-1px / var(--pixel-ratio-factor, 1)) 0;
       }
     }
   }
+   .menu-animation {
+     margin: 0 5px 0 2px;
+
+     .group-description {
+       padding: 3px 0 3px 10px;
+       font-weight: bold;
+     }
+
+     .group-items-container {
+       float: left;
+       position: relative;
+     }
+     .item {
+       padding: 2px;
+       margin:0 ;
+       border: calc(2*@scaled-one-px-value-ie) solid transparent;
+       border: calc(@scaled-two-px-value) solid transparent;
+       .box-shadow(none);
+
+       &:hover{
+         border-color: @border-preview-hover-ie;
+         border-color: @border-preview-hover;
+       }
+
+       &.selected
+       {
+         border-color: @border-preview-select-ie;
+         border-color: @border-preview-select;
+       }
+     }
+   }
 
   label {
     margin-right: 10px;