Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

✨ Add space-between/space-around/space evenly to grids

Browse source
This commit is contained in:
alonso.torres 2023-05-17 12:16:13 +02:00
parent 2177b7ae13
commit 117a8d09d3
2 changed files with 60 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
common/src/app/common/geom/shapes/grid_layout/layout_data.cljc
View file

@ -393,6 +393,32 @@
column-total-size (tracks-total-size column-tracks)
row-total-size (tracks-total-size row-tracks)
column-gap
(case (:layout-align-content parent)
:space-evenly
(max column-gap (/ (- bound-width column-total-size) (inc (count column-tracks))))
:space-around
(max column-gap (/ (- bound-width column-total-size) (count column-tracks)))
:space-between
(max column-gap (/ (- bound-width column-total-size) (dec (count column-tracks))))
column-gap)
row-gap
(case (:layout-justify-content parent)
:space-evenly
(max row-gap (/ (- bound-height row-total-size) (inc (count row-tracks))))
:space-around
(max row-gap (/ (- bound-height row-total-size) (count row-tracks)))
:space-between
(max row-gap (/ (- bound-height row-total-size) (dec (count row-tracks))))
row-gap)
start-p
(cond-> bound-corner
(= :end (:layout-align-content parent))
@ -405,7 +431,20 @@
(gpt/add (vv (- bound-height (+ row-total-size row-total-gap))))
(= :center (:layout-justify-content parent))
(gpt/add (vv (/ (- bound-height (+ row-total-size row-total-gap)) 2))))
(gpt/add (vv (/ (- bound-height (+ row-total-size row-total-gap)) 2)))
(= :space-around (:layout-align-content parent))
(gpt/add (hv (/ column-gap 2)))
(= :space-evenly (:layout-align-content parent))
(gpt/add (hv column-gap))
(= :space-around (:layout-justify-content parent))
(gpt/add (vv (/ row-gap 2)))
(= :space-evenly (:layout-justify-content parent))
(gpt/add (vv row-gap)))
column-tracks
(->> column-tracks

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

@ -129,13 +129,16 @@
:end i/grid-justify-content-column-end
:center i/grid-justify-content-column-center
:space-around i/grid-justify-content-column-around
:space-between i/grid-justify-content-column-between)
:space-between i/grid-justify-content-column-between
:space-evenly i/grid-justify-content-column-between)
(case val
:start i/grid-justify-content-row-start
:end i/grid-justify-content-row-end
:center i/grid-justify-content-row-center
:space-around i/grid-justify-content-row-around
:space-between i/grid-justify-content-row-between))))
:space-between i/grid-justify-content-row-between
:space-evenly i/grid-justify-content-row-between))))
(mf/defc direction-btn
[{:keys [dir saved-dir set-direction icon?] :as props}]
@ -404,7 +407,7 @@
[{:keys [is-col? justify-items set-justify] :as props}]
(let [type (if is-col? :column :row)]
[:div.justify-content-style
(for [align [:start :center :end :space-around :space-between]]
(for [align [:start :center :end :space-around :space-between :space-evenly]]
[:button.align-start.tooltip
{:class (dom/classnames :active (= justify-items align)
:tooltip-bottom-left (not= align :start)
@ -457,14 +460,15 @@
[:> numeric-input {:no-validate true
:value (:value column)
:on-change #(set-column-value type index %)
:placeholder "--"}]]
:placeholder "--"
:disabled (= :auto (:type column))}]]
[:div.grid-column-unit
[:& select
{:class "grid-column-unit-selector"
:default-value (:type column)
:options [{:value :flex :label "fr"}
{:value :auto :label "auto"}
{:value :fixed :label "px"}
:options [{:value :flex :label "FR"}
{:value :auto :label "AUTO"}
{:value :fixed :label "PX"}
{:value :percent :label "%"}]
:on-change #(set-column-type type index %)}]]
[:button.remove-grid-column
@ -472,8 +476,8 @@
i/minus]])])]))
(mf/defc layout-container-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
[{:keys [ids _type values multiple] :as props}]
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "multiple"]))]}
[{:keys [ids values multiple] :as props}]
(let [open? (mf/use-state false)
;; Display
@ -630,7 +634,13 @@
(mf/use-callback
(mf/deps ids)
(fn [type index track-type]
(st/emit! (dwsl/change-layout-track ids type index {:type track-type}))))]
(let [value (case track-type
:auto nil
:flex 1
:percent 20
:fixed 100)]
(st/emit! (dwsl/change-layout-track ids type index {:value value
:type track-type})))))]
[:div.element-set
[:div.element-set-title