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

add checkbox delay

Browse source
This commit is contained in:
OVSharova 2021-07-27 17:18:50 +03:00
parent 5aa980df91
commit 9cd64f4d33
4 changed files with 31 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/presentationeditor/main/app/controller/Transitions.js
View file

@ -70,7 +70,8 @@ define([
'transit:applytoall': _.bind(this.onApplyToAllClick,this), 'transit:applytoall': _.bind(this.onApplyToAllClick,this),
'transit:selecteffect': _.bind(this.onEffectSelect, this), 'transit:selecteffect': _.bind(this.onEffectSelect, this),
'transit:startonclick': _.bind(this.onStartOnClickChange,this), 'transit:startonclick': _.bind(this.onStartOnClickChange,this),
'transit:delay': _.bind(this.onDelayChange,this) 'transit:delay': _.bind(this.onDelayChange,this),
'transit:checkdelay': _.bind(this.onCheckDelayChange,this)
} }
}); });
@ -159,16 +160,14 @@ define([
transition.put_SlideAdvanceDuration(field.getNumberValue()*1000); transition.put_SlideAdvanceDuration(field.getNumberValue()*1000);
props.put_transition(transition); props.put_transition(transition);
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
this.onCheckDelayChange(field);
} }
}, },
onCheckDelayChange: function(field, newValue, oldValue, eOpts){ onCheckDelayChange: function(field, newValue, oldValue, eOpts){
//this.numDelay.setDisabled(field.getValue()!=='checked'); this.view.numDelay.setDisabled(field.getValue()!=='checked');
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
var props = new Asc.CAscSlideProps(); var props = new Asc.CAscSlideProps();
var transition = new Asc.CAscSlideTransition(); var transition = new Asc.CAscSlideTransition();
//transition.put_SlideAdvanceAfter(field.getValue()=='checked'); transition.put_SlideAdvanceAfter(field.getValue()=='checked');
transition.put_SlideAdvanceAfter(field.getNumberValue()!=0);
props.put_transition(transition); props.put_transition(transition);
this.api.SetSlideProps(props); this.api.SetSlideProps(props);
} }
@ -220,10 +219,8 @@ define([
if (me.btnParametrs.menu) { if (me.btnParametrs.menu) {
value = transition.get_TransitionOption(); value = transition.get_TransitionOption();
//if (this._state.EffectType !== value) {*/
me.setMenuParametrs(this._state.Effect, value); me.setMenuParametrs(this._state.Effect, value);
this._state.EffectType = value; this._state.EffectType = value;
//}
} }
value = transition.get_TransitionDuration(); value = transition.get_TransitionDuration();
@ -249,8 +246,8 @@ define([
} }
value = transition.get_SlideAdvanceAfter(); value = transition.get_SlideAdvanceAfter();
if (this._state.AdvanceAfter !== value) { if (this._state.AdvanceAfter !== value) {
//me.chDelay.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true); me.chDelay.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
//me.numDelay.setDisabled(this.chDelay.getValue() !== 'checked'); me.numDelay.setDisabled(me.chDelay.getValue() !== 'checked');
this._state.AdvanceAfter = value; this._state.AdvanceAfter = value;
} }
} }

11
apps/presentationeditor/main/app/template/Transitions.template
View file

@ -1,5 +1,5 @@
<section id="transitions-panel" class="panel" data-tab="transit"> <section id="transitions-panel" class="panel" data-tab="transit">
<div class="group flex small" id="transit-field-effects" style=" width: 63%; min-width: 300px; " ></div> <div class="group flex small" id="transit-field-effects" style=" width: 60%; min-width: 300px; " ></div>
<div class="group small"> <div class="group small">
<span class="btn-slot text x-huge" id="transit-button-parametrs"></span> <span class="btn-slot text x-huge" id="transit-button-parametrs"></span>
@ -17,11 +17,12 @@
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small" > <div class="group small" >
<div class="elset"> <div class="elset">
<span class="btn-slot text" id="transit-checkbox-slidenum"></span> <span class="btn-slot text" id="transit-checkbox-startonclick"></span>
</div> </div>
<div class="elset" style="width:110px;"> <div class="elset" style="width:120px;">
<span class="btn-slot text" id="label-delay" style="display: inline-block; float: left; font-size: 11px;text-align: left; margin-top: 4px" >Delay</span> <!-- <span class="btn-slot text" id="label-delay" style="display: inline-block; float: left; font-size: 11px;text-align: left; margin-top: 4px" >Delay</span> -->
<span id="transit-spin-delay" class="btn-slot text spinner" style="display: inline-block; float: right; width: 90px; "></span> <span id="transit-spin-delay" class="btn-slot text spinner" style="display: inline-block; float: right; "></span>
<span class="btn-slot text" id="transit-checkbox-delay" style="display: inline-block; float: left;"></span>
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>

26
apps/presentationeditor/main/app/view/Transitions.js
View file

