From d309628e1d27b6d169aaf37aac8bb799cdc0eff4 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 23 Feb 2023 16:47:04 +0100 Subject: [PATCH] :sparkles: Add z-index option to flex items elements --- CHANGES.md | 1 + common/src/app/common/pages/helpers.cljc | 16 ++++++++++++++++ common/src/app/common/types/shape_tree.cljc | 12 +++++++++++- .../main/partials/sidebar-element-options.scss | 9 +++++++++ frontend/src/app/main/ui/shapes/frame.cljs | 7 ++++++- .../sidebar/options/menus/layout_item.cljs | 16 ++++++++++++++-- 6 files changed, 57 insertions(+), 4 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7bab4fc2f..6d9788662 100644 --- a/CHANGES.md +++ b/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 diff --git a/common/src/app/common/pages/helpers.cljc b/common/src/app/common/pages/helpers.cljc index f3f6f0dbb..6ab947d90 100644 --- a/common/src/app/common/pages/helpers.cljc +++ b/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))) diff --git a/common/src/app/common/types/shape_tree.cljc b/common/src/app/common/types/shape_tree.cljc index 1968eb1ac..356b99f5d 100644 --- a/common/src/app/common/types/shape_tree.cljc +++ b/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] diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index c77bfa0f0..914a88b61 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/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 { diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 1708c3640..f667cd2f4 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 1481d222f..d602fba84 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/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"]