3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-01 05:38:27 +02:00
Code Issues Projects Releases Packages Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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