✨ Add z-index option to flex items elements

CHANGES.md

@@ -10,6 +10,7 @@
 - Add visual feedback when proportionally scaling text elements with **K** [Taiga #3415](https://tree.taiga.io/project/penpot/us/3415)
 - Add visualization and mouse control to paddings in frames with layout [Taiga #4839](https://tree.taiga.io/project/penpot/task/4839)
 - Allow for absolute positioned elements inside layout [Taiga #4834](https://tree.taiga.io/project/penpot/us/4834)
+- Add z-index option for flex layout items [Taiga #2980](https://tree.taiga.io/project/penpot/us/2980)
 
 ### :bug: Bugs fixed
 

common/src/app/common/pages/helpers.cljc

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.spec :as us]
+   [app.common.types.shape.layout :as ctl]
    [app.common.uuid :as uuid]
    [cuerdas.core :as str]))
 
@@ -527,3 +528,18 @@
        (d/seek root-frame?)
        :id))
 
+(defn comparator-layout-z-index
+  [[idx-a child-a] [idx-b child-b]]
+  (cond
+    (> (ctl/layout-z-index child-a) (ctl/layout-z-index child-b)) 1
+    (< (ctl/layout-z-index child-a) (ctl/layout-z-index child-b)) -1
+    (> idx-a idx-b) 1
+    (< idx-a idx-b) -1
+    :else 0))
+
+(defn sort-layout-children-z-index
+  [children]
+  (->> children
+       (d/enumerate)
+       (sort comparator-layout-z-index)
+       (mapv second)))

common/src/app/common/types/shape_tree.cljc

@@ -14,6 +14,7 @@
    [app.common.pages.helpers :as cph]
    [app.common.spec :as us]
    [app.common.types.shape :as cts]
+   [app.common.types.shape.layout :as ctl]
    [app.common.uuid :as uuid]
    [clojure.spec.alpha :as s]))
 
@@ -161,7 +162,16 @@
 
       ;; Check which index is lower
       :else
-      (< index-a index-b))))
+      ;; If the base is a layout we should check if the z-index property is set
+      (let [[z-index-a z-index-b]
+            (if (ctl/layout? objects base)
+              [(ctl/layout-z-index objects (dm/get-in objects [base :shapes index-a]))
+               (ctl/layout-z-index objects (dm/get-in objects [base :shapes index-b]))]
+              [0 0])]
+
+        (if (= z-index-a z-index-b)
+          (< index-a index-b)
+          (< z-index-a z-index-b))))))
 
 (defn sort-z-index
   ([objects ids]

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

@@ -1739,6 +1739,15 @@
           border-right: none;
         }
       }
+      .z-index {
+        display: flex;
+        align-items: center;
+        margin-left: 2px;
+        margin-top: -4px;
+        svg {
+          width: 30px;
+        }
+      }
     }
   }
   .no-wrap {

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"]