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

Merge branch 'feature/animation_tab' of https://github.com/ONLYOFFICE/web-apps into feature/animation_tab

Browse source
This commit is contained in:
OVSharova 2021-12-07 08:55:22 +03:00
parent 6cf34a030d 920d8a5b4f
commit 3072b41aa1
8 changed files with 136 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
apps/common/main/resources/less/combo-dataview.less
View file

@ -342,4 +342,89 @@
.combo-slicer-style {
.combo-textart(60px, 4px);
}
.combo-transitions {
@combo-dataview-height: 46px;
@combo-dataview-height-calc: calc(40px + 2 * @scaled-two-px-value + 2 * @scaled-one-px-value);
@combo-dataview-item-margins: @scaled-two-px-value;
@combo-dataview-button-width: 15px;
height: @combo-dataview-height;
height: @combo-dataview-height-calc;
.view {
margin-right: -@combo-dataview-button-width;
padding-right: @combo-dataview-button-width;
}
.view .dataview, .dropdown-menu {
padding: 0;
}
.button {
width: @combo-dataview-button-width;
height: @combo-dataview-height;
height: @combo-dataview-height-calc;
}
.item {
padding: 0px;
margin: @combo-dataview-item-margins 0 0 @combo-dataview-item-margins;
.box-shadow(none);
}
.menu-picker-container {
.group-description {
padding: 3px 0 3px 10px;
font-weight: bold;
}
.group-items-container .item {
box-shadow: none;
margin: @scaled-two-px-value 0 0 @scaled-two-px-value;
&:last-child {
margin-bottom: @combo-dataview-item-margins;
}
}
.last-item {
margin-bottom: @combo-dataview-item-margins;
}
}
&.disabled {
.item {
&:hover:not(.selected) {
.box-shadow(none);
}
}
}
}
.combo-transitions, .menu-animation {
.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;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
padding: 0 2px;
}
}
}

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

