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

New variant

Browse source
This commit is contained in:
OVSharova 2021-10-29 04:15:38 +03:00
parent b9a3131e2c
commit 6c719bcf17
6 changed files with 174 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -157,7 +157,6 @@ define([
onFocusObject: function(selectedObjects) {
var me = this;
for (var i = 0; i<selectedObjects.length; i++) {
var eltype = selectedObjects[i].get_ObjectType();
@ -232,6 +231,10 @@ define([
item = me.cmbStart.store.findWhere({value: this._state.StartSelect});
me.cmbStart.selectRecord(item ? item : me.cmbStart.items[0]);
this.view.setWidthRow();
}
}, PE.Controllers.Animation || {}));

47
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -186,43 +186,56 @@
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text " id="animation-button-add-effect"></span>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="animation-button-preview"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small" style = "min-width: 130px;">
<div class="elset font-normal">
<label id="animation-label-start"></label>
<div class="btn-slot" style="float: right; width: 76px; " id="animation-start"></div>
</div>
<div class="elset">
<span class="btn-slot text " id="animation-button-pane"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small" style = "min-width: 122px;">
<div class="group small" >
<div class="elset font-normal">
<label id="animation-delay"></label>
<span id="animation-spin-delay" class="btn-slot text spinner" style="float: right"></span>
<label id="animation-label-start"></label>
<div class="btn-slot" style="width: 96px; " id="animation-start"></div>
</div>
<div class="elset font-normal">
<label id="animation-delay"></label>
<span id="animation-spin-delay" class="btn-slot text spinner" ></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset font-normal">
<label id="animation-duration"></label>
<span id="animation-spin-duration" class="btn-slot text spinner" style="float: right"></span>
<span id="animation-spin-duration" class="btn-slot text spinner" ></span>
</div>
<div class="elset font-normal">
<label id="animation-label-trigger"></label>
<div class="btn-slot" style="width: 82px; " id="animation-trigger"></div>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset font-normal">
<label id="animation-repeat"></label>
<span id="animation-spin-repeat" class="btn-slot text spinner" ></span>
</div>
<div class="elset font-normal">
<span class="btn-slot text" id="animation-checkbox-rewind"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small" style = "min-width: 122px;">
<div class="elset font-normal">
<span class="btn-slot text" id="animation-checkbox-rewind"></span>
</div>
<div class="elset font-normal">
<label id="animation-repeat"></label>
<span id="animation-spin-repeat" class="btn-slot text spinner" ></span>
<label id="animation-repeat2"></label>
<span id="animation-spin-repeat2" class="btn-slot text spinner" ></span>
</div>
<div class="elset font-normal"></div>
</div>
</section>

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

@ -221,14 +221,15 @@ define([
this.lockedControls.push(this.btnAnimationPane);
this.btnAddAnimation = new Common.UI.Button({
cls: 'btn-toolbar',
cls: 'btn-toolbar x-huge icon-top',
caption: this.txtAddEffect,
split: true,
iconCls: 'toolbar__icon btn-zoomup',
iconCls: 'toolbar__icon icon btn-addslide',
menu: true,
//lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'medium'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.lockedControls.push(this.btnAddAnimation);
@ -247,6 +248,20 @@ define([
});
this.lockedControls.push(this.numDuration);
this.cmbTrigger = new Common.UI.ComboBox({
cls: 'input-group-nr',
menuStyle: 'width: 150px;',
//lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
data: [
{value: 0, displayValue: '1-1'},
{value: 1, displayValue: '2-2'},
{value: 2, displayValue: '3-3'}
],
dataHint: '1',
dataHintDirection: 'top'
});
this.lockedControls.push(this.cmbTrigger);
this.numDelay = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-delay'),
step: 1,
@ -265,7 +280,7 @@ define([
this.cmbStart = new Common.UI.ComboBox({
cls: 'input-group-nr',
menuStyle: 'width: 150px;',
lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
//lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
data: [
{value: 0, displayValue: this.textStartOnClick},
{value: 1, displayValue: this.textStartBeforePrevious},
@ -289,15 +304,30 @@ define([
this.numRepeat = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-repeat'),
step: 1,
width: 52,
width: 88,
value: '',
maxValue: 300,
maxValue: 1000,
minValue: 0,
//lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.lockedControls.push(this.numRepeat);
this.numRepeat2 = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-repeat2'),
step: 1,
width: 88,
value: '',
maxValue: 1000,
minValue: 0,
//lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.lockedControls.push(this.numRepeat2);
Common.Utils.lockControls(PE.enumLock.disableOnStart, true, {array: this.lockedControls});
@ -305,6 +335,8 @@ define([
this.$el.find('#animation-delay').text(this.strDelay);
this.$el.find('#animation-label-start').text(this.strStart);
this.$el.find('#animation-repeat').text(this.strRepeat);
this.$el.find('#animation-repeat2').text(this.strRepeat);
this.$el.find('#animation-label-trigger').text(this.strTrigger);
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
},
@ -367,23 +399,42 @@ define([
this.btnParameters && this.btnParameters.render(this.$el.find('#animation-button-parameters'));
this.btnAnimationPane && this.btnAnimationPane.render(this.$el.find('#animation-button-pane'));
this.btnAddAnimation && this.btnAddAnimation.render(this.$el.find('#animation-button-add-effect'));
this.cmbStart && this.cmbStart.render(this.$el.find('#animation-start'))
this.cmbStart && this.cmbStart.render(this.$el.find('#animation-start'));
this.cmbTrigger && this.cmbTrigger.render(this.$el.find('#animation-trigger'));
this.renderComponent('#animation-spin-duration', this.numDuration);
this.renderComponent('#animation-spin-delay', this.numDelay);
this.renderComponent('#animation-spin-repeat', this.numRepeat);
this.renderComponent('#animation-spin-repeat2', this.numRepeat2);
this.$el.find("#animation-duration").innerText = this.strDuration;
this.$el.find("#animation-delay").innerText = this.strDelay;
this.$el.find("#animation-label-start").innerText = this.strStart;
this.$el.find("#animation-label-trigger").innerText = this.strTrigger;
this.$el.find("#animation-repeat").innerText = this.strRepeat;
this.$el.find("#animation-repeat2").innerText = this.strRepeat;
this.widthRow(this.$el.find("#animation-label-start"), this.$el.find("#animation-delay"));
return this.$el;
},
renderComponent: function (compid, obj)
{
renderComponent: function (compid, obj) {
var element = this.$el.find(compid);
element.parent().append(obj.el);
},
widthRow: function (obj1, obj2, wd) {
if(wd) return wd;
var w1 = obj1.width(),
w2 = obj2.width();
if(!w1 || !w2) return 0;
if(w1>w2) {
obj2.css('width', w1);
return w1;
}
else {
obj1.css('width', w2);
return w2;
}
},
show: function () {
Common.UI.BaseView.prototype.show.call(this);
this.fireEvent('show', this);
@ -401,6 +452,11 @@ define([
}, this);
},
setWidthRow: function () {
this.widthStart = this.widthRow(this.$el.find("#animation-label-start"), this.$el.find("#animation-delay"),this.widthStart);
this.widthDuration = this.widthRow(this.$el.find("#animation-duration"), this.$el.find("#animation-label-trigger"),this.widthDuration);
},
setMenuParameters: function (effect, value)
{
var minMax = [-1, -1];
@ -469,6 +525,7 @@ define([
strStart: 'Start',
strRewind: 'Rewind',
strRepeat: 'Repeat',
strTrigger: 'Trigger',
textStartOnClick: 'On Click',
textStartBeforePrevious: 'Before Previous',

66
apps/presentationeditor/main/resources/less/animation.less Normal file
View file

@ -0,0 +1,66 @@
#animation-panel {
.item {
background: transparent;
border-color: transparent;
.box-shadow(none);
border-radius: @scaled-one-px-value-ie;
border-radius: @scaled-one-px-value;
border-width: calc(2*@scaled-one-px-value-ie) ;
border-width: calc(@scaled-two-px-value);
&:hover{
border-color: @border-preview-hover-ie;
border-color: @border-preview-hover;
}
&.selected
{
border-color: @border-preview-select-ie;
border-color: @border-preview-select;
}
.style{
background: transparent;
}
}
.combo-dataview
{
&.disabled {
.item {
&:hover:not(.selected) {
border-color: transparent;
}
}
}
}
/*.spinner
{
margin-left: 10px;
}*/
label {
margin-right: 10px;
}
}
.btn_item {
color: @text-normal-ie;
color: @text-normal;
display: inline-flex;
flex-direction: column;
align-items: center;
.icon:not(svg) {
width: @x-huge-btn-icon-size;
height: @x-huge-btn-icon-size;
min-width: 0;
margin-top: -2px;
}
.caption{
line-height: 18px;
font-size: 11px;
}
}

3
apps/presentationeditor/main/resources/less/app.less
View file

@ -132,7 +132,8 @@
@import "rightmenu.less";
@import "advanced-settings.less";
@import "document-preview.less";
@import "transitions";
@import "transitions.less";
@import "animation.less";
@import "sprites/iconssmall@1x";
@import "sprites/iconsbig@1x";

2
apps/presentationeditor/main/resources/less/transitions.less
View file

@ -1,4 +1,4 @@
#transitions-panel,#animation-panel {
#transitions-panel {
.item {
background: transparent;
border-color: transparent;