From 490f5f19f10d684cd09e5d37aee550b5f1081183 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 14 Feb 2023 16:12:11 +0100 Subject: [PATCH] :sparkles: Add space-evenly option --- CHANGES.md | 2 + .../geom/shapes/flex_layout/bounds.cljc | 13 +-- .../common/geom/shapes/flex_layout/lines.cljc | 85 ++++++++++++++----- .../geom/shapes/flex_layout/positions.cljc | 23 ++++- common/src/app/common/types/shape/layout.cljc | 17 ++-- .../icons/align-content-column-evenly.svg | 3 + .../images/icons/align-content-row-evenly.svg | 3 + .../icons/justify-content-column-evenly.svg | 3 + .../icons/justify-content-row-evenly.svg | 3 + .../partials/sidebar-element-options.scss | 4 +- frontend/src/app/main/ui/icons.cljs | 4 + .../options/menus/layout_container.cljs | 43 +++++++--- 12 files changed, 155 insertions(+), 48 deletions(-) create mode 100644 frontend/resources/images/icons/align-content-column-evenly.svg create mode 100644 frontend/resources/images/icons/align-content-row-evenly.svg create mode 100644 frontend/resources/images/icons/justify-content-column-evenly.svg create mode 100644 frontend/resources/images/icons/justify-content-row-evenly.svg diff --git a/CHANGES.md b/CHANGES.md index 75f1467ac..2e642a7b9 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,8 +2,10 @@ ## 1.17.2 ### :bug: Bugs fixed + - Fix invite members button text [Taiga #4794](https://tree.taiga.io/project/penpot/issue/4794) - Fix problem with opacity in frames [Taiga #4795](https://tree.taiga.io/project/penpot/issue/4795) +- Fix correct behaviour for space-around and added space-evenly option ## 1.17.2 diff --git a/common/src/app/common/geom/shapes/flex_layout/bounds.cljc b/common/src/app/common/geom/shapes/flex_layout/bounds.cljc index 9cce53ed4..6c65c7827 100644 --- a/common/src/app/common/geom/shapes/flex_layout/bounds.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/bounds.cljc @@ -126,16 +126,19 @@ row? (ctl/row? parent) col? (ctl/col? parent) space-around? (ctl/space-around? parent) - content-around? (ctl/content-around? parent) + space-evenly? (ctl/space-evenly? parent) + content-evenly? (ctl/content-evenly? parent) [layout-gap-row layout-gap-col] (ctl/gaps parent) - row-pad (if (or (and col? space-around?) - (and row? content-around?)) + row-pad (if (or (and col? space-evenly?) + (and col? space-around?) + (and row? content-evenly?)) layout-gap-row 0) - col-pad (if (or(and row? space-around?) - (and col? content-around?)) + col-pad (if (or(and row? space-evenly?) + (and row? space-around?) + (and col? content-evenly?)) layout-gap-col 0) diff --git a/common/src/app/common/geom/shapes/flex_layout/lines.cljc b/common/src/app/common/geom/shapes/flex_layout/lines.cljc index 00349c995..b5d89c378 100644 --- a/common/src/app/common/geom/shapes/flex_layout/lines.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/lines.cljc @@ -24,9 +24,10 @@ "Calculates the lines basic data and accumulated values. The positions will be calculated in a different operation" [shape children layout-bounds] - (let [col? (ctl/col? shape) - row? (ctl/row? shape) + (let [col? (ctl/col? shape) + row? (ctl/row? shape) space-around? (ctl/space-around? shape) + space-evenly? (ctl/space-evenly? shape) wrap? (and (ctl/wrap? shape) (or col? (not (ctl/auto-width? shape))) @@ -78,18 +79,28 @@ next-max-width (+ child-margin-width (if fill-width? child-max-width child-width)) next-max-height (+ child-margin-height (if fill-height? child-max-height child-height)) - total-gap-col (if space-around? + total-gap-col (cond + space-evenly? (* layout-gap-col (+ num-children 2)) + + space-around? + (* layout-gap-col (+ num-children 1)) + + :else (* layout-gap-col num-children)) - total-gap-row (if space-around? + total-gap-row (cond + space-evenly? (* layout-gap-row (+ num-children 2)) + + space-around? + (* layout-gap-row (+ num-children 1)) + + :else (* layout-gap-row num-children)) next-line-min-width (+ line-min-width next-min-width total-gap-col) - next-line-min-height (+ line-min-height next-min-height total-gap-row) - - ] + next-line-min-height (+ line-min-height next-min-height total-gap-row)] (if (and (some? line-data) (or (not wrap?) @@ -150,10 +161,11 @@ (defn add-lines-positions [parent layout-bounds layout-lines] - (let [row? (ctl/row? parent) - col? (ctl/col? parent) - auto-width? (ctl/auto-width? parent) - auto-height? (ctl/auto-height? parent) + (let [row? (ctl/row? parent) + col? (ctl/col? parent) + auto-width? (ctl/auto-width? parent) + auto-height? (ctl/auto-height? parent) + space-evenly? (ctl/space-evenly? parent) space-around? (ctl/space-around? parent) [layout-gap-row layout-gap-col] (ctl/gaps parent) @@ -183,10 +195,26 @@ (->> layout-lines (reduce add-ranges [0 0 0 0])) get-layout-width (fn [{:keys [num-children]}] - (let [num-gap (if space-around? (inc num-children) (dec num-children))] + (let [num-gap (cond + space-evenly? + (inc num-children) + + space-around? + num-children + + :else + (dec num-children))] (- layout-width (* layout-gap-col num-gap)))) get-layout-height (fn [{:keys [num-children]}] - (let [num-gap (if space-around? (inc num-children) (dec num-children))] + (let [num-gap (cond + space-evenly? + (inc num-children) + + space-around? + num-children + + :else + (dec num-children))] (- layout-height (* layout-gap-row num-gap)))) num-lines (count layout-lines) @@ -280,34 +308,47 @@ auto-height? (ctl/auto-height? shape) auto-width? (ctl/auto-width? shape) space-between? (ctl/space-between? shape) + space-evenly? (ctl/space-evenly? shape) space-around? (ctl/space-around? shape) [layout-gap-row layout-gap-col] (ctl/gaps shape) margin-x - (cond (and row? space-around? (not auto-width?)) + (cond (and row? space-evenly? (not auto-width?)) (max layout-gap-col (/ (- width line-width) (inc num-children))) - (and row? space-around? auto-width?) + (and row? space-around? (not auto-width?)) + (/ (max layout-gap-col (/ (- width line-width) num-children)) 2) + + (and row? (or space-evenly? space-around?) auto-width?) layout-gap-col :else 0) margin-y - (cond (and col? space-around? (not auto-height?)) + (cond (and col? space-evenly? (not auto-height?)) (max layout-gap-row (/ (- height line-height) (inc num-children))) - (and col? space-around? auto-height?) + (and col? space-around? (not auto-height?)) + (/ (max layout-gap-row (/ (- height line-height) num-children)) 2) + + (and col? (or space-evenly? space-around?) auto-height?) layout-gap-row :else 0) layout-gap-col - (cond (and row? space-around?) + (cond (and row? space-evenly?) 0 + (and row? space-around? auto-width?) + 0 + + (and row? space-around?) + (/ (max layout-gap-col (/ (- width line-width) num-children)) 2) + (and row? space-between? (not auto-width?)) (max layout-gap-col (/ (- width line-width) (dec num-children))) @@ -315,9 +356,15 @@ layout-gap-col) layout-gap-row - (cond (and col? space-around?) + (cond (and col? space-evenly?) 0 + (and col? space-evenly? auto-height?) + 0 + + (and col? space-around?) + (/ (max layout-gap-row (/ (- height line-height) num-children)) 2) + (and col? space-between? (not auto-height?)) (max layout-gap-row (/ (- height line-height) (dec num-children))) diff --git a/common/src/app/common/geom/shapes/flex_layout/positions.cljc b/common/src/app/common/geom/shapes/flex_layout/positions.cljc index 77ce23d0b..48b49d7c0 100644 --- a/common/src/app/common/geom/shapes/flex_layout/positions.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/positions.cljc @@ -27,6 +27,7 @@ center? (or (and wrap? (ctl/content-center? parent)) (and (not wrap?) (ctl/align-items-center? parent))) around? (and wrap? (ctl/content-around? parent)) + evenly? (and wrap? (ctl/content-evenly? parent)) ;; Adjust the totals so it takes into account the gaps [layout-gap-row layout-gap-col] (ctl/gaps parent) @@ -47,6 +48,9 @@ (gpt/add (vv free-height-gap)) around? + (gpt/add (vv (max lines-gap-row (/ free-height num-lines 2)))) + + evenly? (gpt/add (vv (max lines-gap-row (/ free-height (inc num-lines)))))) col? @@ -57,6 +61,9 @@ (gpt/add (hv free-width-gap)) around? + (gpt/add (hv (max lines-gap-col (/ free-width num-lines) 2))) + + evenly? (gpt/add (hv (max lines-gap-col (/ free-width (inc num-lines))))))))) (defn get-next-line @@ -78,6 +85,7 @@ stretch? (ctl/content-stretch? parent) between? (ctl/content-between? parent) around? (ctl/content-around? parent) + evenly? (ctl/content-evenly? parent) free-width (- layout-width total-width) free-height (- layout-height total-height) @@ -94,6 +102,9 @@ (/ free-width (dec num-lines)) around? + (/ free-width num-lines) + + evenly? (/ free-width (inc num-lines)) :else @@ -111,6 +122,9 @@ (/ free-height (dec num-lines)) around? + (/ free-height num-lines) + + evenly? (/ free-height (inc num-lines)) :else @@ -134,6 +148,7 @@ col? (ctl/col? parent) space-between? (ctl/space-between? parent) space-around? (ctl/space-around? parent) + space-evenly? (ctl/space-evenly? parent) h-center? (ctl/h-center? parent) h-end? (ctl/h-end? parent) v-center? (ctl/v-center? parent) @@ -159,20 +174,20 @@ start-p (cond-> base-p ;; X AXIS - (and row? h-center? (not space-around?) (not space-between?)) + (and row? h-center? (not space-around?) (not space-evenly?) (not space-between?)) (-> (gpt/add (hv (/ layout-width 2))) (gpt/subtract (hv (/ (+ line-width children-gap-width) 2)))) - (and row? h-end? (not space-around?) (not space-between?)) + (and row? h-end? (not space-around?) (not space-evenly?) (not space-between?)) (-> (gpt/add (hv layout-width)) (gpt/subtract (hv (+ line-width children-gap-width)))) ;; Y AXIS - (and col? v-center? (not space-around?) (not space-between?)) + (and col? v-center? (not space-around?) (not space-evenly?) (not space-between?)) (-> (gpt/add (vv (/ layout-height 2))) (gpt/subtract (vv (/ (+ line-height children-gap-height) 2)))) - (and col? v-end? (not space-around?) (not space-between?)) + (and col? v-end? (not space-around?) (not space-evenly?) (not space-between?)) (-> (gpt/add (vv layout-height)) (gpt/subtract (vv (+ line-height children-gap-height)))))] diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index a7001cd37..d7ecec795 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -15,8 +15,8 @@ ;; :layout-gap-type ;; :simple, :multiple ;; :layout-gap ;; {:row-gap number , :column-gap number} ;; :layout-align-items ;; :start :end :center :stretch -;; :layout-justify-content ;; :start :center :end :space-between :space-around -;; :layout-align-content ;; :start :center :end :space-between :space-around :stretch (by default) +;; :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly +;; :layout-align-content ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default) ;; :layout-wrap-type ;; :wrap, :nowrap ;; :layout-padding-type ;; :simple, :multiple ;; :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative @@ -36,8 +36,8 @@ (s/def ::layout-gap-type #{:simple :multiple}) (s/def ::layout-gap ::us/safe-number) (s/def ::layout-align-items #{:start :end :center :stretch}) -(s/def ::layout-align-content #{:start :end :center :space-between :space-around :stretch}) -(s/def ::layout-justify-content #{:start :center :end :space-between :space-around}) +(s/def ::layout-align-content #{:start :end :center :space-between :space-around :space-evenly :stretch}) +(s/def ::layout-justify-content #{:start :center :end :space-between :space-around :space-evenly}) (s/def ::layout-wrap-type #{:wrap :nowrap :no-wrap}) ;;TODO remove no-wrap after script (s/def ::layout-padding-type #{:simple :multiple}) @@ -286,6 +286,10 @@ [{:keys [layout-align-content]}] (= :space-around layout-align-content)) +(defn content-evenly? + [{:keys [layout-align-content]}] + (= :space-evenly layout-align-content)) + (defn content-stretch? [{:keys [layout-align-content]}] (or (= :stretch layout-align-content) @@ -320,6 +324,10 @@ [{:keys [layout-justify-content]}] (= layout-justify-content :space-around)) +(defn space-evenly? + [{:keys [layout-justify-content]}] + (= layout-justify-content :space-evenly)) + (defn align-self-start? [{:keys [layout-item-align-self]}] (= :start layout-item-align-self)) @@ -349,4 +357,3 @@ (some (partial fill-height? objects) children-ids)) (and (row? objects frame-id) (every? (partial fill-height? objects) children-ids))))) - diff --git a/frontend/resources/images/icons/align-content-column-evenly.svg b/frontend/resources/images/icons/align-content-column-evenly.svg new file mode 100644 index 000000000..bb613bc72 --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-evenly.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-row-evenly.svg b/frontend/resources/images/icons/align-content-row-evenly.svg new file mode 100644 index 000000000..fd67e71e7 --- /dev/null +++ b/frontend/resources/images/icons/align-content-row-evenly.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-evenly.svg b/frontend/resources/images/icons/justify-content-column-evenly.svg new file mode 100644 index 000000000..22708241a --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-evenly.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-row-evenly.svg b/frontend/resources/images/icons/justify-content-row-evenly.svg new file mode 100644 index 000000000..7d5add80e --- /dev/null +++ b/frontend/resources/images/icons/justify-content-row-evenly.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index fb0387ff3..5e4498844 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -1644,6 +1644,7 @@ font-family: "worksans", sans-serif; &.justify-content, + &.align-content, &.sizing { align-items: start; margin-top: 4px; @@ -1658,7 +1659,8 @@ gap: 5px; } - &.justify-content { + &.justify-content, + &.align-content { display: flex; flex-direction: column; gap: 5px; diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 4254b0906..b52b8fb41 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -15,11 +15,13 @@ (def actions (icon-xref :actions)) (def align-bottom (icon-xref :align-bottom)) (def align-content-column-around (icon-xref :align-content-column-around)) +(def align-content-column-evenly (icon-xref :align-content-column-evenly)) (def align-content-column-between (icon-xref :align-content-column-between)) (def align-content-column-center (icon-xref :align-content-column-center)) (def align-content-column-end (icon-xref :align-content-column-end)) (def align-content-column-start (icon-xref :align-content-column-start)) (def align-content-row-around (icon-xref :align-content-row-around)) +(def align-content-row-evenly (icon-xref :align-content-row-evenly)) (def align-content-row-between (icon-xref :align-content-row-between)) (def align-content-row-center (icon-xref :align-content-row-center)) (def align-content-row-end (icon-xref :align-content-row-end)) @@ -126,11 +128,13 @@ (def infocard (icon-xref :infocard)) (def interaction (icon-xref :interaction)) (def justify-content-column-around (icon-xref :justify-content-column-around)) +(def justify-content-column-evenly (icon-xref :justify-content-column-evenly)) (def justify-content-column-between (icon-xref :justify-content-column-between)) (def justify-content-column-center (icon-xref :justify-content-column-center)) (def justify-content-column-end (icon-xref :justify-content-column-end)) (def justify-content-column-start (icon-xref :justify-content-column-start)) (def justify-content-row-around (icon-xref :justify-content-row-around)) +(def justify-content-row-evenly (icon-xref :justify-content-row-evenly)) (def justify-content-row-between (icon-xref :justify-content-row-between)) (def justify-content-row-center (icon-xref :justify-content-row-center)) (def justify-content-row-end (icon-xref :justify-content-row-end)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 8c4d50141..f9ab4558b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -21,8 +21,8 @@ :layout-gap-type ;; :simple, :multiple :layout-gap ;; {:row-gap number , :column-gap number} :layout-align-items ;; :start :end :center :stretch - :layout-justify-content ;; :start :center :end :space-between :space-around - :layout-align-content ;; :start :center :end :space-between :space-around :stretch (by default) + :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly + :layout-align-content ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default) :layout-wrap-type ;; :wrap, :nowrap :layout-padding-type ;; :simple, :multiple :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative @@ -50,12 +50,14 @@ :end i/justify-content-column-end :center i/justify-content-column-center :space-around i/justify-content-column-around + :space-evenly i/justify-content-column-evenly :space-between i/justify-content-column-between) (case val :start i/justify-content-row-start :end i/justify-content-row-end :center i/justify-content-row-center :space-around i/justify-content-row-around + :space-evenly i/justify-content-row-evenly :space-between i/justify-content-row-between)) :align-content (if is-col? @@ -64,6 +66,7 @@ :end i/align-content-column-end :center i/align-content-column-center :space-around i/align-content-column-around + :space-evenly i/align-content-column-evenly :space-between i/align-content-column-between :stretch nil) @@ -72,6 +75,7 @@ :end i/align-content-row-end :center i/align-content-row-center :space-around i/align-content-row-around + :space-evenly i/align-content-row-evenly :space-between i/align-content-row-between :stretch nil)) @@ -140,16 +144,27 @@ (mf/defc align-content-row [{:keys [is-col? align-content set-align-content] :as props}] - [:div.align-content-style - (for [align [:start :center :end :space-around :space-between]] - [:button.align-content.tooltip - {:class (dom/classnames :active (= align-content align) - :tooltip-bottom-left (not= align :start) - :tooltip-bottom (= align :start)) - :alt (dm/str "Align content " (d/name align)) - :on-click #(set-align-content align) - :key (dm/str "align-content" (d/name align))} - (get-layout-flex-icon :align-content align is-col?)])]) + [:* + [:div.align-content-style + (for [align [:start :center :end]] + [:button.align-content.tooltip + {:class (dom/classnames :active (= align-content align) + :tooltip-bottom-left (not= align :start) + :tooltip-bottom (= align :start)) + :alt (dm/str "Align content " (d/name align)) + :on-click #(set-align-content align) + :key (dm/str "align-content" (d/name align))} + (get-layout-flex-icon :align-content align is-col?)])] + [:div.align-content-style + (for [align [:space-between :space-around :space-evenly]] + [:button.align-content.tooltip + {:class (dom/classnames :active (= align-content align) + :tooltip-bottom-left (not= align :start) + :tooltip-bottom (= align :start)) + :alt (dm/str "Align content " (d/name align)) + :on-click #(set-align-content align) + :key (dm/str "align-content" (d/name align))} + (get-layout-flex-icon :align-content align is-col?)])]]) (mf/defc justify-content-row [{:keys [is-col? justify-content set-justify] :as props}] @@ -165,7 +180,7 @@ :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]] + (for [justify [:space-between :space-around :space-evenly]] [:button.justify.tooltip {:class (dom/classnames :active (= justify-content justify) :tooltip-bottom-left (not= justify :space-around) @@ -399,7 +414,7 @@ (when (= :wrap wrap-type) [:div.layout-row [:div.align-content.row-title "Content"] - [:div.btn-wrapper + [:div.btn-wrapper.align-content [:& align-content-row {:is-col? is-col? :align-content align-content :set-align-content set-align-content}]]])