From ce04780b6cd8d2dfbe4d11b39b06addcc22057fd Mon Sep 17 00:00:00 2001 From: Dream <42954461+eureka928@users.noreply.github.com> Date: Mon, 16 Mar 2026 06:03:49 -0400 Subject: [PATCH] :bug: Make collapsible sidebar titles clickable to toggle (#8547) Fixes #5168 --- CHANGES.md | 1 + .../src/app/main/ui/components/title_bar.cljs | 25 ++++++------------- .../src/app/main/ui/components/title_bar.scss | 9 ------- .../ui/workspace/sidebar/assets/common.cljs | 1 - .../sidebar/assets/file_library.cljs | 1 - .../ui/workspace/sidebar/assets/groups.cljs | 1 - .../main/ui/workspace/sidebar/sitemap.cljs | 1 - 7 files changed, 9 insertions(+), 30 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 91bdfea215..7a118fe18e 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -34,6 +34,7 @@ - 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) +- Fix collapsible sidebar property titles not toggling on click [Github #5168](https://github.com/penpot/penpot/issues/5168) ## 2.14.0 (Unreleased) diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index 432936b0b3..56c74696c3 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -13,30 +13,21 @@ (mf/defc title-bar* [{: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]}] - [:div {:class [(stl/css-case :title-bar true - :all-clickable all-clickable) + [:div {:class [(stl/css :title-bar) class]} (if ^boolean collapsable [:div {:class [(stl/css :title-wrapper) title-class]} (let [icon-id (if collapsed "arrow-right" "arrow-down")] - (if ^boolean all-clickable - [:button {:class (stl/css :icon-text-btn) - :on-click on-collapsed} - [:> icon* {:icon-id icon-id - :size "s" - :class (stl/css :icon)}] - [: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]]))] + [:button {:class (stl/css :icon-text-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 :title-only-icon-gap add-icon-gap) diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index b4b5b84554..f985736946 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -75,12 +75,3 @@ --title-color: var(--title-foreground-color-hover); } } - -.icon-btn { - @include deprecated.buttonStyle; - @include deprecated.flexCenter; - - &:hover { - --arrow-icon-color: var(--icon-foreground-hover); - } -} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index 9f7762b861..0c0b839864 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -172,7 +172,6 @@ [:> title-bar* {:collapsable (< 0 assets-count) :collapsed (not is-open) - :all-clickable true :on-collapsed on-collapsed :add-icon-gap (= 0 assets-count) :title title} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index 2fc62e001d..0cb88cd0df 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs @@ -101,7 +101,6 @@ :open is-open)} [:> title-bar* {:collapsable true :collapsed (not is-open) - :all-clickable true :on-collapsed toggle-open :title (if is-local (mf/html [:div {:class (stl/css :special-title)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs index 72a1be6996..fa81b21157 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs @@ -51,7 +51,6 @@ :on-context-menu on-context-menu} [:> title-bar* {:collapsable true :collapsed (not is-group-open) - :all-clickable true :on-collapsed on-fold-group :title (mf/html [:* (when-not (empty? other-path) [:span {:class (stl/css :pre-path) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index a58e1512ba..9c62ed393f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -260,7 +260,6 @@ [:> title-bar* {:collapsable true :collapsed collapsed :on-collapsed on-toggle-collapsed - :all-clickable true :title (tr "workspace.sidebar.sitemap") :class (stl/css :title-spacing-sitemap)}