diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index 7afe0696b..72741c28a 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -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;
+ }
+ }
}
\ No newline at end of file
diff --git a/apps/presentationeditor/main/app/controller/Animation.js b/apps/presentationeditor/main/app/controller/Animation.js
index 37ff4d86d..4cc4f57c1 100644
--- a/apps/presentationeditor/main/app/controller/Animation.js
+++ b/apps/presentationeditor/main/app/controller/Animation.js
@@ -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();
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index d575277ee..fd3c8069f 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -152,7 +152,7 @@
diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js
index a5c23725f..5cf85af64 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) {
@@ -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('')}
]
@@ -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 || {}));
- });
\ No newline at end of file
+});
\ No newline at end of file
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/animation.less b/apps/presentationeditor/main/resources/less/animation.less
index 6d1d0de60..2c4aff4ff 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,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;
+ }
+ }
}
}
\ No newline at end of file
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";
diff --git a/apps/presentationeditor/main/resources/less/transitions.less b/apps/presentationeditor/main/resources/less/transitions.less
deleted file mode 100644
index 4fcf450f5..000000000
--- a/apps/presentationeditor/main/resources/less/transitions.less
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file