@ -104,6 +104,12 @@ define([
me.fireEvent('transit:startonclick',[ me.chStartOnClick,me.chStartOnClick.value, me.chStartOnClick.lastValue]); me.fireEvent('transit:startonclick',[ me.chStartOnClick,me.chStartOnClick.value, me.chStartOnClick.lastValue]);
},me)); },me));
} }
if(me.chDelay)
{
me.chDelay.on('change',_.bind(function (e){
me.fireEvent('transit:checkdelay',[ me.chDelay,me.chDelay.value, me.chDelay.lastValue]);
},me));
}
} }
return { return {
@ -129,7 +135,7 @@ define([
{title: this.textUnCover, imageUrl:"btn-menu-comments", value: Asc.c_oAscSlideTransitionTypes.UnCover, id: Common.UI.getId()}, {title: this.textUnCover, imageUrl:"btn-menu-comments", value: Asc.c_oAscSlideTransitionTypes.UnCover, id: Common.UI.getId()},
{title: this.textCover, imageUrl:"btn-editheader", value: Asc.c_oAscSlideTransitionTypes.Cover, id: Common.UI.getId()}, {title: this.textCover, imageUrl:"btn-editheader", value: Asc.c_oAscSlideTransitionTypes.Cover, id: Common.UI.getId()},
{title: this.textClock, imageUrl:"btn-datetime", value: Asc.c_oAscSlideTransitionTypes.Clock, id: Common.UI.getId()}, {title: this.textClock, imageUrl:"btn-datetime", value: Asc.c_oAscSlideTransitionTypes.Clock, id: Common.UI.getId()},
{title: this.textZoom, imageUrl:"btn-insertequatio", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()} {title: this.textZoom, imageUrl:"btn-addslide", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()}
]; ];
this._arrEffectType = [ this._arrEffectType = [
@ -163,7 +169,7 @@ define([
beforeOpenHandler: function (e) { beforeOpenHandler: function (e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu, menu = cmp.openButton.menu,
minMenuColumn = 7; minMenuColumn = 4;
if (menu.cmpEl) { if (menu.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent(); var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
@ -182,7 +188,7 @@ define([
menu.menuAlign = 'tl-tl'; menu.menuAlign = 'tl-tl';
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1; var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1;
menu.setOffset(Math.min(offset, 0)); menu.setOffset(Math.min(offset, 0));
//columnCount * (itemWidth + itemMargin)
menu.cmpEl.css({ menu.cmpEl.css({
'width': columnCount * (itemWidth + itemMargin), 'width': columnCount * (itemWidth + itemMargin),
'min-height': cmp.cmpEl.height() 'min-height': cmp.cmpEl.height()
@ -228,14 +234,14 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtParametrs, caption: this.txtParametrs,
split: true, split: true,
iconCls: 'toolbar__icon btn-res-comment' iconCls: 'toolbar__icon icon btn-insertshape'
}); });
this.btnApplyToAll = new Common.UI.Button({ this.btnApplyToAll = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
caption: this.txtApplyToAll, caption: this.txtApplyToAll,
split: true, split: true,
iconCls: 'toolbar__icon btn-res-comment' iconCls: 'toolbar__icon btn-changeslide'
}); });
this.numDuration = new Common.UI.MetricSpinner({ this.numDuration = new Common.UI.MetricSpinner({
@ -261,10 +267,13 @@ define([
}); });
this.chStartOnClick = new Common.UI.CheckBox({ this.chStartOnClick = new Common.UI.CheckBox({
el: this.$el.find('#transit-checkbox-slidenum'), el: this.$el.find('#transit-checkbox-startonclick'),
labelText: this.strStartOnClick labelText: this.strStartOnClick
}); });
this.chDelay = new Common.UI.CheckBox({
el: this.$el.find('#transit-checkbox-delay'),
labelText: this.strDelay
});
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
}, },
@ -308,7 +317,7 @@ define([
this.btnApplyToAll && this.btnApplyToAll.render(this.$el.find('#transit-button-apply')); this.btnApplyToAll && this.btnApplyToAll.render(this.$el.find('#transit-button-apply'));
this.renderComponent('#transit-spin-duration', this.numDuration); this.renderComponent('#transit-spin-duration', this.numDuration);
this.renderComponent('#transit-spin-delay', this.numDelay); this.renderComponent('#transit-spin-delay', this.numDelay);
this.renderComponent('#transit-checkbox-slidenum', this.chStartOnClick); this.renderComponent('#transit-checkbox-startonclick', this.chStartOnClick);
this.$el.find("#label-duration").innerText=this.strDuration; this.$el.find("#label-duration").innerText=this.strDuration;
this.$el.find("#label-delay").innerText=this.strDelay; this.$el.find("#label-delay").innerText=this.strDelay;
return this.$el; return this.$el;
@ -393,6 +402,7 @@ define([
txtParametrs: 'Parametrs', txtParametrs: 'Parametrs',
txtApplyToAll: 'Apply to All Slides', txtApplyToAll: 'Apply to All Slides',
strDuration: 'Duration', strDuration: 'Duration',
strDelay: 'Delay',
strStartOnClick: 'Start On Click', strStartOnClick: 'Start On Click',
textNone: 'None', textNone: 'None',

6
apps/presentationeditor/main/resources/less/Transitions.less
View file

@ -2,10 +2,6 @@
input { input {
text-align: left; text-align: left;
} }
.dropdown-menu li a{
padding: 7px 20px;
}
.item { .item {
background: transparent; background: transparent;
@ -21,7 +17,7 @@
border-color: @border-preview-select-ie; border-color: @border-preview-select-ie;
border-color: @border-preview-select; border-color: @border-preview-select;
} }
//menu-picker-container
.style{ .style{
background: transparent; background: transparent;
} }