mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 23:18:48 -05:00
✨ Move sidebar ns to correct location
This commit is contained in:
Andrey Antukh
Alejandro Alonso
parent
da5209001b
commit
5d892d14d5
4 changed files with 72 additions and 69 deletions
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Add table
Reference in a new issue