From a6a94faabfa0d8ffeb2db0df2b470616d6861ce3 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Dec 2021 00:38:21 +0300 Subject: [PATCH 1/4] [PE] Refactoring transition tab: Fix Bug 54316, Fix Bug 54313. --- .../main/resources/less/combo-dataview.less | 46 +++++++++++ .../main/app/template/Toolbar.template | 4 +- .../main/app/view/Transitions.js | 8 +- .../main/resources/less/transitions.less | 77 +++++-------------- 4 files changed, 74 insertions(+), 61 deletions(-) diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index 7afe0696b..9bb83045d 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -342,4 +342,50 @@ .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 { + .last-item { + margin-bottom: @combo-dataview-item-margins; + } + } + + &.disabled { + .item { + &:hover:not(.selected) { + .box-shadow(none); + } + } + } + } \ No newline at end of file diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template index b7aee5d06..566d4ed00 100644 --- a/apps/presentationeditor/main/app/template/Toolbar.template +++ b/apps/presentationeditor/main/app/template/Toolbar.template @@ -152,7 +152,7 @@
- +
@@ -165,7 +165,7 @@
- +
diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js index 3751874af..23be8afcd 100644 --- a/apps/presentationeditor/main/app/view/Transitions.js +++ b/apps/presentationeditor/main/app/view/Transitions.js @@ -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; diff --git a/apps/presentationeditor/main/resources/less/transitions.less b/apps/presentationeditor/main/resources/less/transitions.less index 4fcf450f5..94bec0766 100644 --- a/apps/presentationeditor/main/resources/less/transitions.less +++ b/apps/presentationeditor/main/resources/less/transitions.less @@ -1,63 +1,26 @@ -#transitions-panel { - .item { - background: transparent; - border-color: transparent; +.combo-transitions { + .btn_item { + color: @text-normal-ie; + color: @text-normal; + display: inline-flex; + flex-direction: column; + align-items: center; - .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; + .icon:not(svg) { + width: @x-huge-btn-icon-size; + height: @x-huge-btn-icon-size; + min-width: 0; + margin-top: -2px; } - &.selected - { - border-color: @border-preview-select-ie; - border-color: @border-preview-select; + .caption{ + line-height: 18px; + font-size: 11px; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + text-align: center; + padding: 0 2px; } - - .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; } } \ No newline at end of file From b3e63cd8d345b4007d96be75167a954ec710c91f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Dec 2021 00:46:00 +0300 Subject: [PATCH 2/4] [PE] Refactoring animation list --- .../main/resources/less/combo-dataview.less | 39 ++++++ .../main/app/view/Animation.js | 4 +- .../main/resources/less/animation.less | 119 ++++-------------- .../main/resources/less/transitions.less | 26 ---- 4 files changed, 62 insertions(+), 126 deletions(-) delete mode 100644 apps/presentationeditor/main/resources/less/transitions.less diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index 9bb83045d..72741c28a 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -375,6 +375,19 @@ } .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; } @@ -387,5 +400,31 @@ } } } +} +.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; + } + } } \ No newline at end of file diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js index 7b6c5fead..9095aa1a4 100644 --- a/apps/presentationeditor/main/app/view/Animation.js +++ b/apps/presentationeditor/main/app/view/Animation.js @@ -133,7 +133,7 @@ define([ var itemWidth = 87, itemHeight = 40; this.listEffects = new Common.UI.ComboDataView({ - cls: 'combo-styles animation', + cls: 'combo-transitions combo-animation', itemWidth: itemWidth, itemHeight: itemHeight, itemTemplate: _.template([ @@ -329,7 +329,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('')} ] diff --git a/apps/presentationeditor/main/resources/less/animation.less b/apps/presentationeditor/main/resources/less/animation.less index 6d1d0de60..26f54342b 100644 --- a/apps/presentationeditor/main/resources/less/animation.less +++ b/apps/presentationeditor/main/resources/less/animation.less @@ -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,29 @@ } } -.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; + } +} - .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; + } + } } } \ No newline at end of file diff --git a/apps/presentationeditor/main/resources/less/transitions.less b/apps/presentationeditor/main/resources/less/transitions.less deleted file mode 100644 index 94bec0766..000000000 --- a/apps/presentationeditor/main/resources/less/transitions.less +++ /dev/null @@ -1,26 +0,0 @@ -.combo-transitions { - .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; - } - } -} \ No newline at end of file From c1e74dda5681a78a13a1e1a8dc6ec7a18ec7d3b1 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Dec 2021 01:08:39 +0300 Subject: [PATCH 3/4] [PE] Refactoring --- apps/presentationeditor/main/resources/less/app.less | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 8d5db8d30..b681f127c 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -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"; From 920d8a5b4f3f00461b7dd0e295247e3d2d0737ef Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Dec 2021 01:13:24 +0300 Subject: [PATCH 4/4] [PE] Add more effect menu item --- .../main/app/controller/Animation.js | 10 +++++++++- apps/presentationeditor/main/app/view/Animation.js | 12 ++++++++++-- .../main/resources/less/animation.less | 3 +++ 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/apps/presentationeditor/main/app/controller/Animation.js b/apps/presentationeditor/main/app/controller/Animation.js index dfa5e5763..1045f2316 100644 --- a/apps/presentationeditor/main/app/controller/Animation.js +++ b/apps/presentationeditor/main/app/controller/Animation.js @@ -72,7 +72,8 @@ 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), + 'animation:additional': _.bind(this.onAnimationAdditional, this) }, 'Toolbar': { 'tab:active': _.bind(this.onActiveTab, this) @@ -136,6 +137,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; diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js index 9095aa1a4..f1b95bf40 100644 --- a/apps/presentationeditor/main/app/view/Animation.js +++ b/apps/presentationeditor/main/app/view/Animation.js @@ -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) { @@ -132,6 +135,9 @@ 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-transitions combo-animation', itemWidth: itemWidth, @@ -144,6 +150,7 @@ define([ ].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), + additionalMenuItems: [{caption: '--'}, this.listEffectsMore], enableKeyEvents: true, //lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock], dataHint: '1', @@ -473,8 +480,9 @@ define([ textStartOnClick: 'On Click', textStartWithPrevious: 'With Previous', textStartAfterPrevious: 'After Previous', - textNone: 'None' + textNone: 'None', + textMoreEffects: 'Show More Effects' } }()), PE.Views.Animation || {})); - }); \ No newline at end of file +}); \ No newline at end of file diff --git a/apps/presentationeditor/main/resources/less/animation.less b/apps/presentationeditor/main/resources/less/animation.less index 26f54342b..2c4aff4ff 100644 --- a/apps/presentationeditor/main/resources/less/animation.less +++ b/apps/presentationeditor/main/resources/less/animation.less @@ -25,6 +25,9 @@ .menu-picker-container .dataview { padding: 10px 0 0 2px; } + .dropdown-menu { + padding-bottom: 5px; + } } .menu-animation .dataview {