0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-18 10:41:29 -05:00

🎉 Add new flex layout menu

This commit is contained in:
Eva 2022-10-03 09:50:25 +02:00 committed by Alonso Torres
parent 5463671db1
commit e16da8bd2d
63 changed files with 955 additions and 586 deletions

View file

@ -9,10 +9,13 @@
[app.common.spec :as us]
[clojure.spec.alpha :as s]))
(s/def ::layout boolean?)
(s/def ::layout-dir #{:right :left :top :bottom})
(s/def ::layout #{:flex :grid})
(s/def ::layout-flex-dir #{:row :reverse-row :column :reverse-column})
(s/def ::layout-gap-type #{:simple :multiple})
(s/def ::layout-gap ::us/safe-number)
(s/def ::layout-type #{:packed :space-between :space-around})
(s/def ::layout-align-items #{:start :end :center :strech})
(s/def ::layout-align-content #{:start :end :center :space-between :space-around :strech})
(s/def ::layout-justify-content #{:start :center :end :space-between :space-around})
(s/def ::layout-wrap-type #{:wrap :no-wrap})
(s/def ::layout-padding-type #{:simple :multiple})
@ -25,19 +28,24 @@
(s/keys :req-un [::p1]
:opt-un [::p2 ::p3 ::p4]))
(s/def ::layout-h-orientation #{:left :center :right})
(s/def ::layout-v-orientation #{:top :center :bottom})
(s/def ::row-gap ::us/safe-number)
(s/def ::column-gap ::us/safe-number)
(s/def ::layout-gap
(s/keys :req-un [::row-gap ::column-gap]))
(s/def ::layout-container-props
(s/keys :opt-un [::layout
::layout-dir
::layout-flex-dir
::layout-gap
::layout-gap-type
::layout-type
::layout-wrap-type
::layout-padding-type
::layout-padding
::layout-h-orientation
::layout-v-orientation]))
::layout-justify-content
::layout-align-items
::layout-align-content]))
(s/def ::m1 ::us/safe-number)
(s/def ::m2 ::us/safe-number)
@ -50,6 +58,7 @@
(s/def ::layout-margin-type #{:simple :multiple})
(s/def ::layout-h-behavior #{:fill :fix :auto})
(s/def ::layout-v-behavior #{:fill :fix :auto})
(s/def ::layout-align-self #{:start :end :center :strech :baseline})
(s/def ::layout-max-h ::us/safe-number)
(s/def ::layout-min-h ::us/safe-number)
(s/def ::layout-max-w ::us/safe-number)
@ -63,4 +72,5 @@
::layout-max-h
::layout-min-h
::layout-max-w
::layout-min-w]))
::layout-min-w
::layout-align-self]))

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.207V0H0zm121.085 0v132.292h11.207V0h-11.207zM36.023 38.842c-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.259 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.259 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.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm-60.536 31.12c-6.487 0-11.745 5.259-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.259-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>

After

Width:  |  Height:  |  Size: 941 B

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.207V0H0zm121.085 0v132.292h11.207V0h-11.207zM30.731 28.258c-6.486 0-11.744 5.259-11.745 11.745 0 6.486 5.259 11.744 11.745 11.744 6.486 0 11.745-5.258 11.745-11.744S37.217 28.258 30.73 28.258zm35.332 0c-6.486 0-11.744 5.259-11.744 11.745 0 6.486 5.258 11.744 11.744 11.744 6.487 0 11.745-5.258 11.745-11.744s-5.259-11.745-11.745-11.745zm35.787 0c-6.486 0-11.744 5.259-11.744 11.745 0 6.486 5.258 11.744 11.744 11.744 6.487 0 11.745-5.258 11.745-11.744s-5.258-11.745-11.745-11.745zM30.731 80.546c-6.486 0-11.744 5.258-11.745 11.744 0 6.487 5.259 11.745 11.745 11.745 6.486 0 11.745-5.258 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744zm35.332 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.258 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744z"/>
</svg>

After

Width:  |  Height:  |  Size: 921 B

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.207V0H0zm121.085 0v132.292h11.207V0h-11.207zM20.724 29.578v30.218H44.09V29.578H20.724zm33.276 0v30.218h23.366V29.578H54zm33.276 0v30.218h23.367V29.578H87.276zM20.724 71.003v31.71H44.09v-31.71H20.724zm33.276 0v31.71h23.366v-31.71H54z"/>
</svg>

After

Width:  |  Height:  |  Size: 366 B

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="M121.085 0v132.292h11.207V0h-11.207zM20.724 29.578v30.218H44.09V29.578H20.724zm33.276 0v30.218h23.366V29.578H54zm33.276 0v30.218h23.367V29.578H87.276zM20.724 71.003v31.71H44.09v-31.71H20.724zm33.276 0v31.71h23.366v-31.71H54z"/>
</svg>

After

Width:  |  Height:  |  Size: 342 B

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.207V0H0zm21.65 29.578v30.218h23.365V29.578H21.65zm33.275 0v30.218h23.367V29.578H54.925zm33.277 0v30.218h23.366V29.578H88.202zM21.649 71.003v31.71h23.366v-31.71H21.65zm33.276 0v31.71h23.367v-31.71H54.925z"/>
</svg>

After

Width:  |  Height:  |  Size: 337 B

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.292V0Zm25.961 33.039c-7.54 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.654 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm40.217 0c-7.541 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.654 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm40.217 0c-7.541 0-13.655 6.113-13.655 13.654 0 7.541 6.114 13.654 13.655 13.654 7.54 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm-80.434 38.1c-7.54 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.655 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm40.217 0c-7.541 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.655 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654ZM0 121.085v11.207h132.292v-11.207z"/>
</svg>

After

Width:  |  Height:  |  Size: 930 B

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.292V0H0zm23.845 20.868A13.654 13.654 0 0 0 10.19 34.522a13.654 13.654 0 0 0 13.655 13.655 13.654 13.654 0 0 0 13.654-13.655 13.654 13.654 0 0 0-13.654-13.654zm42.333 0a13.654 13.654 0 0 0-13.654 13.654 13.654 13.654 0 0 0 13.654 13.655 13.654 13.654 0 0 0 13.654-13.655 13.654 13.654 0 0 0-13.654-13.654zm42.333 0a13.654 13.654 0 0 0-13.654 13.654 13.654 13.654 0 0 0 13.654 13.655 13.654 13.654 0 0 0 13.654-13.655 13.654 13.654 0 0 0-13.654-13.654zM23.845 83.31A13.654 13.654 0 0 0 10.19 96.964a13.654 13.654 0 0 0 13.655 13.654 13.654 13.654 0 0 0 13.654-13.654A13.654 13.654 0 0 0 23.845 83.31zm42.333 0a13.654 13.654 0 0 0-13.654 13.654 13.654 13.654 0 0 0 13.654 13.654 13.654 13.654 0 0 0 13.654-13.654A13.654 13.654 0 0 0 66.178 83.31zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>

After

Width:  |  Height:  |  Size: 913 B

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.292V0H0zm8.95 29.578v30.218h29.725V29.578H8.95zm42.333 0v30.218h29.726V29.578H51.283zm42.333 0v30.218h29.727V29.578H93.616zM8.95 71.003v31.71h29.726v-31.71H8.95zm42.334 0v31.71H81.01v-31.71H51.283zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>

After

Width:  |  Height:  |  Size: 367 B

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="M8.95 36.986v30.218h29.725V36.986H8.95zm42.333 0v30.218h29.726V36.986H51.283zm42.333 0v30.218h29.727V36.986H93.616zM8.95 78.411v31.711h29.726V78.411H8.95zm42.334 0v31.711H81.01V78.411H51.283zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>

After

Width:  |  Height:  |  Size: 345 B

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.292V0H0zm8.95 23.228v30.218h29.725V23.228H8.95zm42.333 0v30.218h29.726V23.228H51.283zm42.333 0v30.218h29.727V23.228H93.616zM8.95 64.653v31.71h29.726v-31.71H8.95zm42.334 0v31.71H81.01v-31.71H51.283z"/>
</svg>

After

Width:  |  Height:  |  Size: 331 B

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="M25.345 29.008h35.198V0h11.206v29.008h35.198v29.726H71.75v14.724h25.673v29.726H71.75v29.108H60.543v-29.108H34.87V73.458h25.673V58.734H25.345Zm46.176 9.139v11.736h25.781V38.147Zm0 44.45v11.737h16.338V82.597Z"/>
</svg>

After

Width:  |  Height:  |  Size: 324 B

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="M60.543 0v29.008H25.345v29.726h35.198v14.724H34.87v29.726h25.673v29.108h11.206v-29.108h25.673V73.458H71.75V58.734h35.198V29.008H71.75V0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 254 B

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="M132.292 132.292h-11.207V0h11.207Zm-23.228-29.108h-57.26V73.458h57.26zm0-44.45H35.928V29.008h73.136Z"/>
</svg>

After

Width:  |  Height:  |  Size: 218 B

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.207V0H0Zm23.228-29.108h57.26V73.458h-57.26Zm0-44.45h73.136V29.008H23.228Z"/>
</svg>

After

Width:  |  Height:  |  Size: 205 B

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="M132.292 0h-11.207v132.292h11.207Zm-22.699 29.008H23.228v29.726h86.365zm0 44.45H23.228v29.726h86.365zM11.207 0H0v132.292h11.207z"/>
</svg>

After

Width:  |  Height:  |  Size: 246 B

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="M29.008 25.345v35.198H0v11.206h29.008v35.198h29.726V71.75h14.724v25.673h29.726V71.75h29.108V60.543h-29.108V34.87H73.458v25.673H58.734V25.345Zm9.139 46.176h11.736v25.781H38.147Zm44.45 0h11.736v16.338H82.597Z"/>
</svg>

After

Width:  |  Height:  |  Size: 324 B

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 71.75h29.008v35.197h29.726V71.75h14.724v25.673h29.726V71.75h29.108V60.543h-29.108V34.87H73.458v25.673H58.734V25.345H29.008v35.198H0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 253 B

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="M132.292 132.292v-11.207H0v11.207Zm-29.108-23.228v-57.26H73.458v57.26Zm-44.45 0V35.928H29.008v73.136Z"/>
</svg>

After

Width:  |  Height:  |  Size: 219 B

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.292V0Zm29.108 23.228v57.26h29.726v-57.26Zm44.45 0v73.136h29.726V23.228Z"/>
</svg>

After

Width:  |  Height:  |  Size: 205 B

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.292V0H0zm29.008 22.699v86.365h29.726V22.699H29.008zm44.45 0v86.365h29.726V22.699H73.458zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>

After

Width:  |  Height:  |  Size: 258 B

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="M50.704 22.964V60.59H0v11.206h50.704v37.532H80.43V71.796h51.862V60.59H80.43V22.964H50.704zm8.794 48.9h12.688v28.855H59.498V71.865z"/>
</svg>

After

Width:  |  Height:  |  Size: 248 B

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="M132.292 132.292v-11.207H0v11.207Zm-50.704-22.699V23.228H51.862v86.365z"/>
</svg>

After

Width:  |  Height:  |  Size: 189 B

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 60.59v11.206h132.292V60.59Zm50.704-37.626v86.364H80.43V22.964Z"/>
</svg>

After

Width:  |  Height:  |  Size: 183 B

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="M132.292 132.292v-11.207H0v11.207Zm-50.704-22.699V23.228H51.862v86.365zm50.704-98.386V0H0v11.207z"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

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.292V0Zm50.704 22.699v86.365H80.43V22.699Z"/>
</svg>

After

Width:  |  Height:  |  Size: 175 B

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="M22.964 81.588H60.59v50.704h11.206V81.588h37.532V51.862H71.796V0H60.59v51.862H22.964Zm48.9-8.794V60.106h28.855v12.688z"/>
</svg>

After

Width:  |  Height:  |  Size: 236 B

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="M71.967 0H60.76v132.292h11.207zm37.626 50.704H23.228V80.43h86.365z"/>
</svg>

After

Width:  |  Height:  |  Size: 184 B

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.207V0H0Zm22.699-50.704h86.365V51.862H22.699Z"/>
</svg>

After

Width:  |  Height:  |  Size: 176 B

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="M132.292 0h-11.207v132.292h11.207Zm-22.699 50.704H23.228V80.43h86.365z"/>
</svg>

After

Width:  |  Height:  |  Size: 188 B

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="M132.292 0h-11.207v132.292h11.207Zm-22.699 50.704H23.228V80.43h86.365zM11.207 0H0v132.292h11.207z"/>
</svg>

After

Width:  |  Height:  |  Size: 215 B

View file

@ -1,3 +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.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zM72.28 25.457l-7.77 7.274L91.517 60.33l-69.134.12v11.181l69.134.12L64.51 99.346l7.48 7.49 39.507-40.791L72.28 25.457z"/>
<path d="m72.28 25.457-7.77 7.274L91.517 60.33l-69.134.12v11.181l69.134.12L64.51 99.346l7.48 7.49 39.507-40.791z"/>
</svg>

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 221 B

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<path d="M500 136.36406V0H363.6375v45.45469H136.36406V0H0v136.36406h45.454687V363.6375H0V500h136.36406v-45.45313H363.6375V500H500V363.6375h-45.45313V136.36406zM45.454687 45.45469h45.454688v45.45469H45.454687zm45.454688 409.09218H45.454687v-45.45625h45.454688zM363.6375 409.09062H136.36406V363.6375H90.909375V136.36406h45.454685V90.90938H363.6375v45.45468h45.45312V363.6375H363.6375zm90.90937 45.45625h-45.45624v-45.45625h45.45624zM409.09062 90.90938V45.45469h45.45625v45.45469zM289.4325 295.45531h-79.20469l-16.59094 45.45407H156.705l77.27281-204.54532h31.93188l77.38718 204.54532h-37.04624zm-69.31844-28.63656h59.31844l-29.65937-87.04562z"/>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M38.399 0v11.232h22.136v109.827H38.4v11.233h55.494v-11.233H71.757V11.232h22.136V0Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 740 B

After

Width:  |  Height:  |  Size: 200 B

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.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
</svg>

After

Width:  |  Height:  |  Size: 267 B

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v31.832h12.82v-20.6h.005V0H0zm26.458 0v132.292h79.376V0H26.458zm93.177 0v31.832h12.657V0h-12.657zM37.69 11.232h56.912v109.827H37.69V11.232zM0 47.543V84.75h12.82V47.543H0zm119.635 0V84.75h12.657V47.543h-12.657zM0 100.461v31.831h12.825v-11.233h-.006v-20.598H0zm119.635 0v31.831h12.657v-31.831h-12.657z"/>
<path d="M0 0v58.29h16.524V11.233h.005V0H0zm37.041 0v132.292h58.21V0H37.04zm78.722 0v58.29h16.524V11.233h.005V0h-16.53zM51.977 14.936h28.338v102.419H51.977V14.936zM0 74.002v58.29h16.53v-11.233h-.007V74.002H0zm115.763 0v58.29h16.529v-11.233h-.006V74.002h-16.523z"/>
</svg>

Before

Width:  |  Height:  |  Size: 421 B

After

Width:  |  Height:  |  Size: 370 B

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.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v27.294h29.726V29.578H29.108zm44.45 0v27.294h29.726V29.578H73.558zM29.108 75.42v27.294h29.726V75.42H29.108zm44.45 0v27.294h29.726V75.42H73.558z"/>
</svg>

After

Width:  |  Height:  |  Size: 344 B

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="m91.143 15.609-.093.001v.032H.29V26.81h91.855v-.015a29.606 29.606 0 0 1 28.693 29.677 29.611 29.611 0 0 1-29.695 29.695l-.093-.001v.007l-70.622-.12 19.6-20.19-7.771-7.275L.449 91.767l32.098 33.383 7.48-7.49-19.599-20.187 70.722-.12v-.021c22.497-.004 40.852-18.364 40.852-40.862 0-22.5-18.359-40.861-40.859-40.861z"/>
</svg>

After

Width:  |  Height:  |  Size: 431 B

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.292V0Zm29.53 30.91v29.726h73.234V30.91Zm.098 40.746v29.726h73.136V71.656ZM0 121.086v11.206h132.292v-11.207z"/>
</svg>

After

Width:  |  Height:  |  Size: 241 B

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.292V0H0zm29.53 21.914V51.64h73.234V21.914H29.53zm.098 58.738v29.726h73.136V80.652H29.628zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>

After

Width:  |  Height:  |  Size: 259 B

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="M132.292 71.532H0V60.325h132.292Zm-29.528 41.227H29.628V83.033h73.136zm0-63.5H29.53V19.533h73.234z"/>
</svg>

After

Width:  |  Height:  |  Size: 216 B

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 121.085h132.292v11.207H0Zm29.528-85.677h73.136v29.726H29.528Zm0 44.45h73.234v29.726H29.528Z"/>
</svg>

After

Width:  |  Height:  |  Size: 212 B

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="M132.292 11.207H0V0h132.292Zm-29.528 85.677H29.628V67.158h73.136zm0-44.45H29.53V22.708h73.234z"/>
</svg>

After

Width:  |  Height:  |  Size: 212 B

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.207V0H0Zm30.91-29.53h29.726V29.528H30.91Zm40.746-.098h29.726V29.528H71.656Zm49.43 29.628h11.206V0h-11.207z"/>
</svg>

After

Width:  |  Height:  |  Size: 238 B

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.207V0H0Zm21.914-29.53H51.64V29.528H21.914Zm58.738-.098h29.726V29.528H80.652Zm40.433 29.628h11.207V0h-11.207z"/>
</svg>

After

Width:  |  Height:  |  Size: 240 B

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="M71.532 0v132.292H60.325V0Zm41.227 29.528v73.136H83.033V29.528Zm-63.5 0v73.234H19.533V29.528Z"/>
</svg>

After

Width:  |  Height:  |  Size: 211 B

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="M121.085 0v132.292h11.207V0h-11.207zM35.408 29.528v73.136h29.726V29.528H35.408zm44.45 0v73.234h29.726V29.528H79.858z"/>
</svg>

After

Width:  |  Height:  |  Size: 234 B

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="M11.207 0v132.292H0V0Zm85.677 29.528v73.136H67.158V29.528Zm-44.45 0v73.234H22.708V29.528Z"/>
</svg>

After

Width:  |  Height:  |  Size: 207 B

View file

@ -59,6 +59,7 @@
padding: $size-2 $size-1;
.element-set-title {
height: 35px;
color: $color-gray-20;
display: flex;
font-size: $fs14;
@ -1165,12 +1166,6 @@
fill: $color-primary;
}
}
svg {
}
.multiple-typography-button:hover svg {
}
}
.font-selector {
@ -1588,58 +1583,133 @@
}
}
.layout-menu {
.layout-menu,
.layout-item-menu {
font-family: "worksans", sans-serif;
svg {
height: 16px;
width: 16px;
fill: $color-gray-30;
}
.direction-gap {
display: flex;
justify-content: space-between;
.direction {
.layout-row {
display: grid;
grid-template-columns: 60px 1fr;
margin-bottom: 5px;
.row-title {
font-size: $fs12;
display: flex;
.dir {
margin-right: 4px;
justify-content: start;
align-items: center;
margin-right: 5px;
font-family: "worksans", sans-serif;
}
.btn-wrapper {
display: flex;
width: 100%;
.direction,
.wrap-type,
.align-items-style,
.align-self-style,
.justify-content-style,
.align-content-style,
.layout-behavior {
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
&.right {
svg {
transform: rotate(180deg);
}
}
&.top {
svg {
transform: rotate(-90deg);
}
}
&.bottom {
svg {
border-radius: 4px;
border: 1px solid $color-gray-60;
height: 26px;
margin-right: 5px;
flex-grow: 1;
&.horizontal {
button svg {
transform: rotate(90deg);
}
}
&.active,
&:hover {
svg {
fill: $color-primary;
button {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
border-right: 1px solid $color-gray-60;
&.active,
&:hover {
svg {
fill: $color-primary;
}
}
}
.dir {
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
border-right: 1px solid $color-gray-60;
padding: 4px;
&.reverse-row {
svg {
transform: rotate(180deg);
}
}
&.reverse-column {
svg {
transform: rotate(-90deg);
}
}
&.column {
svg {
transform: rotate(90deg);
}
}
&.active,
&:hover {
svg {
fill: $color-primary;
}
}
}
:last-child {
border-right: none;
}
}
}
.gap {
}
.no-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 21px;
width: 21px;
svg {
height: 0.7rem;
width: 0.7rem;
}
}
.gap-group {
display: flex;
margin-top: 3px;
margin-bottom: 8px;
height: 26px;
.gap-row,
.gap-column {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
.icon {
display: flex;
justify-content: center;
align-items: center;
margin-right: 7px;
svg {
height: 14px;
width: 14px;
}
&.rotated {
transform: rotate(90deg);
}
@ -1653,11 +1723,79 @@
font-size: 0.75rem;
min-width: 0;
padding: 0.25rem;
width: 50px;
width: 70px;
height: 20px;
margin: 0;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
border-radius: $br-small;
&.active {
svg {
fill: $color-primary;
}
}
&:hover {
background-color: $color-primary;
svg {
fill: $color-gray-60;
}
}
}
}
.padding-row,
.margin-row {
display: grid;
grid-template-columns: 65px auto;
height: 26px;
.padding-icons,
.margin-icons {
display: flex;
padding: 0;
border: 1px solid $color-gray-60;
border-radius: 3px;
.padding-icon,
.margin-icon {
display: flex;
justify-content: center;
align-items: center;
padding: 6px;
flex-grow: 1;
border-right: 1px solid $color-gray-60;
cursor: pointer;
&:hover,
&.selected {
svg {
fill: $color-primary;
}
}
svg {
height: 14px;
width: 14px;
fill: $color-gray-30;
}
}
:last-child {
border: none;
}
}
.wrapper {
display: flex;
height: 26px;
.input-element {
margin: 0;
height: 26px;
}
}
}
.layout-container {
@ -1783,69 +1921,40 @@
}
}
.layout-item-menu {
.layout-behavior {
.advanced-ops {
margin: 10px 0;
display: flex;
align-items: center;
cursor: pointer;
font-size: $fs12;
color: $color-gray-30;
border: none;
background-color: transparent;
padding: 0;
.icon {
display: flex;
justify-content: start;
align-items: center;
margin: 9px 0;
.button-wrapper {
border: 1px solid $color-gray-60;
border-radius: 4px;
display: flex;
align-items: center;
.behavior-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
.icon {
display: flex;
justify-content: center;
align-items: center;
height: 26px;
width: 26px;
svg {
height: 16px;
width: 16px;
fill: $color-gray-30;
}
}
&:hover,
&.activated {
svg {
fill: $color-primary;
}
}
}
&.horizontal {
margin-right: 8px;
svg {
transform: rotate(90deg);
}
}
margin-right: 10px;
svg {
fill: $color-gray-20;
}
}
.advanced-ops {
display: flex;
align-items: center;
cursor: pointer;
font-size: $fs12;
color: $color-gray-30;
&:hover {
svg {
fill: $color-primary;
}
&:hover {
svg {
fill: $color-primary;
}
}
.advanced-ops-body {
}
.advanced-ops-body {
.input-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
.input-element {
width: 100%;
&::after {
content: attr(alt);
width: 100px;
}
}

View file

@ -156,6 +156,53 @@
}
}
.title-actions {
align-items: center;
display: flex;
justify-content: center;
margin-left: auto;
.layout-btns {
display: flex;
align-items: center;
justify-content: end;
}
.remove-layout {
display: flex;
align-items: center;
justify-content: center;
height: 21px;
width: 21px;
padding: 4px;
svg {
height: 0.7rem;
width: 0.7rem;
}
}
button {
background-color: transparent;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
color: $color-gray-20;
svg {
fill: $color-gray-20;
height: 0.7rem;
width: 0.7rem;
}
&.active {
color: $color-primary;
}
&:hover {
background-color: $color-primary;
color: $color-gray-60;
svg {
fill: $color-gray-60 !important;
}
}
}
}
.element-set-title-actions {
display: flex;
flex-direction: row;

View file

@ -23,18 +23,30 @@
:layout-padding-type
:layout-padding
:layout-h-orientation
:layout-v-orientation])
:layout-v-orientation
(def initial-layout
{:layout true
:layout-dir :left
:layout-gap 0
:layout-type :packed
:layout-wrap-type :wrap
:layout-align-content
:layout-flex-dir
:layout-align-items
:layout-justify-content
:layout-gap-type
])
(def initial-flex-layout
{:layout :flex
:layout-flex-dir :row
:layout-gap-type :simple
:layout-gap {:row-gap 0 :column-gap 0}
:layout-align-items :start
:layout-justify-content :start
:layout-align-content :strech
:layout-wrap-type :no-wrap
:layout-padding-type :simple
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}
:layout-h-orientation :left
:layout-v-orientation :top})
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}})
(def initial-grid-layout ;; TODO
{:layout :grid})
(defn update-layout-positions
[ids]
@ -50,12 +62,16 @@
;; TODO: Remove constraints from children
(defn create-layout
[ids]
[ids type]
(ptk/reify ::create-layout
ptk/WatchEvent
(watch [_ _ _]
(rx/of (dwc/update-shapes ids #(merge % initial-layout))
(update-layout-positions ids)))))
(if (= type :flex)
(rx/of (dwc/update-shapes ids #(merge % initial-flex-layout))
(update-layout-positions ids))
(rx/of (dwc/update-shapes ids #(merge % initial-grid-layout))
(update-layout-positions ids))))))
(defn remove-layout
[ids]

View file

@ -14,6 +14,36 @@
(def action (icon-xref :action))
(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-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-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))
(def align-content-row-start (icon-xref :align-content-row-start))
(def align-items-column-baseline (icon-xref :align-items-column-baseline))
(def align-items-column-center (icon-xref :align-items-column-center))
(def align-items-column-end (icon-xref :align-items-column-end))
(def align-items-column-start (icon-xref :align-items-column-start))
(def align-items-column-strech (icon-xref :align-items-column-strech))
(def align-items-row-baseline (icon-xref :align-items-row-baseline))
(def align-items-row-center (icon-xref :align-items-row-center))
(def align-items-row-end (icon-xref :align-items-row-end))
(def align-items-row-start (icon-xref :align-items-row-start))
(def align-items-row-strech (icon-xref :align-items-row-strech))
(def align-self-column-baseline (icon-xref :align-self-column-baseline))
(def align-self-column-center (icon-xref :align-self-column-center))
(def align-self-column-top (icon-xref :align-self-column-top))
(def align-self-column-bottom (icon-xref :align-self-column-bottom))
(def align-self-column-strech (icon-xref :align-self-column-strech))
(def align-self-row-baseline (icon-xref :align-self-row-baseline))
(def align-self-row-center (icon-xref :align-self-row-center))
(def align-self-row-left (icon-xref :align-self-row-left))
(def align-self-row-right (icon-xref :align-self-row-right))
(def align-self-row-strech (icon-xref :align-self-row-strech))
(def align-middle (icon-xref :align-middle))
(def align-top (icon-xref :align-top))
(def alignment (icon-xref :alignment))
@ -39,6 +69,7 @@
(def auto-padding (icon-xref :auto-padding))
(def auto-padding-side (icon-xref :auto-padding-side))
(def auto-width (icon-xref :auto-width))
(def auto-wrap (icon-xref :auto-wrap))
(def bool-difference (icon-xref :boolean-difference))
(def bool-exclude (icon-xref :boolean-exclude))
(def bool-flatten (icon-xref :boolean-flatten))
@ -91,6 +122,16 @@
(def import (icon-xref :import))
(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-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-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))
(def justify-content-row-start (icon-xref :justify-content-row-start))
(def layers (icon-xref :layers))
(def letter-spacing (icon-xref :letter-spacing))
(def libraries (icon-xref :libraries))

View file

@ -86,7 +86,7 @@
[{:keys [shapes]}]
[:div.attributes-block
[:div.attributes-block-title
[:div.attributes-block-title-text (tr "handoff.attributes.layout")]
[:div.attributes-block-title-text (tr "handoff.attributes.size")]
(when (= (count shapes) 1)
[:& copy-button {:data (copy-data (first shapes))}])]

View file

@ -5,63 +5,92 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.options.menus.layout-container
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(:require [app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(def layout-container-attrs
[:layout ;; true if active, false if not
:layout-dir ;; :right, :left, :top, :bottom
:layout-gap ;; number could be negative
:layout-type ;; :packed, :space-between, :space-around
(def layout-container-flex-attrs
[:layout ;; :flex, :grid in the future
:layout-flex-dir ;; :row, :reverse-row, :column, :reverse-column
:layout-gap-type ;; :simple, :multiple
:layout-gap ;; {:row-gap number , :column-gap number}
:layout-align-items ;; :start :end :center :strech
:layout-justify-content ;; :start :center :end :space-between :space-around
:layout-align-content ;; :start :center :end :space-between :space-around :strech (by default)
:layout-wrap-type ;; :wrap, :no-wrap
:layout-padding-type ;; :simple, :multiple
:layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
:layout-h-orientation ;; :left, :center, :right
:layout-v-orientation]) ;; :top, :center, :bottom
])
(def grid-pos [[:top :left]
[:top :center]
[:top :right]
[:center :left]
[:center :center]
[:center :right]
[:bottom :left]
[:bottom :center]
[:bottom :right]])
(defn get-layout-flex-icon
[type val is-col?]
(case type
:align-items (if is-col?
(case val
:start i/align-items-column-start
:end i/align-items-column-end
:center i/align-items-column-center
:strech i/align-items-column-strech
:baseline i/align-items-column-baseline)
(case val
:start i/align-items-row-start
:end i/align-items-row-end
:center i/align-items-row-center
:strech i/align-items-row-strech
:baseline i/align-items-row-baseline))
:justify-content (if is-col?
(case val
:start i/justify-content-column-start
:end i/justify-content-column-end
:center i/justify-content-column-center
:space-around i/justify-content-column-around
: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-between i/justify-content-row-between))
(def grid-rows [:top :center :bottom])
(def grid-cols [:left :center :right])
:align-content (if is-col?
(case val
:start i/align-content-column-start
:end i/align-content-column-end
:center i/align-content-column-center
:space-around i/align-content-column-around
:space-between i/align-content-column-between
:strech nil)
(case val
:start i/align-content-row-start
:end i/align-content-row-end
:center i/align-content-row-center
:space-around i/align-content-row-around
:space-between i/align-content-row-between
:strech nil))
(defn- get-layout-icon
[dir layout-type v h]
(let [row? (or (= dir :right) (= dir :left))
manage-text-icon
(if row?
(case v
:top i/text-align-left
:center i/text-align-center
:bottom i/text-align-right
i/text-align-center)
(case h
:left i/text-align-left
:center i/text-align-center
:right i/text-align-right
i/text-align-center))]
(case layout-type
:packed manage-text-icon
:space-around i/space-around
:space-between i/space-between)))
:align-self (if is-col?
(case val
:start i/align-self-column-top
:end i/align-self-column-bottom
:center i/align-self-column-center
:strech i/align-self-column-strech
:baseline i/align-self-column-baseline)
(case val
:start i/align-self-row-left
:end i/align-self-row-right
:center i/align-self-row-center
:strech i/align-self-row-strech
:baseline i/align-self-row-baseline))))
(mf/defc direction-row
(mf/defc direction-btn
[{:keys [dir saved-dir set-direction] :as props}]
(let [handle-on-click
(mf/use-callback
@ -71,283 +100,331 @@
(set-direction dir))))]
[:button.dir.tooltip.tooltip-bottom
{:class (dom/classnames :active (= saved-dir dir)
:left (= :left dir)
:right (= :right dir)
:top (= :top dir)
:bottom (= :bottom dir))
{:class (dom/classnames :active (= saved-dir dir)
:row (= :row dir)
:reverse-row (= :reverse-row dir)
:reverse-column (= :reverse-column dir)
:column (= :column dir))
:key (dm/str "direction-" dir)
;; Execution time translation strings:
;; workspace.options.layout.direction.bottom
;; workspace.options.layout.direction.left
;; workspace.options.layout.direction.right
;; workspace.options.layout.direction.top
:alt (tr (dm/str "workspace.options.layout.direction." (d/name dir)))
:alt (str/replace (str/capital (d/name dir)) "-" " ")
:on-click handle-on-click}
i/auto-direction]))
(mf/defc orientation-grid
[{:keys [on-change-orientation values] :as props}]
(let [dir (:layout-dir values)
type (:layout-type values)
is-col? (or (= dir :top)
(= dir :bottom))
saved-pos [(:layout-v-orientation values)
(:layout-h-orientation values)]]
(mf/defc wrap-row
[{:keys [wrap-type set-wrap] :as props}]
[:*
[:button.tooltip.tooltip-bottom
{:class (dom/classnames :active (= wrap-type :no-wrap))
:alt "No-wrap"
:on-click #(set-wrap :no-wrap)
:style {:padding 0}}
[:span.no-wrap i/minus]]
[:button.wrap.tooltip.tooltip-bottom
{:class (dom/classnames :active (= wrap-type :wrap))
:alt "wrap"
:on-click #(set-wrap :wrap)}
i/auto-wrap]])
(if (= type :packed)
[:div.orientation-grid
[:div.button-wrapper
(for [[pv ph] grid-pos]
[:button.orientation
{:on-click (partial on-change-orientation pv ph type)
:class (dom/classnames
:active (= [pv ph] saved-pos)
:top (= :top pv)
:center (= :center pv)
:bottom (= :bottom pv)
:left (= :left ph)
:center (= :center ph)
:right (= :right ph))
:key (dm/str pv ph)}
[:span.icon
{:class (dom/classnames
:rotated (not is-col?))}
(get-layout-icon dir type pv ph)]])]]
(if (not is-col?)
[:div.orientation-grid.row
[:div.button-wrapper
(for [row grid-rows]
[:button.orientation
{:on-click (partial on-change-orientation row :left type)
:class (dom/classnames
:active (= row (first saved-pos))
:top (= :top row)
:centered (= :center row)
:bottom (= :bottom row))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil row)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil row)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil row)]])]]
(mf/defc align-row
[{:keys [is-col? align-items set-align] :as props}]
[:div.align-items-style
(for [align [:start :center :end :strech]]
[:button.align-start.tooltip
{:class (dom/classnames :active (= align-items align)
:tooltip-bottom-left (not= align :start)
:tooltip-bottom (= align :start))
:alt (dm/str "Align items " (d/name align))
:on-click #(set-align align)
:key (dm/str "align-items" (d/name align))}
(get-layout-flex-icon :align-items align is-col?)])])
(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?)])])
(mf/defc justify-content-row
[{:keys [is-col? justify-content set-justify] :as props}]
[:div.justify-content-style
(for [justify [:start :center :end :space-around :space-between]]
[:button.justify.tooltip
{:class (dom/classnames :active (= justify-content justify)
:tooltip-bottom-left (not= justify :start)
:tooltip-bottom (= justify :start))
:alt (dm/str "Justify content " (d/name justify))
:on-click #(set-justify justify)
:key (dm/str "justify-content" (d/name justify))}
(get-layout-flex-icon :justify-content justify is-col?)])])
[:div.orientation-grid.col
[:div.button-wrapper
(for [[idx col] (d/enumerate grid-cols)]
[:button.orientation
{:key (dm/str idx col)
:on-click (partial on-change-orientation :top col type)
:class (dom/classnames
:active (= col (second saved-pos))
:top (= :left col)
:centered (= :center col)
:bottom (= :right col))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type col nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type col nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type col nil)]])]]))))
(mf/defc padding-section
[{:keys [values on-change-style on-change] :as props}]
(let [padding-type (:layout-padding-type values)]
(let [padding-type (:layout-padding-type values)
rx (if (apply = (vals (:layout-padding values)))
(:p1 (:layout-padding values))
"--")]
[:div.row-flex
[:div.padding-options
[:div.padding-row
[:div.padding-icons
[:div.padding-icon.tooltip.tooltip-bottom
{:class (dom/classnames :selected (= padding-type :simple))
:alt (tr "workspace.options.layout.padding-simple")
:alt "Padding"
:on-click #(on-change-style :simple)}
i/auto-padding]
[:div.padding-icon.tooltip.tooltip-bottom
{:class (dom/classnames :selected (= padding-type :multiple))
:alt (tr "workspace.options.layout.padding")
:alt "Padding - sides"
:on-click #(on-change-style :multiple)}
i/auto-padding-side]]
[:div.wrapper
(cond
(= padding-type :simple)
[:div.tooltip.tooltip-bottom
{:alt (tr "workspace.options.layout.padding-all")}
[:div.input-element.mini
(cond
(= padding-type :simple)
[:div.tooltip.tooltip-bottom
{:alt (tr "workspace.options.layout.padding-all")}
[:div.input-element.mini
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :simple)
:value rx}]]]
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :simple)
:value (:p1 (:layout-padding values))}]]]
(= padding-type :multiple)
(for [num [:p1 :p2 :p3 :p4]]
[:div.tooltip.tooltip-bottom
{:key (dm/str "padding-" (d/name num))
:alt (case num
:p1 "Top"
:p2 "Right"
:p3 "Bottom"
:p4 "Left")}
[:div.input-element.mini
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change num)
:value (num (:layout-padding values))}]]]))]]))
(= padding-type :multiple)
(for [num [:p1 :p2 :p3 :p4]]
[:div.tooltip.tooltip-bottom
{:key (dm/str "padding-" (d/name num))
:alt (case num
:p1 (tr "workspace.options.layout.top")
:p2 (tr "workspace.options.layout.right")
:p3 (tr "workspace.options.layout.bottom")
:p4 (tr "workspace.options.layout.left"))}
[:div.input-element.mini
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change num)
:value (num (:layout-padding values))}]]]))]))
(mf/defc gap-section
[{:keys [gap-selected? set-gap gap-value toggle-gap-type gap-type]}]
(let [gap-locked? (= gap-type :simple)
some-gap-selected (not= @gap-selected? :none)
is-row-activated? (or (and (not gap-locked?) (= @gap-selected? :row-gap)) (and gap-locked? some-gap-selected))
is-column-activated? (or (and (not gap-locked?) (= @gap-selected? :column-gap)) (and gap-locked? some-gap-selected))]
[:div.gap-group
[:div.gap-row.tooltip.tooltip-bottom-left
{:alt "Row gap"}
[:span.icon
{:class (dom/classnames :activated is-row-activated?)}
i/auto-gap]
[:> numeric-input {:no-validate true
:placeholder "--"
:on-click (fn [event]
(reset! gap-selected? :row-gap)
(dom/select-target event))
:on-change (partial set-gap gap-locked? :row-gap)
:on-blur #(reset! gap-selected? :none)
:value (:row-gap gap-value)}]]
[:div.gap-column.tooltip.tooltip-bottom-left
{:alt "Column gap"}
[:span.icon.rotated
{:class (dom/classnames
:activated is-column-activated?)}
i/auto-gap]
[:> numeric-input {:no-validate true
:placeholder "--"
:on-click (fn [event]
(reset! gap-selected? :column-gap)
(dom/select-target event))
:on-change (partial set-gap gap-locked? :column-gap)
:on-blur #(reset! gap-selected? :none)
:value (:column-gap gap-value)}]]
[:button.lock {:on-click toggle-gap-type
:class (dom/classnames :active gap-locked?)}
(if gap-locked?
i/lock
i/unlock)]]))
(mf/defc layout-container-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
[{:keys [ids _type values] :as props}]
(let [open? (mf/use-state false)
gap-selected? (mf/use-state false)
toggle-open (fn [] (swap! open? not))
(let [open? (mf/use-state false)
;; Display
layout-type (:layout values)
on-add-layout
(fn [_]
(st/emit! (dwsl/create-layout ids)))
(fn [type]
(st/emit! (dwsl/create-layout ids type)))
on-remove-layout
(fn [_]
(st/emit! (dwsl/remove-layout ids))
(reset! open? false))
set-flex (fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :flex))
set-grid (fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :grid))
;; Flex-direction
saved-dir (:layout-flex-dir values)
is-col? (or (= :column saved-dir) (= :reverse-column saved-dir))
set-direction
(fn [dir]
(st/emit! (dwsl/update-layout ids {:layout-dir dir})))
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})))
set-gap
(fn [gap]
(st/emit! (dwsl/update-layout ids {:layout-gap gap})))
;; Wrap type
change-padding-style
wrap-type (:layout-wrap-type values)
set-wrap (fn [type]
(st/emit! (dwsl/update-layout ids {:layout-wrap-type type})))
;; Align items
align-items (:layout-align-items values)
set-align-items (fn [value]
(st/emit! (dwsl/update-layout ids {:layout-align-items value})))
;; Justify content
justify-content (:layout-justify-content values)
set-justify-content (fn [value]
(st/emit! (dwsl/update-layout ids {:layout-justify-content value})))
;; Align content
align-content (:layout-align-content values)
set-align-content (fn [value]
(if (= align-content value)
(st/emit! (dwsl/update-layout ids {:layout-align-content :strech}))
(st/emit! (dwsl/update-layout ids {:layout-align-content value}))))
;; Gap
change-gap-type
(fn [type]
(st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
(st/emit! (dwsl/update-layout ids {:layout-gap-type type})))
gap-type (:layout-gap-type values)
gap-selected? (mf/use-state :none)
gap-locked? (= gap-type :simple)
toggle-gap-type (fn []
(let [layout-gap (:layout-gap values)
row-gap (:row-gap layout-gap)
column-gap (:column-gap layout-gap)
max (max row-gap column-gap)
new-type (if (= gap-type :simple)
:multiple
:simple)]
(when (and (not= row-gap column-gap) (= gap-type :multiple))
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap max :column-gap max}})))
(change-gap-type new-type)))
set-gap
(fn [gap-locked? type val]
(if gap-locked?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))
select-all-gap
(fn [event]
(reset! gap-selected? true)
(dom/select-target event))
(when gap-locked?
(dom/select-target event)))
;; Padding
change-padding-type
(fn [type]
(st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
on-padding-change
(fn [type val]
(if (= type :simple)
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p2 val :p3 val :p4 val}}))
(st/emit! (dwsl/update-layout ids {:layout-padding {type val}}))))
handle-change-type
(fn [event]
(let [target (dom/get-target event)
value (dom/get-value target)
value (keyword value)]
(st/emit! (dwsl/update-layout ids {:layout-type value}))))
handle-wrap-type
(mf/use-callback
(fn [event]
(let [target (dom/get-target event)
value (dom/get-value target)
value (keyword value)]
(st/emit! (dwsl/update-layout ids {:layout-wrap-type value})))))
handle-change-orientation
(fn [v-orientation h-orientation]
(st/emit! (dwsl/update-layout ids {:layout-h-orientation h-orientation :layout-v-orientation v-orientation})))
layout-info
(fn []
(let [type (:layout-type values)
dir (:layout-dir values)
is-col? (or (= dir :top) (= dir :bottom))
h (:layout-h-orientation values)
v (:layout-v-orientation values)
wrap (:layout-wrap-type values)
orientation
(if (= type :packed)
;; Execution time translation strings:
;; workspace.options.layout.h.center
;; workspace.options.layout.h.left
;; workspace.options.layout.h.right
;; workspace.options.layout.v.bottom
;; workspace.options.layout.v.center
;; workspace.options.layout.v.top
(dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", "
(tr (dm/str "workspace.options.layout.h." (d/name h))) ", ")
(if is-col?
(dm/str (tr (dm/str "workspace.options.layout.h." (d/name h))) ", ")
(dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", ")))]
(dm/str orientation
(str/replace (tr (dm/str "workspace.options.layout." (d/name type))) "-" " ") ", "
(str/replace (tr (dm/str "workspace.options.layout." (d/name wrap))) "-" " "))))]
(st/emit! (dwsl/update-layout ids {:layout-padding {type val}}))))]
[:div.element-set
[:div.element-set-title
[:*
[:span (tr "workspace.options.layout.title")]
[:span "Layout"]
(if (:layout values)
[:div.add-page {:on-click on-remove-layout} i/minus]
[:div.add-page {:on-click on-add-layout} i/close])]]
[:div.title-actions
[:div.layout-btns
[:button {:on-click set-flex
:class (dom/classnames
:active (= :flex layout-type))} "Flex"]
[:button {:on-click set-grid
:class (dom/classnames
:active (= :grid layout-type))} "Grid"]]
[:button.remove-layout {:on-click on-remove-layout} i/minus]]
[:button.add-page {:on-click #(on-add-layout :flex)} i/close])]]
(when (:layout values)
[:div.element-set-content.layout-menu
;; DIRECTION-GAP
[:div.direction-gap
[:div.direction
[:*
(for [dir [:left :right :bottom :top]]
[:& direction-row {:key (d/name dir)
:dir dir
:saved-dir (:layout-dir values)
:set-direction set-direction}])]]
[:div.gap.tooltip.tooltip-bottom-left
{:alt (tr "workspace.options.layout.gap")}
[:span.icon
{:class (dom/classnames
:rotated (or (= (:layout-dir values) :top)
(= (:layout-dir values) :bottom))
:activated (= @gap-selected? true))}
i/auto-gap]
[:> numeric-input {:no-validate true
:placeholder "--"
:on-click select-all-gap
:on-change set-gap
:on-blur #(reset! gap-selected? false)
:value (:layout-gap values)}]]]
(if (= :flex layout-type)
[:div.element-set-content.layout-menu
[:div.layout-row
[:div.direction-wrap.row-title "Direction"]
[:div.btn-wrapper
[:div.direction
[:*
(for [dir [:row :reverse-row :column :reverse-column]]
[:& direction-btn {:key (d/name dir)
:dir dir
:saved-dir saved-dir
:set-direction set-direction}])]]
;; LAYOUT FLEX
[:div.layout-container
[:div.layout-entry.tooltip.tooltip-bottom
{:on-click toggle-open
:alt (layout-info)}
[:div.element-set-actions-button i/actions]
[:div.layout-info (layout-info)]]
[:div.wrap-type
[:& wrap-row {:wrap-type wrap-type
:set-wrap set-wrap}]]]]
(when @open?
[:div.layout-body
[:& orientation-grid {:on-change-orientation handle-change-orientation :values values}]
(when (= :wrap wrap-type)
[:div.layout-row
[:div.align-content.row-title "Content"]
[:div.btn-wrapper
[:& align-content-row {:is-col? is-col?
:align-content align-content
:set-align-content set-align-content}]]])
[:div.selects-wrapper
[:select.input-select {:value (d/name (:layout-type values))
:on-change handle-change-type}
[:option {:value "packed" :label (tr "workspace.options.layout.packed")}]
[:option {:value "space-between" :label (tr "workspace.options.layout.space-between")}]
[:option {:value "space-around" :label (tr "workspace.options.layout.space-around")}]]
[:div.layout-row
[:div.align-items.row-title "Align"]
[:div.btn-wrapper
[:& align-row {:is-col? is-col?
:align-items align-items
:set-align set-align-items}]]]
[:select.input-select {:value (d/name (:layout-wrap-type values))
:on-change handle-wrap-type}
[:option {:value "wrap" :label (tr "workspace.options.layout.wrap")}]
[:option {:value "no-wrap" :label (tr "workspace.options.layout.no-wrap")}]]]])]
[:div.layout-row
[:div.justify-content.row-title "Justify"]
[:div.btn-wrapper
[:& justify-content-row {:is-col? is-col?
:justify-content justify-content
:set-justify set-justify-content}]]]
[:& gap-section {:gap-selected? gap-selected?
:select-all-gap select-all-gap
:set-gap set-gap
:gap-value (:layout-gap values)
:toggle-gap-type toggle-gap-type
:gap-type gap-type}]
[:& padding-section {:values values
:on-change-style change-padding-style
:on-change on-padding-change}]])]))
[:& padding-section {:values values
:on-change-style change-padding-type
:on-change on-padding-change}]]
[:div "GRID TO COME"]))]))

View file

@ -12,6 +12,7 @@
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -31,8 +32,8 @@
(let [margin-type (or (:layout-margin-type values) :simple)]
[:div.row-flex
[:div.margin-options
[:div.margin-row
[:div.margin-icons
[:div.margin-icon.tooltip.tooltip-bottom
{:class (dom/classnames :selected (= margin-type :simple))
:alt (tr "workspace.options.layout.margin-simple")
@ -43,80 +44,93 @@
:alt (tr "workspace.options.layout.margin")
:on-click #(change-margin-style :multiple)}
i/auto-margin-side]]
[:div.wrapper
(cond
(= margin-type :simple)
[:div.tooltip.tooltip-bottom
{:alt (tr "workspace.options.layout.margin-all")}
[:div.input-element.mini
(cond
(= margin-type :simple)
[:div.tooltip.tooltip-bottom
{:alt (tr "workspace.options.layout.margin-all")}
[:div.input-element.mini
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-margin-change :simple)
:value (or (-> values :layout-margin :m1) 0)}]]]
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-margin-change :simple)
:value (or (-> values :layout-margin :m1) 0)}]]]
(= margin-type :multiple)
[:*
(= margin-type :multiple)
(for [num [:m1 :m2 :m3 :m4]]
[:div.tooltip.tooltip-bottom
{:class (dm/str "margin-" (d/name num))
:key (dm/str "margin-" (d/name num))
{:key (dm/str "margin-" (d/name num))
:alt (case num
:m1 (tr "workspace.options.layout.top")
:m2 (tr "workspace.options.layout.right")
:m3 (tr "workspace.options.layout.bottom")
:m4 (tr "workspace.options.layout.left"))}
:m1 "Top"
:m2 "Right"
:m3 "Bottom"
:m4 "Left")}
[:div.input-element.mini
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-margin-change num)
:value (or (-> values :layout-margin num) 0)}]]])])]))
:value (or (-> values :layout-margin num) 0)}]]]))]]))
(mf/defc element-behavior
[{:keys [is-layout-container? is-layout-child? layout-h-behavior layout-v-behavior on-change-behavior] :as props}]
(let [fill? is-layout-child?
auto? is-layout-container?]
[:div.layout-behavior
[:div.button-wrapper.horizontal
[:div.btn-wrapper
[:div.layout-behavior.horizontal
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "horizontal fix"
{:alt "Fix width"
:class (dom/classnames :activated (= layout-h-behavior :fix))
:on-click #(on-change-behavior :h :fix)}
[:span.icon i/auto-fix-layout]]
i/auto-fix-layout]
(when fill?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "horizontal fill"
{:alt "Width 100%"
:class (dom/classnames :activated (= layout-h-behavior :fill))
:on-click #(on-change-behavior :h :fill)}
[:span.icon i/auto-fill]])
i/auto-fill])
(when auto?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "horizontal auto"
{:alt "Fit content"
:class (dom/classnames :activated (= layout-v-behavior :auto))
:on-click #(on-change-behavior :h :auto)}
[:span.icon i/auto-hug]])]
i/auto-hug])]
[:div.button-wrapper
[:div.layout-behavior
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "vertical fix"
{:alt "Fix height"
:class (dom/classnames :activated (= layout-v-behavior :fix))
:on-click #(on-change-behavior :v :fix)}
[:span.icon i/auto-fix-layout]]
i/auto-fix-layout]
(when fill?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "vertical fill"
{:alt "Height 100%"
:class (dom/classnames :activated (= layout-v-behavior :fill))
:on-click #(on-change-behavior :v :fill)}
[:span.icon i/auto-fill]])
i/auto-fill])
(when auto?
[:button.behavior-btn.tooltip.tooltip-bottom
{:alt "vertical auto"
[:button.behavior-btn.tooltip.tooltip-bottom-left
{:alt "Fit content"
:class (dom/classnames :activated (= layout-v-behavior :auto))
:on-click #(on-change-behavior :v :auto)}
[:span.icon i/auto-hug]])]]))
i/auto-hug])]]))
(mf/defc align-self-row
[{:keys [is-col? align-self set-align-self] :as props}]
(let [dir-v [:start :center :end :strech :baseline]]
[:div.align-self-style
(for [align dir-v]
[:button.align-self.tooltip.tooltip-bottom
{:class (dom/classnames :active (= align-self align)
:tooltip-bottom-left (not= align :start)
:tooltip-bottom (= align :start))
:alt (dm/str "Align self " (d/name align)) ;; TODO añadir lineas de texto a tradus
:on-click #(set-align-self align)
:key (str "align-self" align)}
(get-layout-flex-icon :align-self align is-col?)])]))
(mf/defc layout-item-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
@ -128,6 +142,13 @@
(fn [type]
(st/emit! (dwsl/update-layout-child ids {:layout-margin-type type})))
align-self (:layout-align-self values)
set-align-self (fn [value]
(st/emit! (dwsl/update-layout-child ids {:layout-align-self value})))
saved-dir (:layout-flex-dir values)
is-col? (or (= :column saved-dir) (= :reverse-column saved-dir))
on-margin-change
(fn [type val]
(if (= type :simple)
@ -146,51 +167,54 @@
[:div.element-set
[:div.element-set-title
[:span (tr "workspace.options.layout-item.title")]]
[:span "Flex elements"]]
[:div.element-set-content.layout-item-menu
[:& element-behavior {:is-layout-child? is-layout-child?
:is-layout-container? is-layout-container?
:layout-v-behavior (or (:layout-v-behavior values) :fix)
:layout-h-behavior (or (:layout-h-behavior values) :fix)
:on-change-behavior on-change-behavior}]
[:div.layout-row
[:div.row-title "Sizing"]
[:& element-behavior {:is-layout-child? is-layout-child?
:is-layout-container? is-layout-container?
:layout-v-behavior (or (:layout-v-behavior values) :fix)
:layout-h-behavior (or (:layout-h-behavior values) :fix)
:on-change-behavior on-change-behavior}]]
[:div.margin [:& margin-section {:values values
:change-margin-style change-margin-style
:on-margin-change on-margin-change}]]
[:& margin-section {:values values
:change-margin-style change-margin-style
:on-margin-change on-margin-change}]
[:div.advanced-ops-container
[:div.advanced-ops.toltip.tooltip-bottom
[:button.advanced-ops.toltip.tooltip-bottom
{:on-click toggle-open
:alt (tr "workspace.options.layout-item.advanced-ops")}
[:div.element-set-actions-button i/actions]
[:span.icon i/actions]
[:span (tr "workspace.options.layout-item.advanced-ops")]]]
(when @open?
[:div.advanced-ops-body
(for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]]
[:div.input-element
{:key (d/name item)
;; Execution time translation strings:
;; workspace.options.layout-item.layout-max-h
;; workspace.options.layout-item.layout-max-w
;; workspace.options.layout-item.layout-min-h
;; workspace.options.layout-item.layout-min-w
;; workspace.options.layout-item.title.layout-max-h
;; workspace.options.layout-item.title.layout-max-w
;; workspace.options.layout-item.title.layout-min-h
;; workspace.options.layout-item.title.layout-min-w
:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))
:title (tr (dm/str "workspace.options.layout-item." (d/name item)))
:class (dom/classnames "maxH" (= item :layout-max-h)
"minH" (= item :layout-min-h)
"maxW" (= item :layout-max-w)
"minW" (= item :layout-min-w))}
[:> numeric-input
{:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-size-change item)
:value (get values item)}]])])]]))
[:div.layout-row
[:div.direction-wrap.row-title "Align"] ;; TODO tradus
[:div.btn-wrapper
[:& align-self-row {:is-col? is-col?
:align-self align-self
:set-align-self set-align-self}]]]
[:div.input-wrapper
(for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]]
[:div.tooltip.tooltip-bottom
{:key (d/name item)
:alt (tr (dm/str "workspace.options.layout-item.title." (d/name item)))
:class (dom/classnames "maxH" (= item :layout-max-h)
"minH" (= item :layout-min-h)
"maxW" (= item :layout-max-w)
"minW" (= item :layout-min-w))}
[:div.input-element
{:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))}
[:> numeric-input
{:no-validate true
:min 0
:data-wrap true
:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-size-change item)
;; :value (get values item)
:value 100}]]])]])]]
))

