Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/detached-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 4.667h1.333a3.333 3.333 0 010 6.666H10m-4 0H4.667a3.333 3.333 0 010-6.666H6"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 209 B

2
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -130,6 +130,8 @@
color: var(--button-tertiary-foreground-color-rest);
background-color: transparent;
border: var(--button-tertiary-border-width) solid transparent;
display: grid;
place-content: center;
svg,
span svg {
stroke: var(--button-tertiary-foreground-color-rest);

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);
}

1
frontend/src/app/main/ui/icons.cljs
View file

@ -337,6 +337,7 @@
(def ^:icon delete-text-refactor (icon-xref :delete-text-refactor))
(def ^:icon desc-sort-refactor (icon-xref :desc-sort-refactor))
(def ^:icon detach-refactor (icon-xref :detach-refactor))
(def ^:icon detached-refactor (icon-xref :detached-refactor))
(def ^:icon document-refactor (icon-xref :document-refactor))
(def ^:icon download-refactor (icon-xref :download-refactor))
(def ^:icon drop-refactor (icon-xref :drop-refactor))

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
View file

@ -85,13 +85,11 @@
:title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")
:id "bool-opt-exclude"}]]]
[:div {:class (stl/css :bool-group)}
[:button
{:title (tr "workspace.shape.menu.flatten")
:class (stl/css-case
:flatten-button true
:disabled disabled-flatten)
:disabled disabled-flatten
:on-click flatten-objects}
flatten-icon]]])))
[:button
{:title (tr "workspace.shape.menu.flatten")
:class (stl/css-case
:flatten-button true
:disabled disabled-flatten)
:disabled disabled-flatten
:on-click flatten-objects}
flatten-icon]])))

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
View file

@ -7,15 +7,16 @@
@import "refactor/common-refactor.scss";
.boolean-options {
display: flex;
gap: $s-4;
display: grid;
grid-template-columns: repeat(8, $s-28);
column-gap: $s-4;
height: $s-32;
margin: 0 calc(-1 * $s-2);
}
.bool-group {
display: flex;
align-items: center;
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / span 4;
}
.flatten-button {
@ -23,6 +24,7 @@
height: $s-32;
width: $s-32;
border-radius: $br-8;
grid-column: 5 / span 1;
--flatten-icon-foreground-color: var(--icon-foreground);
&.disabled {

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
View file

@ -21,6 +21,7 @@
.flex-element-menu {
@include flexColumn;
gap: $s-12;
margin-block-end: $s-8;
}
.behaviour-menu {

14
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -52,6 +52,11 @@
:svg-raw #{:size :position :rotation}
:text #{:size :position :rotation}})
(def ^:private clip-content-icon (i/icon-xref :clip-content-refactor (stl/css :checkbox-button)))
(def ^:private play-icon (i/icon-xref :play-refactor (stl/css :checkbox-button)))
(def ^:private locked-icon (i/icon-xref :detach-refactor (stl/css :lock-ratio-icon)))
(def ^:private unlocked-icon (i/icon-xref :detached-refactor (stl/css :lock-ratio-icon)))
(defn select-measure-keys
"Consider some shapes can be drawn from bottom to top or from left to right"
[shape]
@ -413,8 +418,8 @@
:disabled (= proportion-lock :multiple))
:on-click on-proportion-lock-change}
(if proportion-lock
i/lock-refactor
i/unlock-refactor)]])
locked-icon
unlocked-icon)]])
(when (options :position)
[:div {:class (stl/css :position)}
[:div {:class (stl/css-case :x-position true
@ -543,8 +548,7 @@
:title (tr "workspace.options.clip-content")
:class (stl/css-case :clip-content-label true
:selected (not (:show-content values)))}
[:span {:class (stl/css :icon)}
i/clip-content-refactor]]])
clip-content-icon]])
(when (options :show-in-viewer)
[:div {:class (stl/css :show-in-viewer)}
[:input {:type "checkbox"
@ -559,4 +563,4 @@
:class (stl/css-case :clip-content-label true
:selected (not (:hide-in-viewer values)))}
[:span {:class (stl/css :icon)}
i/play-refactor]]])])]))
play-icon]]])])]))

40
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View file

@ -128,15 +128,16 @@
border-radius: $br-8;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
&.selected {
@extend .button-icon-selected;
}
}
.lock-ratio-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
}
.position {
@include flexRow;
}
@ -219,20 +220,19 @@
.clip-content-input {
display: none;
}
.clip-content-label {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
border-radius: $br-8;
.icon {
@include flexCenter;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
&.selected {
@extend .button-icon-selected;
}
}
}
.clip-content-label {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
border-radius: $br-8;
}
.selected {
@extend .button-icon-selected;
}
.checkbox-button {
@extend .button-icon;
}