From 5d892d14d5ff5a0692f00b275a54d947a8ff376a Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 24 May 2023 23:52:31 +0200 Subject: [PATCH] :sparkles: Move sidebar ns to correct location --- frontend/src/app/main/ui/workspace.cljs | 2 +- .../ui/workspace/{sidebar => }/sidebar.cljs | 139 +++++++++--------- .../workspace/{sidebar => }/sidebar.css.json | 0 .../ui/workspace/{sidebar => }/sidebar.scss | 0 4 files changed, 72 insertions(+), 69 deletions(-) rename frontend/src/app/main/ui/workspace/{sidebar => }/sidebar.cljs (50%) rename frontend/src/app/main/ui/workspace/{sidebar => }/sidebar.css.json (100%) rename frontend/src/app/main/ui/workspace/{sidebar => }/sidebar.scss (100%) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 4de952879..2e7c240ff 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -28,7 +28,7 @@ [app.main.ui.workspace.palette :refer [palette]] [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]] - [app.main.ui.workspace.sidebar.sidebar :refer [left-sidebar right-sidebar]] + [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.textpalette :refer [textpalette]] [app.main.ui.workspace.viewport :refer [viewport]] [app.util.dom :as dom] diff --git a/frontend/src/app/main/ui/workspace/sidebar/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs similarity index 50% rename from frontend/src/app/main/ui/workspace/sidebar/sidebar.cljs rename to frontend/src/app/main/ui/workspace/sidebar.cljs index fe3b8a403..2c67ca08b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -4,13 +4,14 @@ ;; ;; Copyright (c) KALEIDOS INC -(ns app.main.ui.workspace.sidebar.sidebar +(ns app.main.ui.workspace.sidebar (:require-macros [app.main.style :refer [css]]) (:require + [app.common.data.macros :as dm] [app.main.data.workspace :as dw] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.tab-container :refer [tab-container tab-element]] + [app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.context :as ctx] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.icons :as i] @@ -30,120 +31,122 @@ ;; --- Left Sidebar (Component) (mf/defc left-sidebar - {:wrap [mf/memo]} + {::mf/wrap [mf/memo] + ::mf/wrap-props false} [{:keys [layout] :as props}] - (let [options-mode (mf/deref refs/options-mode-global) - mode-inspect? (= options-mode :inspect) - section (cond (or mode-inspect? (contains? layout :layers)) :layers - (contains? layout :assets) :assets) - shortcuts? (contains? layout :shortcuts) - show-debug? (contains? layout :debug-panel) - new-css-system (mf/use-ctx ctx/new-css-system) + (let [options-mode (mf/deref refs/options-mode-global) + mode-inspect? (= options-mode :inspect) + + section (cond (or mode-inspect? (contains? layout :layers)) :layers + (contains? layout :assets) :assets) + shortcuts? (contains? layout :shortcuts) + show-debug? (contains? layout :debug-panel) + new-css? (mf/use-ctx ctx/new-css-system) + {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} (use-resize-hook :left-sidebar 255 255 500 :x false :left) handle-collapse - (fn [] - (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))] + (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) + + on-tab-change + (mf/use-fn #(st/emit! (dw/go-to-layout %))) + ] [:aside {:ref parent-ref - :class (if new-css-system + :class (if ^boolean new-css? (dom/classnames (css :left-settings-bar) true) (dom/classnames :settings-bar true :settings-bar-left true :two-row (<= size 300) :three-row (and (> size 300) (<= size 400)) :four-row (> size 400))) - :style #js {"--width" (str size "px")}} + :style #js {"--width" (dm/str size "px")}} [:div {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture :on-pointer-move on-pointer-move - :class (if new-css-system + :class (if ^boolean new-css? (dom/classnames (css :resize-area) true) (dom/classnames :resize-area true))}] - [:div {:class (if new-css-system + [:div {:class (if ^boolean new-css? (dom/classnames (css :settings-bar-inside) true) (dom/classnames :settings-bar-inside true))} (cond - shortcuts? + (true? shortcuts?) [:& shortcuts-container] - show-debug? + (true? show-debug?) [:& debug-panel] :else - [:* + (if ^boolean new-css? + [:& tab-container + {:on-change-tab on-tab-change + :selected section + :shortcuts? shortcuts? + :collapsable? true + :handle-collapse handle-collapse} - (if new-css-system - [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %)) - :selected section - :shortcuts? shortcuts? - :collapsable? true - :handle-collapse handle-collapse} - [:& tab-element {:id :layers - :title (tr "workspace.sidebar.layers")} - [:div {:class (dom/classnames (css :layers-tab) true)} + [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")} + [:div {:class (dom/classnames (css :layers-tab) true)} + [:& sitemap {:layout layout}] + [:& layers-toolbox {:size-parent size}]]] + + (when-not ^boolean mode-inspect? + [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")} + [:& assets-toolbox]])] + + [:* + [:button.collapse-sidebar + {:on-click handle-collapse + :aria-label (tr "workspace.sidebar.collapse")} + i/arrow-slide] + + [:& tab-container + {:on-change-tab on-tab-change + :selected section + :shortcuts? shortcuts? + :collapsable? true + :handle-collapse handle-collapse} + + [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")} + [:div {:class (dom/classnames :layers-tab true)} [:& sitemap {:layout layout}] [:& layers-toolbox {:size-parent size}]]] - (when-not mode-inspect? + (when-not ^boolean mode-inspect? [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")} - [:& assets-toolbox]])] - - [:* - [:button.collapse-sidebar - {:on-click handle-collapse - :aria-label (tr "workspace.sidebar.collapse")} - i/arrow-slide] - [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %)) - :selected section - :shortcuts? shortcuts? - :collapsable? true - :handle-collapse handle-collapse} - [:& tab-element {:id :layers - :title (tr "workspace.sidebar.layers")} - [:div {:class (dom/classnames :layers-tab true)} - [:& sitemap {:layout layout}] - [:& layers-toolbox {:size-parent size}]]] - - (when-not mode-inspect? - [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")} - [:& assets-toolbox]])]])])]])) + [:& assets-toolbox]])]]))]])) ;; --- Right Sidebar (Component) (mf/defc right-sidebar {::mf/wrap-props false ::mf/wrap [mf/memo]} - [props] - (let [layout (obj/get props "layout") - section (obj/get props "section") - drawing-tool (:tool (mf/deref refs/workspace-drawing)) + [{:keys [layout section] :as props}] + (let [drawing-tool (:tool (mf/deref refs/workspace-drawing)) - is-comments? (= drawing-tool :comments) - is-history? (contains? layout :document-history) - is-inspect? (= section :inspect) + is-comments? (= drawing-tool :comments) + is-history? (contains? layout :document-history) + is-inspect? (= section :inspect) expanded? (mf/deref refs/inspect-expanded) - can-be-expanded? (and - (not is-comments?) - (not is-history?) - is-inspect?)] + can-be-expanded? (and (not is-comments?) + (not is-history?) + is-inspect?)] - (mf/use-effect - (mf/deps can-be-expanded?) - (fn [] - (when (not can-be-expanded?) - (st/emit! (dw/set-inspect-expanded false))))) + (mf/with-effect [can-be-expanded?] + (when (not can-be-expanded?) + (st/emit! (dw/set-inspect-expanded false)))) [:aside.settings-bar.settings-bar-right {:class (when (and can-be-expanded? expanded?) "expanded")} [:div.settings-bar-inside (cond - is-comments? + (true? is-comments?) [:& comments-sidebar] - is-history? + (true? is-history?) [:& history-toolbox] :else diff --git a/frontend/src/app/main/ui/workspace/sidebar/sidebar.css.json b/frontend/src/app/main/ui/workspace/sidebar.css.json similarity index 100% rename from frontend/src/app/main/ui/workspace/sidebar/sidebar.css.json rename to frontend/src/app/main/ui/workspace/sidebar.css.json diff --git a/frontend/src/app/main/ui/workspace/sidebar/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss similarity index 100% rename from frontend/src/app/main/ui/workspace/sidebar/sidebar.scss rename to frontend/src/app/main/ui/workspace/sidebar.scss