View file

@ -13,7 +13,7 @@
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-attrs layout-container-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@ -31,7 +31,7 @@
layer-values (select-keys shape layer-attrs)
measure-values (select-measure-keys shape)
constraint-values (select-keys shape constraint-attrs)
layout-container-values (select-keys shape layout-container-attrs)
layout-container-values (select-keys shape layout-container-flex-attrs)
layout-item-values (select-keys shape layout-item-attrs)
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))

View file

@ -19,7 +19,7 @@
[app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-attrs exports-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-attrs layout-container-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
[app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measure-attrs measures-menu]]
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu]]
@ -142,7 +142,7 @@
:stroke stroke-attrs
:text ot/attrs
:exports exports-attrs
:layout layout-container-attrs
:layout layout-container-flex-attrs
:layout-item layout-item-attrs})
(def shadow-keys [:style :color :offset-x :offset-y :blur :spread])

View file

@ -3641,10 +3641,6 @@ msgstr "Alçada mín."
msgid "workspace.options.layout-item.min-w"
msgstr "Amplada mín."
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title"
msgstr "Redimensió de l'element"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.max-h"
msgstr "Alçada màxima"
@ -3666,19 +3662,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Baix"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom"
msgid "workspace.options.layout.direction.column"
msgstr "Columna"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left"
msgid "workspace.options.layout.direction.row"
msgstr "Fila"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.right"
msgid "workspace.options.layout.direction.reverse-row"
msgstr "Fila invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.top"
msgid "workspace.options.layout.direction.reverse-column"
msgstr "Columna invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3713,10 +3709,6 @@ msgstr "Tots els costats"
msgid "workspace.options.layout.margin-simple"
msgstr "Marge senzill"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.no-wrap"
msgstr "no agrupis"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed"
msgstr "ajuntat"
@ -3737,10 +3729,6 @@ msgstr "separat"
msgid "workspace.options.layout.space-between"
msgstr "espaiat"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.title"
msgstr "Disposició"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top"
msgstr "Dalt"

