New variant

apps/presentationeditor/main/app/controller/Animation.js

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

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

@@ -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>
-                        <span class="btn-slot text " id="animation-button-add-effect"></span>
+                </div>
-                    </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 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: 130px;">
+                <div class="group small"  >
-                        <div class="elset font-normal">
+                    <div class="elset font-normal">
-                            <label id="animation-label-start"></label>
+                        <label id="animation-label-start"></label>
-                            <div class="btn-slot" style="float: right; width: 76px; " id="animation-start"></div>
+                        <div class="btn-slot" style="width: 96px; " id="animation-start"></div>
-                        </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="elset font-normal">
                          <label id="animation-delay"></label>
-                         <span id="animation-spin-delay" class="btn-slot text spinner" style="float: right"></span>
+                         <span id="animation-spin-delay" class="btn-slot text spinner" ></span>
-                    </div>
-                    <div class="elset font-normal">
-                        <label id="animation-duration"></label>
-                        <span id="animation-spin-duration" class="btn-slot text spinner" style="float: right"></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">
-                         <span class="btn-slot text" id="animation-checkbox-rewind"></span>
+                        <label id="animation-duration"></label>
+                        <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">
+                        <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>

apps/presentationeditor/main/app/view/Animation.js

@@ -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',
+                    dataHintDirection: 'bottom',
-                    dataHintOffset: 'medium'
+                    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',

apps/presentationeditor/main/resources/less/animation.less

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

apps/presentationeditor/main/resources/less/app.less

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

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

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