From 5fddf7ca4d0be4c9e931f86f9c0c369ec4aa8952 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 18 Dec 2015 19:14:57 +0200 Subject: [PATCH] Add draw toolbox rendering on workarea. --- frontend/uxbox/data/workspace.cljs | 2 +- frontend/uxbox/ui/workspace.cljs | 38 ++++++----- frontend/uxbox/ui/workspace/lateralmenu.cljs | 8 +-- frontend/uxbox/ui/workspace/toolboxes.cljs | 69 ++++++++++++++++++++ frontend/uxbox/ui/workspace/workarea.cljs | 30 ++++----- 5 files changed, 108 insertions(+), 39 deletions(-) create mode 100644 frontend/uxbox/ui/workspace/toolboxes.cljs diff --git a/frontend/uxbox/data/workspace.cljs b/frontend/uxbox/data/workspace.cljs index 7a5eda2c9..7f041c8a4 100644 --- a/frontend/uxbox/data/workspace.cljs +++ b/frontend/uxbox/data/workspace.cljs @@ -27,7 +27,7 @@ (reify rs/UpdateEvent (-apply-update [_ state] - (let [key (keyword (str (name toolname) "-enabled")) + (let [key (keyword (str (name toolname) "-toolbox-enabled")) val (get-in state [:workspace key] false) state (assoc-in state [:workspace key] (not val))] (if val diff --git a/frontend/uxbox/ui/workspace.cljs b/frontend/uxbox/ui/workspace.cljs index 9561f5764..a5f04fa80 100644 --- a/frontend/uxbox/ui/workspace.cljs +++ b/frontend/uxbox/ui/workspace.cljs @@ -12,7 +12,7 @@ [uxbox.ui.workspace.pagesmngr :refer (pagesmngr)] [uxbox.ui.workspace.header :refer (header)] [uxbox.ui.workspace.rules :refer (h-rule v-rule)] - [uxbox.ui.workspace.workarea :refer (workarea)])) + [uxbox.ui.workspace.workarea :refer (workarea aside)])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Workspace @@ -20,27 +20,29 @@ (defn workspace-render [own projectid] - (html - [:div - (header) - [:main.main-content - [:section.workspace-content - ;; Lateral Menu (left side) - (lateralmenu) + (let [workspace (rum/react wb/workspace-state )] + (html + [:div + (header) + [:main.main-content + [:section.workspace-content + ;; Lateral Menu (left side) + (lateralmenu) - ;; Pages management lightbox - (pagesmngr) + ;; Pages management lightbox + (pagesmngr) - ;; Rules - (h-rule) - (v-rule) + ;; Rules + (h-rule) + (v-rule) - ;; Canvas - (workarea) + ;; Canvas + (workarea)] + + ;; Aside + (when-not (empty? (:toolboxes workspace)) + (aside))]]))) - ;; Aside - ;; (wa/aside) - ]]])) (defn workspace-will-mount [own] diff --git a/frontend/uxbox/ui/workspace/lateralmenu.cljs b/frontend/uxbox/ui/workspace/lateralmenu.cljs index 9b26ba572..542c0da7b 100644 --- a/frontend/uxbox/ui/workspace/lateralmenu.cljs +++ b/frontend/uxbox/ui/workspace/lateralmenu.cljs @@ -27,17 +27,17 @@ [:ul.main-tools [:li.tooltip {:alt "Shapes (Ctrl + Shift + F)" - :class (when (:tools-enabled workspace false) "current") - :on-click (partial toggle :tools)} + :class (when (:draw-toolbox-enabled workspace false) "current") + :on-click (partial toggle :draw)} i/shapes] [:li.tooltip {:alt "Icons (Ctrl + Shift + I)" - :class (when (:icons-enabled workspace false) "current") + :class (when (:icons-toolbox-enabled workspace false) "current") :on-click (partial toggle :icons)} i/icon-set] [:li.tooltip {:alt "Elements (Ctrl + Shift + L)" - :class (when (:layers-enabled workspace false) "current") + :class (when (:layers-toolbox-enabled workspace false) "current") :on-click (partial toggle :layers)} i/layers] [:li.tooltip diff --git a/frontend/uxbox/ui/workspace/toolboxes.cljs b/frontend/uxbox/ui/workspace/toolboxes.cljs new file mode 100644 index 000000000..ff7193d21 --- /dev/null +++ b/frontend/uxbox/ui/workspace/toolboxes.cljs @@ -0,0 +1,69 @@ +(ns uxbox.ui.workspace.toolboxes + (:require [sablono.core :as html :refer-macros [html]] + [rum.core :as rum] + [uxbox.router :as r] + [uxbox.rstore :as rs] + [uxbox.state :as s] + [uxbox.data.workspace :as dw] + [uxbox.ui.workspace.base :as wb] + [uxbox.ui.icons :as i] + [uxbox.ui.mixins :as mx] + [uxbox.ui.util :as util])) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Draw Tools +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(def ^:staric draw-tools + {:rect + {:icon i/box + :help "Box (Ctrl + B)" + :priority 10} + :circle + {:icon i/circle + :help "Circle (Ctrl + E)" + :priority 20} + :line + {:icon i/line + :help "Line (Ctrl + L)" + :priority 30}}) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Draw Tool Box +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn draw-toolbox-render + [open-toolboxes] + (let [workspace (rum/react wb/workspace-state) + close #(rs/emit! (dw/toggle-toolbox :draw)) + tools (->> (into [] draw-tools) + (sort-by (comp :priority second)))] + (html + [:div#form-tools.tool-window + [:div.tool-window-bar + [:div.tool-window-icon i/window] + [:span "Tools"] + [:div.tool-window-close {:on-click close} i/close]] + [:div.tool-window-content + (for [[key props] tools] + [:div.tool-btn.tooltip.tooltip-hover + {:alt (:help props) + :key (name key) + :on-click (constantly nil)} + (:icon props)])]]))) + +;; #_(for [tool (t/sorted-tools (rum/react t/drawing-tools))] +;; [:div.tool-btn.tooltip.tooltip-hover +;; {:alt (:text tool) +;; :class (when (= (rum/react ws/selected-tool) +;; [(:key tool)]) +;; "selected") +;; :key (:key tool) +;; :on-click #(ws/toggle-tool! [(:key tool)])} +;; (:icon tool)])]]))) + +(def ^:static draw-toolbox + (util/component + {:render draw-toolbox-render + :name "draw-toolbox" + :mixins [mx/static rum/reactive]})) diff --git a/frontend/uxbox/ui/workspace/workarea.cljs b/frontend/uxbox/ui/workspace/workarea.cljs index 33e3cc78c..356e5d0c2 100644 --- a/frontend/uxbox/ui/workspace/workarea.cljs +++ b/frontend/uxbox/ui/workspace/workarea.cljs @@ -4,11 +4,12 @@ [uxbox.router :as r] [uxbox.rstore :as rs] [uxbox.state :as s] + [uxbox.ui.mixins :as mx] + [uxbox.ui.util :as util] [uxbox.data.projects :as dp] [uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.rules :as wr] - [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util])) + [uxbox.ui.workspace.toolboxes :refer (draw-toolbox)])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Coordinates Debug @@ -214,20 +215,17 @@ (defn aside-render [own] (let [workspace (rum/react wb/workspace-state)] - [:aside#settings-bar.settings-bar - [:div.settings-bar-inside - [:p "foo bar"] - #_(when (:tools open-setting-boxes) - (tools open-toolboxes)) - - #_(when (:icons open-setting-boxes) - (icon-sets open-toolboxes)) - - #_(when (:components open-setting-boxes) - (components open-toolboxes components)) - - #_(when (:layers open-setting-boxes) - (layers conn open-toolboxes page shapes))]])) + (html + [:aside#settings-bar.settings-bar + [:div.settings-bar-inside + (when (:draw-toolbox-enabled workspace false) + (draw-toolbox)) + #_(when (:icons open-setting-boxes) + (icon-sets open-toolboxes)) + #_(when (:components open-setting-boxes) + (components open-toolboxes components)) + #_(when (:layers open-setting-boxes) + (layers conn open-toolboxes page shapes))]]))) (def aside (util/component