View file

@ -3986,19 +3986,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Unten"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom"
msgid "workspace.options.layout.direction.column"
msgstr "Spalte"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left"
msgid "workspace.options.layout.direction.row"
msgstr "Reihe"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.right"
msgid "workspace.options.layout.direction.reverse-row"
msgstr "Reihe-umgekehrt"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.top"
msgid "workspace.options.layout.direction.reverse-column"
msgstr "Spalte-umgekehrt"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -4085,10 +4085,6 @@ msgstr "Mitte"
msgid "workspace.options.layout.v.top"
msgstr "oben"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.wrap"
msgstr "wrap"
#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors"
msgstr "Weitere Farben"

View file

@ -899,6 +899,10 @@ msgstr "Width"
msgid "handoff.attributes.layout"
msgstr "Layout"
#: src/app/main/ui/handoff/attributes/layout.cljs
msgid "handoff.attributes.size"
msgstr "Size and position"
#: src/app/main/ui/handoff/attributes/layout.cljs
msgid "handoff.attributes.layout.height"
msgstr "Height"
@ -3436,10 +3440,6 @@ msgstr "Min.Height"
msgid "workspace.options.layout-item.layout-min-w"
msgstr "Min.Width"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title"
msgstr "Element resizing"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.layout-max-h"
msgstr "Maximum height"
@ -3461,19 +3461,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Bottom"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom"
msgid "workspace.options.layout.direction.column"
msgstr "Column"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left"
msgid "workspace.options.layout.direction.row"
msgstr "Row"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.right"
msgid "workspace.options.layout.direction.reverse-row"
msgstr "Reverse row"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.top"
msgid "workspace.options.layout.direction.reverse-column"
msgstr "Reverse column"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3508,10 +3508,6 @@ msgstr "All sides"
msgid "workspace.options.layout.margin-simple"
msgstr "Simple margin"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.no-wrap"
msgstr "no wrap"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed"
msgstr "packed"
@ -3540,10 +3536,6 @@ msgstr "space around"
msgid "workspace.options.layout.space-between"
msgstr "space between"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.title"
msgstr "Layout"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top"
msgstr "Top"
@ -3560,10 +3552,6 @@ msgstr "center"
msgid "workspace.options.layout.v.top"
msgstr "top"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.wrap"
msgstr "wrap"
#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors"
msgstr "More colors"

