🎉 Adapt workspace to new visual layout.

frontend/resources/locales.json

@@ -1020,8 +1020,8 @@
   "workspace.sidebar.sitemap" : {
     "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:134" ],
     "translations" : {
-      "en" : "Sitemap",
+      "en" : "Pages",
-      "fr" : "Plan du site"
+      "fr" : "Pages"
     }
   },
   "workspace.viewport.click-to-close-path" : {

frontend/resources/styles/common/framework.scss

@@ -918,6 +918,19 @@ input[type=range]:focus::-ms-fill-upper {
 
   }
 
+ &.tooltip-right {
+
+    &:hover {
+
+      &::after {
+        top: 15%;
+        left: 120%;
+      }
+
+    }
+
+  }
+
   &.tooltip-hover {
 
     &:hover {

frontend/resources/styles/main.scss

@@ -52,6 +52,7 @@
 @import 'main/partials/sidebar-layers';
 @import 'main/partials/sidebar-sitemap';
 @import 'main/partials/sidebar-document-history';
+@import 'main/partials/left-toolbar';
 @import 'main/partials/dashboard-bar';
 @import 'main/partials/dashboard-grid';
 @import 'main/partials/user-settings';

frontend/resources/styles/main/partials/left-toolbar.scss

@@ -0,0 +1,79 @@
+// 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-2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.left-toolbar {
+  background-color: $color-gray-50;
+  bottom: 0;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  width: 40px;
+  z-index: 11;
+}
+
+.left-toolbar-inside {
+  align-items: center;
+  border-right: 1px solid $color-gray-60;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  padding-top: 40px;
+  height: 100%;
+}
+
+.left-toolbar-options {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+
+  li {
+    align-items: center;
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    height: 40px;
+    justify-content: center;
+    margin: $x-small 0;
+    position: relative;
+    width: 40px;
+
+    svg {
+      fill: $color-gray-20;
+      height: 18px;
+      width: 18px;
+    }
+
+    &:hover {
+      background-color: $color-primary;
+
+      svg {
+        fill: $color-gray-50;
+      }
+
+    }
+
+    &.selected {
+      background-color: $color-gray-60;
+
+      svg {
+        fill: $color-primary;
+      }
+
+    }
+
+  }
+
+  &.panels {
+    margin-top: auto;
+  }
+
+}
+
+    

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

@@ -2,8 +2,8 @@
 // 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-2020 Andrey Antukh <niwi@niwi.nz>
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .settings-bar {
   background-color: $color-gray-50;
@@ -15,7 +15,7 @@
   z-index: 10;
 
   &.settings-bar-left {
-    left: 0
+    left: 40px;
   }
 
   .settings-bar-inside {

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

@@ -11,9 +11,9 @@
   border-bottom: 1px solid  $color-gray-60;
   display: flex;
   height: 40px;
-  padding: $x-small $medium $x-small 65px;
+  padding: $x-small $medium $x-small 55px;
   position: relative;
-  z-index: 11;
+  z-index: 12;
 
   .main-icon {
     align-items: center;
@@ -25,7 +25,7 @@
     left: 0;
     position: absolute;
     top: 0;
-    width: 50px;
+    width: 40px;
 
     a {
       height: 30px;
@@ -33,7 +33,7 @@
       svg {
         fill: $color-gray-30;
         height: 30px;
-        width: 30px;
+        width: 28px;
 
         }
 
@@ -49,6 +49,30 @@
 
   }
 
+  .menu-btn {
+    align-items: center;
+    background-color: $color-gray-60;
+    cursor: pointer;
+    border-radius: $br-small;
+    display: flex;
+    margin-right: $x-small;
+    padding: $x-small;
+
+    svg {
+      height: 15px;
+      fill: $color-gray-20;
+      width: 15px;
+    }
+
+    &:hover {
+      background-color: $color-primary;
+
+      svg {
+        fill: $color-gray-60;
+      }
+    }
+  }
+
   .project-tree-btn {
     align-items: center;
     cursor: pointer;
@@ -63,11 +87,16 @@
     }
 
     span {
-      color: $color-gray-10;
+      color: $color-white;
       font-size: $fs14;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      &.project-name {
+        color: $color-gray-20;
+        margin-right: $x-small;
+      }
     }
 
   }
@@ -75,141 +104,38 @@
   .workspace-options {
     display: flex;
     margin: auto;
-
-    .options-btn {
-      align-items: center;
-      border-right: 4px double $color-gray-60;
-      display: flex;
-      margin: 0;
-
-      &:last-child {
-        border: none;
   }
 
-      li {
+}
-        align-items: center;
-        background-color: transparent;
-        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 {
+.zoom-input {
-          padding-top: 6px;
-        }
-
-        svg {
-          fill: $color-gray-20;
-          height: 18px;
-          width: 18px;
-        }
-
-        &:hover {
-          background-color: $color-primary;
-
-          svg {
-            fill: $color-gray-50;
-          }
-
-        }
-
-        &.selected {
-
-          svg {
-            fill: $color-primary;
-          }
-
-          &:hover {
-
-            svg {
-              fill: $color-gray-60;
-            }
-          }
-
-        }
-
-      }
-
-    }
-
-  }
-
-  .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;
 
   span {
-          color: $color-gray-20;
+    color: $color-gray-10;
     font-size: $fs15;
+    margin: 0 $x-small;
   }
 
   .add-zoom,
   .remove-zoom {
     align-items: center;
-          border-radius: 50%;
+    background-color: $color-gray-60;
-          border: 1px solid $color-gray-40;
+    border-radius: $br-small;
     cursor: pointer;
-          color: $color-gray-40;
+    color: $color-gray-20;
-          display: none;
+    display: flex;
     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;
+      background-color: $color-primary;
-            color: $color-primary;
+      color: $color-gray-60;
-          }
-
-        }
-
-        .add-zoom {
-          left: -5px;
-        }
-
-        .remove-zoom {
-          padding-top: 4px;
-          right: -5px;
-        }
-
-        &:hover {
-
-          .add-zoom,
-          .remove-zoom {
-            display: flex;
-            @include animation(0s,.3s,fadeIn);
-          }
-
-        }
-
-      }
-
     }
 
   }

frontend/src/uxbox/main/ui/workspace.cljs

@@ -10,6 +10,7 @@
    [beicon.core :as rx]
    [lentes.core :as l]
    [rumext.alpha :as mf]
+   [uxbox.builtins.icons :as i :include-macros true]
    [uxbox.main.constants :as c]
    [uxbox.main.data.history :as udh]
    [uxbox.main.data.workspace :as dw]
@@ -88,6 +89,47 @@
        [:section.workspace-viewport {:id "workspace-viewport" :ref frame}
         [:& viewport {:page page :file file}]]]
 
+      ;; --- Left toolbar (NEW COMPONENT)
+
+      [:div.left-toolbar
+       [:div.left-toolbar-inside
+        [:ul.left-toolbar-options
+         [:li.tooltip.tooltip-right
+          {:alt "Artboard"}
+          i/artboard]
+         [:li.tooltip.tooltip-right
+          {:alt "Box"}
+          i/box]
+         [:li.tooltip.tooltip-right
+          {:alt "Circle"}
+          i/circle]
+         [:li.tooltip.tooltip-right
+          {:alt "Text"}
+          i/text]
+         [:li.tooltip.tooltip-right
+          {:alt "Insert image"}
+          i/image]
+         [:li.tooltip.tooltip-right
+          {:alt "Pencil tool"}
+          i/pencil]
+         [:li.tooltip.tooltip-right
+          {:alt "Curves tool"}
+          i/curve]]
+
+        [:ul.left-toolbar-options.panels
+         [:li.tooltip.tooltip-right
+          {:alt "Layers"}
+          i/layers]
+         [:li.tooltip.tooltip-right
+          {:alt "Libraries"}
+          i/icon-set]
+         [:li.tooltip.tooltip-right
+          {:alt "History"}
+          i/undo-history]
+         [:li.tooltip.tooltip-right
+          {:alt "Palette"}
+          i/palette]]]]
+
       ;; Aside
       (when left-sidebar?
         [:& left-sidebar {:file file :page page :layout layout}])

frontend/src/uxbox/main/ui/workspace/header.cljs

@@ -32,11 +32,10 @@
   (let [zoom (mf/deref refs/selected-zoom)
         increase #(st/emit! dw/increase-zoom)
         decrease #(st/emit! dw/decrease-zoom)]
-    [:ul.options-view
+    [:div.zoom-input
-     [:li.zoom-input
      [:span.add-zoom {:on-click decrease} "-"]
      [:span {} (str (mth/round (* 100 zoom)) "%")]
-      [:span.remove-zoom {:on-click increase} "+"]]]))
+     [:span.remove-zoom {:on-click increase} "+"]]))
 
 ;; --- Header Users
 
@@ -80,113 +79,15 @@
       [:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))}
        i/logo-icon]]
 
+     [:div.menu-btn i/actions]
+
      [:div.project-tree-btn
       {:alt (tr "header.sitemap")
        :class (when (contains? layout :sitemap) "selected")
        :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))}
+      [:span.project-name "Project name /"]
       [:span (:name file)]]
 
