3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 20:21:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix chevron icon behavior on title bars

Browse source
This commit is contained in:
Belén Albeza 2024-02-20 14:50:18 +01:00
parent c484c0d667
commit b33d114402
2 changed files with 55 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/app/main/ui/components/title_bar.cljs
View file

@ -11,10 +11,13 @@
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private chevron-icon
(i/icon-xref :arrow-refactor (stl/css :chevron-icon)))
(mf/defc title-bar (mf/defc title-bar
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}] [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}]
(let [klass (dm/str (stl/css :title-bar) " " class)] (let [klass (dm/str (stl/css-case :title-bar true :all-clickable all-clickable) " " class)]
[:div {:class klass} [:div {:class klass}
(if ^boolean collapsable (if ^boolean collapsable
[:div {:class (stl/css :title-wrapper)} [:div {:class (stl/css :title-wrapper)}
@ -23,15 +26,15 @@
:on-click on-collapsed} :on-click on-collapsed}
[:span {:class (stl/css-case [:span {:class (stl/css-case
:collapsabled-icon true :collapsabled-icon true
:rotated collapsed)} :collapsed collapsed)}
i/arrow-refactor] chevron-icon]
[:div {:class (stl/css :title)} title]] [:div {:class (stl/css :title)} title]]
[:* [:*
[:button {:class (stl/css-case [:button {:class (stl/css-case
:collapsabled-icon true :collapsabled-icon true
:rotated collapsed) :collapsed collapsed)
:on-click on-collapsed} :on-click on-collapsed}
i/arrow-refactor] chevron-icon]
[:div {:class (stl/css :title)} title]])] [: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

99
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -45,61 +45,10 @@
color: var(--title-foreground-color); color: var(--title-foreground-color);
stroke: var(--title-foreground-color); stroke: var(--title-foreground-color);
overflow: hidden; overflow: hidden;
.toggle-btn {
@include buttonStyle;
display: flex;
align-items: center;
flex-grow: 1;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
overflow: hidden;
.collapsabled-icon {
@include flexCenter;
height: $s-24;
border-radius: $br-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
&.rotated svg {
transform: rotate(0deg);
}
}
&:hover { &:hover {
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.title { .title {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
}
.collapsabled-icon svg {
stroke: var(--title-foreground-color-hover);
}
}
}
.collapsabled-icon {
@include buttonStyle;
@include flexCenter;
height: $s-24;
border-radius: $br-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
&.rotated svg {
transform: rotate(0deg);
}
}
&:hover {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.title {
stroke: var(--title-foreground-color-hover);
}
.collapsabled-icon svg {
stroke: var(--title-foreground-color-hover); stroke: var(--title-foreground-color-hover);
} }
} }
@ -137,3 +86,49 @@
.title-only-icon-gap { .title-only-icon-gap {
--title-bar-title-margin: #{$s-12}; --title-bar-title-margin: #{$s-12};
} }
.toggle-btn {
@include buttonStyle;
display: flex;
align-items: center;
flex-grow: 1;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
overflow: hidden;
--chevron-icon-color: var(--icon-foreground);
&:hover {
--chevron-icon-color: var(--title-foreground-color-hover);
color: var(--title-foreground-color-hover);
.title {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
}
}
}
.collapsabled-icon {
@include buttonStyle;
@include flexCenter;
height: $s-24;
border-radius: $br-8;
--chevron-icon-rotation: 90deg;
&.collapsed {
--chevron-icon-rotation: 0deg;
}
&:hover {
--chevron-icon-color: var(--title-foreground-color-hover);
}
}
.chevron-icon {
@extend .button-icon-small;
transform: rotate(var(--chevron-icon-rotation));
stroke: var(--chevron-icon-color);
}