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