Populate tool shelf and tool options bar (#66)

This commit is contained in:
Keavon Chambers 2021-04-08 06:10:27 -07:00
parent e34672556d
commit 8b6053b1c4
49 changed files with 668 additions and 70 deletions

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 16 16">
<path d="M12,6c0-2.21-1.79-4-4-4S4,3.79,4,6c0,0.73,0.21,1.41,0.56,2C4.21,8.59,4,9.27,4,10c0,2.21,1.79,4,4,4s4-1.79,4-4c0-0.73-0.21-1.41-0.56-2C11.79,7.41,12,6.73,12,6z M8,3c1.66,0,3,1.34,3,3S9.66,9,8,9S5,7.66,5,6S6.34,3,8,3z" />
</svg>

After

Width:  |  Height:  |  Size: 263 B

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 16 16">
<path d="M9,5L6,2L3,5h2v4h2V5H9z M10,14l3-3h-2V7H9v4H7L10,14z" />
</svg>

After

Width:  |  Height:  |  Size: 100 B

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 16 24">
<polygon points="8,13 4.5,10 4.5,12 8,15 11.5,12 11.5,10" />
</svg>

After

Width:  |  Height:  |  Size: 95 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<rect x="12" y="4" width="1" height="16" />
<rect x="9" y="6" width="7" height="5" />
<rect x="6" y="13" width="13" height="5" />
</svg>

After

Width:  |  Height:  |  Size: 166 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<rect x="4" y="4" width="1" height="16" />
<rect x="7" y="6" width="7" height="5" />
<rect x="7" y="13" width="13" height="5" />
</svg>

After

Width:  |  Height:  |  Size: 165 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<rect x="19" y="4" width="1" height="16" />
<rect x="10" y="13" width="7" height="5" />
<rect x="4" y="6" width="13" height="5" />
</svg>

After

Width:  |  Height:  |  Size: 167 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<rect x="4" y="19" width="16" height="1" />
<rect x="6" y="10" width="5" height="7" />
<rect x="13" y="4" width="5" height="13" />
</svg>

After

Width:  |  Height:  |  Size: 167 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<rect x="4" y="12" width="16" height="1" />
<rect x="13" y="9" width="5" height="7" />
<rect x="6" y="6" width="5" height="13" />
</svg>

After

Width:  |  Height:  |  Size: 166 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<rect x="4" y="4" width="16" height="1" />
<rect x="13" y="7" width="5" height="7" />
<rect x="6" y="7" width="5" height="13" />
</svg>

After

Width:  |  Height:  |  Size: 165 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<polygon points="16,8 16,16 8,16 8,20 20,20 20,8" />
<polygon points="16,8 16,4 4,4 4,16 8,16 8,8" />
</svg>

After

Width:  |  Height:  |  Size: 137 B

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<path d="M16,8V4H4v12h4v4h12V8H16z M5,15V5h10v3H8v7H5z M19,19H9v-3h7V9h3V19z" />
</svg>

After

Width:  |  Height:  |  Size: 115 B

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<path d="M16,8V4H4v12h4v4h12V8H16z M5,5h10v10H5V5z" />
</svg>

After

Width:  |  Height:  |  Size: 89 B

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<path d="M16,8V4H4v12h4v4h12V8H16z M19,19H9V9h10V19z" />
</svg>

After

Width:  |  Height:  |  Size: 91 B

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<polygon points="16,8 16,4 4,4 4,16 8,16 8,20 20,20 20,8" />
</svg>

After

Width:  |  Height:  |  Size: 95 B

View File

@ -0,0 +1,8 @@
<svg viewBox="0 0 24 24">
<path d="M20,8.62v6.76l-4-2v-2.76L20,8.62 M21,7l-6,3v4l6,3V7L21,7z" />
<polygon points="10,14 4,17 4,7 10,10" />
<rect x="12" y="17" width="1" height="2" />
<rect x="12" y="13" width="1" height="2" />
<rect x="12" y="9" width="1" height="2" />
<rect x="12" y="5" width="1" height="2" />
</svg>

After

Width:  |  Height:  |  Size: 326 B

View File

@ -0,0 +1,8 @@
<svg viewBox="0 0 24 24">
<path d="M13.38,16l2,4H8.62l2-4H13.38 M14,15h-4l-3,6h10L14,15L14,15z" />
<polygon points="10,10 7,4 17,4 14,10" />
<rect x="5" y="12" width="2" height="1" />
<rect x="9" y="12" width="2" height="1" />
<rect x="13" y="12" width="2" height="1" />
<rect x="17" y="12" width="2" height="1" />
</svg>

After

Width:  |  Height:  |  Size: 328 B

View File

@ -0,0 +1,8 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M20,4H7v2h11v18h2V4z" />
<path style="fill:#FFFFFF;" d="M6,18V0H4v20h13v-2H6z" />
<rect style="fill:#FFFFFF;" x="21" y="18" width="3" height="2" />
<rect style="fill:#FFFFFF;" x="0" y="4" width="3" height="2" />
<path style="fill:#C5C5C5;" d="M21,5l3-3l-1-1l-2,2V5z" />
<path style="fill:#C5C5C5;" d="M17,7L7,17h2l8-8V7z" />
</svg>

After

Width:  |  Height:  |  Size: 395 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M23.56,21.45l-6.68-6.69C15.64,16.7,13.47,18,11,18c-3.86,0-7-3.14-7-7c0-2.56,1.39-4.8,3.45-6.02L7.36,4.94L5.25,4.08C3.26,5.73,2,8.22,2,11c0,4.97,4.03,9,9,9c1.95,0,3.74-0.63,5.21-1.68l5.23,5.24c0.58,0.59,1.53,0.59,2.12,0C24.15,22.98,24.15,22.03,23.56,21.45z" />
<path style="fill:#C5C5C5;" d="M19.92,9.97c-0.23-2.01-1.12-3.89-2.56-5.33c-1.44-1.44-3.32-2.33-5.33-2.56l-0.2-1.48L7.89,3.65l4.61,1.89l-0.19-1.4c1.37,0.26,2.64,0.91,3.64,1.91c1,1,1.66,2.27,1.91,3.64l-1.4-0.19l1.89,4.61l3.05-3.94L19.92,9.97z" />
<path style="fill:#FFFFFF;" d="M7.82,14.88c-0.18,0-0.36-0.07-0.5-0.21C6.34,13.69,5.8,12.39,5.8,11s0.54-2.69,1.52-3.68c0.27-0.27,0.72-0.27,0.99,0s0.27,0.72,0,0.99C7.6,9.03,7.2,9.98,7.2,11s0.4,1.97,1.11,2.69c0.27,0.27,0.27,0.72,0,0.99C8.18,14.81,8,14.88,7.82,14.88z" />
</svg>

After

Width:  |  Height:  |  Size: 840 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path style="fill:#C5C5C5;" d="M19.78,7.76l2.49-2.49c0.96-0.96,0.98-2.52,0.04-3.5l0,0c-0.97-1.01-2.58-1.03-3.57-0.04l-2.49,2.49l-1.06-1.06c-0.39-0.39-1.02-0.39-1.41,0l-1.46,1.46l7.07,7.07l1.46-1.46c0.39-0.39,0.39-1.02,0-1.41L19.78,7.76z" />
<path style="fill:#FFFFFF;" d="M15.63,9.93L5.9,19.65c-0.12,0.08-0.59,0.15-0.9,0.2c-0.32,0.05-0.68,0.1-1.05,0.2c0.09-0.38,0.15-0.73,0.2-1.05c0.05-0.31,0.12-0.78,0.18-0.88l9.74-9.74l-0.99-0.99c0,0-8.88,8.88-9.74,9.74c-0.86,0.86-0.24,2.89-1.66,4.31l0.88,0.88c1.41-1.41,3.45-0.8,4.31-1.66s9.74-9.74,9.74-9.74L15.63,9.93z" />
</svg>

After

Width:  |  Height:  |  Size: 597 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<polygon style="fill:#C5C5C5;" points="23,18.5 21,16.5 21,18 18,18 18,15 19.5,15 17.5,13 15.5,15 17,15 17,18 14,18 14,16.5 12,18.5 14,20.5 14,19 17,19 17,22 15.5,22 17.5,24 19.5,22 18,22 18,19 21,19 21,20.5" />
<path style="fill:#FFFFFF;" d="M7,4.83L12.17,10H10H9.17l-0.59,0.59L7,12.17V4.83 M5,0v17l5-5h7L5,0L5,0z" />
</svg>

After

Width:  |  Height:  |  Size: 353 B

View File

@ -0,0 +1,7 @@
<svg viewBox="0 0 24 24">
<circle style="fill:#FFFFFF;" cx="10.57" cy="13.36" r="1.75" />
<path style="fill:#D6536E;" d="M16.87,7.06c-1.51-1.57-3.35-2.78-5.4-3.52c0.58,2.14,1.72,4.07,3.31,5.61c1.41,1.54,3.26,2.61,5.3,3.05C19.5,10.22,18.39,8.44,16.87,7.06z" />
<path style="fill:#FFFFFF;" d="M9.88,13.67C4.27,1.33,5.35,0.71,5.93,0.37c0.83-0.48,1.71,0.04,4.74,4.32L9.44,5.56C8.31,3.97,7.57,3.04,7.08,2.49c0.57,2.14,2.39,6.66,4.16,10.55L9.88,13.67z" />
<path style="fill:#FFFFFF;" d="M17.32,6.6c-1.72-1.69-3.77-3.01-6.01-3.89L0,14.02c0.88,2.24,2.2,4.29,3.89,6.01c1.72,1.69,3.77,3.01,6.01,3.89l11.31-11.31h0C20.33,10.37,19.01,8.32,17.32,6.6z M9.55,22.15c-1.7-0.79-3.26-1.86-4.6-3.17c-1.31-1.35-2.38-2.9-3.17-4.61l9.08-9.08c0.87,1.65,1.98,3.16,3.29,4.49c1.33,1.31,2.84,2.42,4.49,3.29L9.55,22.15z M15.2,8.72c-1.34-1.37-2.46-2.95-3.3-4.67c1.74,0.81,3.34,1.92,4.72,3.26c1.34,1.38,2.45,2.97,3.26,4.71C18.15,11.18,16.57,10.07,15.2,8.72z" />
<path style="fill:#D6536E;" d="M23.32,17.36c-0.64-1.77-1.39-3.49-2.27-5.16c-0.47-0.44-1.41-0.63-1.71-1.23c-0.45-0.51-1.71-0.4-0.79,0.32c1.39,1.07,1.7,1.14,1.62,2.35c-0.26,1.3-0.78,2.53-1.53,3.62c-4.05,6.65,1.99,6.65,1.99,6.65S25.75,23.92,23.32,17.36z" />
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<rect x="2.5" y="4.5" style="fill:#D6536E;" width="19" height="15" />
<path style="fill:#FFFFFF;" d="M20.5,4h-17C2.67,4,2,4.67,2,5.5v13C2,19.33,2.67,20,3.5,20h17c0.83,0,1.5-0.67,1.5-1.5v-13C22,4.67,21.33,4,20.5,4z M5.12,14.73C5.4,15.44,6.05,15.93,6.8,16c-0.75,0.07-1.4,0.56-1.68,1.27h0c-0.19-0.55-0.58-1-1.1-1.27C4.54,15.74,4.93,15.28,5.12,14.73z M4.02,12c0.52-0.26,0.91-0.72,1.1-1.27C5.4,11.44,6.05,11.93,6.8,12c-0.75,0.07-1.4,0.56-1.68,1.27h0C4.93,12.72,4.54,12.26,4.02,12z M5.12,9.27L5.12,9.27c-0.19-0.55-0.59-1-1.1-1.27c0.52-0.26,0.91-0.72,1.1-1.27C5.4,7.44,6.05,7.93,6.8,8C6.05,8.07,5.4,8.56,5.12,9.27z M21,18.5c0,0.28-0.22,0.5-0.5,0.5h-1.45c0.53-0.03,0.96-0.46,0.96-1c0-0.56-0.45-1.01-1.01-1.01s-1.01,0.45-1.01,1.01c0,0.54,0.43,0.97,0.96,1h-2.94c0.25-0.26,0.41-0.61,0.41-1c0-0.79-0.64-1.42-1.42-1.42s-1.42,0.64-1.42,1.42c0,0.39,0.16,0.74,0.41,1h-1.55c0.2-0.28,0.32-0.63,0.32-1c0-0.97-0.78-1.75-1.75-1.75S9.25,17.03,9.25,18c0,0.37,0.12,0.72,0.32,1H8.73c0.21-0.35,0.32-0.76,0.28-1.19C8.92,16.85,8.16,16.09,7.2,16c1.1-0.1,1.91-1.09,1.81-2.19C8.92,12.85,8.16,12.09,7.2,12c1.1-0.1,1.91-1.09,1.81-2.19C8.92,8.85,8.16,8.09,7.2,8c1.1-0.1,1.91-1.09,1.81-2.19C8.98,5.51,8.88,5.24,8.74,5h0.83c-0.2,0.28-0.32,0.63-0.32,1c0,0.97,0.78,1.75,1.75,1.75c0.97,0,1.75-0.78,1.75-1.75c0-0.37-0.12-0.72-0.32-1h1.55c-0.25,0.26-0.41,0.61-0.41,1c0,0.79,0.64,1.42,1.42,1.42S16.42,6.79,16.42,6c0-0.39-0.16-0.74-0.41-1h2.94c-0.53,0.03-0.96,0.46-0.96,1c0,0.56,0.45,1.01,1.01,1.01S20.01,6.56,20.01,6c0-0.54-0.43-0.97-0.96-1h1.45C20.78,5,21,5.22,21,5.5V18.5z M16.42,14c0,0.79-0.64,1.42-1.42,1.42s-1.42-0.64-1.42-1.42c0-0.79,0.64-1.42,1.42-1.42S16.42,13.21,16.42,14z M20.01,14c0,0.56-0.45,1.01-1.01,1.01s-1.01-0.45-1.01-1.01s0.45-1.01,1.01-1.01S20.01,13.44,20.01,14z M20.01,10c0,0.56-0.45,1.01-1.01,1.01s-1.01-0.45-1.01-1.01S18.44,8.99,19,8.99S20.01,9.44,20.01,10z M16.42,10c0,0.79-0.64,1.42-1.42,1.42s-1.42-0.64-1.42-1.42c0-0.79,0.64-1.42,1.42-1.42S16.42,9.21,16.42,10z M12.75,10c0,0.97-0.78,1.75-1.75,1.75c-0.97,0-1.75-0.78-1.75-1.75c0-0.97,0.78-1.75,1.75-1.75S12.75,9.03,12.75,10z M12.75,14c0,0.97-0.78,1.75-1.75,1.75c-0.97,0-1.75-0.78-1.75-1.75c0-0.97,0.78-1.75,1.75-1.75S12.75,13.03,12.75,14z" />
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M4,3v5h1c0,0,0-3,4-3h2v13.5c0,1.1,0,2-3,2V22h9v-1.5c-3,0-3-0.9-3-2V5h2c4,0,4,3,4,3h1V3H4z" />
<path style="fill:#D6536E;" d="M5,20H1v2h5v-1C6,20.45,5.55,20,5,20z" />
<path style="fill:#D6536E;" d="M20,20c-0.55,0-1,0.45-1,1v1h5v-2H20z" />
</svg>

After

Width:  |  Height:  |  Size: 305 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<path style="fill:#E4BB72;" d="M19.47,14.93c0.06,0.95-0.01,1.86-0.21,2.7l1.48,2.97h-3c-0.48,0.55-1.06,1.02-1.72,1.4H23L19.47,14.93z" />
<path style="fill:#E4BB72;" d="M6.27,20.6h-3l1.48-2.97c-0.21-0.84-0.27-1.75-0.21-2.7L1,22h6.99C7.33,21.62,6.75,21.15,6.27,20.6z" />
<path style="fill:#FFFFFF;" d="M16.4,9.91C14.53,6.79,13,3.97,12,2.07c-1,1.9-2.53,4.72-4.4,7.84c-1.88,3.15-2.23,6.57-0.89,8.92C7.72,20.62,9.6,21.6,12,21.6s4.28-0.98,5.29-2.77C18.62,16.48,18.28,13.06,16.4,9.91z M9.4,11.5c0.6,6.5,3.6,8,3.6,8C5,20,9.4,11.5,9.4,11.5z" />
</svg>

After

Width:  |  Height:  |  Size: 571 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path style="fill:#E4BB72;" d="M12.96,17.06c-0.18-1.51-1.66-3.27-4-3.14c-1.68,0.1-3.12,1.49-4.04,4.2c-0.95,2.78-3.62,4-3.62,4 c2.86,0.97,5.92,1.31,8.61,0.11C12.32,21.15,13.19,19,12.96,17.06z" />
<path style="fill:#FFFFFF;" d="M22.49,1.1C21.54,0.35,18,3.81,14.1,8.17c-1.38,1.54-2.74,3.16-3.57,4.59c0.62,0.07,1.3,0.31,1.92,0.77c0.78,0.59,1.23,1.29,1.42,1.9c1.29-1.18,2.4-2.69,3.68-4.53C20.94,6.02,23.45,1.86,22.49,1.1z" />
</svg>

After

Width:  |  Height:  |  Size: 456 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<rect x="4" y="20" style="fill:#E4BB72;" width="16" height="2" />
<path style="fill:#FFFFFF;" d="M19.01,15.52c-1.29-0.33-2.51-0.57-3.93-0.93c-0.62-0.15-1.51-0.55-1.58-1.59v-2.7c0.12-0.4,0.42-0.7,0.56-0.83C15.22,8.71,16,7.45,16,6c0-2.21-1.79-4-4-4S8,3.79,8,6c0,1.4,0.72,2.63,1.81,3.34l-0.01,0c0,0,0.69,0.52,0.69,1.22V13c-0.06,1.04-0.95,1.43-1.58,1.59c-1.42,0.35-2.64,0.6-3.93,0.93C3.94,15.78,3,16.36,3,17v2h18v-2C21,16.36,20.06,15.78,19.01,15.52z" />
</svg>

After

Width:  |  Height:  |  Size: 485 B

View File

@ -0,0 +1,5 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M12,6l-6,6l6,6l6-6L12,6z M9,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C10,12.55,9.55,13,9,13z M12,16c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,15.55,12.55,16,12,16z M12,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,12.55,12.55,13,12,13z M12,10c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C13,9.55,12.55,10,12,10z M15,13c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C16,12.55,15.55,13,15,13z" />
<path style="fill:#E4BB72;" d="M1,17c0,0-1,3,1,5s5,1,5,1l4-4l-6-6L1,17z" />
<path style="fill:#E4BB72;" d="M22,2c-2-2-5-1-5-1l-4,4l6,6l4-4C23,7,24,4,22,2z" />
</svg>

After

Width:  |  Height:  |  Size: 651 B

View File

@ -0,0 +1,12 @@
<svg viewBox="0 0 24 24">
<path style="fill:#E4BB72;" d="M22.45,8.23l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.4
c0.08,0,0.16-0.01,0.24-0.04l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46C22.61,8.18,22.53,8.2,22.45,8.23z" />
<path style="fill:#E4BB72;" d="M19.55,16.77l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46C19.39,16.82,19.47,16.8,19.55,16.77z" />
<path style="fill:#E4BB72;" d="M15.77,21.45l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04C15.72,22.22,15.91,21.81,15.77,21.45z" />
<path style="fill:#E4BB72;" d="M14.64,1.65c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04c0.36-0.13,0.55-0.54,0.42-0.9l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46C14.8,1.61,14.72,1.62,14.64,1.65z" />
<path style="fill:#E4BB72;" d="M9.77,21.45l-1.23-3.38c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04C9.72,22.22,9.91,21.81,9.77,21.45z" />
<path style="fill:#E4BB72;" d="M1.55,15.77l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46c-0.08,0-0.16,0.01-0.24,0.04l-3.38,1.23c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46C1.39,15.82,1.47,15.8,1.55,15.77z" />
<path style="fill:#E4BB72;" d="M8.64,1.65c-0.36,0.13-0.55,0.54-0.42,0.9l1.23,3.38c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04c0.36-0.13,0.55-0.54,0.42-0.9L9.54,2.07c-0.1-0.28-0.37-0.46-0.66-0.46C8.8,1.61,8.72,1.62,8.64,1.65z" />
<path style="fill:#E4BB72;" d="M4.45,7.23L1.07,8.46c-0.36,0.13-0.55,0.54-0.42,0.9c0.1,0.28,0.37,0.46,0.66,0.46c0.08,0,0.16-0.01,0.24-0.04l3.38-1.23c0.36-0.13,0.55-0.54,0.42-0.9c-0.1-0.28-0.37-0.46-0.66-0.46C4.61,7.18,4.53,7.2,4.45,7.23z" />
<path style="fill:#FFFFFF;" d="M20.03,18.09c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38c-0.19-0.53-0.17-1.1,0.07-1.61c0.24-0.51,0.66-0.89,1.18-1.09L21,13.27v-1.53l-0.97,0.35c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38c-0.4-1.09,0.17-2.3,1.26-2.69L21,7.27V6c0-1.1-0.9-2-2-2h-1.27l0.35,0.97c0.4,1.09-0.17,2.3-1.26,2.69c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38L13.27,4h-1.53l0.35,0.97c0.4,1.09-0.17,2.3-1.26,2.69c-0.23,0.08-0.47,0.13-0.72,0.13c-0.88,0-1.67-0.56-1.98-1.38L7.27,4H5C3.9,4,3,4.9,3,6v0.27l0.97-0.35C4.2,5.83,4.44,5.78,4.69,5.78c0.88,0,1.67,0.56,1.98,1.38c0.19,0.53,0.17,1.1-0.07,1.61C6.36,9.28,5.94,9.67,5.41,9.86L3,10.73v1.53l0.97-0.35c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38c0.19,0.53,0.17,1.1-0.07,1.61c-0.24,0.51-0.66,0.89-1.18,1.09L3,16.73V18c0,1.1,0.9,2,2,2h1.27l-0.35-0.97c-0.4-1.09,0.17-2.3,1.26-2.69c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38L10.73,20h1.53l-0.35-0.97c-0.4-1.09,0.17-2.3,1.26-2.69c0.23-0.08,0.47-0.13,0.72-0.13c0.88,0,1.67,0.56,1.98,1.38L16.73,20H19c1.1,0,2-0.9,2-2v-0.27L20.03,18.09z" />
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -0,0 +1,8 @@
<svg viewBox="0 0 24 24">
<path style="fill:#E4BB72;" d="M13,11c-1.5-1.5-3.83-2.17-4.5-1.5l-2.48,2.48c1.16,0.27,2.49,1.08,3.71,2.29 c1.26,1.26,2.04,2.56,2.29,3.71l2.48-2.48C15.17,14.83,14.5,12.5,13,11z" />
<path style="fill:#E4BB72;" d="M22.5,1.5c-1-1-2.5-1.5-3-1l-8,8c1.33,0,4,2.67,4,4l8-8C24,4,23.5,2.5,22.5,1.5z M17.77,7.23l-1.55,1.55c-0.13,0.13-0.33,0.13-0.45,0l-0.55-0.55c-0.13-0.13-0.13-0.33,0-0.45l1.55-1.55c0.13-0.13,0.33-0.13,0.45,0l0.55,0.55C17.9,6.9,17.9,7.1,17.77,7.23z" />
<path style="fill:#FFFFFF;" d="M8.74,15.26c-1.67-1.67-3.55-2.45-4.29-1.71c-0.73,0.73,0.04,2.61,1.71,4.29 c1.67,1.67,3.55,2.45,4.29,1.71C11.19,18.81,10.41,16.93,8.74,15.26z" />
<path style="fill:#FFFFFF;" d="M2.5,22.25c-0.19,0-0.38-0.07-0.53-0.22c-0.29-0.29-0.29-0.77,0-1.06l2-2c0.29-0.29,0.77-0.29,1.06,0s0.29,0.77,0,1.06l-2,2C2.88,22.18,2.69,22.25,2.5,22.25z" />
<path style="fill:#FFFFFF;" d="M7,23.75c-0.06,0-0.12-0.01-0.18-0.02c-0.4-0.1-0.65-0.51-0.55-0.91l0.5-2c0.1-0.4,0.5-0.65,0.91-0.55c0.4,0.1,0.65,0.51,0.55,0.91l-0.5,2C7.64,23.52,7.34,23.75,7,23.75z" />
<path style="fill:#FFFFFF;" d="M1,17.75c-0.34,0-0.64-0.23-0.73-0.57c-0.1-0.4,0.14-0.81,0.55-0.91l2-0.5c0.4-0.1,0.81,0.14,0.91,0.55c0.1,0.4-0.14,0.81-0.55,0.91l-2,0.5C1.12,17.74,1.06,17.75,1,17.75z" />
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M12,6c4.41,0,8,2.69,8,6s-3.59,6-8,6s-8-2.69-8-6S7.59,6,12,6 M12,4C6.48,4,2,7.58,2,12s4.48,8,10,8s10-3.58,10-8S17.52,4,12,4L12,4z" />
<ellipse style="fill:#65BBE5;" cx="12" cy="12" rx="6.5" ry="4.5" />
</svg>

After

Width:  |  Height:  |  Size: 267 B

View File

@ -0,0 +1,6 @@
<svg viewBox="0 0 24 24">
<path style="fill:#65BBE5;" d="M21.98,15.79c-0.12-0.54-0.65-0.89-1.19-0.77c-0.08,0.02-2.09,0.46-4.39,2.18c-0.77,0.57-1.4,1.09-1.99,1.57c-1.21,0.99-2.17,1.78-3.69,2.47c-0.59,0.27-1.84,0.72-3.57,0.75l-3.61,1.55C4.68,23.84,5.81,24,6.94,24c0.02,0,0.05,0,0.07,0c2.2-0.01,3.8-0.59,4.55-0.94c1.75-0.8,2.85-1.7,4.13-2.75c0.56-0.46,1.17-0.96,1.91-1.51c1.93-1.44,3.6-1.82,3.61-1.82C21.75,16.86,22.09,16.33,21.98,15.79z" />
<path style="fill:#65BBE5;" d="M18.5,5.5c-1-1-2.5-1.5-3-1L5,15c0.39,0.24,1.23,0.1,1.59,0.38c0.36,0.28,0.3,1.06,0.63,1.4c0.33,0.33,1.11,0.28,1.4,0.63C8.9,17.77,8.76,18.61,9,19L19.5,8.5C20,8,19.5,6.5,18.5,5.5z M16.5,7.5l-7,7c-0.14,0.14-0.32,0.21-0.5,0.21s-0.36-0.07-0.5-0.21c-0.28-0.28-0.28-0.72,0-1l7-7c0.28-0.28,0.72-0.28,1,0C16.78,6.78,16.78,7.22,16.5,7.5z" />
<path style="fill:#FFFFFF;" d="M7.35,18.47l-2.39,1.71c-0.1-0.27-0.22-0.51-0.42-0.71c-0.2-0.2-0.44-0.32-0.71-0.42l1.71-2.39C5.14,16.61,4.5,16.42,4,16l-3,7l7-3C7.58,19.5,7.39,18.86,7.35,18.47z" />
<path style="fill:#FFFFFF;" d="M21.99,2.01C21,1,19.5,0.5,19,1l-2,2c2,0,4,2,4,4l2-2C23.5,4.5,22.98,3.02,21.99,2.01z" />
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path style="fill:#65BBE5;" d="M5.83,21.71h1.66c0.75,0,1.47-0.3,2-0.83l11.4-11.4c0.53-0.53,0.83-1.25,0.83-2V5.83L5.83,21.71z" />
<polygon style="fill:#FFFFFF;" points="20.29,2.29 2.29,20.29 3.71,21.71 21.71,3.71" />
</svg>

After

Width:  |  Height:  |  Size: 251 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<polygon style="fill:#FFFFFF;" points="5,0 5,17 10,12 17,12" />
<path style="fill:#65BBE5;" d="M20.77,14.36c-0.35-0.42-0.98-0.48-1.41-0.13c-1.04,0.87-2.19,1.6-3.36,2.24V16h-6v2.9c-2.88,0.84-5.07,1.1-5.11,1.11c-0.55,0.06-0.94,0.56-0.88,1.11C4.06,21.62,4.5,22,5,22c0.04,0,0.07,0,0.11-0.01c0.17-0.02,2.18-0.26,4.89-1.01V22h6v-3.28c1.6-0.79,3.2-1.75,4.64-2.95C21.06,15.42,21.12,14.78,20.77,14.36z M14,20h-2v-2h2V20z" />
</svg>

After

Width:  |  Height:  |  Size: 451 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path style="fill:#65BBE5;" d="M22.47,4.86C21.91,3.14,19.23,1.15,17.26,1c-3.4,0.35-6.56,2.34-6.32,4.93c0.14-0.29,0.31-0.57,0.53-0.84c0.17-0.21,0.39-0.37,0.63-0.46c0.61-0.23,1.23-0.35,1.86-0.35c1.61,0,3.22,0.8,4.43,2.2c1.07,1.24,1.62,2.72,1.45,3.87c-0.04,0.26-0.14,0.5-0.3,0.7c-0.3,0.38-0.68,0.68-1.11,0.91C22.67,12.01,22.59,6.63,22.47,4.86z" />
<path style="fill:#FFFFFF;" d="M12.63,6.03c-3.51,2.79-7.69,5.59-7.81,6.45C4.48,15,1,21,1,22l6.49-7.21c-0.21-0.55-0.08-1.24,0.38-1.77c0.63-0.73,1.65-0.88,2.28-0.34c0.63,0.54,0.62,1.58-0.02,2.3c-0.41,0.47-0.98,0.7-1.51,0.65L2,23c1,0,7.12-4.65,10.48-4.78c0.33-0.01,3.71-4.64,5.87-8.09C18.59,8.47,15.81,4.74,12.63,6.03z" />
</svg>

After

Width:  |  Height:  |  Size: 700 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M20,6v12H4V6H20 M22,4H2v16h20V4L22,4z" />
<rect x="5.5" y="7.5" style="fill:#65BBE5;" width="13" height="9" />
</svg>

After

Width:  |  Height:  |  Size: 177 B

View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M12,4.47l7.65,5.55L16.73,19H7.27l-2.92-8.98L12,4.47 M12,2L2,9.26L5.82,21h12.36L22,9.26L12,2L12,2z" />
<polygon style="fill:#65BBE5;" points="12,6.32 6.12,10.6 8.36,17.5 15.64,17.5 17.88,10.6" />
</svg>

After

Width:  |  Height:  |  Size: 261 B

View File

@ -0,0 +1,7 @@
<svg viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M12.94,5.12c1.37-0.78,3.61-1.54,7.22-2.13l-0.32-1.97c-3.88,0.63-6.69,1.54-8.5,2.76C12.01,4.05,12.56,4.52,12.94,5.12z" />
<path style="fill:#FFFFFF;" d="M11.06,18.88c-1.37,0.78-3.61,1.54-7.22,2.13l0.32,1.97c3.88-0.63,6.69-1.54,8.5-2.76C12,19.95,11.44,19.48,11.06,18.88z" />
<path style="fill:#FFFFFF;" d="M11.8,9.99c-0.53,0.32-1.14,0.51-1.8,0.51c-0.08,0-0.16-0.02-0.24-0.02c0.42,0.74,0.94,1.45,1.44,2.12c0.36,0.48,0.7,0.95,1,1.41c0.53-0.32,1.14-0.51,1.8-0.51c0.08,0,0.16,0.02,0.24,0.02c-0.42-0.74-0.94-1.45-1.44-2.12C12.44,10.92,12.1,10.45,11.8,9.99z" />
<circle style="fill:#65BBE5;" cx="14" cy="17" r="2" />
<circle style="fill:#65BBE5;" cx="10" cy="7" r="2" />
</svg>

After

Width:  |  Height:  |  Size: 732 B

View File

@ -9,6 +9,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
.spacer {
flex: 1 1 100%;
}
} }
</style> </style>

