Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-28 15:41:25 -05:00
Code Issues Activity

✨ Add space-evenly option

Browse source
This commit is contained in:
alonso.torres 2023-02-14 16:12:11 +01:00 • committed by Alejandro Alonso
parent b3216000fd
commit 490f5f19f1
12 changed files with 155 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGES.md
View file

@ -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

13
common/src/app/common/geom/shapes/flex_layout/bounds.cljc
View file

@ -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)

85
common/src/app/common/geom/shapes/flex_layout/lines.cljc
View file

@ -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)))

23
common/src/app/common/geom/shapes/flex_layout/positions.cljc
View file

@ -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)))))]

17
common/src/app/common/types/shape/layout.cljc
View file

@ -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)))))

3
frontend/resources/images/icons/align-content-column-evenly.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.292h11.207V0Zm121.085 0v132.292h11.207V0ZM36.023 28.259c-6.487 0-11.745 5.258-11.745 11.744 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.258-11.744 11.744 0 6.487 5.258 11.745 11.744 11.745 6.487 0 11.745-5.26 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744zm30.496 0c-6.487 0-11.745 5.258-11.745 11.744 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zM36.023 80.545c-6.487 0-11.745 5.26-11.745 11.745 0 6.486 5.258 11.745 11.745 11.745 6.486 0 11.744-5.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.26-11.744 11.745 0 6.486 5.258 11.745 11.744 11.745 6.487 0 11.745-5.259 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 926 B

3
frontend/resources/images/icons/align-content-row-evenly.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.292V0H0zm36.567 29.029c-5.96.092-12.09 4.407-12.289 10.974 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745-.81-7.848-5.94-11.055-11.2-10.974zm60.536 0c-5.96.092-12.09 4.407-12.289 10.974 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.26 11.744-11.745-.81-7.848-5.94-11.055-11.2-10.974zm-30.495 0c-5.96.092-12.09 4.407-12.29 10.974 0 6.487 5.259 11.745 11.745 11.745 6.487 0 11.745-5.26 11.745-11.745-.811-7.848-5.94-11.055-11.2-10.974zM36.023 80.545c-6.487 0-11.745 5.26-11.745 11.745 0 6.486 5.258 11.745 11.745 11.745 6.486 0 11.744-5.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.26-11.744 11.745 0 6.486 5.258 11.745 11.744 11.745 6.487 0 11.745-5.259 11.745-11.745 0-6.486-5.26-11.744-11.745-11.744zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 934 B

3
frontend/resources/images/icons/justify-content-column-evenly.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.292V0Zm18.947 28.264V57.99h94.4V28.264zm.098 47.096v29.726h94.302V75.36ZM0 121.086v11.206h132.292v-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

3
frontend/resources/images/icons/justify-content-row-evenly.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 132.292h11.207V0H0Zm28.264-18.947H57.99v-94.4H28.264zm47.096-.098h29.726V18.945H75.36Zm45.726 19.045h11.206V0h-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 239 B

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

@ -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;

4
frontend/src/app/main/ui/icons.cljs
View file

@ -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))

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

@ -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}]]])