@ -73,6 +73,7 @@ define([
'animation:startselect': _.bind(this.onStartSelect, this),
'animation:checkrewind': _.bind(this.onCheckRewindChange,this),
'animation:repeat': _.bind(this.onRepeatChange, this),
'animation:additional': _.bind(this.onAnimationAdditional, this),
'animation:trigger': _.bind(this.onTriggerClick, this),
'animation:triggerclickof': _.bind(this.onTriggerClickOfClick, this)
},
@ -138,6 +139,13 @@ define([
})).show();
},
onAnimationAdditional: function() {
(new PE.Views.AnimationDialog({
api : this.api,
activeEffect : this._state.Effect
})).show();
},
onAddAnimation: function(picker, record) {
var type = record.get('value');
var group = _.findWhere(Common.define.effectData.getEffectGroupData(), {id: record.get('group')}).value;
@ -343,7 +351,6 @@ define([
},
setSettings: function () {
var me = this.view;
var item;
this.setTriggerList();

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

@ -152,7 +152,7 @@
<div class="group small">
<div class="elset font-normal">
<label id="transit-duration"></label>
<span id="transit-spin-duration" class="btn-slot text spinner"></span>
<span id="transit-spin-duration" class="btn-slot text spinner" style="margin-left: 10px;"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="transit-button-preview"></span>
@ -165,7 +165,7 @@
</div>
<div class="elset font-normal">
<span class="btn-slot text" id="transit-checkbox-delay"></span>
<div id="transit-spin-delay" class="btn-slot text spinner"></div>
<div id="transit-spin-delay" class="btn-slot text spinner" style="margin-left: 10px;"></div>
</div>
</div>
<div class="separator long"></div>

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

@ -61,6 +61,9 @@ define([
me.listEffects.on('click', _.bind(function (combo, record) {
me.fireEvent('animation:selecteffect', [combo, record]);
}, me));
me.listEffectsMore.on('click', _.bind(function () {
me.fireEvent('animation:additional');
}, me));
}
if (me.btnPreview) {
@ -136,7 +139,6 @@ define([
ClickOf: 1
}
Common.UI.BaseView.prototype.initialize.call(this, options);
this.toolbar = options.toolbar;
this.appConfig = options.mode;
@ -148,8 +150,11 @@ define([
this._arrEffectOptions = [];
var itemWidth = 87,
itemHeight = 40;
this.listEffectsMore = new Common.UI.MenuItem({
caption: this.textMoreEffects
});
this.listEffects = new Common.UI.ComboDataView({
cls: 'combo-styles animation',
cls: 'combo-transitions combo-animation',
itemWidth: itemWidth,
itemHeight: itemHeight,
itemTemplate: _.template([
@ -361,7 +366,7 @@ define([
setEvents.call(me);
me.btnAddAnimation.setMenu( new Common.UI.Menu({
style: 'width: 403px;padding-top: 12px;',
style: 'width: 370px;padding-top: 12px;',
items: [
{template: _.template('<div id="id-toolbar-menu-addanimation" class="menu-animation"></div>')}
]
@ -437,8 +442,6 @@ define([
}, this);
},
setMenuParameters: function (effectId, option)
{
var effect = this.listEffects.store.findWhere({value: effectId});
@ -490,8 +493,9 @@ define([
textStartAfterPrevious: 'After Previous',
textOnClickSequence: 'On Click Sequence',
textOnClickOf: 'On Click of',
textNone: 'None'
textNone: 'None',
textMoreEffects: 'Show More Effects'
}
}()), PE.Views.Animation || {}));
});
});

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

@ -133,11 +133,14 @@ define([
{title: this.textUnCover, imageUrl: "transition-uncover", value: Asc.c_oAscSlideTransitionTypes.UnCover, id: Common.UI.getId()},
{title: this.textCover, imageUrl: "transition-cover", value: Asc.c_oAscSlideTransitionTypes.Cover, id: Common.UI.getId()},
{title: this.textClock, imageUrl: "transition-clock", value: Asc.c_oAscSlideTransitionTypes.Clock, id: Common.UI.getId()},
{title: this.textZoom, imageUrl: "transition-zoom", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()}
{title: this.textZoom, imageUrl: "transition-zoom", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId(), cls: 'last-item'}
];
this._arrEffectName.forEach(function(item) {
item.tip = item.title;
});
this.listEffects = new Common.UI.ComboDataView({
cls: 'combo-styles',
cls: 'combo-transitions',
itemWidth: 87,
itemHeight: 40,
enableKeyEvents: true,
@ -145,6 +148,7 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, 0',
delayRenderTips: true,
beforeOpenHandler: function (e) {
var cmp = this,
menu = cmp.openButton.menu;

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

@ -1,84 +1,4 @@
#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;
}
}
}
.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;
}
@ -101,26 +21,32 @@
}
}
.btn_item {
color: @text-normal-ie;
color: @text-normal;
display: inline-flex;
flex-direction: column;
align-items: center;
.combo-animation {
.menu-picker-container .dataview {
padding: 10px 0 0 2px;
}
.dropdown-menu {
padding-bottom: 5px;
}
}
.icon:not(svg) {
width: @x-huge-btn-icon-size;
height: @x-huge-btn-icon-size;
min-width: 0;
margin-top: -2px;
.menu-animation .dataview {
padding: 0 0 0 2px;
.group-description {
padding: 3px 0 3px 10px;
font-weight: bold;
}
.caption{
line-height: 18px;
font-size: 11px;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
.group-items-container {
float: left;
position: relative;
.item {
box-shadow: none;
margin: @scaled-two-px-value 0 0 @scaled-two-px-value;
&:last-child {
margin-bottom: @scaled-two-px-value;
}
}
}
}

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

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

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

@ -1,63 +0,0 @@
#transitions-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;
}
}
.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;
}
}