layers sedebar refactor

frontend/resources/styles/common/dependencies/colors.scss

@@ -31,8 +31,10 @@ $color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
 $color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
 $color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
 $color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
-$color-gray-30: #b1b2b5;
+$color-gray-10: #E3E3E3;
-$color-gray-40: #7B7D85;
+$color-gray-20: #b1b2b5;
+$color-gray-30: #7B7D85;
+$color-gray-40: #64666A;
 $color-gray-50: #303236; 
 $color-gray-60: #1F1F1F;
 

frontend/resources/styles/common/dependencies/uxbox-light.scss

@@ -24,19 +24,19 @@ $secondary-ui-bg: $color-gray-60;
 $dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
 
 // Border color
-$intense-ui-border: $ui-flavour;
+$intense-ui-border: $color-gray-40;
-$medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
+$medium-ui-border: $color-gray-60;
 $soft-ui-border: $color-gray-60;
 
 // Icon colors
-$intense-ui-icons: $color-gray-30;
+$intense-ui-icons: $color-gray-20;
-$medium-ui-icons: $color-gray-40;
+$medium-ui-icons: $color-gray-30;
-$soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
+$soft-ui-icons: $color-gray-60;
 
 // Text colors
-$intense-ui-text: mix($ui-flavour, $color-black, $mix-percentage-darker);
+$intense-ui-text: $color-gray-60;
-$medium-ui-text: $ui-flavour;
+$medium-ui-text: $color-gray-20;
-$soft-ui-text: mix($ui-flavour, $color-white, $mix-percentage-light);
+$soft-ui-text: $color-gray-10;
 
 // Canvas colors
 $canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);

frontend/resources/styles/main/partials/sidebar-layers-v2.scss

@@ -0,0 +1,265 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.layers-tools {
+  border-top: 1px solid $medium-ui-border;
+  bottom: 0;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+
+  .layers-tools-content {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    width: 60%;
+
+    li {
+      cursor: pointer;
+
+      svg {
+        fill: $medium-ui-icons;
+        height: 14px;
+        width: 14px;
+
+        &:hover {
+          fill: $intense-ui-text;
+        }
+
+      }
+
+      &.disable {
+        pointer-events: none;
+
+        svg {
+          cursor: auto;
+          fill: $soft-ui-icons;
+        }
+
+      }
+
+      &.delete-layer {
+
+        svg {
+
+          &:hover {
+            fill: $color-danger;
+          }
+
+        }
+
+      }
+
+      &.layer-up {
+
+        svg {
+          transform: rotate(270deg);
+        }
+
+      }
+
+      &.layer-down {
+
+        svg {
+          transform: rotate(90deg);
+        }
+
+      }
+
+      &.layer-top {
+
+        svg {
+          transform: rotate(180deg);
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+.element-list {
+  margin: 0;
+  width: 100%;
+
+  ul {
+    border-left: 6px solid $intense-ui-border;
+    margin: 0;
+  }
+
+  li {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &.dragging-TODO {
+      background-color: #eee;
+    }
+
+    &.open {
+
+      ul {
+
+        li {
+
+          .element-list-body {
+            border-style: dashed;
+          }
+
+        }
+
+      }
+
+    }
+
+    .element-list-body {
+      align-items: center;
+      border-bottom: 1px solid $soft-ui-border;
+      display: flex;
+      padding: $small;
+      transition: none;
+      width: 100%;
+
+      svg {
+        fill: $soft-ui-icons;
+        height: 13px;
+        margin-right: 8px;
+        width: 13px;
+      }
+
+      .element-actions {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        width: 62px;
+      }
+
+      .element-icon {
+
+        svg {
+          fill: $medium-ui-icons;
+        }
+
+      }
+
+      .toggle-content {
+        margin-left: auto;
+        width: 12px;
+
+        svg {
+          fill: $intense-ui-icons;
+          transform: rotate(90deg);
+          width: 10px;
+        }
+
+        &.inverse {
+          svg { transform: rotate(270deg); }
+        }
+
+        &:hover {
+
+          svg {
+            fill: $medium-ui-icons;
+          }
+
+        }
+
+      }
+
+      &.group {
+
+        &.open {
+
+          .toggle-content {
+            flex-shrink: 0;
+
+            svg {
+              transform: rotate(270deg);
+            }
+
+          }
+
+        }
+
+      }
+
+      span.element-name {
+        min-width: 40px;
+        min-height: 16px;
+        display: block;
+
+        color: $medium-ui-text;
+        font-size: $fs13;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &.selected {
+
+        .element-icon {
+
+          svg {
+            fill: $main-ui-color;
+          }
+
+        }
+
+        span {
+          color: $main-ui-color;
+        }
+
+      }
+
+      .selected {
+
+        svg {
+          fill: $intense-ui-icons;
+        }
+
+      }
+
+      &:hover {
+        border-color: $main-ui-color;
+
+        .element-icon {
+
+          svg {
+            fill: $intense-ui-icons;
+          }
+
+        }
+
+        span {
+          color: $intense-ui-text;
+        }
+
+      }
+
+      &.drag-top {
+        border-top: 40px solid $soft-ui-border !important;
+      }
+
+      &.drag-bottom {
+        border-bottom: 40px solid $soft-ui-border !important;
+      }
+
+      &.drag-inside {
+        border: 2px solid $main-ui-color !important;
+      }
+
+    }
+
+  }
+
+}

frontend/resources/styles/main/partials/sidebar-layers.scss

@@ -124,9 +124,10 @@
 
     .element-list-body {
       align-items: center;
-      border-bottom: 1px solid $soft-ui-border;
+      border-bottom: 1px solid transparent;
+      border-top: 1px solid transparent;
       display: flex;
-      padding: $small;
+      padding: $x-small $small;
       transition: none;
       width: 100%;
 
@@ -206,17 +207,38 @@
       }
 
       &.selected {
-
+        background-color: $main-ui-color;
-        .element-icon {
+        
-
+        .selected {
+          
           svg {
-            fill: $main-ui-color;
+            fill: $soft-ui-icons;
           }
-
+          
         }
-
+        
+        .element-icon {
+          
+          svg {
+            fill: $soft-ui-icons;
+          }
+          
+        }
+        
         span {
-          color: $main-ui-color;
+          color: $intense-ui-text;
+        }
+        
+        &:hover {
+
+          .element-icon {
+            svg {
+              fill: $soft-ui-icons;
+            }
+          }
+          .element-name {
+            color: $intense-ui-text;
+          }
         }
 
       }
@@ -235,13 +257,13 @@
         .element-icon {
 
           svg {
-            fill: $intense-ui-icons;
+            fill: $main-ui-color;
           }
 
         }
 
         span {
-          color: $intense-ui-text;
+          color: $main-ui-color;
         }
 
       }

frontend/resources/styles/main/partials/sidebar-v2.scss

@@ -0,0 +1,91 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.settings-bar {
+  background-color: $primary-ui-bg;
+  bottom: 0;
+  height: 100%;
+  position: fixed;
+  right: 0;
+  width: 230px;
+  z-index: 10;
+
+  &.settings-bar-left {
+    left: 0
+  }
+
+  .settings-bar-inside {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-top: 50px;
+    height: 100%;
+
+    .tool-window {
+      border-bottom: 1px solid $medium-ui-border;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      width: 100%;
+
+      .tool-window-bar {
+        align-items: center;
+        border-bottom: 1px solid $medium-ui-border;
+        display: flex;
+        flex-shrink: 0;
+        padding: 2px $x-small;
+
+        svg {
+          fill: $intense-ui-icons;
+          height: 12px;
+          width: 12px;
+        }
+
+        span {
+          color: $intense-ui-text;
+          font-weight: bold;
+        }
+
+        .tool-window-icon {
+          margin-right: $small;
+        }
+
+        .tool-window-close {
+          cursor: pointer;
+          margin-left: auto;
+          transform: rotate(45deg);
+
+          &:hover {
+
+            svg {
+              fill: $color-danger;
+            }
+
+          }
+
+        }
+
+      }
+
+      .tool-window-content {
+        display: flex;
+        flex-wrap: wrap;
+        overflow-y: auto;
+        padding-bottom: $medium;
+      }
+
+      &#layers {
+        padding-bottom: 30px;
+      }
+
+    }
+
+  }
+
+}

frontend/resources/styles/main/partials/sidebar.scss

@@ -36,10 +36,9 @@
 
       .tool-window-bar {
         align-items: center;
-        border-bottom: 1px solid $medium-ui-border;
         display: flex;
         flex-shrink: 0;
-        padding: 2px $x-small;
+        padding: $small;
 
         svg {
           fill: $intense-ui-icons;
@@ -48,12 +47,13 @@
         }
 
         span {
-          color: $intense-ui-text;
+          color: $soft-ui-text;
-          font-weight: bold;
+          font-size: $fs14;
         }
 
         .tool-window-icon {
           margin-right: $small;
+          display: none;
         }
 
         .tool-window-close {