Merge branch 'task/149/workspace-main-nav' into develop

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/main-bar.scss

@@ -15,7 +15,7 @@
   position: relative;
   z-index: 10;
 
-  
+
   .btn-dashboard {
     margin-left: auto;
   }
@@ -84,7 +84,7 @@
   padding: 0 $x-small 0 $small;
   position: relative;
   width: 180px;
-  
+
   span {
     @include text-ellipsis;
     color: $color-black;
@@ -100,45 +100,47 @@
   }
 
   .dropdown {
-    background-color: $color-gray-60;
-    border-radius: $br-small;
-    min-width: 150px;
-    padding: 0 $small;
     position: absolute;
     top: 0;
-    right: 0;
+    left: 0;
-    width: 100%;
     z-index: 12;
-    @include animation(0,.2s,fadeInDown);
+    width: 180px;
 
-    li {
+    ul.profile-menu {
-      font-size: $fs13;
+      background-color: $color-gray-60;
-      padding: $small 0;
+      border-radius: $br-small;
+      padding: 0 $small;
 
-      svg {
+      @include animation(0,.2s,fadeInDown);
-        fill: $color-gray-20;
-        height: 12px;
-        width: 12px;
-      }
 
-      span {
+      li {
-        color: $color-white;
+        font-size: $fs13;
-      }
+        padding: $small 0;
-
-      &:hover {
-
-        span {
-          color: $color-primary;
-        }
 
         svg {
-          fill: $color-primary;
+          fill: $color-gray-20;
+          height: 12px;
+          width: 12px;
+        }
+
+        span {
+          color: $color-white;
+        }
+
+        &:hover {
+
+          span {
+            color: $color-primary;
+          }
+
+          svg {
+            fill: $color-primary;
+          }
+
         }
 
       }
-
     }
-
   }
 
 }

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,50 @@
   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;
+
+  .dropdown {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    width: 230px;
+    z-index: 12;
+    @include animation(0,.2s,fadeInDown);
+
+    .workspace-menu {
+      background-color: $color-gray-60;
+      border-radius: $br-small;
+      padding: 0 $small;
+
+      li {
+        font-size: $fs13;
+        padding: $small 0;
+
+        svg {
+          fill: $color-gray-20;
+          height: 12px;
+          width: 12px;
+        }
+
+        span {
+          color: $color-white;
+        }
+
+        &:hover {
+          span {
+            color: $color-primary;
+          }
+          svg {
+            fill: $color-primary;
+          }
+
+        }
+      }
+    }
+  }
+
 
   .main-icon {
     align-items: center;
@@ -25,7 +66,7 @@
     left: 0;
     position: absolute;
     top: 0;
-    width: 50px;
+    width: 40px;
 
     a {
       height: 30px;
@@ -33,7 +74,7 @@
       svg {
         fill: $color-gray-30;
         height: 30px;
-        width: 30px;
+        width: 28px;
 
         }
 
@@ -49,6 +90,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 +128,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 +145,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 {
-          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 {
+}
+
+.zoom-input {
+  align-items: center;
+  display: flex;
+
+  span {
+    color: $color-gray-10;
+    font-size: $fs15;
+    margin: 0 $x-small;
+  }
+
+  .add-zoom,
+  .remove-zoom {
     align-items: center;
+    background-color: $color-gray-60;
+    border-radius: $br-small;
+    cursor: pointer;
+    color: $color-gray-20;
     display: flex;
-    justify-content: content;
+    flex-shrink: 0;
-    margin: 0;
+    font-size: $fs20;
-
+    font-weight: bold;
-    li {
+    height: 20px;
-      align-items: center;
+    justify-content: center;
-      display: flex;
+    width: 20px;
-      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;
-          font-size: $fs15;
-        }
-
-        .add-zoom,
-        .remove-zoom {
-          align-items: center;
-          border-radius: 50%;
-          border: 1px solid $color-gray-40;
-          cursor: pointer;
-          color: $color-gray-40;
-          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);
-          }
-
-        }
-
-      }
 
+    &:hover {
+      background-color: $color-primary;
+      color: $color-gray-60;
     }
 
   }
@@ -313,7 +280,7 @@
   cursor: pointer;
   display: flex;
   margin: 0;
-  
+
   li {
     margin-left: $small;
     position: relative;
@@ -350,4 +317,4 @@
     margin-left: $small;
     padding: $x-small;
   }
-}
+}

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

@@ -16,7 +16,7 @@
   padding: 0;
   margin: 0;
   position: fixed;
