Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-26 14:41:36 -05:00
Code Issues Activity

🎉 Add new flex layout menu

Browse source
This commit is contained in:
Eva 2022-10-03 09:50:25 +02:00 • committed by Alonso Torres
parent 5463671db1
commit e16da8bd2d
63 changed files with 955 additions and 586 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.292h11.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>
Side by side

After

Width:  |  Height:  |  Size: 941 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.292h11.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>
Side by side

After

Width:  |  Height:  |  Size: 921 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.292h11.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>
Side by side

After

Width:  |  Height:  |  Size: 366 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="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>
Side by side

After

Width:  |  Height:  |  Size: 342 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.292h11.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>
Side by side

After

Width:  |  Height:  |  Size: 337 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.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>
Side by side

After

Width:  |  Height:  |  Size: 930 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.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>
Side by side

After

Width:  |  Height:  |  Size: 913 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.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>
Side by side

After

Width:  |  Height:  |  Size: 367 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="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>
Side by side

After

Width:  |  Height:  |  Size: 345 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.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>
Side by side

After

Width:  |  Height:  |  Size: 331 B

3
frontend/resources/images/icons/align-items-column-baseline.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="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>
Side by side

After

Width:  |  Height:  |  Size: 324 B

3
frontend/resources/images/icons/align-items-column-center.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M60.543 0v29.008H25.345v29.726h35.198v14.724H34.87v29.726h25.673v29.108h11.206v-29.108h25.673V73.458H71.75V58.734h35.198V29.008H71.75V0Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 254 B

3
frontend/resources/images/icons/align-items-column-end.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 132.292h-11.207V0h11.207Zm-23.228-29.108h-57.26V73.458h57.26zm0-44.45H35.928V29.008h73.136Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 218 B

3
frontend/resources/images/icons/align-items-column-start.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 132.292h11.207V0H0Zm23.228-29.108h57.26V73.458h-57.26Zm0-44.45h73.136V29.008H23.228Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 205 B

3
frontend/resources/images/icons/align-items-column-strech.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 0h-11.207v132.292h11.207Zm-22.699 29.008H23.228v29.726h86.365zm0 44.45H23.228v29.726h86.365zM11.207 0H0v132.292h11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 246 B

3
frontend/resources/images/icons/align-items-row-baseline.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="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>
Side by side

After

Width:  |  Height:  |  Size: 324 B

3
frontend/resources/images/icons/align-items-row-center.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 71.75h29.008v35.197h29.726V71.75h14.724v25.673h29.726V71.75h29.108V60.543h-29.108V34.87H73.458v25.673H58.734V25.345H29.008v35.198H0Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 253 B

3
frontend/resources/images/icons/align-items-row-end.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 132.292v-11.207H0v11.207Zm-29.108-23.228v-57.26H73.458v57.26Zm-44.45 0V35.928H29.008v73.136Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 219 B

3
frontend/resources/images/icons/align-items-row-start.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.292V0Zm29.108 23.228v57.26h29.726v-57.26Zm44.45 0v73.136h29.726V23.228Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 205 B

3
frontend/resources/images/icons/align-items-row-strech.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.292V0H0zm29.008 22.699v86.365h29.726V22.699H29.008zm44.45 0v86.365h29.726V22.699H73.458zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 258 B

3
frontend/resources/images/icons/align-self-column-baseline.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M50.704 22.964V60.59H0v11.206h50.704v37.532H80.43V71.796h51.862V60.59H80.43V22.964H50.704zm8.794 48.9h12.688v28.855H59.498V71.865z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 248 B

3
frontend/resources/images/icons/align-self-column-bottom.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 132.292v-11.207H0v11.207Zm-50.704-22.699V23.228H51.862v86.365z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 189 B

3
frontend/resources/images/icons/align-self-column-center.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 60.59v11.206h132.292V60.59Zm50.704-37.626v86.364H80.43V22.964Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 183 B

3
frontend/resources/images/icons/align-self-column-strech.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 132.292v-11.207H0v11.207Zm-50.704-22.699V23.228H51.862v86.365zm50.704-98.386V0H0v11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 215 B

3
frontend/resources/images/icons/align-self-column-top.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.292V0Zm50.704 22.699v86.365H80.43V22.699Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 175 B

3
frontend/resources/images/icons/align-self-row-baseline.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M22.964 81.588H60.59v50.704h11.206V81.588h37.532V51.862H71.796V0H60.59v51.862H22.964Zm48.9-8.794V60.106h28.855v12.688z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 236 B

3
frontend/resources/images/icons/align-self-row-center.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M71.967 0H60.76v132.292h11.207zm37.626 50.704H23.228V80.43h86.365z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 184 B

3
frontend/resources/images/icons/align-self-row-left.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 132.292h11.207V0H0Zm22.699-50.704h86.365V51.862H22.699Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 176 B

