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

🐛 Fix misalignment in measure section (design tab)

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)
 

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"

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/defc border-radius-menu*
-  {::mf/wrap-props false
+  {::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")}

frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss

@@ -7,30 +7,25 @@
 @import "refactor/common-refactor.scss";
 
 .radius {
-  display: flex;
+  display: grid;
-  align-items: flex-start;
+  grid-template-columns: subgrid;
-  justify-content: flex-start;
+  gap: var(--sp-xs);
-  gap: $s-4;
 }
 
 .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 {

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
+        [:> icon-button* {:variant "ghost"
-                          :selected (true? proportion-lock)
+                          :icon (if proportion-lock "lock" "unlock")
-                          :disabled (= proportion-lock :multiple))
+                          :class (stl/css-case :selected (true? proportion-lock))
-                  :on-click on-proportion-lock-change}
+                          :disabled (= proportion-lock :multiple)
-         (if proportion-lock
+                          :aria-label (if proportion-lock (tr "workspace.options.size.unlock") (tr "workspace.options.size.lock"))
-           locked-icon
+                          :on-click on-proportion-lock-change}]])
-           unlocked-icon)]])
      (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)}
+            [:> ds-i/icon* {:icon-id ds-i/play}]]])])]))
-             play-icon]]])])]))

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

@@ -7,20 +7,27 @@
 @import "refactor/common-refactor.scss";
 
 .element-set {
-  @include flexColumn;
+  display: grid;
-  margin-bottom: $s-8;
+  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;
+  grid-column: 1 / -1;
-  align-items: flex-start;
+  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 {
+.size,
-  @include flexRow;
+.position,
-  position: relative;
+.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;
+  height: var(--sp-xxxl);
-  width: $s-28;
+  width: var(--sp-xxxl);
   border-radius: $br-8;
 }
 

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"

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"