Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE] Add animation effect

Browse source
This commit is contained in:
Julia Radzhabova 2021-12-03 01:36:15 +03:00
parent 125ff2bc5f
commit bac52377a5
3 changed files with 68 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/presentationeditor/main/app/controller/Animation.js
View file

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

39
apps/presentationeditor/main/app/view/Animation.js
View file

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

37
apps/presentationeditor/main/resources/less/animation.less
View file

@ -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 calc(-1px / var(--pixel-ratio-factor, 1)) 0;
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;