3
frontend/resources/images/icons/align-self-row-right.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 0h-11.207v132.292h11.207Zm-22.699 50.704H23.228V80.43h86.365z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 188 B

3
frontend/resources/images/icons/align-self-row-strech.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 0h-11.207v132.292h11.207Zm-22.699 50.704H23.228V80.43h86.365zM11.207 0H0v132.292h11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 215 B

2
frontend/resources/images/icons/auto-direction.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292"> <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> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 221 B

4
frontend/resources/images/icons/auto-fix.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<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"/> <path d="M38.399 0v11.232h22.136v109.827H38.4v11.233h55.494v-11.233H71.757V11.232h22.136V0Z"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 740 B

After

Width:  |  Height:  |  Size: 200 B

3
frontend/resources/images/icons/auto-flex.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 267 B

2
frontend/resources/images/icons/auto-gap.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292"> <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> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 421 B

After

Width:  |  Height:  |  Size: 370 B

3
frontend/resources/images/icons/auto-grid.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.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>
Side by side

After

Width:  |  Height:  |  Size: 344 B

3
frontend/resources/images/icons/auto-wrap.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="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>
Side by side

After

Width:  |  Height:  |  Size: 431 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.292V0Zm29.53 30.91v29.726h73.234V30.91Zm.098 40.746v29.726h73.136V71.656ZM0 121.086v11.206h132.292v-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 241 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v11.207h132.292V0H0zm29.53 21.914V51.64h73.234V21.914H29.53zm.098 58.738v29.726h73.136V80.652H29.628zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 259 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 71.532H0V60.325h132.292Zm-29.528 41.227H29.628V83.033h73.136zm0-63.5H29.53V19.533h73.234z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 216 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 121.085h132.292v11.207H0Zm29.528-85.677h73.136v29.726H29.528Zm0 44.45h73.234v29.726H29.528Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 212 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M132.292 11.207H0V0h132.292Zm-29.528 85.677H29.628V67.158h73.136zm0-44.45H29.53V22.708h73.234z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 212 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 132.292h11.207V0H0Zm30.91-29.53h29.726V29.528H30.91Zm40.746-.098h29.726V29.528H71.656Zm49.43 29.628h11.206V0h-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 238 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 132.292h11.207V0H0Zm21.914-29.53H51.64V29.528H21.914Zm58.738-.098h29.726V29.528H80.652Zm40.433 29.628h11.207V0h-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M71.532 0v132.292H60.325V0Zm41.227 29.528v73.136H83.033V29.528Zm-63.5 0v73.234H19.533V29.528Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 211 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M121.085 0v132.292h11.207V0h-11.207zM35.408 29.528v73.136h29.726V29.528H35.408zm44.45 0v73.234h29.726V29.528H79.858z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 234 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M11.207 0v132.292H0V0Zm85.677 29.528v73.136H67.158V29.528Zm-44.45 0v73.234H22.708V29.528Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 207 B

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

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

47
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View file

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

42
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

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

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

@ -14,6 +14,36 @@
(def action (icon-xref :action)) (def action (icon-xref :action))
(def actions (icon-xref :actions)) (def actions (icon-xref :actions))
(def align-bottom (icon-xref :align-bottom)) (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-middle (icon-xref :align-middle))
(def align-top (icon-xref :align-top)) (def align-top (icon-xref :align-top))
(def alignment (icon-xref :alignment)) (def alignment (icon-xref :alignment))
@ -39,6 +69,7 @@
(def auto-padding (icon-xref :auto-padding)) (def auto-padding (icon-xref :auto-padding))
(def auto-padding-side (icon-xref :auto-padding-side)) (def auto-padding-side (icon-xref :auto-padding-side))
(def auto-width (icon-xref :auto-width)) (def auto-width (icon-xref :auto-width))
(def auto-wrap (icon-xref :auto-wrap))
(def bool-difference (icon-xref :boolean-difference)) (def bool-difference (icon-xref :boolean-difference))
(def bool-exclude (icon-xref :boolean-exclude)) (def bool-exclude (icon-xref :boolean-exclude))
(def bool-flatten (icon-xref :boolean-flatten)) (def bool-flatten (icon-xref :boolean-flatten))
@ -91,6 +122,16 @@
(def import (icon-xref :import)) (def import (icon-xref :import))
(def infocard (icon-xref :infocard)) (def infocard (icon-xref :infocard))
(def interaction (icon-xref :interaction)) (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 layers (icon-xref :layers))
(def letter-spacing (icon-xref :letter-spacing)) (def letter-spacing (icon-xref :letter-spacing))
(def libraries (icon-xref :libraries)) (def libraries (icon-xref :libraries))

2
frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs
View file

@ -86,7 +86,7 @@
[{:keys [shapes]}] [{:keys [shapes]}]
[:div.attributes-block [:div.attributes-block
[:div.attributes-block-title [: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) (when (= (count shapes) 1)
[:& copy-button {:data (copy-data (first shapes))}])] [:& copy-button {:data (copy-data (first shapes))}])]

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

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

