diff --git a/CHANGES.md b/CHANGES.md index b2dd5bedfd..467d71f52b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -83,6 +83,8 @@ A non exhaustive list of changes: ### :bug: Bugs fixed +- Fix spacing / sizes of different elements in the measurements section of the design tab [Taiga #11076](https://tree.taiga.io/project/penpot/issue/11076) + ## 2.7.0 (Unreleased) diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index c51aa6ab47..fea5507b1e 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/frontend/src/app/main/ui/components/radio_buttons.cljs @@ -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]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs index d39917b1db..9da2318017 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs @@ -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")} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss index 248cb6ce1c..0a93669b5e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss @@ -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 { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index eb7069cb6b..78a2b3481e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -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}]]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index 22d3b7914b..20e51d1097 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -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; } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 8a234fda58..01b2cd7a16 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6066,6 +6066,14 @@ msgstr "Collapse independent radius" msgid "workspace.options.radius.show-single-corners" msgstr "Show independent radius" +#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:371 +msgid "workspace.options.size.lock" +msgstr "Lock ratio" + +#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:371 +msgid "workspace.options.size.unlock" +msgstr "Unlock ratio" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:190 msgid "workspace.options.recent-fonts" msgstr "Recent" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 656e02343d..76cdb212cd 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6093,6 +6093,14 @@ msgstr "Colapsar radios individuales" msgid "workspace.options.radius.show-single-corners" msgstr "Mostrar radios individuales" +#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:371 +msgid "workspace.options.size.lock" +msgstr "Bloquear proporción" + +#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:371 +msgid "workspace.options.size.unlock" +msgstr "Desbloquear proporción" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:190 msgid "workspace.options.recent-fonts" msgstr "Recientes"