mirror of
https://github.com/penpot/penpot.git
synced 2025-03-18 02:32:13 -05:00
🎉 Add new flex layout menu
This commit is contained in:
Eva
Alonso Torres
parent
5463671db1
commit
e16da8bd2d
63 changed files with 955 additions and 586 deletions
|
|
@ -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]))
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
3
frontend/resources/images/icons/align-items-row-end.svg
Normal file
3
frontend/resources/images/icons/align-items-row-end.svg
Normal 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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
3
frontend/resources/images/icons/align-self-row-left.svg
Normal file
3
frontend/resources/images/icons/align-self-row-left.svg
Normal 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 |
3
frontend/resources/images/icons/align-self-row-right.svg
Normal file
3
frontend/resources/images/icons/align-self-row-right.svg
Normal 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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
3
frontend/resources/images/icons/auto-flex.svg
Normal file
3
frontend/resources/images/icons/auto-flex.svg
Normal 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 |
|
|
@ -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 |
3
frontend/resources/images/icons/auto-grid.svg
Normal file
3
frontend/resources/images/icons/auto-grid.svg
Normal 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 |
3
frontend/resources/images/icons/auto-wrap.svg
Normal file
3
frontend/resources/images/icons/auto-wrap.svg
Normal 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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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))}])]
|
||||
|
||||
|
|
|
|||
|
|
@ -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"]))]))
|
||||
|
|
|
|||
|
|
@ -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}]]])]])]]
|
||||
))
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 "צבעים נוספים"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue