diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js index fb0b1af65..6597591ba 100644 --- a/apps/common/main/lib/component/ComboDataView.js +++ b/apps/common/main/lib/component/ComboDataView.js @@ -81,6 +81,7 @@ define([ this.style = this.options.style; this.hint = this.options.hint; this.store = this.options.store || new Common.UI.DataViewStore(); + this.groups = this.options.groups; this.itemWidth = this.options.itemWidth; this.itemHeight = this.options.itemHeight; this.menuMaxHeight = this.options.menuMaxHeight; @@ -92,18 +93,19 @@ define([ this.needFillComboView = false; this.minWidth = this.options.minWidth; this.delayRenderTips = this.options.delayRenderTips || false; + this.itemTemplate = this.options.itemTemplate || _.template([ + '
', + '', + '<% if (typeof title !== "undefined") {%>', + '<%= title %>', + '<% } %>', + '
' + ].join('')); this.fieldPicker = new Common.UI.DataView({ cls: 'field-picker', allowScrollbar: false, - itemTemplate : _.template([ - '
', - '', - '<% if (typeof title !== "undefined") {%>', - '<%= title %>', - '<% } %>', - '
' - ].join('')), + itemTemplate : this.itemTemplate, delayRenderTips: this.delayRenderTips }); @@ -128,15 +130,9 @@ define([ restoreHeight: this.menuMaxHeight, style: 'max-height: '+this.menuMaxHeight+'px;', enableKeyEvents: this.options.enableKeyEvents, + groups: this.groups, store: this.store, - itemTemplate : _.template([ - '
', - '', - '<% if (typeof title !== "undefined") {%>', - '<%= title %>', - '<% } %>', - '
' - ].join('')), + itemTemplate : this.itemTemplate, delayRenderTips: this.delayRenderTips }); diff --git a/apps/common/main/lib/util/define.js b/apps/common/main/lib/util/define.js index 536dc359a..f39ffa03d 100644 --- a/apps/common/main/lib/util/define.js +++ b/apps/common/main/lib/util/define.js @@ -790,11 +790,10 @@ define(function(){ 'use strict'; getEffectGroupData: function () { return [ - {id: 'menu-effect-group-entrance', value: AscFormat.PRESET_CLASS_ENTR, displayValue: this.textEntrance}, - {id: 'menu-effect-group-emphasis', value: AscFormat.PRESET_CLASS_EMPH, displayValue: this.textEmphasis}, - {id: 'menu-effect-group-exit', value: AscFormat.PRESET_CLASS_EXIT, displayValue: this.textExit}, - {id: 'menu-effect-group-path', value: AscFormat.PRESET_CLASS_PATH, displayValue: this.textPath} - + {id: 'menu-effect-group-entrance', value: AscFormat.PRESET_CLASS_ENTR, caption: this.textEntrance}, + {id: 'menu-effect-group-emphasis', value: AscFormat.PRESET_CLASS_EMPH, caption: this.textEmphasis}, + {id: 'menu-effect-group-exit', value: AscFormat.PRESET_CLASS_EXIT, caption: this.textExit}, + {id: 'menu-effect-group-path', value: AscFormat.PRESET_CLASS_PATH, caption: this.textPath} ]; }, @@ -845,32 +844,32 @@ define(function(){ 'use strict'; {group: 'menu-effect-group-exit', value: AscFormat.EXIT_ZOOM, iconCls: 'transition-push', displayValue: this.textZoom}, {group: 'menu-effect-group-exit', value: AscFormat.EXIT_BASIC_SWIVEL, iconCls: 'transition-push', displayValue: this.textSwivel}, {group: 'menu-effect-group-exit', value: AscFormat.EXIT_BOUNCE, iconCls: 'transition-push', displayValue: this.textBounce}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_DOWN, iconCls: 'transition-push', displayValue: this.textDown}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_LEFT, iconCls: 'transition-push', displayValue: this.textLeft}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_RIGHT, iconCls: 'transition-push', displayValue: this.textRight}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_UP, iconCls: 'transition-push', displayValue: this.textUp}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_ARC_DOWN, iconCls: 'transition-push', displayValue: this.textArcDown}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_ARC_LEFT, iconCls: 'transition-push', displayValue: this.textArcLeft}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_ARC_RIGHT, iconCls: 'transition-push', displayValue: this.textArcRight}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_ARC_UP, iconCls: 'transition-push', displayValue: this.textArcUp}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_TURN_DOWN, iconCls: 'transition-push', displayValue: this.textTurnDown}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_TURN_DOWN_RIGHT, iconCls: 'transition-push', displayValue: this.textTurnDownRight}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_TURN_UP, iconCls: 'transition-push', displayValue: this.textTurnUp}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_TURN_UP_RIGHT, iconCls: 'transition-push', displayValue: this.textTurnUpRight}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_CIRCLE, iconCls: 'transition-push', displayValue: this.textCircle}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_DIAMOND, iconCls: 'transition-push', displayValue: this.textDiamond}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_EQUAL_TRIANGLE, iconCls: 'transition-push', displayValue: this.textEqualTriangle}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_HEXAGON, iconCls: 'transition-push', displayValue: this.textHexagon}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_OCTAGON, iconCls: 'transition-push', displayValue: this.textOctagon}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_PARALLELOGRAM, iconCls: 'transition-push', displayValue: this.textParallelogram}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_PENTAGON, iconCls: 'transition-push', displayValue: this.textPentagon}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_RIGHT_TRIANGLE, iconCls: 'transition-push', displayValue: this.textRightTriangle}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_SQUARE, iconCls: 'transition-push', displayValue: this.textSquare}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_TRAPEZOID, iconCls: 'transition-push', displayValue: this.textTrapezoid}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_HORIZONTAL_FIGURE_8_FOUR, iconCls: 'transition-push', displayValue: this.textHorizontalFigure}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_VERTICAL_FIGURE_8, iconCls: 'transition-push', displayValue: this.textVerticalFigure}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_LOOP_DE_LOOP, iconCls: 'transition-push', displayValue: this.textLoopDeLoop}, - {group: 'menu-effect-group-motion', value: AscFormat.MOTION_CUSTOM_PATH, iconCls: 'transition-push', displayValue: this.textCustomPath} + {group: 'menu-effect-group-path', value: AscFormat.MOTION_DOWN, iconCls: 'transition-push', displayValue: this.textDown}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_LEFT, iconCls: 'transition-push', displayValue: this.textLeft}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_RIGHT, iconCls: 'transition-push', displayValue: this.textRight}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_UP, iconCls: 'transition-push', displayValue: this.textUp}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_ARC_DOWN, iconCls: 'transition-push', displayValue: this.textArcDown}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_ARC_LEFT, iconCls: 'transition-push', displayValue: this.textArcLeft}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_ARC_RIGHT, iconCls: 'transition-push', displayValue: this.textArcRight}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_ARC_UP, iconCls: 'transition-push', displayValue: this.textArcUp}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_TURN_DOWN, iconCls: 'transition-push', displayValue: this.textTurnDown}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_TURN_DOWN_RIGHT, iconCls: 'transition-push', displayValue: this.textTurnDownRight}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_TURN_UP, iconCls: 'transition-push', displayValue: this.textTurnUp}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_TURN_UP_RIGHT, iconCls: 'transition-push', displayValue: this.textTurnUpRight}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_CIRCLE, iconCls: 'transition-push', displayValue: this.textCircle}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_DIAMOND, iconCls: 'transition-push', displayValue: this.textDiamond}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_EQUAL_TRIANGLE, iconCls: 'transition-push', displayValue: this.textEqualTriangle}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_HEXAGON, iconCls: 'transition-push', displayValue: this.textHexagon}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_OCTAGON, iconCls: 'transition-push', displayValue: this.textOctagon}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_PARALLELOGRAM, iconCls: 'transition-push', displayValue: this.textParallelogram}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_PENTAGON, iconCls: 'transition-push', displayValue: this.textPentagon}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_RIGHT_TRIANGLE, iconCls: 'transition-push', displayValue: this.textRightTriangle}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_SQUARE, iconCls: 'transition-push', displayValue: this.textSquare}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_TRAPEZOID, iconCls: 'transition-push', displayValue: this.textTrapezoid}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_HORIZONTAL_FIGURE_8_FOUR, iconCls: 'transition-push', displayValue: this.textHorizontalFigure}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_VERTICAL_FIGURE_8, iconCls: 'transition-push', displayValue: this.textVerticalFigure}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_LOOP_DE_LOOP, iconCls: 'transition-push', displayValue: this.textLoopDeLoop}, + {group: 'menu-effect-group-path', value: AscFormat.MOTION_CUSTOM_PATH, iconCls: 'transition-push', displayValue: this.textCustomPath} ]; }, diff --git a/apps/presentationeditor/main/app/controller/Animation.js b/apps/presentationeditor/main/app/controller/Animation.js index e2a084f86..dfa5e5763 100644 --- a/apps/presentationeditor/main/app/controller/Animation.js +++ b/apps/presentationeditor/main/app/controller/Animation.js @@ -72,7 +72,7 @@ define([ 'animation:addanimation': _.bind(this.onAddAnimation, this), 'animation:startselect': _.bind(this.onStartSelect, this), 'animation:checkrewind': _.bind(this.onCheckRewindChange,this), - 'animation:repeat': _.bind(this.onRepeatChange, this), + 'animation:repeat': _.bind(this.onRepeatChange, this) }, 'Toolbar': { 'tab:active': _.bind(this.onActiveTab, this) @@ -136,11 +136,10 @@ 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}).get('value'); + var group = _.findWhere(Common.define.effectData.getEffectGroupData(), {id: record.get('group')}).value; this.addNewEffect(type, group, false); - }, addNewEffect: function (type, group, replace) { @@ -325,7 +324,6 @@ define([ item = me.cmbStart.store.findWhere({value: this._state.StartSelect}); me.cmbStart.selectRecord(item); me.chRewind.setValue(this._state.Rewind, true); - } }, PE.Controllers.Animation || {})); diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js index 4f6f96c5c..7b6c5fead 100644 --- a/apps/presentationeditor/main/app/view/Animation.js +++ b/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) { @@ -133,12 +128,22 @@ define([ var _set = PE.enumLock; this.lockedControls = []; - this._arrEffectName = [{group:'none', value: AscFormat.ANIM_PRESET_NONE, iconCls: 'transition-none', displayValue: this.textNone}]; - Array.prototype.push.apply( this._arrEffectName, Common.define.effectData.getEffectData()); + this._arrEffectName = [{group:'none', value: AscFormat.ANIM_PRESET_NONE, iconCls: 'transition-none', displayValue: this.textNone}].concat(Common.define.effectData.getEffectData()); + this._arrEffectOptions = []; + var itemWidth = 87, + itemHeight = 40; this.listEffects = new Common.UI.ComboDataView({ - cls: 'combo-styles', - itemWidth: 87, - itemHeight: 40, + cls: 'combo-styles animation', + itemWidth: itemWidth, + itemHeight: itemHeight, + itemTemplate: _.template([ + '
', + '
', + '
<%= displayValue %>
', + '
' + ].join('')), + groups: new Common.UI.DataViewGroupStore([{id: 'none', value: -10, caption: this.textNone}].concat(Common.define.effectData.getEffectGroupData())), + store: new Common.UI.DataViewStore(this._arrEffectName), enableKeyEvents: true, //lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock], dataHint: '1', @@ -167,15 +172,6 @@ define([ } }); this.lockedControls.push(this.listEffects); - this.listEffects.menuPicker.store.add(this._arrEffectName); - - this.listEffects.fieldPicker.itemTemplate = _.template([ - '
', - '
', - '
<%= displayValue %>
', - '
' - ].join('')); - this.listEffects.menuPicker.itemTemplate = this.listEffects.fieldPicker.itemTemplate; this.btnPreview = new Common.UI.Button({ cls: 'btn-toolbar', // x-huge icon-top', @@ -216,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], @@ -331,8 +326,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('')} + ] + })); + + 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([ + '
', + '
', + '
<%= displayValue %>
', + '
' + ].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); }); }, @@ -420,7 +446,6 @@ define([ this.btnParameters.menu.addItem(opt); (opt.value==option) && (selectedElement = this.btnParameters.menu.items[index]); }, this); - } else { this.btnParameters.menu.items.forEach(function (opt) { diff --git a/apps/presentationeditor/main/resources/less/animation.less b/apps/presentationeditor/main/resources/less/animation.less index 7167833f6..6d1d0de60 100644 --- a/apps/presentationeditor/main/resources/less/animation.less +++ b/apps/presentationeditor/main/resources/less/animation.less @@ -34,7 +34,50 @@ } } } + .menu-picker-container .dataview { + padding: 10px 0 0 2px; + + .group-description { + padding: 3px 0 3px 10px; + font-weight: bold; + } + + .group-items-container > div { + margin: 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; @@ -58,10 +101,6 @@ } } -.caption{ - line-height: 18px; - font-size: 11px; -} .btn_item { color: @text-normal-ie; color: @text-normal; @@ -76,4 +115,12 @@ margin-top: -2px; } + .caption{ + line-height: 18px; + font-size: 11px; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + text-align: center; + } } \ No newline at end of file