mirror of
https://github.com/heyman/heynote.git
synced 2026-02-06 11:27:25 +00:00
Styling of DrawImageModal's toolbar buttons
This commit is contained in:
Jonatan Heyman
parent
3ab26057f1
commit
7bc9694b2a
5
assets/icons/arrow-pointer-white.svg
Normal file
5
assets/icons/arrow-pointer-white.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M173.3,66.5C181.4,62.4 191.2,63.3 198.4,68.8L518.4,308.7C526.7,314.9 530,325.7 526.8,335.5C523.6,345.3 514.4,351.9 504,351.9L351.7,351.9L440.6,529.6C448.5,545.4 442.1,564.6 426.3,572.5C410.5,580.4 391.3,574 383.4,558.2L294.5,380.5L203.2,502.3C197,510.6 186.2,513.9 176.4,510.7C166.6,507.5 160,498.3 160,488L160,88C160,78.9 165.1,70.6 173.3,66.5Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 869 B |
5
assets/icons/paint-white.svg
Normal file
5
assets/icons/paint-white.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M512.5,74.3L291.1,222C262,241.4 243.5,272.9 240.5,307.3C302.8,320.1 351.9,369.2 364.8,431.6C399.3,428.6 430.7,410.1 450.1,381L597.7,159.5C604.4,149.4 608,137.6 608,125.4C608,91.5 580.5,64 546.6,64C534.5,64 522.6,67.6 512.5,74.3ZM320,464C320,402.1 269.9,352 208,352C146.1,352 96,402.1 96,464C96,467.9 96.2,471.8 96.6,475.6C98.4,493.1 86.4,512 68.8,512L64,512C46.3,512 32,526.3 32,544C32,561.7 46.3,576 64,576L208,576C269.9,576 320,525.9 320,464Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 968 B |
5
assets/icons/redo-white.svg
Normal file
5
assets/icons/redo-white.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M371.8,82.4C359.8,87.4 352,99 352,112L352,192L240,192C142.8,192 64,270.8 64,368C64,481.3 145.5,531.9 164.2,542.1C166.7,543.5 169.5,544 172.3,544C183.2,544 192,535.1 192,524.3C192,516.8 187.7,509.9 182.2,504.8C172.8,496 160,478.4 160,448.1C160,395.1 203,352.1 256,352.1L352,352.1L352,432.1C352,445 359.8,456.7 371.8,461.7C383.8,466.7 397.5,463.9 406.7,454.8L566.7,294.8C579.2,282.3 579.2,262 566.7,249.5L406.7,89.5C397.5,80.3 383.8,77.6 371.8,82.6L371.8,82.4Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 982 B |
5
assets/icons/undo-white.svg
Normal file
5
assets/icons/undo-white.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<path d="M268.2,82.4C280.2,87.4 288,99 288,112L288,192L400,192C497.2,192 576,270.8 576,368C576,481.3 494.5,531.9 475.8,542.1C473.3,543.5 470.5,544 467.7,544C456.8,544 448,535.1 448,524.3C448,516.8 452.3,509.9 457.8,504.8C467.2,496 480,478.4 480,448.1C480,395.1 437,352.1 384,352.1L288,352.1L288,432.1C288,445 280.2,456.7 268.2,461.7C256.2,466.7 242.5,463.9 233.3,454.8L73.3,294.8C60.8,282.3 60.8,262 73.3,249.5L233.3,89.5C242.5,80.3 256.2,77.6 268.2,82.6L268.2,82.4Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
@ -457,21 +457,17 @@
|
||||
<div class="header-tools-left">
|
||||
<div class="mode-toggle">
|
||||
<button
|
||||
class="mode"
|
||||
class="mode select-mode"
|
||||
:class="{ active: !isDrawingMode }"
|
||||
:disabled="isLoading"
|
||||
@click="setDrawingMode(false)"
|
||||
>
|
||||
Select
|
||||
</button>
|
||||
></button>
|
||||
<button
|
||||
class="mode"
|
||||
class="mode draw-mode"
|
||||
:class="{ active: isDrawingMode }"
|
||||
:disabled="isLoading"
|
||||
@click="setDrawingMode(true)"
|
||||
>
|
||||
Draw
|
||||
</button>
|
||||
></button>
|
||||
</div>
|
||||
<label class="color-picker">
|
||||
<input
|
||||
@ -484,8 +480,8 @@
|
||||
</div>
|
||||
<div class="header-tools">
|
||||
<div class="history-controls">
|
||||
<button class="history" @click="undo" :disabled="historyIndex <= 0 || isLoading">Undo</button>
|
||||
<button class="history" @click="redo" :disabled="historyIndex >= history.length - 1 || isLoading">Redo</button>
|
||||
<button class="history undo" @click="undo" :disabled="historyIndex <= 0 || isLoading"></button>
|
||||
<button class="history redo" @click="redo" :disabled="historyIndex >= history.length - 1 || isLoading"></button>
|
||||
</div>
|
||||
<div class="zoom-controls">
|
||||
<button class="zoom" @click="zoomOut" :disabled="isLoading">-</button>
|
||||
@ -573,24 +569,32 @@
|
||||
align-items: center
|
||||
gap: 6px
|
||||
.mode
|
||||
height: 24px
|
||||
padding: 0 10px
|
||||
height: 26px
|
||||
width: 26px
|
||||
border-radius: 3px
|
||||
border: 1px solid #c7c7c7
|
||||
background: #fff
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
background-size: 13px
|
||||
background-position: center center
|
||||
background-repeat: no-repeat
|
||||
+dark-mode
|
||||
border-color: #444
|
||||
background: #1f1f1f
|
||||
background-color: #1f1f1f
|
||||
color: #eee
|
||||
&.active
|
||||
background: #1d7cf2
|
||||
background-color: #1d7cf2
|
||||
border-color: #1d7cf2
|
||||
color: #fff
|
||||
&.select-mode
|
||||
+dark-mode
|
||||
background-image: url("@/assets/icons/arrow-pointer-white.svg")
|
||||
&.draw-mode
|
||||
+dark-mode
|
||||
background-image: url("@/assets/icons/paint-white.svg")
|
||||
&:disabled
|
||||
opacity: 0.6
|
||||
cursor: not-allowed
|
||||
.color-picker input[type="color"]
|
||||
width: 24px
|
||||
height: 24px
|
||||
@ -607,20 +611,25 @@
|
||||
align-items: center
|
||||
gap: 6px
|
||||
.history
|
||||
height: 28px
|
||||
padding: 0 10px
|
||||
height: 26px
|
||||
width: 26px
|
||||
border-radius: 4px
|
||||
border: 1px solid #c7c7c7
|
||||
background: #fff
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
background-size: 13px
|
||||
background-position: center center
|
||||
background-repeat: no-repeat
|
||||
background-image: url("@/assets/icons/undo-white.svg")
|
||||
+dark-mode
|
||||
border-color: #444
|
||||
background: #1f1f1f
|
||||
background-color: #1f1f1f
|
||||
color: #eee
|
||||
&:disabled
|
||||
opacity: 0.6
|
||||
cursor: not-allowed
|
||||
opacity: 0.4
|
||||
&.redo
|
||||
background-image: url("@/assets/icons/redo-white.svg")
|
||||
.zoom-controls
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
Loading…
Reference in New Issue
Block a user