workspace heacer refctor

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

@@ -0,0 +1,75 @@
+// 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>
+
+// Colors
+$color-white: #ffffff;
+$color-black: #000000;
+$color-gray: #90969d;
+
+// Main color
+$color-primary: #78dbbe;
+
+// Secondary colors
+$color-success: #b6dd75;
+$color-complete : #a599c6;
+$color-warning: #e6a16f;
+$color-danger: #de4762;
+$color-info: #59b9e2;
+
+// Mixing Color varriable for creating both light and dark colors
+$mix-percentage-dark: 81%;
+$mix-percentage-darker: 60%;
+$mix-percentage-light: 80%;
+$mix-percentage-lighter: 20%;
+
+// Gray scale
+$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);
+
+// Lighter colors
+$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
+$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);
+
+$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light);
+$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter);
+
+$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light);
+$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter);
+
+$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light);
+$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter);
+
+$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light);
+$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter);
+
+$color-info-light: mix($color-info, $color-white, $mix-percentage-light);
+$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter);
+
+// Darker colors
+$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark);
+$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker);
+
+$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark);
+$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker);
+
+$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark);
+$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker);
+
+$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark);
+$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker);
+
+$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark);
+$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);
+
+$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);
+$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker);
+
+// bg transparent
+$color-dark-bg: rgba(0,0,0,.4);
+$color-light-bg: rgba(255,255,255,.6);

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

@@ -11,7 +11,7 @@ $color-black: #000000;
 $color-gray: #90969d;
 
 // Main color
-$color-primary: #78dbbe;
+$color-primary: #31EFB8;
 
 // Secondary colors
 $color-success: #b6dd75;
@@ -31,6 +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-40: #7B7D85;
+$color-gray-50: #303236; 
+$color-gray-60: #1F1F1F;
 
 // Lighter colors
 $color-success-light: mix($color-success, $color-white, $mix-percentage-light);

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

@@ -19,18 +19,18 @@ $ui-flavour: $color-gray;
 
 // Change next colors for more customization
 // Background colors
-$primary-ui-bg: $color-white;
+$primary-ui-bg: $color-gray-50;
-$secondary-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
+$secondary-ui-bg: $color-gray-60;
 $dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
 
 // Border color
 $intense-ui-border: $ui-flavour;
 $medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
-$soft-ui-border: lighten($medium-ui-border, 18%);
+$soft-ui-border: $color-gray-60;
 
 // Icon colors
-$intense-ui-icons: mix($ui-flavour, $color-black, $mix-percentage-dark);
+$intense-ui-icons: $color-gray-30;
-$medium-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-light);
+$medium-ui-icons: $color-gray-40;
 $soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
 
 // Text colors

frontend/resources/styles/main/partials/workspace-bar-v2.scss