-  right: 230px;
+  right: 190px;
 
   &.scrolling {
     cursor: grab;

frontend/src/uxbox/main/ui/components/dropdown.cljs

@@ -0,0 +1,39 @@
+(ns uxbox.main.ui.components.dropdown
+  (:require
+   [rumext.alpha :as mf]
+   [uxbox.util.uuid :as uuid]
+   [goog.events :as events]
+   [goog.object :as gobj])
+  (:import goog.events.EventType
+           goog.events.KeyCodes))
+
+(mf/defrc dropdown'
+  [props]
+  (let [children (gobj/get props "children")
+        on-close (gobj/get props "on-close")
+
+        on-document-clicked
+        (fn [event]
+          (on-close))
+
+        on-document-keyup
+        (fn [event]
+          (when (= (.-keyCode event) 27) ; ESC
+            (on-close)))
+
+        on-mount
+        (fn []
+          (let [lkey1 (events/listen js/document EventType.CLICK on-document-clicked)
+                lkey2 (events/listen js/document EventType.KEYUP on-document-keyup)]
+            #(do
+               (events/unlistenByKey lkey1)
+               (events/unlistenByKey lkey2))))]
+
+    (mf/use-effect {:fn on-mount})
+    [:div.dropdown
+     children]))
+
+(mf/defrc dropdown
+  [props]
+  (when (gobj/get props "show")
+    (mf/element dropdown' props)))

frontend/src/uxbox/main/ui/dashboard/profile.cljs

@@ -19,46 +19,41 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.ui.navigation :as nav]
    [uxbox.util.dom :as dom]
+   [uxbox.main.ui.components.dropdown :refer [dropdown]]
    [uxbox.util.i18n :as i18n :refer [t]]
    [uxbox.util.router :as rt]))
 
-;; --- Component: User Menu
+;; --- Component: Profile
 
-(mf/defc profile-menu
+(mf/defc profile-section
-  [props]
+  [{:keys [profile] :as props}]
-  (let [locale (i18n/use-locale)
+  (let [show (mf/use-state false)
+        photo (:photo-uri profile "")
+        photo (if (str/empty? photo)
+                "/images/avatar.jpg"
+                photo)
+
+        locale (i18n/use-locale)
         on-click
         (fn [event section]
           (dom/stop-propagation event)
           (if (keyword? section)
             (st/emit! (rt/nav section))
             (st/emit! section)))]
-    [:ul.dropdown
-     [:li {:on-click #(on-click % :settings-profile)}
-      i/user
-      [:span (t locale "dashboard.header.profile-menu.profile")]]
-     [:li {:on-click #(on-click % :settings-password)}
-      i/lock
-      [:span (t locale "dashboard.header.profile-menu.password")]]
-     [:li {:on-click #(on-click % da/logout)}
-      i/exit
-      [:span (t locale "dashboard.header.profile-menu.logout")]]]))
 
-
+    [:div.user-zone {:on-click #(reset! show true)}
-
-;; --- Component: Profile
-
-(mf/defc profile-section
-  [{:keys [profile] :as props}]
-  (let [open (mf/use-state false)
-        photo (:photo-uri profile "")
-        photo (if (str/empty? photo)
-                "/images/avatar.jpg"
-                photo)]
-    [:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile))
-                     :on-mouse-enter #(reset! open true)
-                     :on-mouse-leave #(reset! open false)}
      [:img {:src photo}]
      [:span (:fullname profile)]
-     (when @open
+
-       [:& profile-menu])]))
+     [:& dropdown {:on-close #(reset! show false)
+                   :show @show}
+      [:ul.profile-menu
+       [:li {:on-click #(on-click % :settings-profile)}
+        i/user
+        [:span (t locale "dashboard.header.profile-menu.profile")]]
+       [:li {:on-click #(on-click % :settings-password)}
+        i/lock
+        [:span (t locale "dashboard.header.profile-menu.password")]]
+       [:li {:on-click #(on-click % da/logout)}
+        i/exit
+        [:span (t locale "dashboard.header.profile-menu.logout")]]]]]))

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]
    [uxbox.main.constants :as c]
    [uxbox.main.data.history :as udh]
    [uxbox.main.data.workspace :as dw]
@@ -29,6 +30,7 @@
    [uxbox.main.ui.workspace.shortcuts :as shortcuts]
    [uxbox.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
    [uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]]
+   [uxbox.main.ui.workspace.left-toolbar :refer [left-toolbar]]
    [uxbox.util.data :refer [classnames]]
    [uxbox.util.dom :as dom]
    [uxbox.util.geom.point :as gpt]
@@ -85,9 +87,13 @@
           [:& horizontal-rule]
           [:& vertical-rule]])
 
-       [:section.workspace-viewport {:id "workspace-viewport" :ref frame}
+       [:section.workspace-viewport {:id "workspace-viewport"
+                                     :ref frame}
         [:& viewport {:page page :file file}]]]
 
+      [:& left-toolbar {:page page
+                        :layout layout}]
+
       ;; Aside
       (when left-sidebar?
         [:& left-sidebar {:file file :page page :layout layout}])

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

@@ -20,7 +20,8 @@
    [uxbox.main.store :as st]
    [uxbox.main.ui.modal :as modal]
    [uxbox.main.ui.workspace.images :refer [import-image-modal]]
-   [uxbox.util.i18n :refer [tr]]
+   [uxbox.main.ui.components.dropdown :refer [dropdown]]
+   [uxbox.util.i18n :as i18n :refer [tr t]]
    [uxbox.util.math :as mth]
    [uxbox.util.router :as rt]))
 
@@ -32,11 +33,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.add-zoom {:on-click decrease} "-"]
+     [:span {} (str (mth/round (* 100 zoom)) "%")]
-      [:span {} (str (mth/round (* 100 zoom)) "%")]
+     [:span.remove-zoom {:on-click increase} "+"]]))
-      [:span.remove-zoom {:on-click increase} "+"]]]))
 
 ;; --- Header Users
 
