Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 02:28:18 -05:00
Code Issues Activity

✨ Add options to sidebar

Browse source
This commit is contained in:
Eva 2023-02-21 09:12:30 +01:00 • committed by alonso.torres
parent eb425dc4f2
commit cc8347a871
13 changed files with 794 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -1649,6 +1649,12 @@
align-items: start;
margin-top: 4px;
}
&.align-items-grid,
&.jusfiy-content-grid {
align-items: start;
margin-top: 11px;
}
}
.btn-wrapper {
display: flex;
@ -1748,6 +1754,34 @@
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 {
@ -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 {

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

@ -114,6 +114,16 @@
(def full-screen-off (icon-xref :full-screen-off))
(def grid (icon-xref :grid))
(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-prev (icon-xref :go-prev))
(def help (icon-xref :help))

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

@ -11,6 +11,7 @@
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[cuerdas.core :as str]
@ -94,8 +95,25 @@
:stretch i/align-self-column-strech
: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
[{:keys [dir saved-dir set-direction] :as props}]
[{:keys [dir saved-dir set-direction icon?] :as props}]
(let [handle-on-click
(mf/use-callback
(mf/deps set-direction dir)
@ -112,7 +130,9 @@
:key (dm/str "direction-" dir)
:alt (str/replace (str/capital (d/name dir)) "-" " ")
:on-click handle-on-click}
i/auto-direction]))
(if icon?
i/auto-direction
(str/replace (str/capital (d/name dir)) "-" " "))]))
(mf/defc wrap-row
[{:keys [wrap-type set-wrap] :as props}]
@ -299,6 +319,108 @@
:value (:row-gap gap-value)
: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/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
[{:keys [ids _type values multiple] :as props}]
@ -322,7 +444,7 @@
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))
@ -331,9 +453,6 @@
saved-dir (:layout-flex-dir values)
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
@ -386,7 +505,63 @@
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
: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-title
@ -395,12 +570,12 @@
(if (and (not multiple) (:layout values))
[:div.title-actions
[:div.layout-btns
[:button {:on-click set-flex
:class (dom/classnames
:active (= :flex layout-type))} "Flex"]
[:button {:on-click set-grid
:class (dom/classnames
:active (= :grid layout-type))} "Grid"]]
[:button {: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])]]
@ -418,7 +593,8 @@
[:& direction-btn {:key (d/name dir)
:dir dir
:saved-dir saved-dir
:set-direction set-direction}])]]
:set-direction #(set-direction dir :flex)
:icon? true}])]]
[:div.wrap-type
[:& wrap-row {:wrap-type wrap-type
@ -456,4 +632,73 @@
:on-change-style change-padding-type
: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}]])))]))