-     [:& active-users]
-
      [:div.workspace-options
-      [:ul.options-btn
+      [:& active-users]]
-       [:li.tooltip.tooltip-bottom
+     [:& zoom-widget]]))
-        {:alt (tr "workspace.header.frame")
-         :class (when (= selected-drawtool :frame) "selected")
-         :on-click (partial select-drawtool :frame)}
-        i/artboard]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.rect")
-         :class (when (= selected-drawtool :rect) "selected")
-         :on-click (partial select-drawtool :rect)}
-        i/box
-        ]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.circle")
-         :class (when (= selected-drawtool :circle) "selected")
-         :on-click (partial select-drawtool :circle)}
-        i/circle]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.text")
-         :class (when (= selected-drawtool :text) "selected")
-         :on-click (partial select-drawtool :text)}
-        i/text]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.path")
-         :class (when (= selected-drawtool :path) "selected")
-         :on-click (partial select-drawtool :path)}
-        i/curve]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.curve")
-         :class (when (= selected-drawtool :curve) "selected")
-         :on-click (partial select-drawtool :curve)}
-        i/pencil]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.color-palette")
-         :class (when (contains? layout :colorpalette) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
-        i/palette]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.icons")
-         :class (when (contains? layout :icons) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :icons))}
-        i/icon-set]
-       ;; [:li.tooltip.tooltip-bottom
-       ;;  {:alt (tr "header.layers")
-       ;;   :class (when (contains? layout :layers) "selected")
-       ;;   :on-click #(st/emit! (dw/toggle-layout-flag :layers))}
-       ;;  i/layers]
-       ;; [:li.tooltip.tooltip-bottom
-       ;;  {:alt (tr "header.element-options")
-       ;;   :class (when (contains? layout :element-options) "selected")
-       ;;   :on-click #(st/emit! (dw/toggle-layout-flag :element-options))}
-       ;;  i/options]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.document-history")
-         :class (when (contains? layout :document-history) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :document-history))}
-        i/undo-history]
-       ;; [:li.tooltip.tooltip-bottom
-       ;;  {:alt (tr "header.undo")
-       ;;   :on-click on-undo}
-       ;;  i/undo]
-       ;; [:li.tooltip.tooltip-bottom
-       ;;  {:alt (tr "header.redo")
-       ;;   :on-click on-redo}
-       ;;  i/redo]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.download")
-         ;; :on-click on-download
-         }
-        i/download]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.image")
-         :on-click on-image}
-        i/image]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.rules")
-         :class (when (contains? layout :rules) "selected")
-         :on-click (partial toggle-layout :rules)}
-        i/ruler]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.grid")
-         :class (when (contains? layout :grid) "selected")
-         :on-click (partial toggle-layout :grid)}
-        i/grid]
-       [:li.tooltip.tooltip-bottom
-        {:alt (tr "workspace.header.grid-snap")
-         :class (when (contains? layout :grid-snap) "selected")
-         :on-click (partial toggle-layout :grid-snap)}
-        i/grid-snap]]]
-     ;; [:li.tooltip.tooltip-bottom
-     ;;  {:alt (tr "header.align")}
-     ;;  i/alignment]]
-     ;; [:& user]
-     [:div.secondary-options
-      [:& zoom-widget]
-      [:a.tooltip.tooltip-bottom.view-mode
-       {:alt (tr "workspace.header.view-mode")
-        ;; :on-click #(st/emit! (dw/->OpenView (:id page)))
-        }
-       i/play]]
-     ]))

frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs

@@ -0,0 +1,57 @@
+;; 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/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.main.ui.workspace.sidebar
+  (:require
+   [rumext.alpha :as mf]
+   [uxbox.builtins.icons :as i :include-macros true]))
+
+;; --- Left toolbar (Component)
+
+(mf/defc left-sidebar
+  {:wrap [mf/wrap-memo]}
+   [:div.left-toolbar
+    [:div.left-toolbar-inside
+     [:ul.left-toolbar-options
+      [:li.tooltip.tooltip-right
+       {:alt "Artboard"}
+       i/artboard]
+      [:li.tooltip.tooltip-right
+       {:alt "Box"}
+       i/box]
+      [:li.tooltip.tooltip-right
+       {:alt "Circle"}
+       i/circle]
+      [:li.tooltip.tooltip-right
+       {:alt "Text"}
+       i/text]
+      [:li.tooltip.tooltip-right
+       {:alt "Insert image"}
+       i/image]
+      [:li.tooltip.tooltip-right
+       {:alt "Pencil tool"}
+       i/pencil]
+      [:li.tooltip.tooltip-right
+       {:alt "Curves tool"}
+       i/curve]]
+
+     [:ul.left-toolbar-options.panels
+      [:li.tooltip.tooltip-right
+       {:alt "Layers"}
+       i/layers]
+      [:li.tooltip.tooltip-right
+       {:alt "Libraries"}
+       i/icon-set]
+      [:li.tooltip.tooltip-right
+       {:alt "History"}
+       i/undo-history]
+      [:li.tooltip.tooltip-right
+       {:alt "Palette"}
+       i/palette]]]])

frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs

@@ -279,7 +279,8 @@
     [:div#layers.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/layers]
-      [:span (t locale "workspace.sidebar.layers")]
+      ;[:span (t locale "workspace.sidebar.layers")]
+      [:span "Page 1"]
       #_[:div.tool-window-close {:on-click on-click} i/close]]
      [:div.tool-window-content
       [:& layers-tree]]]))