@@ -67,6 +67,9 @@
   (let [toggle-layout #(st/emit! (dw/toggle-layout-flag %))
         on-undo (constantly nil)
         on-redo (constantly nil)
+        locale (i18n/use-locale)
+
+        show-menu? (mf/use-state false)
 
         on-image #(modal/show! import-image-modal {})
         ;;on-download #(udl/open! :download)
@@ -75,118 +78,27 @@
                                    #_(dw/deactivate-ruler)
                                    (dw/select-for-drawing %))]
 
-    [:header#workspace-bar.workspace-bar
+    [:header.workspace-bar
      [:div.main-icon
       [:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))}
        i/logo-icon]]
 
+     [:div.menu-btn {:on-click #(reset! show-menu? true)} i/actions]
+
+     [:& dropdown {:show @show-menu?
+                   :on-close #(reset! show-menu? false)}
+      [:ul.workspace-menu
+       [:li i/user [:span (t locale "dashboard.header.profile-menu.profile")]]
+       [:li i/lock [:span (t locale "dashboard.header.profile-menu.password")]]
+       [:li i/exit [:span (t locale "dashboard.header.profile-menu.logout")]]]]
+
      [: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,83 @@
+;; 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.left-toolbar
+  (:require
+   [rumext.alpha :as mf]
+   [uxbox.main.refs :as refs]
+   [uxbox.main.data.workspace :as dw]
+   [uxbox.main.store :as st]
+   [uxbox.main.ui.modal :as modal]
+   [uxbox.main.ui.workspace.images :refer [import-image-modal]]
+   [uxbox.builtins.icons :as i]))
+
+;; --- Component: Left toolbar
+
+(mf/defc left-toolbar
+  [{:keys [page layout] :as props}]
+  (let [selected-drawtool (mf/deref refs/selected-drawing-tool)
+        select-drawtool #(st/emit! :interrupt
+                                   (dw/select-for-drawing %))
+        on-image #(modal/show! import-image-modal {})]
+    [:div.left-toolbar
+     [:div.left-toolbar-inside
+      [:ul.left-toolbar-options
+       [:li.tooltip.tooltip-right
+        {:alt "Artboard"
+         :class (when (= selected-drawtool :frame) "selected")
+         :on-click (partial select-drawtool :frame)}
+        i/artboard]
+       [:li.tooltip.tooltip-right
+        {:alt "Box"
+         :class (when (= selected-drawtool :rect) "selected")
+         :on-click (partial select-drawtool :rect)}
+        i/box]
+       [:li.tooltip.tooltip-right
+        {:alt "Circle"
+         :class (when (= selected-drawtool :circle) "selected")
+         :on-click (partial select-drawtool :circle)}
+        i/circle]
+       [:li.tooltip.tooltip-right
+        {:alt "Text"
+         :class (when (= selected-drawtool :text) "selected")
+         :on-click (partial select-drawtool :text)}
+        i/text]
+       [:li.tooltip.tooltip-right
+        {:alt "Insert image"
+         :on-click on-image}
+        i/image]
+       [:li.tooltip.tooltip-right
+        {:alt "Pencil tool"
+         :class (when (= selected-drawtool :path) "selected")
+         :on-click (partial select-drawtool :path)}
+        i/pencil]
+       [:li.tooltip.tooltip-right
+        {:alt "Curves tool"
+         :class (when (= selected-drawtool :curve) "selected")
+         :on-click (partial select-drawtool :curve)}
+        i/curve]]
+
+      [:ul.left-toolbar-options.panels
+       [:li.tooltip.tooltip-right
+        {:alt "Layers"
+         :class (when (contains? layout :layers) "selected")
+         :on-click #(st/emit! (dw/toggle-layout-flag :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"
+         :class (when (contains? layout :colorpalette) "selected")
+         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
+        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]]]))

frontend/src/uxbox/util/components.cljs

@@ -11,6 +11,7 @@
    [rumext.alpha :as mf]
    [uxbox.util.timers :refer [schedule-on-idle]]))
 
+
 (mf/defc chunked-list
   [{:keys [items children initial-size chunk-size]
     :or {initial-size 30 chunk-size 5}
@@ -72,5 +73,3 @@
                            (mf/element component #js {}))))))
 
     ctor)))
-
-