✨ Changes to the flex UI

common/src/app/common/geom/shapes/flex_layout/lines.cljc

@@ -15,13 +15,9 @@
 (def conjv (fnil conj []))
 
 (defn layout-bounds
-  [{:keys [layout-padding layout-padding-type] :as shape} shape-bounds]
+  [{:keys [layout-padding] :as shape} shape-bounds]
   (let [;; Add padding to the bounds
-        {pad-top :p1 pad-right :p2 pad-bottom :p3 pad-left :p4} layout-padding
+        {pad-top :p1 pad-right :p2 pad-bottom :p3 pad-left :p4} layout-padding]
-        [pad-top pad-right pad-bottom pad-left]
-        (if (= layout-padding-type :multiple)
-          [pad-top pad-right pad-bottom pad-left]
-          [pad-top pad-top pad-top pad-top])]
     (gpo/pad-points shape-bounds pad-top pad-right pad-bottom pad-left)))
 
 (defn init-layout-lines

frontend/resources/images/icons/auto-padding-both-sides.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
+  <path d="M0 22.608v87.272h11.232V22.608Zm22.399 0V60.45h-.016v11.181h.016v38.147h87.557v-87.17zm98.661 0v87.272h11.232V22.608Z"/>
+</svg>

frontend/resources/styles/common/framework.scss

@@ -396,6 +396,10 @@ ul.slider-dots {
     width: 43px;
   }
 
+  &.auto {
+    width: auto;
+  }
+
   // Input amounts
 
   &.pixels {

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -1612,11 +1612,23 @@
       align-items: center;
       margin-right: 5px;
       font-family: "worksans", sans-serif;
+
+      &.justify-content {
+        align-items: start;
+        margin-top: 4px;
+      }
     }
     .btn-wrapper {
       display: flex;
       width: 100%;
       max-width: 185px;
+
+      &.justify-content {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+
       .direction,
       .wrap-type,
       .align-items-style,
@@ -1711,7 +1723,8 @@
     margin-bottom: 8px;
     height: 26px;
     .gap-row,
-    .gap-column {
+    .gap-column,
+    .padding-row {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -1751,6 +1764,13 @@
       border: none;
       cursor: pointer;
       border-radius: $br-small;
+
+      &.lock {
+        border: 1px solid $color-gray-60;
+        border-radius: $br-small;
+        width: 30px;
+        height: 30px;
+      }
       &.active {
         svg {
           fill: $color-primary;
@@ -1765,10 +1785,17 @@
     }
   }
 
+  .padding-row {
+    grid-template-columns: auto 30px;
+  }
+
+  .margin-row {
+    grid-template-columns: 65px auto;
+  }
+
   .padding-row,
   .margin-row {
     display: grid;
-    grid-template-columns: 65px auto;
     height: 26px;
     .padding-icons,
     .margin-icons {
@@ -1799,15 +1826,27 @@
           fill: $color-gray-30;
         }
       }
+
       :last-child {
         border: none;
       }
     }
+
+    .padding-icons {
+      margin-bottom: 8px;
+      margin-top: 3px;
+      margin-right: 1px;
+      height: 30px;
+      width: 30px;
+    }
+
     .wrapper {
       display: flex;
       height: 26px;
+
       .input-element {
         margin: 0;
+        margin-top: 3px;
         height: 26px;
       }
     }

frontend/src/app/main/ui/formats.cljs

@@ -61,7 +61,7 @@
       {:p1 p1 :p2 p2 :p3 p3}
       
       :else
-      {:p1 p1 :p2 p2 :p3 p3})))
+      {:p1 p1 :p2 p2 :p3 p3 :p4 p4})))
 
 (defn format-size [type value shape]
   (let [sizing (if (= type :width)

frontend/src/app/main/ui/icons.cljs

@@ -68,6 +68,7 @@
 (def auto-margin (icon-xref :auto-margin))
 (def auto-padding (icon-xref :auto-padding))
 (def auto-padding-side (icon-xref :auto-padding-side))
+(def auto-padding-both-sides (icon-xref :auto-padding-both-sides))
 (def auto-width (icon-xref :auto-width))
 (def auto-wrap (icon-xref :auto-wrap))
 (def bool-difference (icon-xref :boolean-difference))

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -12,7 +12,6 @@
             [app.main.ui.components.numeric-input :refer [numeric-input]]
             [app.main.ui.icons :as i]
             [app.util.dom :as dom]
-            [app.util.i18n :as i18n :refer [tr]]
             [cuerdas.core :as str]
             [rumext.v2 :as mf]))
 
@@ -154,53 +153,70 @@
 
 (mf/defc justify-content-row
   [{:keys [is-col? justify-content set-justify] :as props}]
-  [:div.justify-content-style
+  [:*
-   (for [justify [:start :center :end :space-around :space-between]]
+   [:div.justify-content-style
-     [:button.justify.tooltip
+    (for [justify [:start :center :end]]
-      {:class    (dom/classnames :active  (= justify-content justify)
+      [:button.justify.tooltip
-                                 :tooltip-bottom-left (not= justify :start)
+       {:class    (dom/classnames :active  (= justify-content justify)
-                                 :tooltip-bottom (= justify :start))
+                                  :tooltip-bottom-left (not= justify :start)
-       :alt      (dm/str "Justify content " (d/name justify))
+                                  :tooltip-bottom (= justify :start))
-       :on-click #(set-justify justify)
+        :alt      (dm/str "Justify content " (d/name justify))
-       :key (dm/str "justify-content" (d/name justify))}
+        :on-click #(set-justify justify)
-      (get-layout-flex-icon :justify-content justify is-col?)])])
+        :key (dm/str "justify-content" (d/name justify))}
+       (get-layout-flex-icon :justify-content justify is-col?)])]
+   [:div.justify-content-style
+    (for [justify [:space-around :space-between]]
+      [:button.justify.tooltip
+       {:class    (dom/classnames :active  (= justify-content justify)
+                                  :tooltip-bottom-left (not= justify :start)
+                                  :tooltip-bottom (= justify :start))
+        :alt      (dm/str "Justify content " (d/name justify))
+        :on-click #(set-justify justify)
+        :key (dm/str "justify-content" (d/name justify))}
+       (get-layout-flex-icon :justify-content justify is-col?)])]])
 
 
 (mf/defc padding-section
   [{:keys [values on-change-style on-change] :as props}]
 
   (let [padding-type (:layout-padding-type values)
-        rx (if (and (not (= :multiple (:layout-padding values)))
+        p1 (if (and (not (= :multiple (:layout-padding values)))
-                    (apply = (vals (:layout-padding values))))
+                    (= (dm/get-in values [:layout-padding :p1])
-             (:p1 (:layout-padding values))
+                       (dm/get-in values [:layout-padding :p3])))
+             (dm/get-in values [:layout-padding :p1])
+             "--")
+
+        p2 (if (and (not (= :multiple (:layout-padding values)))
+                    (= (dm/get-in values [:layout-padding :p2])
+                       (dm/get-in values [:layout-padding :p4])))
+             (dm/get-in values [:layout-padding :p2])
              "--")]
 
     [:div.padding-row
-     [:div.padding-icons
+     (cond
-      [:div.padding-icon.tooltip.tooltip-bottom
+       (= padding-type :simple)
-       {:class (dom/classnames :selected (= padding-type :simple))
-        :alt "Padding"
-        :on-click #(on-change-style :simple)}
-       i/auto-padding]
-      [:div.padding-icon.tooltip.tooltip-bottom
-       {:class (dom/classnames :selected (= padding-type :multiple))
-        :alt "Padding - sides"
-        :on-click #(on-change-style :multiple)}
-       i/auto-padding-side]]
-     [:div.wrapper
-      (cond
-        (= padding-type :simple)
-        [:div.tooltip.tooltip-bottom
-         {:alt (tr "workspace.options.layout.padding-all")}
-         [:div.input-element.mini
 
-          [:> numeric-input
+       [:div.gap-group
-           {:placeholder "--"
+        [:div.gap-row.tooltip.tooltip-bottom-left
-            :on-click #(dom/select-target %)
+         {:alt "Vertical padding"}
-            :on-change (partial on-change :simple)
+         [:span.icon.rotated i/auto-padding-both-sides]
-            :value rx}]]]
+         [:> numeric-input
+          {:placeholder "--"
+           :on-click #(dom/select-target %)
+           :on-change (partial on-change :simple :p1)
+           :value p1}]]
 
-        (= padding-type :multiple)
+        [:div.gap-column.tooltip.tooltip-bottom-left
+         {:alt "Horizontal padding"}
+         [:span.icon i/auto-padding-both-sides]
+         [:> numeric-input
+          {:placeholder "--"
+           :on-click #(dom/select-target %)
+           :on-change (partial on-change :simple :p2)
+           :value p2}]]]
+
+       (= padding-type :multiple)
+       [:div.wrapper
         (for [num [:p1 :p2 :p3 :p4]]
           [:div.tooltip.tooltip-bottom
            {:key (dm/str "padding-" (d/name num))
@@ -209,12 +225,19 @@
                    :p2 "Right"
                    :p3 "Bottom"
                    :p4 "Left")}
-           [:div.input-element.mini
+           [:div.input-element.auto
             [:> numeric-input
              {:placeholder "--"
               :on-click #(dom/select-target %)
-              :on-change (partial on-change num)
+              :on-change (partial on-change :multiple num)
-              :value (num (:layout-padding values))}]]]))]]))
+              :value (num (:layout-padding values))}]]])])
+
+     [:div.padding-icons
+      [:div.padding-icon.tooltip.tooltip-bottom
+       {:class (dom/classnames :selected (= padding-type :multiple))
+        :alt "Padding - multiple"
+        :on-click #(on-change-style (if (= padding-type :multiple) :simple :multiple))}
+       i/auto-padding-side]]]))
 
 (mf/defc gap-section
   [{:keys [gap-selected? set-gap gap-value toggle-gap-type gap-type]}]
@@ -358,10 +381,17 @@
           (st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
 
         on-padding-change
-        (fn [type val]
+        (fn [type prop val]
-          (if (= type :simple)
+          (prn "??" type prop val)
-            (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p2 val :p3 val :p4 val}}))
+          (cond
-            (st/emit! (dwsl/update-layout ids {:layout-padding {type val}}))))]
+            (and (= type :simple) (= prop :p1))
+            (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
+
+            (and (= type :simple) (= prop :p2))
+            (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
+
+            :else
+            (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))]
 
     [:div.element-set
      [:div.element-set-title
@@ -415,7 +445,7 @@
 
           [:div.layout-row
            [:div.justify-content.row-title "Justify"]
-           [:div.btn-wrapper
+           [:div.btn-wrapper.justify-content
             [:& justify-content-row {:is-col? is-col?
                                      :justify-content justify-content
                                      :set-justify set-justify-content}]]]