3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-24 17:46:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6528 from penpot/ladybenko-11076-fix-xywh-inputs

Browse source 
🐛 Fix misalignment in measure section (design tab)
This commit is contained in:
Andrey Antukh 2025-05-21 21:05:38 +02:00 • committed by GitHub
commit ec29c4f5fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 76 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/main/ui/components/radio_buttons.cljs
View file

@ -64,7 +64,7 @@
nitems (if (array? children)
(alength children)
1)
;; FIXME: we should handle this with CSS
width (mf/with-memo [nitems]
(if (= wide true)
"unset"
@ -100,6 +100,6 @@
[:& (mf/provider context) {:value context-value}
[:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
:style {:width width}
:style {:width width}
:key (dm/str name "-" selected)}
children]]))

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
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")}

13
frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss
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 {

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

@ -24,9 +24,10 @@
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as ds-i]
[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]
@ -66,11 +67,6 @@
:svg-raw generic-options
:text generic-options))
(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"
[shape]
@ -328,7 +324,9 @@
[:& radio-buttons {:selected (or (d/name orientation) "")
:on-change on-orientation-change
:name "frame-otientation"}
:name "frame-orientation"
:wide true
:class (stl/css :radio-buttons)}
[:& radio-button {:icon i/size-vertical
:value "vert"
:id "size-vertical"}]
@ -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)
@ -428,7 +425,8 @@
:title (tr "workspace.options.clip-content")
:class (stl/css-case :clip-content-label true
:selected (not (:show-content values)))}
clip-content-icon]])
[:> ds-i/icon* {:icon-id ds-i/clip-content}]]])
(when (options :show-in-viewer)
[:div {:class (stl/css :show-in-viewer)}
[:input {:type "checkbox"
@ -442,5 +440,4 @@
:title (tr "workspace.options.show-in-viewer")
:class (stl/css-case :clip-content-label true
:selected (not (:hide-in-viewer values)))}
[:span {:class (stl/css :icon)}
play-icon]]])])]))
[:> ds-i/icon* {:icon-id ds-i/play}]]])])]))

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

@ -7,20 +7,27 @@
@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 - 2 * var(--sp-xs));
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
column-gap: var(--sp-xs);
}
.presets {
display: grid;
grid-template-columns: 1fr auto 38px;
align-items: flex-start;
grid-column: 1 / -1;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: $s-4;
}
.presets-wrapper {
@extend .asset-element;
position: relative;
grid-column: span 4;
display: flex;
height: $s-32;
padding: $s-8;
@ -43,6 +50,10 @@
}
}
.radio-buttons {
grid-column: span 2;
}
.select-name {
@include bodySmallTypography;
display: flex;
@ -108,16 +119,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 +142,10 @@
}
}
.border-radius {
grid-column: 2/-1;
}
.lock-size-btn {
@extend .button-tertiary;
border-radius: $br-8;
@ -141,39 +161,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;
@ -190,8 +177,8 @@
.clip-content-label {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
height: var(--sp-xxxl);
width: var(--sp-xxxl);
border-radius: $br-8;
}