mirror of
https://github.com/penpot/penpot.git
synced 2025-08-02 06:08:28 +02:00
♻️ Move sidebar logic to data functions
This commit is contained in:
parent
8330a001ae
commit
06c301c7d6
9 changed files with 56 additions and 42 deletions
|
@ -83,7 +83,9 @@
|
|||
:drawing-tool nil
|
||||
:tooltip nil
|
||||
:options-mode :design
|
||||
:draw-interaction-to nil})
|
||||
:draw-interaction-to nil
|
||||
:left-sidebar? true
|
||||
:right-sidebar? true})
|
||||
|
||||
(def initialize-layout
|
||||
(ptk/reify ::initialize-layout
|
||||
|
@ -328,19 +330,34 @@
|
|||
|
||||
;; --- Toggle layout flag
|
||||
|
||||
(defn toggle-layout-flag
|
||||
(defn- toggle-layout-flag
|
||||
[state flag]
|
||||
(update state :workspace-layout
|
||||
(fn [flags]
|
||||
(if (contains? flags flag)
|
||||
(disj flags flag)
|
||||
(conj flags flag)))))
|
||||
|
||||
(defn- check-sidebars
|
||||
[state]
|
||||
(let [layout (:workspace-layout state)
|
||||
left-sidebar? (not (empty? (keep layout [:layers
|
||||
:sitemap
|
||||
:document-history
|
||||
:libraries])))
|
||||
right-sidebar? (not (empty? (keep layout [:icons
|
||||
:element-options])))]
|
||||
(update-in state [:workspace-local]
|
||||
assoc :left-sidebar? left-sidebar?
|
||||
:right-sidebar? right-sidebar?)))
|
||||
|
||||
(defn toggle-layout-flags
|
||||
[& flags]
|
||||
(ptk/reify ::toggle-layout-flag
|
||||
(ptk/reify ::toggle-layout-flags
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [reduce-fn
|
||||
(fn [state flag]
|
||||
(update state :workspace-layout
|
||||
(fn [flags]
|
||||
(if (contains? flags flag)
|
||||
(disj flags flag)
|
||||
(conj flags flag)))))]
|
||||
(reduce reduce-fn state flags)))))
|
||||
(-> (reduce toggle-layout-flag state flags)
|
||||
(check-sidebars)))))
|
||||
|
||||
;; --- Set element options mode
|
||||
|
||||
|
@ -1462,14 +1479,14 @@
|
|||
;; Shortcuts impl https://github.com/ccampbell/mousetrap
|
||||
|
||||
(def shortcuts
|
||||
{"ctrl+m" #(st/emit! (toggle-layout-flag :sitemap))
|
||||
"ctrl+i" #(st/emit! (toggle-layout-flag :libraries))
|
||||
"ctrl+l" #(st/emit! (toggle-layout-flag :layers))
|
||||
"ctrl+shift+r" #(st/emit! (toggle-layout-flag :rules))
|
||||
"ctrl+a" #(st/emit! (toggle-layout-flag :dynamic-alignment))
|
||||
"ctrl+p" #(st/emit! (toggle-layout-flag :colorpalette))
|
||||
"ctrl+'" #(st/emit! (toggle-layout-flag :display-grid))
|
||||
"ctrl+shift+'" #(st/emit! (toggle-layout-flag :snap-grid))
|
||||
{"ctrl+m" #(st/emit! (toggle-layout-flags :sitemap))
|
||||
"ctrl+i" #(st/emit! (toggle-layout-flags :libraries))
|
||||
"ctrl+l" #(st/emit! (toggle-layout-flags :layers))
|
||||
"ctrl+shift+r" #(st/emit! (toggle-layout-flags :rules))
|
||||
"ctrl+a" #(st/emit! (toggle-layout-flags :dynamic-alignment))
|
||||
"ctrl+p" #(st/emit! (toggle-layout-flags :colorpalette))
|
||||
"ctrl+'" #(st/emit! (toggle-layout-flags :display-grid))
|
||||
"ctrl+shift+'" #(st/emit! (toggle-layout-flags :snap-grid))
|
||||
"+" #(st/emit! (increase-zoom nil))
|
||||
"-" #(st/emit! (decrease-zoom nil))
|
||||
"g" #(st/emit! group-selected)
|
||||
|
|
|
@ -38,15 +38,12 @@
|
|||
|
||||
(mf/defc workspace-content
|
||||
[{:keys [page file layout project] :as params}]
|
||||
(let [left-sidebar? (not (empty? (keep layout [:layers :sitemap
|
||||
:document-history :libraries])))
|
||||
right-sidebar? (not (empty? (keep layout [:icons :element-options])))
|
||||
(let [local (mf/deref refs/workspace-local)
|
||||
left-sidebar? (:left-sidebar? local)
|
||||
right-sidebar? (:right-sidebar? local)
|
||||
classes (classnames
|
||||
:no-tool-bar-right (not right-sidebar?)
|
||||
:no-tool-bar-left (not left-sidebar?))
|
||||
|
||||
local (mf/deref refs/workspace-local)]
|
||||
|
||||
:no-tool-bar-left (not left-sidebar?))]
|
||||
[:*
|
||||
(when (:colorpalette layout)
|
||||
[:& colorpalette {:left-sidebar? left-sidebar?
|
||||
|
|
|
@ -72,7 +72,7 @@
|
|||
max-offset (- (count items)
|
||||
visible)
|
||||
|
||||
close-fn #(st/emit! (udw/toggle-layout-flag :colorpalette))
|
||||
close-fn #(st/emit! (udw/toggle-layout-flags :colorpalette))
|
||||
container (mf/use-ref nil)
|
||||
|
||||
on-left-arrow-click
|
||||
|
|
|
@ -69,49 +69,49 @@
|
|||
[:& dropdown {:show @show-menu?
|
||||
:on-close #(reset! show-menu? false)}
|
||||
[:ul.menu
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :rules))}
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :rules))}
|
||||
[:span
|
||||
(if (contains? layout :rules)
|
||||
(t locale "workspace.header.menu.hide-rules")
|
||||
(t locale "workspace.header.menu.show-rules"))]
|
||||
[:span.shortcut "Ctrl+r"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :display-grid))}
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :display-grid))}
|
||||
[:span
|
||||
(if (contains? layout :display-grid)
|
||||
(t locale "workspace.header.menu.hide-grid")
|
||||
(t locale "workspace.header.menu.show-grid"))]
|
||||
[:span.shortcut "Ctrl+'"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :snap-grid))}
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :snap-grid))}
|
||||
[:span
|
||||
(if (contains? layout :snap-grid)
|
||||
(t locale "workspace.header.menu.disable-snap-grid")
|
||||
(t locale "workspace.header.menu.enable-snap-grid"))]
|
||||
[:span.shortcut "Ctrl+Shift+'"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap :layers))}
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :sitemap :layers))}
|
||||
[:span
|
||||
(if (or (contains? layout :sitemap) (contains? layout :layers))
|
||||
(t locale "workspace.header.menu.hide-layers")
|
||||
(t locale "workspace.header.menu.show-layers"))]
|
||||
[:span.shortcut "Ctrl+l"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :colorpalette))}
|
||||
[:span
|
||||
(if (contains? layout :colorpalette)
|
||||
(t locale "workspace.header.menu.hide-palette")
|
||||
(t locale "workspace.header.menu.show-palette"))]
|
||||
[:span.shortcut "Ctrl+p"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :libraries))}
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :libraries))}
|
||||
[:span
|
||||
(if (contains? layout :libraries)
|
||||
(t locale "workspace.header.menu.hide-libraries")
|
||||
(t locale "workspace.header.menu.show-libraries"))]
|
||||
[:span.shortcut "Ctrl+i"]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :dynamic-alignment))}
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :dynamic-alignment))}
|
||||
[:span
|
||||
(if (contains? layout :dynamic-alignment)
|
||||
(t locale "workspace.header.menu.disable-dynamic-alignment")
|
||||
|
|
|
@ -94,12 +94,12 @@
|
|||
[:li.tooltip.tooltip-right
|
||||
{:alt "Layers"
|
||||
:class (when (contains? layout :layers) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :sitemap :layers))}
|
||||
:on-click #(st/emit! (dw/toggle-layout-flags :sitemap :layers))}
|
||||
i/layers]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.libraries")
|
||||
:class (when (contains? layout :libraries) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :libraries))}
|
||||
:on-click #(st/emit! (dw/toggle-layout-flags :libraries))}
|
||||
i/icon-set]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "History"}
|
||||
|
@ -107,5 +107,5 @@
|
|||
[:li.tooltip.tooltip-right
|
||||
{:alt (t locale "workspace.toolbar.color-palette")
|
||||
:class (when (contains? layout :colorpalette) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
|
||||
:on-click #(st/emit! (dw/toggle-layout-flags :colorpalette))}
|
||||
i/palette]]]]))
|
||||
|
|
|
@ -73,7 +73,7 @@
|
|||
|
||||
on-close
|
||||
(fn [event]
|
||||
(st/emit! (dw/toggle-layout-flag :icons)))
|
||||
(st/emit! (dw/toggle-layout-flags :icons)))
|
||||
|
||||
on-change
|
||||
(fn [val]
|
||||
|
|
|
@ -308,7 +308,7 @@
|
|||
[{:keys [page] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
data (mf/deref refs/workspace-data)
|
||||
on-click #(st/emit! (dw/toggle-layout-flag :layers))]
|
||||
on-click #(st/emit! (dw/toggle-layout-flags :layers))]
|
||||
[:div#layers.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/layers]
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
(mf/defc options-toolbox
|
||||
{:wrap [mf/memo]}
|
||||
[{:keys [page selected] :as props}]
|
||||
(let [close #(st/emit! (udw/toggle-layout-flag :element-options))
|
||||
(let [close #(st/emit! (udw/toggle-layout-flags :element-options))
|
||||
on-change-tab #(st/emit! (udw/set-options-mode %))
|
||||
|
||||
options-mode (mf/deref refs/options-mode)
|
||||
|
|
|
@ -143,13 +143,13 @@
|
|||
(mf/defc sitemap-toolbox
|
||||
[{:keys [file page layout] :as props}]
|
||||
(let [on-create-click #(st/emit! dw/create-empty-page)
|
||||
toggle-layout #(st/emit! (dw/toggle-layout-flag %))
|
||||
toggle-layout #(st/emit! (dw/toggle-layout-flags %))
|
||||
locale (i18n/use-locale)]
|
||||
[:div.sitemap.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:span (t locale "workspace.sidebar.sitemap")]
|
||||
[:div.add-page {:on-click on-create-click} i/close]
|
||||
[:div.collapse-pages {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap-pages))}
|
||||
[:div.collapse-pages {:on-click #(st/emit! (dw/toggle-layout-flags :sitemap-pages))}
|
||||
i/arrow-slide]]
|
||||
|
||||
(when (contains? layout :sitemap-pages)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue