🐛 Fix problem with sidebar layout

This commit is contained in:
alonso.torres 2025-05-22 15:55:00 +02:00 committed by Alonso Torres
parent 0df2a12814
commit eaaca5629e
26 changed files with 430 additions and 289 deletions

View file

@ -85,6 +85,7 @@ A non exhaustive list of changes:
- Fix spacing / sizes of different elements in the measurements section of the design tab [Taiga #11076](https://tree.taiga.io/project/penpot/issue/11076)
- Fix selection of short paths [Github #4472](https://github.com/penpot/penpot/issues/4472)
- Fix element positioning on the right side to adjust to grid [#11073](https://tree.taiga.io/project/penpot/issue/11073)
## 2.7.0 (Unreleased)

View file

@ -196,7 +196,7 @@ test("[Bugfixing] User cut paste a variant container into a board, and undo twic
//Create a board
await workspacePage.boardButton.click();
await workspacePage.clickWithDragViewportAt(500, 500, 200, 200);
await workspacePage.clickWithDragViewportAt(500, 500, 100, 100);
await workspacePage.clickAt(495, 495);
const board = await workspacePage.rootShape.locator("Board");

View file

@ -62,7 +62,7 @@
(let [encode-fn (d/nilv encode-fn identity)
decode-fn (d/nilv decode-fn identity)
nitems (if (array? children)
(alength children)
(count (keep identity children))
1)
;; FIXME: we should handle this with CSS
width (mf/with-memo [nitems]
@ -70,7 +70,7 @@
"unset"
(fmt/format-pixels
(+ (* 4 (- nitems 1))
(* 28 nitems)))))
(* 32 nitems)))))
on-change'
(mf/use-fn

View file

@ -54,6 +54,7 @@
.dropdown-button {
@include flexCenter;
margin-inline-end: var(--sp-xxs);
svg {
@extend .button-icon-small;
transform: rotate(90deg);

View file

@ -13,12 +13,16 @@ $sz-32: px2rem(32);
$sz-36: px2rem(36);
$sz-40: px2rem(40);
$sz-48: px2rem(48);
$sz-80: px2rem(80);
$sz-88: px2rem(88);
$sz-160: px2rem(160);
$sz-200: px2rem(200);
$sz-224: px2rem(224);
$sz-252: px2rem(252);
$sz-284: px2rem(284);
$sz-318: px2rem(318);
$sz-352: px2rem(352);
$sz-400: px2rem(400);
$sz-480: px2rem(480);
$sz-500: px2rem(500);
$sz-964: px2rem(964);

View file

@ -5,6 +5,7 @@
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
@import "../ds/_sizes.scss";
.element-options {
display: flex;
@ -19,5 +20,5 @@
}
.workspace-element-options {
height: calc(100vh - #{$s-164}); // TODO: Fix this hardcoded value
height: calc(100vh - #{$sz-200}); // TODO: Fix this hardcoded value
}

View file

@ -5,9 +5,10 @@
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
@import "../ds/_sizes.scss";
$width-settings-bar: $s-276;
$width-settings-bar-max: $s-500;
$width-settings-bar: $sz-318;
$width-settings-bar-max: $sz-500;
.left-settings-bar {
display: grid;

View file

@ -4,6 +4,7 @@
//
// Copyright (c) KALEIDOS INC
@import "../../ds/_sizes.scss";
@import "refactor/common-refactor.scss";
.tool-window {
@ -29,7 +30,7 @@
flex-direction: column;
gap: $s-8;
width: 100%;
height: calc(100vh - $s-80);
height: calc(100vh - $sz-88);
padding-top: $s-8;
}

View file

@ -43,7 +43,7 @@
(when (not (and disabled-align disabled-distribute))
[:div {:class (stl/css :align-options)}
[:div {:class (stl/css :align-group)}
[:div {:class (stl/css :align-group-horizontal)}
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align
@ -76,7 +76,7 @@
:on-click distribute-objects}
i/distribute-horizontally]]
[:div {:class (stl/css :align-group)}
[:div {:class (stl/css :align-group-vertical)}
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align

View file

@ -7,19 +7,31 @@
@import "refactor/common-refactor.scss";
.align-options {
display: flex;
gap: $s-4;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
height: $s-32;
margin: 0 calc(-1 * $s-2);
}
.align-group {
@include flexRow;
.align-group-horizontal,
.align-group-vertical {
display: grid;
grid-template-columns: subgrid;
align-items: center;
justify-items: center;
}
.align-group-horizontal {
grid-column: 1 / span 4;
}
.align-group-vertical {
grid-column: 5 / span 4;
}
.align-button {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
height: $s-32;
width: $s-32;
padding: 0;
border-radius: $br-8;
svg {

View file

@ -21,9 +21,12 @@
}
.first-row {
@include flexRow;
width: 100%;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
.blur-info {
grid-column: span 6;
display: flex;
align-items: center;
gap: $s-1;

View file

@ -8,9 +8,9 @@
.boolean-options {
display: grid;
grid-template-columns: repeat(8, $s-28);
column-gap: $s-4;
height: $s-32;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
height: var(--sp-xxxl);
}
.bool-group {
@ -45,4 +45,5 @@
.boolean-radio-btn {
background-color: transparent;
gap: var(--sp-xs);
}

View file

@ -16,8 +16,9 @@
}
.element-set-content {
@include flexColumn;
margin: $s-4 0 $s-8 0;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
}
.multiple-exports {
@ -32,18 +33,18 @@
.element-group {
display: grid;
grid-template-columns: repeat(9, 1fr);
column-gap: $s-4;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.input-wrapper {
grid-column: span 8;
grid-column: span 7;
display: grid;
grid-template-columns: subgrid;
}
.format-select {
grid-column: span 3;
grid-column: span 2;
padding: 0;
.dropdown-upwards {
@ -72,6 +73,6 @@
.export-btn {
@extend .button-secondary;
@include uppercaseTitleTipography;
grid-column: 1 / span 8;
height: $s-32;
width: $s-252;
}

View file

@ -21,10 +21,13 @@
}
.grid-title {
@include flexRow;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: $s-4;
}
.option-row {
grid-column: span 6;
display: flex;
align-items: center;
gap: $s-1;
@ -45,6 +48,7 @@
}
}
.type-select-wrapper {
flex-grow: 1;
width: $s-96;
padding: 0;
border-radius: 0;
@ -143,6 +147,7 @@
.actions {
@include flexRow;
grid-column: span 2;
}
.grid-advanced-options {

View file

@ -160,7 +160,6 @@
preview-complete?))
(swap! state* assoc :selected-blend-mode current-blend-mode)))
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css-case :element-set-content true
:hidden hidden?)}
[:div {:class (stl/css :select)}
@ -209,4 +208,4 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.shape.menu.unlock")
:on-click handle-set-unblocked
:icon "lock"}])]]]))
:icon "lock"}])]]))

