mirror of
https://github.com/penpot/penpot.git
synced 2025-02-18 21:06:11 -05:00
✨ Add options to sidebar
This commit is contained in:
Eva
alonso.torres
parent
eb425dc4f2
commit
cc8347a871
13 changed files with 794 additions and 15 deletions
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-column-around.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 0 0 L 0 11.207096 L 132.292 11.207096 L 132.292 0 L 0 0 z M 29.530055 30.909819 L 29.530055 60.636245 L 60.606789 60.636245 L 60.606789 30.909819 L 29.530055 30.909819 z M 71.685211 30.909819 L 71.685211 60.636245 L 102.76401 60.636245 L 102.76401 30.909819 L 71.685211 30.909819 z M 29.62824 71.655755 L 29.62824 101.38218 L 60.606789 101.38218 L 60.606789 71.655755 L 29.62824 71.655755 z M 71.685211 71.655755 L 71.685211 101.38218 L 102.76401 101.38218 L 102.76401 71.655755 L 71.685211 71.655755 z M 132.292 121.0849 L 0 121.08594 L 0 132.292 L 132.292 132.292 L 132.292 121.0849 z " />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-column-between.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 0 0 L 0 11.207096 L 132.292 11.207096 L 132.292 0 L 0 0 z M 29.530055 21.913963 L 29.530055 51.639872 L 60.34944 51.639872 L 60.34944 21.913963 L 29.530055 21.913963 z M 71.94256 21.913963 L 71.94256 51.639872 L 102.76401 51.639872 L 102.76401 21.913963 L 71.94256 21.913963 z M 29.62824 80.652128 L 29.62824 110.37804 L 60.34944 110.37804 L 60.34944 80.652128 L 29.62824 80.652128 z M 71.94256 80.652128 L 71.94256 110.37804 L 102.76401 110.37804 L 102.76401 80.652128 L 71.94256 80.652128 z M 0 121.0849 L 0 132.292 L 132.292 132.292 L 132.292 121.0849 L 0 121.0849 z " />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-column-center.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 29.530055 19.533224 L 29.530055 49.259133 L 60.34944 49.259133 L 60.34944 19.533224 L 29.530055 19.533224 z M 71.94256 19.533224 L 71.94256 49.259133 L 102.76401 49.259133 L 102.76401 19.533224 L 71.94256 19.533224 z M 0 60.325152 L 0 71.532248 L 132.292 71.532248 L 132.292 60.325152 L 0 60.325152 z M 29.62824 83.032867 L 29.62824 112.75878 L 60.34944 112.75878 L 60.34944 83.032867 L 29.62824 83.032867 z M 71.94256 83.032867 L 71.94256 112.75878 L 102.76401 112.75878 L 102.76401 83.032867 L 71.94256 83.032867 z " />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-column-end.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 0,132.292 V 121.0849 H 132.292 V 132.292 Z M 29.530055,109.58377 V 79.857859 H 60.54271 v 29.725911 z m 42.219235,0 V 79.857859 h 31.01472 V 109.58377 Z M 29.62824,65.134173 V 35.407747 h 30.91447 v 29.726426 z m 42.12105,0 V 35.407747 h 31.01472 v 29.726426 z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-column-start.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 0 0 L 0 11.207096 L 132.292 11.207096 L 132.292 0 L 0 0 z M 29.530055 22.708232 L 29.530055 52.434141 L 60.54271 52.434141 L 60.54271 22.708232 L 29.530055 22.708232 z M 71.74929 22.708232 L 71.74929 52.434141 L 102.76401 52.434141 L 102.76401 22.708232 L 71.74929 22.708232 z M 29.62824 67.157827 L 29.62824 96.884253 L 60.54271 96.884253 L 60.54271 67.157827 L 29.62824 67.157827 z M 71.74929 67.157827 L 71.74929 96.884253 L 102.76401 96.884253 L 102.76401 67.157827 L 71.74929 67.157827 z " />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-row-around.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250.48685"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 132.292,0 H 121.0849 V 132.292 H 132.292 Z M 101.38218,29.530055 H 71.655755 v 31.076734 h 29.726425 z m 0,42.155156 H 71.655755 V 102.76401 H 101.38218 Z M 60.636245,29.62824 H 30.90982 v 30.978549 h 29.726425 z m 0,42.056971 H 30.90982 V 102.76401 H 60.636245 Z M 11.2071,132.292 11.20606,0 H 0 v 132.292 z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-row-between.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250.48685"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 132.292,0 H 121.0849 V 132.292 H 132.292 Z M 110.37804,29.530055 H 80.652128 V 60.34944 h 29.725912 z m 0,42.412505 H 80.652128 v 30.82145 H 110.37804 Z M 51.639872,29.62824 H 21.91396 v 30.7212 h 29.725912 z m 0,42.31432 H 21.91396 v 30.82145 H 51.639872 Z M 11.2071,0 H 0 v 132.292 h 11.2071 z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-row-center.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250.48685"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 112.75878,29.530057 H 83.032868 v 30.819385 h 29.725912 z m 0,42.412505 H 83.032868 V 102.76401 H 112.75878 Z M 71.966849,2e-6 H 60.759753 V 132.292 H 71.966849 Z M 49.259134,29.628242 H 19.533221 v 30.7212 h 29.725913 z m 0,42.31432 H 19.533221 v 30.821448 h 29.725913 z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-row-end.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 132.292,1.5e-6 H 121.0849 V 132.292 H 132.292 Z M 109.58377,29.530058 H 79.857859 v 31.012654 h 29.725911 z m 0,42.219234 H 79.857859 V 102.76401 H 109.58377 Z M 65.134173,29.628242 h -29.72643 v 30.91447 h 29.72643 z m 0,42.12105 h -29.72643 v 31.014718 h 29.72643 z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.292 132.292"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="grid-justify-content-row-start.svg"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview6"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.054"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="249.75657"
|
||||||
|
inkscape:window-width="3840"
|
||||||
|
inkscape:window-height="2066"
|
||||||
|
inkscape:window-x="2869"
|
||||||
|
inkscape:window-y="-11"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
id="path2"
|
||||||
|
d="M 0,1.5e-6 H 11.2071 V 132.292 H 0 Z M 22.70823,29.530058 H 52.434141 V 60.542712 H 22.70823 Z m 0,42.219234 H 52.434141 V 102.76401 H 22.70823 Z m 44.449597,-42.12105 h 29.72643 v 30.91447 h -29.72643 z m 0,42.12105 h 29.72643 v 31.014718 h -29.72643 z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1649,6 +1649,12 @@
|
||||||
align-items: start;
|
align-items: start;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.align-items-grid,
|
||||||
|
&.jusfiy-content-grid {
|
||||||
|
align-items: start;
|
||||||
|
margin-top: 11px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.btn-wrapper {
|
.btn-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1748,6 +1754,34 @@
|
||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.edit-mode {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 5px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
|
fill: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.align-grid {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 7px;
|
||||||
|
margin: 7px 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.no-wrap {
|
.no-wrap {
|
||||||
|
|
@ -2076,6 +2110,116 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-columns {
|
||||||
|
border: 1px solid $color-gray-60;
|
||||||
|
padding: 5px;
|
||||||
|
min-height: 38px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.grid-columns-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-height: 36px;
|
||||||
|
.columns-info {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.expand-icon,
|
||||||
|
.add-column {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
|
fill: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-column svg {
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
fill: $color-gray-20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.columns-info-wrapper {
|
||||||
|
.column-info {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 35px 1fr 1fr auto;
|
||||||
|
background-color: $color-gray-60;
|
||||||
|
padding: 3px;
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.direction-grid-icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
background-color: $color-gray-60;
|
||||||
|
}
|
||||||
|
.grid-column-value,
|
||||||
|
.grid-column-unit {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 30px;
|
||||||
|
&.active,
|
||||||
|
&:focus,
|
||||||
|
&:focus-within {
|
||||||
|
border-bottom: 1px solid $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.grid-column-unit-selector {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid $color-gray-30;
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
height: 23px;
|
||||||
|
width: 100%;
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 1px solid $color-gray-20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-grid-column {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 40px;
|
||||||
|
svg {
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
fill: $color-gray-20;
|
||||||
|
}
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
|
fill: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.advanced-ops {
|
.advanced-ops {
|
||||||
|
|
|
||||||
|
|
@ -114,6 +114,16 @@
|
||||||
(def full-screen-off (icon-xref :full-screen-off))
|
(def full-screen-off (icon-xref :full-screen-off))
|
||||||
(def grid (icon-xref :grid))
|
(def grid (icon-xref :grid))
|
||||||
(def grid-snap (icon-xref :grid-snap))
|
(def grid-snap (icon-xref :grid-snap))
|
||||||
|
(def grid-justify-content-column-around (icon-xref :grid-justify-content-column-around))
|
||||||
|
(def grid-justify-content-column-between (icon-xref :grid-justify-content-column-between))
|
||||||
|
(def grid-justify-content-column-center (icon-xref :grid-justify-content-column-center))
|
||||||
|
(def grid-justify-content-column-end (icon-xref :grid-justify-content-column-end))
|
||||||
|
(def grid-justify-content-column-start (icon-xref :grid-justify-content-column-start))
|
||||||
|
(def grid-justify-content-row-around (icon-xref :grid-justify-content-row-around))
|
||||||
|
(def grid-justify-content-row-between (icon-xref :grid-justify-content-row-between))
|
||||||
|
(def grid-justify-content-row-center (icon-xref :grid-justify-content-row-center))
|
||||||
|
(def grid-justify-content-row-end (icon-xref :grid-justify-content-row-end))
|
||||||
|
(def grid-justify-content-row-start (icon-xref :grid-justify-content-row-start))
|
||||||
(def go-next (icon-xref :go-next))
|
(def go-next (icon-xref :go-next))
|
||||||
(def go-prev (icon-xref :go-prev))
|
(def go-prev (icon-xref :go-prev))
|
||||||
(def help (icon-xref :help))
|
(def help (icon-xref :help))
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
[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.components.select :refer [select]]
|
||||||
[app.main.ui.icons :as i]
|
[app.main.ui.icons :as i]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[cuerdas.core :as str]
|
[cuerdas.core :as str]
|
||||||
|
|
@ -94,8 +95,25 @@
|
||||||
:stretch i/align-self-column-strech
|
:stretch i/align-self-column-strech
|
||||||
:baseline i/align-self-column-baseline))))
|
:baseline i/align-self-column-baseline))))
|
||||||
|
|
||||||
|
(defn get-layout-grid-icon
|
||||||
|
[type val is-col?]
|
||||||
|
(case type
|
||||||
|
:justify-content (if is-col?
|
||||||
|
(case val
|
||||||
|
:start i/grid-justify-content-column-start
|
||||||
|
:end i/grid-justify-content-column-end
|
||||||
|
:center i/grid-justify-content-column-center
|
||||||
|
:space-around i/grid-justify-content-column-around
|
||||||
|
:space-between i/grid-justify-content-column-between)
|
||||||
|
(case val
|
||||||
|
:start i/grid-justify-content-row-start
|
||||||
|
:end i/grid-justify-content-row-end
|
||||||
|
:center i/grid-justify-content-row-center
|
||||||
|
:space-around i/grid-justify-content-row-around
|
||||||
|
:space-between i/grid-justify-content-row-between))))
|
||||||
|
|
||||||
(mf/defc direction-btn
|
(mf/defc direction-btn
|
||||||
[{:keys [dir saved-dir set-direction] :as props}]
|
[{:keys [dir saved-dir set-direction icon?] :as props}]
|
||||||
(let [handle-on-click
|
(let [handle-on-click
|
||||||
(mf/use-callback
|
(mf/use-callback
|
||||||
(mf/deps set-direction dir)
|
(mf/deps set-direction dir)
|
||||||
|
|
@ -112,7 +130,9 @@
|
||||||
:key (dm/str "direction-" dir)
|
:key (dm/str "direction-" dir)
|
||||||
:alt (str/replace (str/capital (d/name dir)) "-" " ")
|
:alt (str/replace (str/capital (d/name dir)) "-" " ")
|
||||||
:on-click handle-on-click}
|
:on-click handle-on-click}
|
||||||
i/auto-direction]))
|
(if icon?
|
||||||
|
i/auto-direction
|
||||||
|
(str/replace (str/capital (d/name dir)) "-" " "))]))
|
||||||
|
|
||||||
(mf/defc wrap-row
|
(mf/defc wrap-row
|
||||||
[{:keys [wrap-type set-wrap] :as props}]
|
[{:keys [wrap-type set-wrap] :as props}]
|
||||||
|
|
@ -299,6 +319,108 @@
|
||||||
:value (:row-gap gap-value)
|
:value (:row-gap gap-value)
|
||||||
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]]])
|
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]]])
|
||||||
|
|
||||||
|
(mf/defc grid-edit-mode
|
||||||
|
[{:keys [active toggle-edit-mode] :as props}]
|
||||||
|
[:*
|
||||||
|
[:button.tooltip.tooltip-bottom-left
|
||||||
|
{:class (dom/classnames :active (= active true))
|
||||||
|
:alt "Grid edit mode"
|
||||||
|
:on-click #(toggle-edit-mode)
|
||||||
|
:style {:padding 0}}
|
||||||
|
i/set-thumbnail]])
|
||||||
|
|
||||||
|
(mf/defc align-grid-row
|
||||||
|
[{:keys [is-col? align-items set-align] :as props}]
|
||||||
|
(let [type (if is-col?
|
||||||
|
:column
|
||||||
|
:row)]
|
||||||
|
[:div.align-items-style
|
||||||
|
(for [align [:start :center :end :stretch :baseline]]
|
||||||
|
[:button.align-start.tooltip
|
||||||
|
{:class (dom/classnames :active (= align-items align)
|
||||||
|
:tooltip-bottom-left (not= align :start)
|
||||||
|
:tooltip-bottom (= align :start))
|
||||||
|
:alt (dm/str "Align items " (d/name align))
|
||||||
|
:on-click #(set-align align % type)
|
||||||
|
:key (dm/str "align-items" (d/name align))}
|
||||||
|
(get-layout-flex-icon :align-items align is-col?)])]))
|
||||||
|
|
||||||
|
(mf/defc justify-grid-row
|
||||||
|
[{:keys [is-col? justify-items set-justify] :as props}]
|
||||||
|
(let [type (if is-col?
|
||||||
|
:column
|
||||||
|
:row)]
|
||||||
|
[:div.justify-content-style
|
||||||
|
(for [align [:start :center :end :space-around :space-between]]
|
||||||
|
[:button.align-start.tooltip
|
||||||
|
{:class (dom/classnames :active (= justify-items align)
|
||||||
|
:tooltip-bottom-left (not= align :start)
|
||||||
|
:tooltip-bottom (= align :start))
|
||||||
|
:alt (dm/str "Justify content " (d/name align))
|
||||||
|
:on-click #(set-justify align % type)
|
||||||
|
:key (dm/str "justify-content" (d/name align))}
|
||||||
|
(get-layout-grid-icon :justify-content align is-col?)])]))
|
||||||
|
|
||||||
|
(defn manage-values [value]
|
||||||
|
(let [quantity (:value value)
|
||||||
|
unit (:unit value)]
|
||||||
|
(case unit
|
||||||
|
:auto (d/name unit)
|
||||||
|
:perc (str/join [quantity "%"])
|
||||||
|
(str/join [quantity (d/name unit)]))))
|
||||||
|
|
||||||
|
(mf/defc grid-columns-row
|
||||||
|
[{:keys [is-col? expanded? column-values toggle add-new-element set-column-value handle-focus handle-blur on-unit-change remove-column] :as props}]
|
||||||
|
(let [column-num (count column-values)
|
||||||
|
direction (if (< 1 column-num)
|
||||||
|
(if is-col?
|
||||||
|
"Columns "
|
||||||
|
"Rows ")
|
||||||
|
(if is-col?
|
||||||
|
"Column "
|
||||||
|
"Row "))
|
||||||
|
column-vals (str/join ", " (map manage-values column-values))
|
||||||
|
generated-name (str direction column-num " (" column-vals ")")]
|
||||||
|
[:div.grid-columns
|
||||||
|
[:div.grid-columns-header
|
||||||
|
[:button.expand-icon
|
||||||
|
{:on-click toggle}
|
||||||
|
i/actions]
|
||||||
|
|
||||||
|
[:div.columns-info
|
||||||
|
generated-name]
|
||||||
|
[:button.add-column
|
||||||
|
{:on-click add-new-element}
|
||||||
|
i/plus]]
|
||||||
|
(when expanded?
|
||||||
|
[:div.columns-info-wrapper
|
||||||
|
(for [column column-values]
|
||||||
|
[:div.column-info
|
||||||
|
[:div.direction-grid-icon
|
||||||
|
(if is-col?
|
||||||
|
i/layout-rows
|
||||||
|
i/layout-columns)]
|
||||||
|
|
||||||
|
[:div.grid-column-value
|
||||||
|
[:> numeric-input {:no-validate true
|
||||||
|
:value (:value column)
|
||||||
|
:on-change set-column-value
|
||||||
|
:on-focus handle-focus
|
||||||
|
:on-blur handle-blur
|
||||||
|
:placeholder "--"}]]
|
||||||
|
[:div.grid-column-unit
|
||||||
|
[:& select
|
||||||
|
{:class "grid-column-unit-selector"
|
||||||
|
:default-value (:unit column)
|
||||||
|
:options [{:value :fr :label "fr"}
|
||||||
|
{:value :auto :label "auto"}
|
||||||
|
{:value :px :label "px"}
|
||||||
|
{:value :perc :label "%"}]
|
||||||
|
:on-change on-unit-change}]]
|
||||||
|
[:button.remove-grid-column
|
||||||
|
{:on-change remove-column}
|
||||||
|
i/minus]])])]))
|
||||||
|
|
||||||
(mf/defc layout-container-menu
|
(mf/defc layout-container-menu
|
||||||
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
|
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
|
||||||
[{:keys [ids _type values multiple] :as props}]
|
[{:keys [ids _type values multiple] :as props}]
|
||||||
|
|
@ -331,9 +453,6 @@
|
||||||
|
|
||||||
saved-dir (:layout-flex-dir values)
|
saved-dir (:layout-flex-dir values)
|
||||||
is-col? (or (= :column saved-dir) (= :column-reverse saved-dir))
|
is-col? (or (= :column saved-dir) (= :column-reverse saved-dir))
|
||||||
set-direction
|
|
||||||
(fn [dir]
|
|
||||||
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})))
|
|
||||||
|
|
||||||
;; Wrap type
|
;; Wrap type
|
||||||
|
|
||||||
|
|
@ -386,7 +505,63 @@
|
||||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
|
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
|
||||||
|
|
||||||
:else
|
:else
|
||||||
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))]
|
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))
|
||||||
|
|
||||||
|
;; Grid-direction
|
||||||
|
|
||||||
|
saved-grid-dir (:layout-grid-dir values)
|
||||||
|
|
||||||
|
set-direction
|
||||||
|
(fn [dir type]
|
||||||
|
(if (= :flex type)
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))
|
||||||
|
|
||||||
|
;; Align grid
|
||||||
|
align-items-row (:layout-grid-align-row values)
|
||||||
|
align-items-column (:layout-grid-align-column values)
|
||||||
|
set-align-grid (fn [value type]
|
||||||
|
(if (= type :row)
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-grid-align-row value}))
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-grid-align-column value}))))
|
||||||
|
|
||||||
|
;; Justify grid
|
||||||
|
grid-justify-content-row (:layout-grid-justify-row values)
|
||||||
|
grid-justify-content-column (:layout-grid-justify-column values)
|
||||||
|
set-justify-grid (fn [value type]
|
||||||
|
(if (= type :row)
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-grid-justify-row value}))
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-grid-justify-column value}))))
|
||||||
|
|
||||||
|
|
||||||
|
;;Grid columns
|
||||||
|
|
||||||
|
column-grid-values (:layout-grid-column-values values)
|
||||||
|
grid-columns-open? (mf/use-state false)
|
||||||
|
toggle-columns-info (mf/use-callback
|
||||||
|
(fn [_]
|
||||||
|
(swap! grid-columns-open? not)))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
; Grid rows / columns
|
||||||
|
rows-grid-values (:layout-grid-row-values values)
|
||||||
|
grid-rows-open? (mf/use-state false)
|
||||||
|
toggle-rows-info (mf/use-callback
|
||||||
|
(fn [_]
|
||||||
|
(swap! grid-rows-open? not)))
|
||||||
|
|
||||||
|
;; TODO -> fix this, is doing nothing
|
||||||
|
add-new-element (fn [value type]
|
||||||
|
(if (= type :row)
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-grid-row-values value}))
|
||||||
|
(st/emit! (dwsl/update-layout ids {:layout-grid-column-values value}))))
|
||||||
|
|
||||||
|
set-column-value (fn[] )
|
||||||
|
handle-focus (fn [])
|
||||||
|
handle-blur (fn [])
|
||||||
|
set-colum-unit (fn [])
|
||||||
|
remove-column (fn [])]
|
||||||
|
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title
|
[:div.element-set-title
|
||||||
|
|
@ -395,12 +570,12 @@
|
||||||
(if (and (not multiple) (:layout values))
|
(if (and (not multiple) (:layout values))
|
||||||
[:div.title-actions
|
[:div.title-actions
|
||||||
[:div.layout-btns
|
[:div.layout-btns
|
||||||
[:button {:on-click set-flex
|
[:button {:on-click set-flex
|
||||||
:class (dom/classnames
|
:class (dom/classnames
|
||||||
:active (= :flex layout-type))} "Flex"]
|
:active (= :flex layout-type))} "Flex"]
|
||||||
[:button {:on-click set-grid
|
[:button {:on-click set-grid
|
||||||
:class (dom/classnames
|
:class (dom/classnames
|
||||||
:active (= :grid layout-type))} "Grid"]]
|
:active (= :grid layout-type))} "Grid"]]
|
||||||
[:button.remove-layout {:on-click on-remove-layout} i/minus]]
|
[:button.remove-layout {:on-click on-remove-layout} i/minus]]
|
||||||
|
|
||||||
[:button.add-page {:on-click #(on-add-layout :flex)} i/close])]]
|
[:button.add-page {:on-click #(on-add-layout :flex)} i/close])]]
|
||||||
|
|
@ -418,7 +593,8 @@
|
||||||
[:& direction-btn {:key (d/name dir)
|
[:& direction-btn {:key (d/name dir)
|
||||||
:dir dir
|
:dir dir
|
||||||
:saved-dir saved-dir
|
:saved-dir saved-dir
|
||||||
:set-direction set-direction}])]]
|
:set-direction #(set-direction dir :flex)
|
||||||
|
:icon? true}])]]
|
||||||
|
|
||||||
[:div.wrap-type
|
[:div.wrap-type
|
||||||
[:& wrap-row {:wrap-type wrap-type
|
[:& wrap-row {:wrap-type wrap-type
|
||||||
|
|
@ -456,4 +632,73 @@
|
||||||
:on-change-style change-padding-type
|
:on-change-style change-padding-type
|
||||||
:on-change on-padding-change}]]
|
:on-change on-padding-change}]]
|
||||||
|
|
||||||
[:div "GRID TO COME"])))]))
|
[:div.element-set-content.layout-menu
|
||||||
|
[:div.layout-row
|
||||||
|
[:div.direction-wrap.row-title "Direction"]
|
||||||
|
[:div.btn-wrapper
|
||||||
|
[:div.direction
|
||||||
|
[:*
|
||||||
|
(for [dir [:row :column]]
|
||||||
|
[:& direction-btn {:key (d/name dir)
|
||||||
|
:dir dir
|
||||||
|
:saved-dir saved-grid-dir
|
||||||
|
:set-direction #(set-direction dir :grid)
|
||||||
|
:icon? false}])]]
|
||||||
|
|
||||||
|
[:div.edit-mode
|
||||||
|
[:& grid-edit-mode
|
||||||
|
{:active false
|
||||||
|
:toggle-edit-mode ()}]]]]
|
||||||
|
|
||||||
|
[:div.layout-row
|
||||||
|
[:div.align-items-grid.row-title "Align"]
|
||||||
|
[:div.btn-wrapper.align-grid
|
||||||
|
[:& align-grid-row {:is-col? false
|
||||||
|
:align-items align-items-row
|
||||||
|
:set-align set-align-grid}]
|
||||||
|
|
||||||
|
[:& align-grid-row {:is-col? true
|
||||||
|
:align-items align-items-column
|
||||||
|
:set-align set-align-grid}]]]
|
||||||
|
|
||||||
|
[:div.layout-row
|
||||||
|
[:div.jusfiy-content-grid.row-title "Justify"]
|
||||||
|
[:div.btn-wrapper.align-grid
|
||||||
|
[:& justify-grid-row {:is-col? true
|
||||||
|
:align-items grid-justify-content-column
|
||||||
|
:set-justify set-justify-grid}]
|
||||||
|
[:& justify-grid-row {:is-col? false
|
||||||
|
:align-items grid-justify-content-row
|
||||||
|
:set-justify set-justify-grid}]]]
|
||||||
|
|
||||||
|
[:& grid-columns-row {:is-col? true
|
||||||
|
:expanded? @grid-columns-open?
|
||||||
|
:toggle toggle-columns-info
|
||||||
|
:column-values [{:value 1 :unit :fr} {:value 1 :unit :fr}];; column-grid-values
|
||||||
|
:add-new-column add-new-element
|
||||||
|
:set-column-value set-column-value
|
||||||
|
:handle-focus handle-focus
|
||||||
|
:handle-blur handle-blur
|
||||||
|
:set-colum-unit set-colum-unit
|
||||||
|
:remove-column remove-column}]
|
||||||
|
|
||||||
|
[:& grid-columns-row {:is-col? false
|
||||||
|
:expanded? @grid-rows-open?
|
||||||
|
:toggle toggle-rows-info
|
||||||
|
:column-values [{:value "--" :unit :auto} {:value "--" :unit :auto}] ;; column-grid-values
|
||||||
|
:add-new-column add-new-element
|
||||||
|
:set-column-value set-column-value
|
||||||
|
:handle-focus handle-focus
|
||||||
|
:handle-blur handle-blur
|
||||||
|
:set-colum-unit set-colum-unit
|
||||||
|
:remove-column remove-column}]
|
||||||
|
|
||||||
|
[:& gap-section {:is-col? is-col?
|
||||||
|
:wrap-type wrap-type
|
||||||
|
:gap-selected? gap-selected?
|
||||||
|
:set-gap set-gap
|
||||||
|
:gap-value (:layout-gap values)}]
|
||||||
|
|
||||||
|
[:& padding-section {:values values
|
||||||
|
:on-change-style change-padding-type
|
||||||
|
:on-change on-padding-change}]])))]))
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue