[PE] Refactoring animation list

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

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('<div id="id-toolbar-menu-addanimation" class="menu-animation"></div>')}
                         ]

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 {
+.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) {
+.menu-animation .dataview {
-    width: @x-huge-btn-icon-size;
+  padding: 0 0 0 2px;
-    height: @x-huge-btn-icon-size;
+
-    min-width: 0;
+  .group-description {
-    margin-top: -2px;
+    padding: 3px 0 3px 10px;
+    font-weight: bold;
   }
 
-  .caption{
+  .group-items-container {
-    line-height: 18px;
+    float: left;
-    font-size: 11px;
+    position: relative;
-    text-overflow: ellipsis;
+    .item {
-    overflow: hidden;
+        box-shadow: none;
-    width: 100%;
+        margin: @scaled-two-px-value 0 0 @scaled-two-px-value;
-    text-align: center;
+        &:last-child {
+          margin-bottom: @scaled-two-px-value;
+        }
+      }
   }
 }

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

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