✨ Add space-between/space-around/space evenly to grids

common/src/app/common/geom/shapes/grid_layout/layout_data.cljc

@@ -393,6 +393,32 @@
         column-total-size (tracks-total-size column-tracks)
         row-total-size    (tracks-total-size row-tracks)
 
+        column-gap
+        (case (:layout-align-content parent)
+          :space-evenly
+          (max column-gap (/ (- bound-width column-total-size) (inc (count column-tracks))))
+
+          :space-around
+          (max column-gap (/ (- bound-width column-total-size) (count column-tracks)))
+
+          :space-between
+          (max column-gap (/ (- bound-width column-total-size) (dec (count column-tracks))))
+
+          column-gap)
+
+        row-gap
+        (case (:layout-justify-content parent)
+          :space-evenly
+          (max row-gap (/ (- bound-height row-total-size) (inc (count row-tracks))))
+
+          :space-around
+          (max row-gap (/ (- bound-height row-total-size) (count row-tracks)))
+
+          :space-between
+          (max row-gap (/ (- bound-height row-total-size) (dec (count row-tracks))))
+
+          row-gap)
+
         start-p
         (cond-> bound-corner
           (= :end (:layout-align-content parent))
@@ -405,7 +431,20 @@
           (gpt/add (vv (- bound-height (+ row-total-size row-total-gap))))
 
           (= :center (:layout-justify-content parent))
-          (gpt/add (vv (/ (- bound-height (+ row-total-size row-total-gap)) 2))))
+          (gpt/add (vv (/ (- bound-height (+ row-total-size row-total-gap)) 2)))
+
+
+          (= :space-around (:layout-align-content parent))
+          (gpt/add (hv (/ column-gap 2)))
+
+          (= :space-evenly (:layout-align-content parent))
+          (gpt/add (hv column-gap))
+
+          (= :space-around (:layout-justify-content parent))
+          (gpt/add (vv (/ row-gap 2)))
+
+          (= :space-evenly (:layout-justify-content parent))
+          (gpt/add (vv row-gap)))
 
         column-tracks
         (->> column-tracks

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

@@ -129,13 +129,16 @@
         :end           i/grid-justify-content-column-end
         :center        i/grid-justify-content-column-center
         :space-around  i/grid-justify-content-column-around
-        :space-between i/grid-justify-content-column-between)
+        :space-between i/grid-justify-content-column-between
+        :space-evenly  i/grid-justify-content-column-between)
+
       (case val
         :start         i/grid-justify-content-row-start
         :end           i/grid-justify-content-row-end
         :center        i/grid-justify-content-row-center
         :space-around  i/grid-justify-content-row-around
-        :space-between i/grid-justify-content-row-between))))
+        :space-between i/grid-justify-content-row-between
+        :space-evenly  i/grid-justify-content-row-between))))
 
 (mf/defc direction-btn
   [{:keys [dir saved-dir set-direction icon?] :as props}]
@@ -404,7 +407,7 @@
   [{:keys [is-col? justify-items set-justify] :as props}]
   (let [type (if is-col? :column :row)]
     [:div.justify-content-style
-     (for [align [:start :center :end :space-around :space-between]]
+     (for [align [:start :center :end :space-around :space-between :space-evenly]]
        [:button.align-start.tooltip
         {:class    (dom/classnames :active  (= justify-items align)
                                    :tooltip-bottom-left (not= align :start)
@@ -457,14 +460,15 @@
             [:> numeric-input {:no-validate true
                                :value (:value column)
                                :on-change #(set-column-value type index %)
-                               :placeholder "--"}]]
+                               :placeholder "--"
+                               :disabled (= :auto (:type column))}]]
            [:div.grid-column-unit
             [:& select
              {:class "grid-column-unit-selector"
               :default-value (:type column)
-              :options [{:value :flex :label "fr"}
+              :options [{:value :flex :label "FR"}
-                        {:value :auto :label "auto"}
+                        {:value :auto :label "AUTO"}
-                        {:value :fixed :label "px"}
+                        {:value :fixed :label "PX"}
                         {:value :percent :label "%"}]
               :on-change #(set-column-type type index %)}]]
            [:button.remove-grid-column
@@ -472,8 +476,8 @@
             i/minus]])])]))
 
 (mf/defc layout-container-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "multiple"]))]}
-  [{:keys [ids _type values  multiple] :as props}]
+  [{:keys [ids values  multiple] :as props}]
   (let [open?               (mf/use-state false)
 
         ;; Display
@@ -630,7 +634,13 @@
         (mf/use-callback
          (mf/deps ids)
          (fn [type index track-type]
-           (st/emit! (dwsl/change-layout-track ids type index {:type track-type}))))]
+           (let [value (case track-type
+                         :auto nil
+                         :flex 1
+                         :percent 20
+                         :fixed 100)]
+             (st/emit! (dwsl/change-layout-track ids type index {:value value
+                                                                 :type track-type})))))]
 
     [:div.element-set
      [:div.element-set-title