View File

@ -9,6 +9,10 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1; flex-grow: 1;
.spacer {
flex: 1 1 100%;
}
} }
</style> </style>

View File

@ -4,14 +4,12 @@
<div class="tab-group"> <div class="tab-group">
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel"> <div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
<span>{{tabLabel}}</span> <span>{{tabLabel}}</span>
<button v-if="tabCloseButtons"> <IconButton :size="16" v-if="tabCloseButtons">
<CloseX width="16" height="16" /> <CloseX />
</button> </IconButton>
</div> </div>
</div> </div>
<div class="panel-options-ellipsis"> <DropdownButton :icon="DropdownButtonIcon.VerticalEllipsis" />
<VerticalEllipsis />
</div>
</div> </div>
<div class="panel-content"> <div class="panel-content">
<component :is="panelType" /> <component :is="panelType" />
@ -88,26 +86,8 @@
line-height: 28px; line-height: 28px;
} }
button { .icon-button {
flex: 0 0 auto;
outline: none;
border: none;
padding: 0;
width: 16px;
height: 16px;
background: none;
color: #ddd;
font-weight: bold;
font-size: 10px;
border-radius: 2px;
margin-left: 8px; margin-left: 8px;
fill: #ddd;
&:hover {
background: #555;
color: white;
fill: white;
}
} }
&:not(.active) + .tab:not(.active) { &:not(.active) + .tab:not(.active) {
@ -137,24 +117,6 @@
} }
} }
} }
.panel-options-ellipsis {
width: 16px;
height: 24px;
margin: 2px 4px;
svg {
width: 16px;
height: 24px;
border-radius: 2px;
fill: #ddd;
}
&:hover svg {
background: #555;
fill: #fff;
}
}
} }
.panel-content { .panel-content {
@ -170,6 +132,8 @@ import Document from "../panels/Document.vue";
import Properties from "../panels/Properties.vue"; import Properties from "../panels/Properties.vue";
import LayerTree from "../panels/LayerTree.vue"; import LayerTree from "../panels/LayerTree.vue";
import Minimap from "../panels/Minimap.vue"; import Minimap from "../panels/Minimap.vue";
import IconButton from "../widgets/IconButton.vue";
import DropdownButton, { DropdownButtonIcon } from "../widgets/DropdownButton.vue";
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg"; import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg"; import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
@ -179,6 +143,8 @@ export default defineComponent({
Properties, Properties,
LayerTree, LayerTree,
Minimap, Minimap,
IconButton,
DropdownButton,
CloseX, CloseX,
VerticalEllipsis, VerticalEllipsis,
}, },
@ -189,5 +155,10 @@ export default defineComponent({
tabActiveIndex: { type: Number, required: true }, tabActiveIndex: { type: Number, required: true },
panelType: { type: String, required: true }, panelType: { type: String, required: true },
}, },
data() {
return {
DropdownButtonIcon,
};
},
}); });
</script> </script>

View File

@ -2,16 +2,154 @@
<LayoutCol :class="'document'"> <LayoutCol :class="'document'">
<LayoutRow :class="'options-bar'"> <LayoutRow :class="'options-bar'">
<div class="left side"> <div class="left side">
<!-- <span class="label">Select</span> <span class="label">Select</span>
<div class="divider"></div> -->
<ItemDivider />
<IconButton :size="24" title="Horizontal Align Left">
<AlignHorizontalLeft />
</IconButton>
<IconButton :size="24" title="Horizontal Align Center">
<AlignHorizontalCenter />
</IconButton>
<IconButton :size="24" gapAfter title="Horizontal Align Right">
<AlignHorizontalRight />
</IconButton>
<IconButton :size="24" title="Vertical Align Top">
<AlignVerticalTop />
</IconButton>
<IconButton :size="24" title="Vertical Align Center">
<AlignVerticalCenter />
</IconButton>
<IconButton :size="24" title="Vertical Align Bottom">
<AlignVerticalBottom />
</IconButton>
<DropdownButton />
<ItemDivider />
<IconButton :size="24" title="Flip Horizontal">
<FlipHorizontal />
</IconButton>
<IconButton :size="24" title="Flip Vertical">
<FlipVertical />
</IconButton>
<DropdownButton />
<ItemDivider />
<IconButton :size="24" title="Boolean Union">
<BooleanUnion />
</IconButton>
<IconButton :size="24" title="Boolean Subtract Front">
<BooleanSubtractFront />
</IconButton>
<IconButton :size="24" title="Boolean Subtract Back">
<BooleanSubtractBack />
</IconButton>
<IconButton :size="24" title="Boolean Intersect">
<BooleanIntersect />
</IconButton>
<IconButton :size="24" title="Boolean Difference">
<BooleanDifference />
</IconButton>
<DropdownButton />
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="right side"> <div class="right side"></div>
<!-- <span class="label">Layer 1</span> -->
</div>
</LayoutRow> </LayoutRow>
<LayoutRow :class="'shelf-and-viewport'"> <LayoutRow :class="'shelf-and-viewport'">
<LayoutCol :class="'shelf'"></LayoutCol> <LayoutCol :class="'shelf'">
<div class="tools">
<ShelfItem active title="Select Tool (V)">
<SelectTool />
</ShelfItem>
<ShelfItem title="Crop Tool">
<CropTool />
</ShelfItem>
<ShelfItem title="Navigate Tool">
<NavigateTool />
</ShelfItem>
<ShelfItem title="Sample Tool">
<SampleTool />
</ShelfItem>
<ItemDivider horizontal />
<ShelfItem title="Text Tool">
<TextTool />
</ShelfItem>
<ShelfItem title="Fill Tool">
<FillTool />
</ShelfItem>
<ShelfItem title="Gradient Tool">
<GradientTool />
</ShelfItem>
<ItemDivider horizontal />
<ShelfItem title="Brush Tool">
<BrushTool />
</ShelfItem>
<ShelfItem title="Heal Tool">
<HealTool />
</ShelfItem>
<ShelfItem title="Clone Tool">
<CloneTool />
</ShelfItem>
<ShelfItem title="Patch Tool">
<PatchTool />
</ShelfItem>
<ShelfItem title="Blur/Sharpen Tool">
<BlurSharpenTool />
</ShelfItem>
<ShelfItem title="Relight Tool">
<RelightTool />
</ShelfItem>
<ItemDivider horizontal />
<ShelfItem title="Path Tool">
<PathTool />
</ShelfItem>
<ShelfItem title="Pen Tool">
<PenTool />
</ShelfItem>
<ShelfItem title="Freehand Tool">
<FreehandTool />
</ShelfItem>
<ShelfItem title="Spline Tool">
<SplineTool />
</ShelfItem>
<ShelfItem title="Line Tool">
<LineTool />
</ShelfItem>
<ShelfItem title="Rectangle Tool (M)">
<RectangleTool />
</ShelfItem>
<ShelfItem title="Ellipse Tool (E)">
<EllipseTool />
</ShelfItem>
<ShelfItem title="Shape Tool">
<ShapeTool />
</ShelfItem>
</div>
<div class="spacer"></div>
<div class="working-colors">
<div class="swatch-pair">
<button
class="secondary swatch"
style="background: white;"
></button>
<button
class="primary swatch"
style="background: black;"
></button>
</div>
<div class="swap-and-reset">
<IconButton :size="16">
<SwapButton />
</IconButton>
<IconButton :size="16">
<ResetColorsButton />
</IconButton>
</div>
</div>
</LayoutCol>
<LayoutCol :class="'viewport'"> <LayoutCol :class="'viewport'">
<div <div
class="canvas" class="canvas"
@ -38,32 +176,46 @@
flex: 0 1 auto; flex: 0 1 auto;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 4px; margin: 0 8px;
> * {
margin: 0 4px;
}
.label { .label {
white-space: nowrap; white-space: nowrap;
font-weight: bold; font-weight: bold;
} }
.divider {
width: 1px;
height: 24px;
background: #888;
}
}
.spacer {
flex: 1 1 100%;
} }
} }
.shelf-and-viewport { .shelf-and-viewport {
.shelf { .shelf {
flex: 0 0 32px; flex: 0 0 32px;
.swatch-pair {
display: flex;
// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
flex-direction: column-reverse;
}
.working-colors {
.swatch {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px #888 solid;
box-shadow: 0 0 0 2px #333;
margin: 2px;
padding: 0;
box-sizing: unset;
outline: none;
}
.primary.swatch {
margin-bottom: -8px;
}
}
.swap-and-reset {
font-size: 0;
}
} }
.viewport { .viewport {
@ -82,12 +234,57 @@
} }
} }
} }
// The `where` pseduo-class does not contribtue to specificity
:where(.document .options-bar .side > :not(:first-child)) {
margin-left: 8px;
}
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue"; import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue"; import LayoutCol from "../layout/LayoutCol.vue";
import ShelfItem from "../widgets/ShelfItem.vue";
import ItemDivider from "../widgets/ItemDivider.vue";
import IconButton from "../widgets/IconButton.vue";
import DropdownButton from "../widgets/DropdownButton.vue";
import SwapButton from "../../../assets/svg/16x16-bounds-12x12-icon/swap.svg";
import ResetColorsButton from "../../../assets/svg/16x16-bounds-12x12-icon/reset-colors.svg";
import SelectTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-select.svg";
import CropTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-crop.svg";
import NavigateTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-navigate.svg";
import SampleTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-sample.svg";
import TextTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-parametric-text.svg";
import FillTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-parametric-fill.svg";
import GradientTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-parametric-gradient.svg";
import BrushTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-brush.svg";
import HealTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-heal.svg";
import CloneTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-clone.svg";
import PatchTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-patch.svg";
import BlurSharpenTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-blur-sharpen.svg";
import RelightTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-relight.svg";
import PathTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-path.svg";
import PenTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-pen.svg";
import FreehandTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-freehand.svg";
import SplineTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-spline.svg";
import LineTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-line.svg";
import RectangleTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-rectangle.svg";
import EllipseTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-ellipse.svg";
import ShapeTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-shape.svg";
import AlignHorizontalLeft from "../../../assets/svg/24x24-bounds-16x16-icon/align-horizontal-left.svg";
import AlignHorizontalCenter from "../../../assets/svg/24x24-bounds-16x16-icon/align-horizontal-center.svg";
import AlignHorizontalRight from "../../../assets/svg/24x24-bounds-16x16-icon/align-horizontal-right.svg";
import AlignVerticalTop from "../../../assets/svg/24x24-bounds-16x16-icon/align-vertical-top.svg";
import AlignVerticalCenter from "../../../assets/svg/24x24-bounds-16x16-icon/align-vertical-center.svg";
import AlignVerticalBottom from "../../../assets/svg/24x24-bounds-16x16-icon/align-vertical-bottom.svg";
import FlipHorizontal from "../../../assets/svg/24x24-bounds-16x16-icon/flip-horizontal.svg";
import FlipVertical from "../../../assets/svg/24x24-bounds-16x16-icon/flip-vertical.svg";
import BooleanUnion from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-union.svg";
import BooleanSubtractFront from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-subtract-front.svg";
import BooleanSubtractBack from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-subtract-back.svg";
import BooleanIntersect from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-intersect.svg";
import BooleanDifference from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-difference.svg";
const wasm = import("../../../wasm/pkg"); const wasm = import("../../../wasm/pkg");
@ -95,6 +292,46 @@ export default defineComponent({
components: { components: {
LayoutRow, LayoutRow,
LayoutCol, LayoutCol,
ShelfItem,
ItemDivider,
IconButton,
DropdownButton,
SwapButton,
ResetColorsButton,
SelectTool,
CropTool,
NavigateTool,
SampleTool,
TextTool,
FillTool,
GradientTool,
BrushTool,
HealTool,
CloneTool,
PatchTool,
BlurSharpenTool,
RelightTool,
PathTool,
PenTool,
FreehandTool,
SplineTool,
LineTool,
RectangleTool,
EllipseTool,
ShapeTool,
AlignHorizontalLeft,
AlignHorizontalCenter,
AlignHorizontalRight,
AlignVerticalTop,
AlignVerticalCenter,
AlignVerticalBottom,
FlipHorizontal,
FlipVertical,
BooleanUnion,
BooleanSubtractFront,
BooleanSubtractBack,
BooleanIntersect,
BooleanDifference,
}, },
methods: { methods: {
async canvasMouseDown(e: MouseEvent) { async canvasMouseDown(e: MouseEvent) {
@ -119,9 +356,8 @@ export default defineComponent({
}, },
}, },
mounted() { mounted() {
let self = this; window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
window.addEventListener("keyup", (evt: KeyboardEvent) => {self.keyUp(evt)}) window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
window.addEventListener("keydown", (evt: KeyboardEvent) => {self.keyDown(evt)})
}, },
}); });
</script> </script>