@@ -0,0 +1,292 @@
+// 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>
+
+.workspace-bar {
+  align-items: center;
+  background-color: $primary-ui-bg;
+  border-bottom: 1px solid  $soft-ui-border;
+  display: flex;
+  height: 50px;
+  padding: $x-small $medium $x-small 65px;
+  position: relative;
+  z-index: 11;
+
+  .main-icon {
+    align-items: center;
+    background-color: $secondary-ui-bg;
+    cursor: pointer;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 50px;
+
+    a {
+      height: 35px;
+
+      svg {
+        fill: $medium-ui-icons;
+        height: 35px;
+        width: 35px;
+
+        }
+
+      &:hover {
+
+        svg {
+          fill: $main-ui-color;
+        }
+
+      }
+
+    }
+
+  }
+
+  .project-tree-btn {
+    align-items: center;
+    background-color: $secondary-ui-bg;
+    border-radius: $br-small;
+    border: 1px solid transparent;
+    cursor: pointer;
+    display: flex;
+    padding: $x-small $x-small $x-small $medium;
+    width: 164px;
+
+    svg {
+      fill: $intense-ui-icons;
+      height: 20px;
+      margin-right: $small;
+      width: 20px;
+    }
+
+    span {
+      color: $intense-ui-text;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      background-color: $dark-ui-bg;
+      border-color: $soft-ui-border;
+    }
+
+    &.selected {
+      background-color: $main-ui-color;
+
+      svg {
+        fill: $color-white;
+      }
+
+      span {
+        color: $color-white;
+      }
+
+    }
+  }
+
+  .workspace-options {
+    display: flex;
+
+    .options-btn {
+      align-items: center;
+      border-right: 4px double $soft-ui-border;
+      display: flex;
+      margin: 0;
+
+      &:last-child {
+        border: none;
+      }
+
+      li {
+        align-items: center;
+        background-color: $secondary-ui-bg;
+        border: 1px solid transparent;
+        border-radius: $br-small;
+        cursor: pointer;
+        display: flex;
+        flex-shrink: 0;
+        height: 30px;
+        justify-content: center;
+        margin: 0 $small;
+        position: relative;
+        width: 30px;
+
+        a {
+          padding-top: 6px;
+        }
+
+        svg {
+          fill: $intense-ui-icons;
+          height: 18px;
+          width: 18px;
+        }
+
+        &:hover {
+          background-color: $dark-ui-bg;
+          border-color: $soft-ui-border;
+        }
+
+        &.selected {
+          background-color: $main-ui-color;
+
+          svg {
+            fill: $color-white;
+          }
+
+        }
+
+        &.view-mode {
+          background-color: $intense-ui-icons;
+
+          svg {
+            fill: $secondary-ui-bg;
+          }
+
+          &:hover {
+            background-color: $color-white;
+            border-color: $soft-ui-border;
+
+            svg {
+              fill: $intense-ui-icons;
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+    .options-view {
+      align-items: center;
+      display: flex;
+      justify-content: content;
+      margin: 0;
+
+      li {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        height: 30px;
+        margin: 0 $small;
+        position: relative;
+        width: 60px;
+
+        &.zoom-input {
+          width: 85px;
+          padding: 0 25px;
+          position: relative;
+
+          .add-zoom,
+          .remove-zoom {
+            align-items: center;
+            border-radius: 50%;
+            border: 1px solid $intense-ui-border;
+            cursor: pointer;
+            color: $intense-ui-border;
+            display: none;
+            flex-shrink: 0;
+            font-size: $fs20;
+            font-weight: bold;
+            height: 20px;
+            justify-content: center;
+            position: absolute;
+            top: 5px;
+            width: 20px;
+
+            &:hover {
+              border-color: $color-primary;
+              color: $color-primary;
+            }
+
+          }
+
+          .add-zoom {
+            left: -5px;
+          }
+
+          .remove-zoom {
+            padding-top: 4px;
+            right: -5px;
+          }
+
+          &:hover {
+
+            .add-zoom,
+            .remove-zoom {
+              display: flex;
+              @include animation(0s,.3s,fadeIn);
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+.options-btn {
+  align-items: center;
+  border-right: 4px double $soft-ui-border;
+  display: flex;
+  margin: 0;
+
+  &:last-child {
+    border: none;
+  }
+
+  li {
+    align-items: center;
+    background-color: $secondary-ui-bg;
+    border: 1px solid transparent;
+    border-radius: $br-small;
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    height: 30px;
+    justify-content: center;
+    margin: 0 $small;
+    position: relative;
+    width: 30px;
+
+    a {
+      padding-top: 6px;
+    }
+
+    svg {
+      fill: $intense-ui-icons;
+      height: 18px;
+      width: 18px;
+    }
+
+    &:hover {
+      background-color: $dark-ui-bg;
+      border-color: $soft-ui-border;
+    }
+
+    &.selected {
+      background-color: $main-ui-color;
+
+      svg {
+        fill: $color-white;
+      }
+
+    }
+
+  }
+
+}

frontend/resources/styles/main/partials/workspace-bar.scss

@@ -10,7 +10,7 @@
   background-color: $primary-ui-bg;
   border-bottom: 1px solid  $soft-ui-border;
   display: flex;
-  height: 50px;
+  height: 40px;
   padding: $x-small $medium $x-small 65px;
   position: relative;
   z-index: 11;
@@ -28,12 +28,12 @@
     width: 50px;
 
     a {
-      height: 35px;
+      height: 30px;
 
       svg {
         fill: $medium-ui-icons;
-        height: 35px;
+        height: 30px;
-        width: 35px;
+        width: 30px;
 
         }
 
@@ -107,7 +107,7 @@
 
       li {
         align-items: center;
-        background-color: $secondary-ui-bg;
+        background-color: transparent;
         border: 1px solid transparent;
         border-radius: $br-small;
         cursor: pointer;
@@ -130,15 +130,18 @@
         }
 
         &:hover {
-          background-color: $dark-ui-bg;
+          background-color: $color-primary;
-          border-color: $soft-ui-border;
+
+          svg {
+            fill: $color-gray-50;
+          }
+
         }
 
         &.selected {
-          background-color: $main-ui-color;
 
           svg {
-            fill: $color-white;
+            fill: $color-primary;
           }
 
         }