176
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

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

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

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

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

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

20
frontend/translations/ca.po
View file

@ -3641,10 +3641,6 @@ msgstr "Alçada mín."
msgid "workspace.options.layout-item.min-w" msgid "workspace.options.layout-item.min-w"
msgstr "Amplada mín." 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.max-h" msgid "workspace.options.layout-item.title.max-h"
msgstr "Alçada màxima" msgstr "Alçada màxima"
@ -3666,19 +3662,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Baix" msgstr "Baix"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom" msgid "workspace.options.layout.direction.column"
msgstr "Columna" msgstr "Columna"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left" msgid "workspace.options.layout.direction.row"
msgstr "Fila" msgstr "Fila"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Fila invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Columna invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3713,10 +3709,6 @@ msgstr "Tots els costats"
msgid "workspace.options.layout.margin-simple" msgid "workspace.options.layout.margin-simple"
msgstr "Marge senzill" 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed" msgid "workspace.options.layout.packed"
msgstr "ajuntat" msgstr "ajuntat"
@ -3737,10 +3729,6 @@ msgstr "separat"
msgid "workspace.options.layout.space-between" msgid "workspace.options.layout.space-between"
msgstr "espaiat" 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top" msgid "workspace.options.layout.top"
msgstr "Dalt" msgstr "Dalt"

12
frontend/translations/de.po
View file

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

28
frontend/translations/en.po
View file

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

28
frontend/translations/es.po
View file

@ -1015,6 +1015,10 @@ msgstr "Ancho"
msgid "handoff.attributes.layout" msgid "handoff.attributes.layout"
msgstr "Estructura" 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 #: src/app/main/ui/handoff/attributes/layout.cljs
msgid "handoff.attributes.layout.height" msgid "handoff.attributes.layout.height"
msgstr "Altura" msgstr "Altura"
@ -3900,10 +3904,6 @@ msgstr "Altura.Min"
msgid "workspace.options.layout-item.layout-min-w" msgid "workspace.options.layout-item.layout-min-w"
msgstr "Ancho.Min" 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
msgid "workspace.options.layout-item.title.layout-max-h" msgid "workspace.options.layout-item.title.layout-max-h"
msgstr "Altura máxima" msgstr "Altura máxima"
@ -3925,19 +3925,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Abajo" msgstr "Abajo"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.bottom" msgid "workspace.options.layout.direction.column"
msgstr "Columna" msgstr "Columna"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.direction.left" msgid "workspace.options.layout.direction.row"
msgstr "Fila" msgstr "Fila"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Fila invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Columna invertida"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3972,10 +3972,6 @@ msgstr "Todos"
msgid "workspace.options.layout.margin-simple" msgid "workspace.options.layout.margin-simple"
msgstr "Margen sencillo" 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed" msgid "workspace.options.layout.packed"
msgstr "juntar" msgstr "juntar"
@ -4004,10 +4000,6 @@ msgstr "separar"
msgid "workspace.options.layout.space-between" msgid "workspace.options.layout.space-between"
msgstr "espaciar" 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.top" msgid "workspace.options.layout.top"
msgstr "Arriba" msgstr "Arriba"
@ -4024,10 +4016,6 @@ msgstr "centro"
msgid "workspace.options.layout.v.top" msgid "workspace.options.layout.v.top"
msgstr "arriba" 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 #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors" msgid "workspace.options.more-colors"
msgstr "Más colores" msgstr "Más colores"

20
frontend/translations/eu.po
View file

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

24
frontend/translations/he.po
View file

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

24
frontend/translations/tr.po
View file

@ -3941,19 +3941,19 @@ msgid "workspace.options.layout.bottom"
msgstr "Alt" msgstr "Alt"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Sütun"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Satır"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Ters satır"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: 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" msgstr "Ters sütun"
#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
@ -3988,10 +3988,6 @@ msgstr "Tüm kenarlar"
msgid "workspace.options.layout.margin-simple" msgid "workspace.options.layout.margin-simple"
msgstr "Basit kenar boşluğu" 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.packed" msgid "workspace.options.layout.packed"
msgstr "paketlenmiş" msgstr "paketlenmiş"
@ -4020,14 +4016,6 @@ msgstr "etrafında boşluk"
msgid "workspace.options.layout.space-between" msgid "workspace.options.layout.space-between"
msgstr "arasında boşluk" 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 #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs
msgid "workspace.options.layout.v.bottom" msgid "workspace.options.layout.v.bottom"
msgstr "alt" msgstr "alt"
@ -4040,10 +4028,6 @@ msgstr "orta"
msgid "workspace.options.layout.v.top" msgid "workspace.options.layout.v.top"
msgstr "üst" 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 #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
msgid "workspace.options.more-colors" msgid "workspace.options.more-colors"
msgstr "Daha fazla renk" msgstr "Daha fazla renk"