mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 15:51:37 -05:00
Move each toolbox into separated namespace.
This commit is contained in:
Andrey Antukh
parent
5ab9cb4c53
commit
89cc964f54
4 changed files with 152 additions and 119 deletions
|
|
@ -7,7 +7,9 @@
|
|||
[uxbox.rstore :as rs]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.toolboxes :as toolboxes]))
|
||||
[uxbox.ui.workspace.toolboxes.layers :refer (layers-toolbox)]
|
||||
[uxbox.ui.workspace.toolboxes.icons :refer (icons-toolbox)]
|
||||
[uxbox.ui.workspace.toolboxes.drawtools :refer (draw-toolbox)]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Aside
|
||||
|
|
@ -20,11 +22,11 @@
|
|||
[:aside#settings-bar.settings-bar
|
||||
[:div.settings-bar-inside
|
||||
(when (contains? toolboxes :draw)
|
||||
(toolboxes/draw-tools))
|
||||
(draw-toolbox))
|
||||
(when (contains? toolboxes :icons)
|
||||
(toolboxes/icons))
|
||||
(icons-toolbox))
|
||||
(when (contains? toolboxes :layers)
|
||||
(toolboxes/layers))]])))
|
||||
(layers-toolbox))]])))
|
||||
|
||||
(def aside
|
||||
(mx/component
|
||||
|
|
|
|||
63
src/uxbox/ui/workspace/toolboxes/deawtools.cljs
Normal file
63
src/uxbox/ui/workspace/toolboxes/deawtools.cljs
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
(ns uxbox.ui.workspace.toolboxes.drawtools
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[cats.labs.lens :as l]
|
||||
[uxbox.router :as r]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.shapes :as shapes]
|
||||
[uxbox.library :as library]
|
||||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.data.workspace :as dw]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.dom :as dom]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; 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-tools-render
|
||||
[open-toolboxes]
|
||||
(let [workspace (rum/react wb/workspace-l)
|
||||
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)])]])))
|
||||
|
||||
(def ^:static draw-toolbox
|
||||
(mx/component
|
||||
{:render draw-tools-render
|
||||
:name "draw-tools"
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
80
src/uxbox/ui/workspace/toolboxes/icons.cljs
Normal file
80
src/uxbox/ui/workspace/toolboxes/icons.cljs
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
(ns uxbox.ui.workspace.toolboxes.icons
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[cats.labs.lens :as l]
|
||||
[uxbox.router :as r]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.shapes :as shapes]
|
||||
[uxbox.library :as library]
|
||||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.data.workspace :as dw]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.dom :as dom]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn- select-icon
|
||||
[icon]
|
||||
(if (= (:drawing @wb/workspace-l) icon)
|
||||
(rs/emit! (dw/select-for-drawing nil))
|
||||
(rs/emit! (dw/select-for-drawing icon))))
|
||||
|
||||
(defn- change-icon-coll
|
||||
[local event]
|
||||
(let [value (-> (dom/event->value event)
|
||||
(read-string))]
|
||||
(swap! local assoc :collid value)
|
||||
(rs/emit! (dw/select-for-drawing nil))))
|
||||
|
||||
(defn- icon-wrapper-render
|
||||
[own icon]
|
||||
(shapes/-render-svg icon nil))
|
||||
|
||||
(def ^:static ^:private icon-wrapper
|
||||
(mx/component
|
||||
{:render icon-wrapper-render
|
||||
:name "icon-wrapper"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
(defn icons-render
|
||||
[own]
|
||||
(let [local (:rum/local own)
|
||||
drawing (rum/react drawing-shape)
|
||||
collid (:collid @local)
|
||||
icons (get-in library/+icon-collections-by-id+ [collid :icons])
|
||||
on-close #(rs/emit! (dw/toggle-toolbox :icons))
|
||||
on-select #(select-icon %)
|
||||
on-change #(change-icon-coll local %)]
|
||||
(html
|
||||
[:div#form-figures.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/window]
|
||||
[:span "Icons"]
|
||||
[:div.tool-window-close {:on-click on-close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:div.figures-catalog
|
||||
;; extract component: set selector
|
||||
[:select.input-select.small {:on-change on-change
|
||||
:value collid}
|
||||
(for [icon-coll library/+icon-collections+]
|
||||
[:option {:key (str "icon-coll" (:id icon-coll))
|
||||
:value (pr-str (:id icon-coll))}
|
||||
(:name icon-coll)])]]
|
||||
(for [icon icons
|
||||
:let [selected? (= drawing icon)]]
|
||||
[:div.figure-btn {:key (str (:id icon))
|
||||
:class (when selected? "selected")
|
||||
:on-click #(on-select icon)}
|
||||
(icon-wrapper icon)])]])))
|
||||
|
||||
(def ^:static icons-toolbox
|
||||
(mx/component
|
||||
{:render icons-render
|
||||
:name "icons-toolbox"
|
||||
:mixins [rum/reactive
|
||||
(mx/local {:collid 1 :builtin true})]}))
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(ns uxbox.ui.workspace.toolboxes
|
||||
(ns uxbox.ui.workspace.toolboxes.layers
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[cats.labs.lens :as l]
|
||||
|
|
@ -36,55 +36,7 @@
|
|||
(l/focus-atom $ st/state)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; 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-tools-render
|
||||
[open-toolboxes]
|
||||
(let [workspace (rum/react wb/workspace-l)
|
||||
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)])]])))
|
||||
|
||||
(def ^:static draw-tools
|
||||
(mx/component
|
||||
{:render draw-tools-render
|
||||
:name "draw-tools"
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Layers
|
||||
;; Components
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn- select-shape
|
||||
|
|
@ -233,73 +185,9 @@
|
|||
[:li.delete-layer {:on-click delete}
|
||||
i/trash]]]])))
|
||||
|
||||
(def ^:static layers
|
||||
(def ^:static layers-toolbox
|
||||
(mx/component
|
||||
{:render layers-render
|
||||
:name "layers"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn- select-icon
|
||||
[icon]
|
||||
(if (= (:drawing @wb/workspace-l) icon)
|
||||
(rs/emit! (dw/select-for-drawing nil))
|
||||
(rs/emit! (dw/select-for-drawing icon))))
|
||||
|
||||
(defn- change-icon-coll
|
||||
[local event]
|
||||
(let [value (-> (dom/event->value event)
|
||||
(read-string))]
|
||||
(swap! local assoc :collid value)
|
||||
(rs/emit! (dw/select-for-drawing nil))))
|
||||
|
||||
(defn- icon-wrapper-render
|
||||
[own icon]
|
||||
(shapes/-render-svg icon nil))
|
||||
|
||||
(def ^:static ^:private icon-wrapper
|
||||
(mx/component
|
||||
{:render icon-wrapper-render
|
||||
:name "icon-wrapper"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
(defn icons-render
|
||||
[own]
|
||||
(let [local (:rum/local own)
|
||||
drawing (rum/react drawing-shape)
|
||||
collid (:collid @local)
|
||||
icons (get-in library/+icon-collections-by-id+ [collid :icons])
|
||||
on-close #(rs/emit! (dw/toggle-toolbox :icons))
|
||||
on-select #(select-icon %)
|
||||
on-change #(change-icon-coll local %)]
|
||||
(html
|
||||
[:div#form-figures.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/window]
|
||||
[:span "Icons"]
|
||||
[:div.tool-window-close {:on-click on-close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:div.figures-catalog
|
||||
;; extract component: set selector
|
||||
[:select.input-select.small {:on-change on-change
|
||||
:value collid}
|
||||
(for [icon-coll library/+icon-collections+]
|
||||
[:option {:key (str "icon-coll" (:id icon-coll))
|
||||
:value (pr-str (:id icon-coll))}
|
||||
(:name icon-coll)])]]
|
||||
(for [icon icons
|
||||
:let [selected? (= drawing icon)]]
|
||||
[:div.figure-btn {:key (str (:id icon))
|
||||
:class (when selected? "selected")
|
||||
:on-click #(on-select icon)}
|
||||
(icon-wrapper icon)])]])))
|
||||
|
||||
(def ^:static icons
|
||||
(mx/component
|
||||
{:render icons-render
|
||||
:name "icons-toolbox"
|
||||
:mixins [rum/reactive
|
||||
(mx/local {:collid 1 :builtin true})]}))
|
||||
Loading…
Add table
Reference in a new issue