View file

@ -6,25 +6,25 @@
@import "refactor/common-refactor.scss";
.element-set {
margin-bottom: $s-8;
}
.element-set-content {
display: flex;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
height: $s-32;
gap: $s-4;
margin-bottom: $s-8;
.select {
width: $s-124;
grid-column: span 4;
padding: 0;
}
.input {
@extend .input-element;
@include bodySmallTypography;
width: $s-60;
grid-column: span 2;
}
.actions {
display: flex;
gap: $s-4;
grid-column: span 2;
display: grid;
grid-template-columns: subgrid;
}
&.hidden {

View file

@ -162,7 +162,8 @@
{::mf/props :obj
::mf/private true}
[{:keys [value on-change]}]
[:& radio-buttons {:selected (d/name value)
[:& radio-buttons {:class (stl/css :direction-row-flex)
:selected (d/name value)
:decode-fn keyword
:on-change on-change
:name "flex-direction"}
@ -197,7 +198,8 @@
(mf/defc align-row
{::mf/props :obj}
[{:keys [is-column value on-change]}]
[:& radio-buttons {:selected (d/name value)
[:& radio-buttons {:class (stl/css :align-row)
:selected (d/name value)
:decode-fn keyword
:on-change on-change
:name "flex-align-items"}
@ -217,7 +219,8 @@
(mf/defc align-content-row
{::mf/props :obj}
[{:keys [is-column value on-change]}]
[:& radio-buttons {:selected (d/name value)
[:& radio-buttons {:class (stl/css :align-content-row)
:selected (d/name value)
:decode-fn keyword
:on-change on-change
:name "flex-align-content"}
@ -249,7 +252,8 @@
(mf/defc justify-content-row
{::mf/props :obj}
[{:keys [is-column justify-content on-change]}]
[:& radio-buttons {:selected (d/name justify-content)
[:& radio-buttons {:class (stl/css :justify-content-row)
:selected (d/name justify-content)
:on-change on-change
:name "flex-justify"}
[:& radio-button {:value "start"
@ -582,7 +586,8 @@
(mf/defc direction-row-grid
{::mf/props :obj}
[{:keys [value on-change] :as props}]
[:& radio-buttons {:selected (d/name value)
[:& radio-buttons {:class (stl/css :direction-row-grid)
:selected (d/name value)
:decode-fn keyword
:on-change on-change
:name "grid-direction"}
@ -619,7 +624,8 @@
::mf/private true}
[{:keys [is-column value on-change]}]
(let [type (if ^boolean is-column "column" "row")]
[:& radio-buttons {:selected (d/name value)
[:& radio-buttons {:class (stl/css :align-grid-row)
:selected (d/name value)
:decode-fn keyword
:on-change on-change
:name (dm/str "flex-align-items-" type)}
@ -641,7 +647,8 @@
::mf/private :obj}
[{:keys [is-column value on-change]}]
(let [type (if ^boolean is-column "column" "row")]
[:& radio-buttons {:selected (d/name value)
[:& radio-buttons {:class (stl/css :justify-grid-row)
:selected (d/name value)
:on-change on-change
:decode-fn keyword
:name (dm/str "grid-justify-items-" type)}
@ -1103,7 +1110,7 @@
:on-click open-grid-help
:icon "help"}]])
[:div {:class (stl/css :row :first-row)}
[:div {:class (stl/css :first-row)}
[:div {:class (stl/css :direction-edit)}
[:div {:class (stl/css :direction)}
[:& direction-row-grid {:value saved-grid-dir
@ -1124,10 +1131,10 @@
:value grid-justify-content-row
:on-change on-row-justify-change}]]
[:div {:class (stl/css :row)}
[:div {:class (stl/css :gap-row)}
[:& gap-section {:on-change on-gap-change
:value (:layout-gap values)}]]
[:div {:class (stl/css :row :padding-section)}
[:div {:class (stl/css :padding-row)}
[:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values)
:on-type-change on-padding-type-change

View file

@ -30,17 +30,31 @@
}
}
.flex-layout-menu {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
margin-bottom: $s-8;
.first-row {
display: flex;
gap: $s-4;
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
margin-bottom: $s-12;
margin-top: $s-4;
.align-row {
grid-column: span 3;
}
.direction-row-flex {
grid-column: span 4;
}
.wrap-button {
@extend .button-tertiary;
border-radius: $br-8;
height: $s-32;
width: $s-28;
width: $s-32;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
@ -52,12 +66,25 @@
}
.second-row,
.third-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
margin-bottom: $s-12;
.align-content-row,
.justify-content-row {
grid-column: span 6;
}
}
.forth-row {
@include flexColumn;
display: grid;
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
gap: var(--sp-xs);
grid-column: 1 / -1;
}
.help-button-wrapper {
grid-column: 1 / -1;
display: flex;
flex-direction: row;
justify-content: space-between;
@ -66,12 +93,12 @@
}
.gap-group {
display: flex;
gap: $s-4;
grid-column: span 3;
display: grid;
grid-template-columns: subgrid;
.column-gap {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
&.disabled {
@extend .disabled-input;
}
@ -79,7 +106,6 @@
.row-gap {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
&.disabled {
@extend .disabled-input;
}
@ -87,41 +113,43 @@
}
.padding-group {
display: flex;
gap: $s-4;
display: grid;
grid-column: span 3;
grid-template-columns: subgrid;
.padding-inputs {
display: flex;
gap: $s-4;
grid-column: span 2;
display: grid;
grid-template-columns: subgrid;
}
.paddings-simple {
display: flex;
gap: $s-4;
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
.padding-simple {
@extend .input-element;
@include bodySmallTypography;
max-width: $s-108;
}
}
.paddings-multiple {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-4;
grid-column: span 2;
grid-template-columns: subgrid;
gap: var(--sp-xs);
.padding-multiple {
@extend .input-element;
@include bodySmallTypography;
max-width: $s-108;
}
}
.padding-toggle {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
width: $s-32;
border-radius: $br-8;
svg {
@extend .button-icon;
@ -134,22 +162,30 @@
}
.grid-layout-menu {
@include flexColumn;
gap: $s-8;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
.row {
@include flexRow;
.edit-grid-wrapper,
.first-row,
.grid-layout-align,
.gap-row,
.padding-row {
grid-column: 1 / -1;
}
.first-row {
margin-bottom: $s-8;
display: grid;
grid-template-columns: subgrid;
}
.grid-layout-align {
@include flexColumn;
gap: $s-4;
display: grid;
grid-template-columns: subgrid;
align-items: flex-start;
position: relative;
gap: var(--sp-xs);
.locate-button {
position: absolute;
@ -169,6 +205,7 @@
@include uppercaseTitleTipography;
width: 100%;
padding: $s-8;
grid-column: span 7;
}
.exit-btn {
@ -193,7 +230,8 @@
}
.edit-grid-wrapper {
@include flexRow;
display: grid;
grid-template-columns: subgrid;
}
}
@ -324,3 +362,23 @@
}
}
}
.direction-edit {
grid-column: span 2;
}
.align-grid-row {
grid-column: span 3;
}
.justify-grid-row {
grid-column: 1 / span 6;
}
.gap-row,
.padding-row {
display: grid;
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
gap: var(--sp-xs);
}

View file

@ -230,7 +230,6 @@
{:selected (d/name value)
:decode-fn keyword
:on-change on-change
:wide true
:name "flex-behaviour-h"}
[:& radio-button
@ -265,7 +264,6 @@
{:selected (d/name value)
:decode-fn keyword
:on-change on-change
:wide true
:name "flex-behaviour-v"}
[:& radio-button
@ -451,7 +449,7 @@
(when open?
[:div {:class (stl/css :flex-element-menu)}
(when (or is-layout-child? is-absolute?)
[:div {:class (stl/css :row)}
[:div {:class (stl/css :position-row)}
[:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? "absolute" "static")
:decode-fn keyword
@ -475,7 +473,7 @@
:nillable true
:value (:layout-item-z-index values)}]]])
[:div {:class (stl/css :row)}
[:div {:class (stl/css :behavior-row)}
[:div {:class (stl/css-case
:behaviour-menu true
:wrap (and ^boolean is-layout-child?
@ -492,21 +490,19 @@
:on-change on-behaviour-v-change}]]]
(when (and is-layout-child? is-flex-parent?)
[:div {:class (stl/css :row)}
[:div {:class (stl/css :align-row)}
[:& align-self-row {:is-col is-col?
:value align-self
:on-change on-align-self-change}]])
(when is-layout-child?
[:div {:class (stl/css :row)}
[:> margin-section* {:value (:layout-item-margin values)
:type (:layout-item-margin-type values)
:on-type-change on-margin-type-change
:on-change on-margin-change}]])
:on-change on-margin-change}])
(when (or (= h-sizing :fill)
(= v-sizing :fill))
[:div {:class (stl/css :row)}
[:div {:class (stl/css :advanced-options)}
(when (= (:layout-item-h-sizing values) :fill)
[:div {:class (stl/css :horizontal-fill)}
@ -573,4 +569,4 @@
:on-focus dom/select-target
:on-change on-size-change
:value (get values :layout-item-max-h)
:nillable true}]]])]])])]))
:nillable true}]]])])])]))

View file

@ -19,68 +19,60 @@
}
.flex-element-menu {
@include flexColumn;
gap: $s-12;
margin-block-end: $s-8;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
}
.behaviour-menu {
display: flex;
gap: $s-4;
}
.horizontal-behaviour {
&.one-element {
width: $s-28;
}
&.two-element {
width: $s-60;
}
&.three-element {
width: $s-92;
}
display: grid;
column-gap: var(--sp-xs);
grid-template-columns: auto auto;
}
.vertical-behaviour {
.rotated {
transform: rotate(90deg);
}
&.one-element {
width: $s-28;
}
&.two-element {
width: $s-60;
}
&.three-element {
width: $s-92;
}
}
.z-index-wrapper {
@extend .input-element;
@include bodySmallTypography;
width: $s-60;
grid-column: 6 / span 3;
}
.row {
display: flex;
gap: $s-4;
gap: var(--sp-xs);
}
.position-row,
.behavior-row,
.align-row,
.margin-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.position-options {
width: $s-188;
width: 100%;
grid-column: 1 / span 5;
}
.margin-row {
display: flex;
align-items: flex-start;
gap: $s-4;
display: grid;
// NOTE: this does not follow the 8-column grid and the size is not normalized,
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
gap: var(--sp-xs);
}
.margin-mode {
@extend .button-tertiary;
grid-column: 3;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
@ -90,20 +82,26 @@
}
.margin-simple {
display: flex;
gap: $s-4;
display: grid;
gap: var(--sp-xs);
grid-template-columns: subgrid;
.vertical-margin,
.horizontal-margin {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
}
.vertical-margin {
grid-column: 1;
}
.horizontal-margin {
grid-column: 2;
}
}
.margin-multiple {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-4;
grid-template-columns: subgrid;
gap: var(--sp-xs);
}
.top-margin,
@ -112,17 +110,40 @@
.right-margin {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
}
.top-margin {
grid-column: 1;
grid-row: 1;
}
.bottom-margin {
grid-column: 2;
grid-row: 1;
}
.left-margin {
grid-column: 1;
grid-row: 2;
}
.right-margin {
grid-column: 2;
grid-row: 2;
}
.advanced-options {
@include flexColumn;
display: grid;
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
gap: var(--sp-xs);
}
.horizontal-fill,
.vertical-fill {
display: flex;
gap: $s-4;
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.layout-item-min-w,
@ -131,10 +152,13 @@
.layout-item-max-h {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
.icon-text {
justify-content: flex-start;
width: $s-80;
padding-top: $s-2;
}
}
.inputs-wrapper {
grid-column: 1 / span 2;
}

View file

@ -8,26 +8,24 @@
.element-set {
display: grid;
row-gap: var(--sp-xs);
margin-bottom: var(--sp-s);
// NOTE: this does not follow the 8-column grid and the size is not normalized,
// so we need to hardcode this width :(
--input-width: calc(var(--sp-xxxl) * 3.5 - 2 * var(--sp-xs));
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
column-gap: var(--sp-xs);
gap: var(--sp-xs);
}
.presets {
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: $s-4;
gap: var(--sp-xs);
grid-column: 1 / -1;
}
.presets-wrapper {
@extend .asset-element;
position: relative;
grid-column: span 4;
grid-column: span 5;
display: flex;
height: $s-32;
padding: $s-8;

View file

@ -196,7 +196,8 @@
:on-change on-update-offset-y
:value (:offset-y shadow)}]]
[:> color-row* {:color (:color shadow)
[:> color-row* {:class (stl/css :shadow-color)
:color (:color shadow)
:title (tr "workspace.options.shadow-options.color")
:disable-gradient true
:disable-image true

View file

@ -30,7 +30,9 @@
}
.actions {
@include flexRow;
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}
.shadow-element {
@ -53,14 +55,17 @@
}
.basic-options {
@include flexRow;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
}
.shadow-info {
grid-column: span 6;
display: flex;
align-items: center;
gap: $s-1;
width: $s-188;
.more-options {
@extend .button-secondary;
height: $s-32;
@ -102,34 +107,46 @@
}
.shadow-advanced-options {
@include flexColumn;
width: $sz-252;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
}
.first-row,
.second-row {
@include flexRow;
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
.offset-x-input,
.blur-input,
.spread-input,
.offset-y-input {
@extend .input-element;
@include bodySmallTypography;
width: $s-60;
min-width: $s-60;
align-items: baseline;
input {
width: $s-32;
}
}
.blur-input,
.spread-input {
width: $s-92;
.input-label {
width: $s-44;
width: $sz-48;
}
.offset-x-input {
grid-column: span 2;
}
.offset-y-input {
grid-column: span 2;
}
.blur-input {
grid-column: span 3;
}
.spread-input {
gap: $s-8;
grid-column: span 3;
}
.shadow-color {
grid-column: span 6;
}

View file

@ -45,7 +45,7 @@
(if (= v :multiple) nil v))
(mf/defc color-row*
[{:keys [index color disable-gradient disable-opacity disable-image disable-picker hidden
[{:keys [index color class disable-gradient disable-opacity disable-image disable-picker hidden
on-change on-reorder on-detach on-open on-close on-remove
disable-drag on-focus on-blur select-only select-on-focus]}]
(let [libraries (mf/deref refs/files)
@ -68,6 +68,8 @@
editing-text* (mf/use-state false)
editing-text? (deref editing-text*)
class (if (some? class) (dm/str class " ") "")
opacity?
(and (not multiple-colors?)
(not library-color?)
@ -187,11 +189,13 @@
(when (and (not disable-picker) (not= prev-color color))
(modal/update-props! :colorpicker {:data (parse-color color)})))
[:div {:class (stl/css-case
[:div {:class (dm/str
class
(stl/css-case
:color-data true
:hidden hidden
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))}
:dnd-over-bot (= (:over dprops) :bot)))}
;; Drag handler
(when (some? on-reorder)

View file

@ -176,7 +176,7 @@
:select-on-focus select-on-focus
:on-blur on-blur}]]
[:div {:class (stl/css :select-wrapper)
[:div {:class (stl/css :select-wrapper :stroke-alignment-select)
:data-testid "stroke.alignment"}
[:& select
{:default-value stroke-alignment
@ -184,7 +184,7 @@
:on-change on-alignment-change}]]
(when-not disable-stroke-style
[:div {:class (stl/css :select-wrapper)
[:div {:class (stl/css :select-wrapper :stroke-style-select)
:data-testid "stroke.style"}
[:& select
{:default-value stroke-style

View file

@ -29,24 +29,30 @@
.stroke-options {
display: grid;
align-items: center;
gap: $s-4;
grid-template-columns: 1fr 2fr 2fr;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
.stroke-width-input-element {
@extend .input-element;
@include bodySmallTypography;
grid-column: span 2;
}
.stroke-alignment-select {
grid-column: span 3;
}
.stroke-style-select {
grid-column: span 3;
}
}
.stroke-caps-options {
display: grid;
align-items: center;
gap: $s-4;
grid-template-columns: 1fr auto 1fr;
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
grid-template-columns: var(--input-width) var(--sp-xxxl) var(--input-width);
gap: var(--sp-xs);
}
.cap-select {
width: 100%;
}
.stroke-cap-dropdown,
.stroke-cap-dropdown-start {
min-width: $s-124;
@ -62,8 +68,8 @@
}
.swap-caps-btn {
@extend .button-secondary;
height: $s-32;
width: $s-28;
height: var(--sp-xxxl);
width: var(--sp-xxxl);
svg {
@extend .button-icon;
}