✨ Add z-index option to flex items elements

frontend/src/app/main/ui/shapes/frame.cljs

@@ -8,6 +8,8 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
+   [app.common.pages.helpers :as cph]
+   [app.common.types.shape.layout :as ctl]
    [app.config :as cf]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
@@ -125,7 +127,10 @@
     {::mf/wrap-props false}
     [props]
     (let [shape  (unchecked-get props "shape")
-          childs (unchecked-get props "childs")]
+          childs (unchecked-get props "childs")
+          childs (cond-> childs
+                   (ctl/layout? shape)
+                   (cph/sort-layout-children-z-index))]
       [:> frame-container props
        [:g.frame-children {:opacity (:opacity shape)}
         (for [item childs]

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

@@ -198,7 +198,11 @@
 
         on-change-position
         (fn [value]
-          (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)})))]
+          (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)})))
+
+        on-change-z-index
+        (fn [value]
+          (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value})))]
 
     [:div.element-set
      [:div.element-set-title
@@ -218,7 +222,15 @@
           {:alt "Absolute"
            :class  (dom/classnames :active (and (:layout-item-absolute values) (not= :multiple (:layout-item-absolute values))))
            :on-click #(on-change-position :absolute)}
-          "Absolute"]]]]
+          "Absolute"]]
+
+        [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"}
+         i/layers
+         [:> numeric-input
+          {:placeholder "--"
+           :on-click #(dom/select-target %)
+           :on-change #(on-change-z-index %)
+           :value (:layout-item-z-index values)}]]]]
 
       [:div.layout-row
        [:div.row-title.sizing "Sizing"]