3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-18 14:56:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4172 from penpot/ladybenko-6982-ui-fixes-design-tab

Browse source 
🐛 UI fixes for the design tab
This commit is contained in:
Eva Marco 2024-02-22 08:42:08 +01:00 • committed by GitHub
commit 21927fd54c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 106 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -21,7 +21,6 @@
flex-grow: 1;
border-radius: $s-8;
box-sizing: border-box;
border: $s-2 solid var(--radio-btn-border-color);
input {
display: none;
}

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

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

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

@ -45,63 +45,12 @@
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
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 {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.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);
}
}
}
@ -137,3 +86,49 @@
.title-only-icon-gap {
--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);
}