🚧 Integrate new header buttons and remove drawtools sidebar.

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

@@ -242,7 +242,7 @@
 
 (declare initialize-alignment)
 
-(def default-layout #{:sitemap :drawtools :layers :element-options :rules})
+(def default-layout #{:sitemap :layers :element-options :rules})
 
 (def workspace-default
   {:zoom 1

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

@@ -70,7 +70,12 @@
         on-redo #(st/emit! (udu/redo))
         on-image #(modal/show! import-image-modal {})
         ;;on-download #(udl/open! :download)
-        file (mf/deref refs/workspace-file)]
+        file (mf/deref refs/workspace-file)
+        selected-drawtool (mf/deref refs/selected-drawing-tool)
+        select-drawtool #(st/emit! :interrupt
+                                   (dw/deactivate-ruler)
+                                   (dw/select-for-drawing %))]
+
     [:header#workspace-bar.workspace-bar
      [:div.main-icon
       [:a {:on-click #(st/emit! (rt/nav :dashboard-projects))} i/logo-icon]]
@@ -85,40 +90,35 @@
 
      [:div.workspace-options
       [:ul.options-btn
-      ;  [:li.tooltip.tooltip-bottom
-      ;   {:alt (tr "header.draw-tools")
-      ;    :class (when (contains? layout :drawtools) "selected")
-      ;    :on-click #(st/emit! (dw/toggle-layout-flag :drawtools))}
-      ;   i/shapes]
        [:li.tooltip.tooltip-bottom
-        {:alt (tr "header.color-palette")
+        {:alt (tr "ds.help.canvas")
-         :class (when (contains? layout :colorpalette) "selected")
+         :class (when (= selected-drawtool :canvas) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
+         :on-click (partial select-drawtool :canvas)}
         i/artboard]
        [:li.tooltip.tooltip-bottom
-        {:alt (tr "header.color-palette")
+        {:alt (tr "ds.help.rect")
-         :class (when (contains? layout :colorpalette) "selected")
+         :class (when (= selected-drawtool :rect) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
+         :on-click (partial select-drawtool :rect)}
         i/box]
        [:li.tooltip.tooltip-bottom
-        {:alt (tr "header.color-palette")
+        {:alt (tr "ds.help.circle")
-         :class (when (contains? layout :colorpalette) "selected")
+         :class (when (= selected-drawtool :circle) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
+         :on-click (partial select-drawtool :circle)}
         i/circle]
        [:li.tooltip.tooltip-bottom
-        {:alt (tr "header.color-palette")
+        {:alt (tr "ds.help.text")
-         :class (when (contains? layout :colorpalette) "selected")
+         :class (when (= selected-drawtool :text) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
+         :on-click (partial select-drawtool :text)}
         i/text]
        [:li.tooltip.tooltip-bottom
-        {:alt (tr "header.color-palette")
+        {:alt (tr "ds.help.path")
-         :class (when (contains? layout :colorpalette) "selected")
+         :class (when (= selected-drawtool :path) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
+         :on-click (partial select-drawtool :path)}
         i/curve]
        [:li.tooltip.tooltip-bottom
-        {:alt (tr "header.color-palette")
+        {:alt (tr "ds.help.curve")
-         :class (when (contains? layout :colorpalette) "selected")
+         :class (when (= selected-drawtool :curve) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
+         :on-click (partial select-drawtool :curve)}
         i/pencil]
        [:li.tooltip.tooltip-bottom
         {:alt (tr "header.color-palette")

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

@@ -8,7 +8,6 @@
 (ns uxbox.main.ui.workspace.sidebar
   (:require
    [rumext.alpha :as mf]
-   [uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
    [uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
    [uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
    [uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
@@ -36,8 +35,6 @@
   [{:keys [layout page] :as props}]
   [:aside#settings-bar.settings-bar
    [:div.settings-bar-inside
-    (when (contains? layout :drawtools)
-      [:& draw-toolbox {:layout layout}])
     (when (contains? layout :element-options)
       [:& options-toolbox {:page page}])
     #_(when (contains? layout :icons)

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

@@ -1,85 +0,0 @@
-;; 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 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
-
-(ns uxbox.main.ui.workspace.sidebar.drawtools
-  (:require
-   [rumext.alpha :as mf]
-   [uxbox.builtins.icons :as i]
-   [uxbox.main.data.workspace :as dw]
-   [uxbox.main.refs :as refs]
-   [uxbox.main.store :as st]
-   [uxbox.util.i18n :refer [tr]]
-   [uxbox.util.uuid :as uuid]))
-
-;; --- Constants
-
-(def +draw-tools+
-  [{:icon i/box
-    :help "ds.help.rect"
-    :type :rect
-    :priority 1}
-   {:icon i/circle
-    :help "ds.help.circle"
-    :type :circle
-    :priority 2}
-   {:icon i/text
-    :help "ds.help.text"
-    :type :text
-    :priority 4}
-   {:icon i/curve
-    :help "ds.help.path"
-    :type :path
-    :priority 5}
-   {:icon i/pencil
-    :help "ds.help.curve"
-    :type :curve
-    :priority 6}
-   ;; TODO: we need an icon for canvas creation
-   {:icon i/box
-    :help "ds.help.canvas"
-    :type :canvas
-    :priority 7}])
-
-;; --- Draw Toolbox (Component)
-
-(mf/defc draw-toolbox
-  {:wrap [mf/wrap-memo]}
-  [{:keys [flags] :as props}]
-  (letfn [(close [event]
-            (st/emit! (dw/toggle-layout-flag :drawtools)))
-          (select [event tool]
-            (st/emit! :interrupt
-                      (dw/deactivate-ruler)
-                      (dw/select-for-drawing tool)))
-          (toggle-ruler [event]
-            (st/emit! (dw/select-for-drawing nil)
-                      dw/deselect-all
-                      (dw/toggle-ruler)))]
-
-    (let [selected (mf/deref refs/selected-drawing-tool)
-          tools (sort-by (comp :priority second) +draw-tools+)]
-      [:div.tool-window.drawing-tools
-       [:div.tool-window-bar
-        [:div.tool-window-icon i/window]
-        [:span (tr "ds.settings.draw-tools")]
-        [:div.tool-window-close {:on-click close} i/close]]
-       [:div.tool-window-content
-        (for [item tools]
-          (let [selected? (= (:type item) selected)]
-            [:div.tool-btn.tooltip.tooltip-hover
-             {:alt (tr (:help item))
-              :class (when selected? "selected")
-              :key (:type item)
-              :on-click #(select % (:type item))}
-             (:icon item)]))
-
-        #_[:div.tool-btn.tooltip.tooltip-hover
-           {:alt (tr "ds.help.ruler")
-            :on-click toggle-ruler
-            :class (when (contains? flags :ruler) "selected")}
-           i/ruler-tool]]])))
-