✨ Layout changes

frontend/src/app/main/ui/workspace/sidebar/options/text.cljs

@@ -62,7 +62,7 @@
           (on-change {:text-align new-align}))]
 
     ;; --- Align
-    [:div.row-flex.align-icons
+    [:div.align-icons
      [:span.tooltip.tooltip-bottom
       {:alt (t locale "workspace.options.text-options.align-left")
        :class (dom/classnames :current (= "left" text-align))
@@ -85,25 +85,14 @@
       i/text-align-justify]]))
 
 
-(mf/defc additional-options
+(mf/defc vertical-align
   [{:keys [shapes editor ids values locale on-change] :as props}]
   (let [{:keys [vertical-align]} values
-
-        to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
-
-        grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
-
         vertical-align (or vertical-align "top")
-
-        handle-change-grow
-        (fn [event grow-type]
-          (st/emit! (dwc/update-shapes ids #(assoc % :grow-type grow-type))))
-        
         handle-change
         (fn [event new-align]
           (on-change {:vertical-align new-align}))]
 
-    [:div.row-flex
     [:div.align-icons
      [:span.tooltip.tooltip-bottom
       {:alt (t locale "workspace.options.text-options.align-top")
@@ -119,7 +108,15 @@
       {:alt (t locale "workspace.options.text-options.align-bottom")
        :class (dom/classnames :current (= "bottom" vertical-align))
        :on-click #(handle-change % "bottom")}
-       i/align-bottom]]
+      i/align-bottom]]))
+
+(mf/defc grow-options
+  [{:keys [shapes editor ids values locale on-change] :as props}]
+  (let [to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
+        grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
+        handle-change-grow
+        (fn [event grow-type]
+          (st/emit! (dwc/update-shapes ids #(assoc % :grow-type grow-type))))]
 
     [:div.align-icons
      [:span.tooltip.tooltip-bottom
@@ -136,7 +133,7 @@
       {:alt (t locale "workspace.options.text-options.grow-auto-height")
        :class (dom/classnames :current (= :auto-height grow-type))
        :on-click #(handle-change-grow % :auto-height)}
-       i/auto-height]]]))
+      i/auto-height]]))
 
 (mf/defc text-decoration-options
   [{:keys [editor ids values locale on-change] :as props}]
@@ -147,8 +144,6 @@
         handle-change
         (fn [event type]
           (on-change {:text-decoration type}))]
-    [:div.row-flex
-     [:span.element-set-subtitle (t locale "workspace.options.text-options.decoration")]
     [:div.align-icons
      [:span.tooltip.tooltip-bottom
       {:alt (t locale "workspace.options.text-options.none")
@@ -166,7 +161,7 @@
       {:alt (t locale "workspace.options.text-options.strikethrough")
        :class (dom/classnames :current (= "line-through" text-decoration))
        :on-click #(handle-change % "line-through")}
-       i/strikethrough]]]))
+      i/strikethrough]]))
 
 (defn generate-typography-name [{:keys [font-id font-variant-id] :as typography}]
   (let [{:keys [name]} (fonts/get-font-data font-id)]
@@ -273,9 +268,16 @@
        [:> typography-options opts])
 
      [:div.element-set-content
+
+      [:div.row-flex
        [:> text-align-options opts]
-      [:> additional-options opts]
-      [:> text-decoration-options opts]]]))
+       [:> vertical-align opts]]
+
+      [:div.row-flex
+       [:> grow-options opts]
+       [:> text-decoration-options opts]]
+      
+      ]]))
 
 (mf/defc options
   [{:keys [shape] :as props}]

frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs

@@ -135,7 +135,7 @@
           (let [new-spacing (dom/get-target-val event)]
             (on-change {attr new-spacing})))]
 
-    [:div.row-flex
+    [:div.spacing-options
      [:div.input-icon
       [:span.icon-before.tooltip.tooltip-bottom
        {:alt (t locale "workspace.options.text-options.line-height")}
@@ -171,8 +171,6 @@
         handle-change
         (fn [event type]
           (on-change {:text-transform type}))]
-    [:div.row-flex
-     [:span.element-set-subtitle (t locale "workspace.options.text-options.text-case")]
     [:div.align-icons
      [:span.tooltip.tooltip-bottom
       {:alt (t locale "workspace.options.text-options.none")
@@ -193,7 +191,7 @@
       {:alt (t locale "workspace.options.text-options.titlecase")
        :class (dom/classnames :current (= "capitalize" text-transform))
        :on-click #(handle-change % "capitalize")}
-       i/titlecase]]]))
+      i/titlecase]]))
 
 (mf/defc typography-options
   [{:keys [ids editor values on-change]}]
@@ -206,8 +204,9 @@
 
     [:div.element-set-content
      [:> font-options opts]
+     [:div.row-flex
       [:> spacing-options opts]
-     [:> text-transform-options opts]]))
+      [:> text-transform-options opts]]]))
 
 
 (mf/defc typography-entry