Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -05:00
Code Issues Activity

Make resizable

Browse source
This commit is contained in:
Florian Schroedl 2024-08-27 15:00:15 +02:00
parent d6823e8583
commit b24b178e29
2 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -14,7 +14,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as muc] [app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.tokens.changes :as wtch] [app.main.ui.workspace.tokens.changes :as wtch]
@ -283,13 +283,24 @@
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]
::mf/wrap-props false} ::mf/wrap-props false}
[_props] [_props]
(let [show-sets-section? (deref (temp-use-themes-flag))] (let [show-sets-section? (deref (temp-use-themes-flag))
{on-pointer-down-pages :on-pointer-down
on-lost-pointer-capture-pages :on-lost-pointer-capture
on-pointer-move-pages :on-pointer-move
size-pages-opened :size}
(use-resize-hook :sitemap 200 38 400 :y false nil)]
[:div {:class (stl/css :sidebar-tab-wrapper)} [:div {:class (stl/css :sidebar-tab-wrapper)}
(when show-sets-section? (when show-sets-section?
[:div {:class (stl/css :sets-section-wrapper)} [:div {:class (stl/css :sets-section-wrapper)
:style {:height (str size-pages-opened "px")}}
[:& themes-sidebar] [:& themes-sidebar]
[:& sets-sidebar]]) [:& sets-sidebar]])
[:div {:class (stl/css :tokens-section-wrapper)} [:div {:class (stl/css :tokens-section-wrapper)}
(when show-sets-section?
[:div {:class (stl/css :resize-area-horiz)
:on-pointer-down on-pointer-down-pages
:on-lost-pointer-capture on-lost-pointer-capture-pages
:on-pointer-move on-pointer-move-pages}])
[:& tokens-explorer]] [:& tokens-explorer]]
[:button {:class (stl/css :download-json-button) [:button {:class (stl/css :download-json-button)
:on-click wtc/download-tokens-as-json} :on-click wtc/download-tokens-as-json}

9
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -18,6 +18,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: $s-8; margin-bottom: $s-8;
overflow-y: auto;
} }
.sets-sidebar { .sets-sidebar {
@ -138,3 +139,11 @@
padding-left: $s-8; padding-left: $s-8;
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.resize-area-horiz {
position: absolute;
left: 0;
width: 100%;
border-bottom: $s-2 solid var(--resize-area-border-color);
cursor: ns-resize;
}