View file

@ -1015,6 +1015,10 @@ msgstr "Ancho"
msgid "handoff.attributes.layout"
msgstr "Estructura"
#: src/app/main/ui/handoff/attributes/layout.cljs
msgid "handoff.attributes.size"
msgstr "Tamaño y posición"
#: src/app/main/ui/handoff/attributes/layout.cljs
msgid "handoff.attributes.layout.height"
msgstr "Altura"
@ -3900,10 +3904,6 @@ msgstr "Altura.Min"
msgid "workspace.options.layout-item.layout-min-w"
msgstr "Ancho.Min"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title"
msgstr "Redimensionado de elemento"
#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.layout-max-h"
msgstr "Altura máxima"
@ -3925,19 +3925,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Abajo"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom"
msgid "workspace.options.layout.direction.column"
msgstr "Columna"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left"
msgid "workspace.options.layout.direction.row"
msgstr "Fila"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.right"
msgid "workspace.options.layout.direction.reverse-row"
msgstr "Fila invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.top"
msgid "workspace.options.layout.direction.reverse-column"
msgstr "Columna invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3972,10 +3972,6 @@ msgstr "Todos"
msgid "workspace.options.layout.margin-simple"
msgstr "Margen sencillo"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.no-wrap"
msgstr "no agrupar"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed"
msgstr "juntar"
@ -4004,10 +4000,6 @@ msgstr "separar"
msgid "workspace.options.layout.space-between"
msgstr "espaciar"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.title"
msgstr "Layout"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top"
msgstr "Arriba"
@ -4024,10 +4016,6 @@ msgstr "centro"
msgid "workspace.options.layout.v.top"
msgstr "arriba"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.wrap"
msgstr "agrupar"
#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors"
msgstr "Más colores"

