mirror of
https://github.com/penpot/penpot.git
synced 2025-07-24 22:17:23 +02:00
🐛 Fix measures inputs' alignment
This commit is contained in:
parent
a2ac2bc6c6
commit
2ad2af2aea
6 changed files with 56 additions and 65 deletions
|
@ -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")}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue