3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Move sidebar logic to data functions

Browse source
This commit is contained in:
Andrés Moya 2020-06-22 14:58:30 +02:00 • committed by Andrey Antukh
parent 8330a001ae
commit 06c301c7d6
9 changed files with 56 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -83,7 +83,9 @@
:drawing-tool nil :drawing-tool nil
:tooltip nil :tooltip nil
:options-mode :design :options-mode :design
:draw-interaction-to nil}) :draw-interaction-to nil
:left-sidebar? true
:right-sidebar? true})
(def initialize-layout (def initialize-layout
(ptk/reify ::initialize-layout (ptk/reify ::initialize-layout
@ -328,19 +330,34 @@
;; --- Toggle layout flag ;; --- 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] [& flags]
(ptk/reify ::toggle-layout-flag (ptk/reify ::toggle-layout-flags
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(let [reduce-fn (-> (reduce toggle-layout-flag state flags)
(fn [state flag] (check-sidebars)))))
(update state :workspace-layout
(fn [flags]
(if (contains? flags flag)
(disj flags flag)
(conj flags flag)))))]
(reduce reduce-fn state flags)))))
;; --- Set element options mode ;; --- Set element options mode
@ -1462,14 +1479,14 @@
;; Shortcuts impl https://github.com/ccampbell/mousetrap ;; Shortcuts impl https://github.com/ccampbell/mousetrap
(def shortcuts (def shortcuts
{"ctrl+m" #(st/emit! (toggle-layout-flag :sitemap)) {"ctrl+m" #(st/emit! (toggle-layout-flags :sitemap))
"ctrl+i" #(st/emit! (toggle-layout-flag :libraries)) "ctrl+i" #(st/emit! (toggle-layout-flags :libraries))
"ctrl+l" #(st/emit! (toggle-layout-flag :layers)) "ctrl+l" #(st/emit! (toggle-layout-flags :layers))
"ctrl+shift+r" #(st/emit! (toggle-layout-flag :rules)) "ctrl+shift+r" #(st/emit! (toggle-layout-flags :rules))
"ctrl+a" #(st/emit! (toggle-layout-flag :dynamic-alignment)) "ctrl+a" #(st/emit! (toggle-layout-flags :dynamic-alignment))
"ctrl+p" #(st/emit! (toggle-layout-flag :colorpalette)) "ctrl+p" #(st/emit! (toggle-layout-flags :colorpalette))
"ctrl+'" #(st/emit! (toggle-layout-flag :display-grid)) "ctrl+'" #(st/emit! (toggle-layout-flags :display-grid))
"ctrl+shift+'" #(st/emit! (toggle-layout-flag :snap-grid)) "ctrl+shift+'" #(st/emit! (toggle-layout-flags :snap-grid))
"+" #(st/emit! (increase-zoom nil)) "+" #(st/emit! (increase-zoom nil))
"-" #(st/emit! (decrease-zoom nil)) "-" #(st/emit! (decrease-zoom nil))
"g" #(st/emit! group-selected) "g" #(st/emit! group-selected)

11
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -38,15 +38,12 @@
(mf/defc workspace-content (mf/defc workspace-content
[{:keys [page file layout project] :as params}] [{:keys [page file layout project] :as params}]
(let [left-sidebar? (not (empty? (keep layout [:layers :sitemap (let [local (mf/deref refs/workspace-local)
:document-history :libraries]))) left-sidebar? (:left-sidebar? local)
right-sidebar? (not (empty? (keep layout [:icons :element-options]))) right-sidebar? (:right-sidebar? local)
classes (classnames classes (classnames
:no-tool-bar-right (not right-sidebar?) :no-tool-bar-right (not right-sidebar?)
:no-tool-bar-left (not left-sidebar?)) :no-tool-bar-left (not left-sidebar?))]
local (mf/deref refs/workspace-local)]
[:* [:*
(when (:colorpalette layout) (when (:colorpalette layout)
[:& colorpalette {:left-sidebar? left-sidebar? [:& colorpalette {:left-sidebar? left-sidebar?

2
frontend/src/uxbox/main/ui/workspace/colorpalette.cljs
View file

@ -72,7 +72,7 @@
max-offset (- (count items) max-offset (- (count items)
visible) visible)
close-fn #(st/emit! (udw/toggle-layout-flag :colorpalette)) close-fn #(st/emit! (udw/toggle-layout-flags :colorpalette))
container (mf/use-ref nil) container (mf/use-ref nil)
on-left-arrow-click on-left-arrow-click

14
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -69,49 +69,49 @@
[:& dropdown {:show @show-menu? [:& dropdown {:show @show-menu?
:on-close #(reset! show-menu? false)} :on-close #(reset! show-menu? false)}
[:ul.menu [:ul.menu
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :rules))} [:li {:on-click #(st/emit! (dw/toggle-layout-flags :rules))}
[:span [:span
(if (contains? layout :rules) (if (contains? layout :rules)
(t locale "workspace.header.menu.hide-rules") (t locale "workspace.header.menu.hide-rules")
(t locale "workspace.header.menu.show-rules"))] (t locale "workspace.header.menu.show-rules"))]
[:span.shortcut "Ctrl+r"]] [: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 [:span
(if (contains? layout :display-grid) (if (contains? layout :display-grid)
(t locale "workspace.header.menu.hide-grid") (t locale "workspace.header.menu.hide-grid")
(t locale "workspace.header.menu.show-grid"))] (t locale "workspace.header.menu.show-grid"))]
[:span.shortcut "Ctrl+'"]] [: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 [:span
(if (contains? layout :snap-grid) (if (contains? layout :snap-grid)
(t locale "workspace.header.menu.disable-snap-grid") (t locale "workspace.header.menu.disable-snap-grid")
(t locale "workspace.header.menu.enable-snap-grid"))] (t locale "workspace.header.menu.enable-snap-grid"))]
[:span.shortcut "Ctrl+Shift+'"]] [: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 [:span
(if (or (contains? layout :sitemap) (contains? layout :layers)) (if (or (contains? layout :sitemap) (contains? layout :layers))
(t locale "workspace.header.menu.hide-layers") (t locale "workspace.header.menu.hide-layers")
(t locale "workspace.header.menu.show-layers"))] (t locale "workspace.header.menu.show-layers"))]
[:span.shortcut "Ctrl+l"]] [: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 [:span
(if (contains? layout :colorpalette) (if (contains? layout :colorpalette)
(t locale "workspace.header.menu.hide-palette") (t locale "workspace.header.menu.hide-palette")
(t locale "workspace.header.menu.show-palette"))] (t locale "workspace.header.menu.show-palette"))]
[:span.shortcut "Ctrl+p"]] [: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 [:span
(if (contains? layout :libraries) (if (contains? layout :libraries)
(t locale "workspace.header.menu.hide-libraries") (t locale "workspace.header.menu.hide-libraries")
(t locale "workspace.header.menu.show-libraries"))] (t locale "workspace.header.menu.show-libraries"))]
[:span.shortcut "Ctrl+i"]] [: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 [:span
(if (contains? layout :dynamic-alignment) (if (contains? layout :dynamic-alignment)
(t locale "workspace.header.menu.disable-dynamic-alignment") (t locale "workspace.header.menu.disable-dynamic-alignment")

6
frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs
View file

@ -94,12 +94,12 @@
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt "Layers" {:alt "Layers"
:class (when (contains? layout :layers) "selected") :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] i/layers]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.libraries") {:alt (t locale "workspace.toolbar.libraries")
:class (when (contains? layout :libraries) "selected") :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] i/icon-set]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt "History"} {:alt "History"}
@ -107,5 +107,5 @@
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.color-palette") {:alt (t locale "workspace.toolbar.color-palette")
:class (when (contains? layout :colorpalette) "selected") :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]]]])) i/palette]]]]))

2
frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs
View file

@ -73,7 +73,7 @@
on-close on-close
(fn [event] (fn [event]
(st/emit! (dw/toggle-layout-flag :icons))) (st/emit! (dw/toggle-layout-flags :icons)))
on-change on-change
(fn [val] (fn [val]

2
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

@ -308,7 +308,7 @@
[{:keys [page] :as props}] [{:keys [page] :as props}]
(let [locale (mf/deref i18n/locale) (let [locale (mf/deref i18n/locale)
data (mf/deref refs/workspace-data) 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#layers.tool-window
[:div.tool-window-bar [:div.tool-window-bar
[:div.tool-window-icon i/layers] [:div.tool-window-icon i/layers]

2
frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
View file

@ -50,7 +50,7 @@
(mf/defc options-toolbox (mf/defc options-toolbox
{:wrap [mf/memo]} {:wrap [mf/memo]}
[{:keys [page selected] :as props}] [{: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 %)) on-change-tab #(st/emit! (udw/set-options-mode %))
options-mode (mf/deref refs/options-mode) options-mode (mf/deref refs/options-mode)

4
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -143,13 +143,13 @@
(mf/defc sitemap-toolbox (mf/defc sitemap-toolbox
[{:keys [file page layout] :as props}] [{:keys [file page layout] :as props}]
(let [on-create-click #(st/emit! dw/create-empty-page) (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)] locale (i18n/use-locale)]
[:div.sitemap.tool-window [:div.sitemap.tool-window
[:div.tool-window-bar [:div.tool-window-bar
[:span (t locale "workspace.sidebar.sitemap")] [:span (t locale "workspace.sidebar.sitemap")]
[:div.add-page {:on-click on-create-click} i/close] [: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]] i/arrow-slide]]
(when (contains? layout :sitemap-pages) (when (contains? layout :sitemap-pages)