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

apps/common/main/resources/less/combo-dataview.less

@@ -343,3 +343,88 @@
 .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;
+        }
+    }
+}

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();

apps/presentationeditor/main/app/template/Toolbar.template

@@ -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>

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('<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 || {}));
 
-    });
+});

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;

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 {
+.combo-animation {
-  color: @text-normal-ie;
+  .menu-picker-container .dataview {
-  color: @text-normal;
+    padding: 10px 0 0 2px;
-  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;
   }
-
+  .dropdown-menu {
-  .caption{
+    padding-bottom: 5px;
-    line-height: 18px;
+  }
-    font-size: 11px;
+}
-    text-overflow: ellipsis;
+
-    overflow: hidden;
+.menu-animation .dataview {
-    width: 100%;
+  padding: 0 0 0 2px;
-    text-align: center;
+
+  .group-description {
+    padding: 3px 0 3px 10px;
+    font-weight: bold;
+  }
+
+  .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;
+        }
+      }
   }
 }

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";

apps/presentationeditor/main/resources/less/transitions.less

@@ -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;
-  }
-}