🐛 Fix measures inputs' alignment

This commit is contained in:
Belén Albeza 2025-05-21 16:26:52 +02:00
parent a2ac2bc6c6
commit 2ad2af2aea
6 changed files with 56 additions and 65 deletions

View file

@ -1,6 +1,7 @@
(ns app.main.ui.workspace.sidebar.options.menus.border-radius
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.common.types.shape.radius :as ctsr]
[app.main.data.workspace.shapes :as dwsh]
[app.main.store :as st]
@ -17,10 +18,10 @@
[shape]
(= (:r1 shape) (:r2 shape) (:r3 shape) (:r4 shape)))
(mf/defc border-radius-menu
{::mf/wrap-props false
(mf/defc border-radius-menu*
{::mf/props :obj
::mf/wrap [mf/memo]}
[{:keys [ids ids-with-children values]}]
[{:keys [class ids ids-with-children values]}]
(let [all-equal? (all-equal? values)
radius-expanded* (mf/use-state false)
radius-expanded (deref radius-expanded*)
@ -75,7 +76,7 @@
(mf/with-effect [ids]
(reset! radius-expanded* false))
[:div {:class (stl/css :radius)}
[:div {:class (dm/str class " " (stl/css :radius))}
(if (not radius-expanded)
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}

View file

@ -7,30 +7,25 @@
@import "refactor/common-refactor.scss";
.radius {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: $s-4;
display: grid;
grid-template-columns: subgrid;
gap: var(--sp-xs);
}
.radius-1 {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
position: relative;
}
.radius-4 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-4;
gap: var(--sp-xs);
}
.small-input {
@extend .input-element;
@include bodySmallTypography;
width: $s-52;
margin-block-end: 0;
}
.selected {

View file

@ -26,7 +26,7 @@
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.border-radius :refer [border-radius-menu]]
[app.main.ui.workspace.sidebar.options.menus.border-radius :refer [border-radius-menu*]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[clojure.set :as set]
@ -68,8 +68,6 @@
(def ^:private clip-content-icon (i/icon-xref :clip-content (stl/css :checkbox-button)))
(def ^:private play-icon (i/icon-xref :play (stl/css :checkbox-button)))
(def ^:private locked-icon (i/icon-xref :detach (stl/css :lock-ratio-icon)))
(def ^:private unlocked-icon (i/icon-xref :detached (stl/css :lock-ratio-icon)))
(defn select-measure-keys
"Consider some shapes can be drawn from bottom to top or from left to right"
@ -365,14 +363,13 @@
:disabled disabled-height-sizing?
:class (stl/css :numeric-input)
:value (:height values)}]]
[:button {:class (stl/css-case
:lock-size-btn true
:selected (true? proportion-lock)
:disabled (= proportion-lock :multiple))
:on-click on-proportion-lock-change}
(if proportion-lock
locked-icon
unlocked-icon)]])
[:> icon-button* {:variant "ghost"
:icon (if proportion-lock "lock" "unlock")
:class (stl/css-case :selected (true? proportion-lock))
:disabled (= proportion-lock :multiple)
:aria-label (if proportion-lock (tr "workspace.options.size.unlock") (tr "workspace.options.size.lock"))
:on-click on-proportion-lock-change}]])
(when (options :position)
[:div {:class (stl/css :position)}
[:div {:class (stl/css-case :x-position true
@ -412,7 +409,7 @@
:class (stl/css :numeric-input)
:value (:rotation values)}]])
(when (options :radius)
[:& border-radius-menu {:ids ids :ids-with-children ids-with-children :values values :shape shape}])])
[:> border-radius-menu* {:class (stl/css :border-radius) :ids ids :ids-with-children ids-with-children :values values :shape shape}])])
(when (or (options :clip-content) (options :show-in-viewer))
[:div {:class (stl/css :clip-show)}
(when (options :clip-content)

View file

@ -7,8 +7,14 @@
@import "refactor/common-refactor.scss";
.element-set {
@include flexColumn;
margin-bottom: $s-8;
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);
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
column-gap: var(--sp-xs);
}
.presets {
@ -108,16 +114,21 @@
}
}
.size {
@include flexRow;
position: relative;
.size,
.position,
.rotation-radius {
display: grid;
grid-template-columns: subgrid;
grid-column: 1/-1;
}
.height,
.width {
.width,
.x-position,
.y-position,
.rotation {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
.icon-text {
padding-top: $s-1;
}
@ -126,6 +137,10 @@
}
}
.border-radius {
grid-column: 2/-1;
}
.lock-size-btn {
@extend .button-tertiary;
border-radius: $br-8;
@ -141,39 +156,6 @@
stroke: var(--icon-foreground);
}
.position {
@include flexRow;
}
.x-position,
.y-position {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
.icon-text {
padding-top: $s-1;
}
&.disabled {
@extend .disabled-input;
}
}
.rotation-radius {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: $s-4;
}
.rotation {
@extend .input-element;
@include bodySmallTypography;
width: $s-108;
.icon-text {
padding-top: $s-1;
}
}
.clip-show {
display: flex;
align-items: flex-start;