github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-28 11:23:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Make collapsible sidebar titles clickable to toggle (#8547)

Browse Source 
Fixes #5168
This commit is contained in:
Dream 2026-03-16 06:03:49 -04:00 committed by GitHub
parent 98e989d7f3
commit ce04780b6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 9 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -34,6 +34,7 @@
- Fix Alt/Option to draw shapes from center point (by @offreal) [Github #8361](https://github.com/penpot/penpot/pull/8361) - Fix Alt/Option to draw shapes from center point (by @offreal) [Github #8361](https://github.com/penpot/penpot/pull/8361)
- Add token name on broken token pill on sidebar [Taiga #13527](https://tree.taiga.io/project/penpot/issue/13527) - Add token name on broken token pill on sidebar [Taiga #13527](https://tree.taiga.io/project/penpot/issue/13527)
- Fix collapsible sidebar property titles not toggling on click [Github #5168](https://github.com/penpot/penpot/issues/5168)
## 2.14.0 (Unreleased) ## 2.14.0 (Unreleased)

25
frontend/src/app/main/ui/components/title_bar.cljs
View File

@ -13,30 +13,21 @@
(mf/defc title-bar* (mf/defc title-bar*
[{:keys [class collapsable collapsed title children [{:keys [class collapsable collapsed title children
btn-icon btn-title all-clickable add-icon-gap btn-icon btn-title add-icon-gap
title-class on-collapsed on-btn-click]}] title-class on-collapsed on-btn-click]}]
[:div {:class [(stl/css-case :title-bar true [:div {:class [(stl/css :title-bar)
:all-clickable all-clickable)
class]} class]}
(if ^boolean collapsable (if ^boolean collapsable
[:div {:class [(stl/css :title-wrapper) title-class]} [:div {:class [(stl/css :title-wrapper) title-class]}
(let [icon-id (if collapsed "arrow-right" "arrow-down")] (let [icon-id (if collapsed "arrow-right" "arrow-down")]
(if ^boolean all-clickable [:button {:class (stl/css :icon-text-btn)
[:button {:class (stl/css :icon-text-btn) :on-click on-collapsed}
:on-click on-collapsed} [:> icon* {:icon-id icon-id
[:> icon* {:icon-id icon-id :size "s"
:size "s" :class (stl/css :icon)}]
:class (stl/css :icon)}] [:div {:class (stl/css :title)} title]])]
[:div {:class (stl/css :title)} title]]
[:*
[:button {:class (stl/css :icon-btn)
:on-click on-collapsed}
[:> icon* {:icon-id icon-id
:size "s"
:class (stl/css :icon)}]]
[:div {:class (stl/css :title)} title]]))]
[:div {:class [(stl/css-case :title-only true [:div {:class [(stl/css-case :title-only true
:title-only-icon-gap add-icon-gap) :title-only-icon-gap add-icon-gap)

9
frontend/src/app/main/ui/components/title_bar.scss
View File

@ -75,12 +75,3 @@
--title-color: var(--title-foreground-color-hover); --title-color: var(--title-foreground-color-hover);
} }
} }
.icon-btn {
@include deprecated.buttonStyle;
@include deprecated.flexCenter;
&:hover {
--arrow-icon-color: var(--icon-foreground-hover);
}
}

1
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View File

@ -172,7 +172,6 @@
[:> title-bar* [:> title-bar*
{:collapsable (< 0 assets-count) {:collapsable (< 0 assets-count)
:collapsed (not is-open) :collapsed (not is-open)
:all-clickable true
:on-collapsed on-collapsed :on-collapsed on-collapsed
:add-icon-gap (= 0 assets-count) :add-icon-gap (= 0 assets-count)
:title title} :title title}

1
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View File

@ -101,7 +101,6 @@
:open is-open)} :open is-open)}
[:> title-bar* {:collapsable true [:> title-bar* {:collapsable true
:collapsed (not is-open) :collapsed (not is-open)
:all-clickable true
:on-collapsed toggle-open :on-collapsed toggle-open
:title (if is-local :title (if is-local
(mf/html [:div {:class (stl/css :special-title)} (mf/html [:div {:class (stl/css :special-title)}

1
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View File

@ -51,7 +51,6 @@
:on-context-menu on-context-menu} :on-context-menu on-context-menu}
[:> title-bar* {:collapsable true [:> title-bar* {:collapsable true
:collapsed (not is-group-open) :collapsed (not is-group-open)
:all-clickable true
:on-collapsed on-fold-group :on-collapsed on-fold-group
:title (mf/html [:* (when-not (empty? other-path) :title (mf/html [:* (when-not (empty? other-path)
[:span {:class (stl/css :pre-path) [:span {:class (stl/css :pre-path)

1
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View File

@ -260,7 +260,6 @@
[:> title-bar* {:collapsable true [:> title-bar* {:collapsable true
:collapsed collapsed :collapsed collapsed
:on-collapsed on-toggle-collapsed :on-collapsed on-toggle-collapsed
:all-clickable true
:title (tr "workspace.sidebar.sitemap") :title (tr "workspace.sidebar.sitemap")
:class (stl/css :title-spacing-sitemap)} :class (stl/css :title-spacing-sitemap)}