View file

@ -3812,19 +3812,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Behean"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom"
msgid "workspace.options.layout.direction.column"
msgstr "Zutabea"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left"
msgid "workspace.options.layout.direction.row"
msgstr "Lerroa"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.right"
msgid "workspace.options.layout.direction.reverse-row"
msgstr "Alderantzikatu lerroa"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.top"
msgid "workspace.options.layout.direction.reverse-column"
msgstr "Alderantzikatu zutabea"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3859,10 +3859,6 @@ msgstr "Alde guztiak"
msgid "workspace.options.layout.margin-simple"
msgstr "Margin arrunta"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.no-wrap"
msgstr "Ez batu"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed"
msgstr "Trinkotuta"
@ -3891,10 +3887,6 @@ msgstr "tarteko espazioa"
msgid "workspace.options.layout.space-between"
msgstr "Tarteko espazioa"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.title"
msgstr "Itxura"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top"
msgstr "Goian"
@ -3911,10 +3903,6 @@ msgstr "erdian"
msgid "workspace.options.layout.v.top"
msgstr "goian"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.wrap"
msgstr "Batu"
#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors"
msgstr "Kolore gehiago"

View file

@ -3894,19 +3894,19 @@ msgid "workspace.options.layout.bottom"
msgstr "תחתית"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom"
msgid "workspace.options.layout.direction.column"
msgstr "עמודה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left"
msgid "workspace.options.layout.direction.row"
msgstr "שורה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.right"
msgid "workspace.options.layout.direction.reverse-row"
msgstr "היפוך שורה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.top"
msgid "workspace.options.layout.direction.reverse-column"
msgstr "היפוך עמודה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3941,10 +3941,6 @@ msgstr "כל הצדדים"
msgid "workspace.options.layout.margin-simple"
msgstr "שול פשוט"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.no-wrap"
msgstr "ללא גלישה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed"
msgstr "אסוף"
@ -3973,14 +3969,6 @@ msgstr "רווח מסביב"
msgid "workspace.options.layout.space-between"
msgstr "רווח בין לבין"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.title"
msgstr "פריסה"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top"
msgstr "עליון"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.v.bottom"
msgstr "תחתית"
@ -3993,10 +3981,6 @@ msgstr "מרכז"
msgid "workspace.options.layout.v.top"
msgstr "עליון"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.wrap"
msgstr "גלישה"
#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors"
msgstr "צבעים נוספים"

View file

@ -3941,19 +3941,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Alt"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom"
msgid "workspace.options.layout.direction.column"
msgstr "Sütun"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left"
msgid "workspace.options.layout.direction.row"
msgstr "Satır"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.right"
msgid "workspace.options.layout.direction.reverse-row"
msgstr "Ters satır"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.top"
msgid "workspace.options.layout.direction.reverse-column"
msgstr "Ters sütun"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3988,10 +3988,6 @@ msgstr "Tüm kenarlar"
msgid "workspace.options.layout.margin-simple"
msgstr "Basit kenar boşluğu"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.no-wrap"
msgstr "sarma yok"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed"
msgstr "paketlenmiş"
@ -4020,14 +4016,6 @@ msgstr "etrafında boşluk"
msgid "workspace.options.layout.space-between"
msgstr "arasında boşluk"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.title"
msgstr "Yerleşim düzeni"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top"
msgstr "Üst"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.v.bottom"
msgstr "alt"
@ -4040,10 +4028,6 @@ msgstr "orta"
msgid "workspace.options.layout.v.top"
msgstr "üst"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.wrap"
msgstr "sar"
#: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors"
msgstr "Daha fazla renk"