[PE] Refactoring transition tab: Fix Bug 54316, Fix Bug 54313.

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

@@ -353,3 +353,49 @@
 .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);
+            }
+        }
+    }
+
+}

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/Transitions.js

@@ -130,11 +130,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,
@@ -142,6 +145,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/transitions.less

@@ -1,63 +1,26 @@
-#transitions-panel {
+.combo-transitions {
-  .item {
+  .btn_item {
-    background: transparent;
+    color: @text-normal-ie;
-    border-color: transparent;
+    color: @text-normal;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
 
-    .box-shadow(none);
+    .icon:not(svg) {
-    border-radius: @scaled-one-px-value-ie;
+      width: @x-huge-btn-icon-size;
-    border-radius: @scaled-one-px-value;
+      height: @x-huge-btn-icon-size;
-    border-width: calc(2*@scaled-one-px-value-ie) ;
+      min-width: 0;
-    border-width: calc(@scaled-two-px-value);
+      margin-top: -2px;
-
-    &:hover{
-      border-color: @border-preview-hover-ie;
-      border-color: @border-preview-hover;
     }
 
-    &.selected
+    .caption{
-    {
+      line-height: 18px;
-      border-color: @border-preview-select-ie;
+      font-size: 11px;
-      border-color: @border-preview-select;
+      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;
   }
 }