View File

@ -0,0 +1,45 @@
<template>
<button class="dropdown-button">
<component :is="icon" />
</button>
</template>
<style lang="scss">
.dropdown-button {
width: 16px;
height: 24px;
margin: 2px 4px;
padding: 0;
outline: none;
border: none;
border-radius: 2px;
background: #111;
fill: #ddd;
&:hover {
background: #555;
fill: #fff;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import DropdownArrow from "../../../assets/svg/16x24-bounds-8x16-icon/dropdown-arrow.svg";
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
export enum DropdownButtonIcon {
"DropdownArrow" = "DropdownArrow",
"VerticalEllipsis" = "VerticalEllipsis",
}
export default defineComponent({
components: {
VerticalEllipsis,
DropdownArrow,
},
props: {
icon: { type: String, default: DropdownButtonIcon.DropdownArrow },
},
});
</script>

View File

@ -0,0 +1,64 @@
<template>
<button class="icon-button" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
<slot></slot>
</button>
</template>
<style lang="scss">
.icon-button {
display: inline-block;
flex: 0 0 auto;
outline: none;
border: none;
padding: 0;
width: 16px;
height: 16px;
background: none;
font-weight: bold;
font-size: 10px;
border-radius: 2px;
color: #ddd;
fill: #ddd;
&:not(.gap-after) + .icon-button {
margin-left: 0;
}
&:hover {
background: #555;
color: white;
fill: white;
}
&.size-10 {
width: 10px;
height: 10px;
}
&.size-12 {
width: 12px;
height: 12px;
}
&.size-16 {
width: 16px;
height: 16px;
}
&.size-24 {
width: 24px;
height: 24px;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
size: { type: Number, required: true },
gapAfter: { type: Boolean, default: false },
},
});
</script>

View File

@ -0,0 +1,51 @@
<template>
<div class="item-spacer" :class="{ horizontal: horizontal }">
<div></div>
</div>
</template>
<style lang="scss">
.item-spacer {
margin-left: 0;
& + * {
margin-left: 0;
}
&:not(.horizontal) {
height: 100%;
padding: 0 8px;
div {
height: calc(100% - 8px);
width: 1px;
margin: 4px 0;
background: #888;
}
}
&.horizontal {
width: 100%;
padding: 8px 0;
div {
height: 1px;
width: calc(100% - 8px);
margin: 0 4px;
background: #888;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
components: {
},
props: {
horizontal: { type: Boolean, default: false },
},
});
</script>

View File

@ -0,0 +1,35 @@
<template>
<div class="shelf-item" :class="{ active: active }">
<slot></slot>
</div>
</template>
<style lang="scss">
.shelf-item {
padding: 4px;
border-radius: 4px;
&:hover {
background: #555;
}
&.active {
background: #428bbb;
}
svg {
width: 24px;
height: 24px;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
active: { type: Boolean, default: false },
},
});
</script>

View File

@ -54,6 +54,7 @@ pub fn translate_key(name: &str) -> events::Key {
use events::Key as K; use events::Key as K;
match name { match name {
"e" => K::KeyE, "e" => K::KeyE,
"v" => K::KeyV,
"r" => K::KeyR, "r" => K::KeyR,
"m" => K::KeyM, "m" => K::KeyM,
"x" => K::KeyX, "x" => K::KeyX,

View File

@ -94,6 +94,7 @@ pub enum Key {
KeyR, KeyR,
KeyM, KeyM,
KeyE, KeyE,
KeyV,
KeyX, KeyX,
Key0, Key0,
Key1, Key1,

View File

@ -62,6 +62,9 @@ impl Dispatcher {
Key::KeyE => { Key::KeyE => {
editor_state.tool_state.active_tool_type = ToolType::Ellipse; editor_state.tool_state.active_tool_type = ToolType::Ellipse;
} }
Key::KeyV => {
editor_state.tool_state.active_tool_type = ToolType::Select;
}
Key::KeyX => { Key::KeyX => {
editor_state.tool_state.swap_colors(); editor_state.tool_state.swap_colors();
} }