From 06c301c7d649e6b1baa59a4315326f271e2a7127 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 22 Jun 2020 14:58:30 +0200 Subject: [PATCH] :recycle: Move sidebar logic to data functions --- frontend/src/uxbox/main/data/workspace.cljs | 55 ++++++++++++------- frontend/src/uxbox/main/ui/workspace.cljs | 11 ++-- .../uxbox/main/ui/workspace/colorpalette.cljs | 2 +- .../src/uxbox/main/ui/workspace/header.cljs | 14 ++--- .../uxbox/main/ui/workspace/left_toolbar.cljs | 6 +- .../main/ui/workspace/sidebar/icons.cljs | 2 +- .../main/ui/workspace/sidebar/layers.cljs | 2 +- .../main/ui/workspace/sidebar/options.cljs | 2 +- .../main/ui/workspace/sidebar/sitemap.cljs | 4 +- 9 files changed, 56 insertions(+), 42 deletions(-) diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index c1bc180b91..54bc1e44af 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -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) diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 8d99d9ecb9..3c5cfd5451 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -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? diff --git a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs index 743588a857..32c24821a6 100644 --- a/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/uxbox/main/ui/workspace/colorpalette.cljs @@ -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 diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 68741a4b4d..d910d6a78a 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -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") diff --git a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs index 996f86f8be..d2aaaa3552 100644 --- a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs @@ -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]]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs index 23004be0ab..557d16cb30 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs @@ -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] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 614458c4ed..8f50e92813 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -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] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index a633d3de99..809007cf45 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -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) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index b82136d518..fe2be1d6a1 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -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)