feat: add SVG icons for edit/delete in QuoteCard
This commit is contained in:
Settel
parent
dac63f9c35
commit
f5ed80feb5
200
client/src/assets/icons/edit.svg
Normal file
200
client/src/assets/icons/edit.svg
Normal file
@ -0,0 +1,200 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:ns1="http://sozi.baierouge.fr"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
id="svg6254"
|
||||
sodipodi:docname="新規ドキュメント 9"
|
||||
viewBox="0 0 128 128"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.2 r9819"
|
||||
>
|
||||
<title
|
||||
id="title7073"
|
||||
>Pencil Pictogram</title
|
||||
>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
bordercolor="#666666"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-y="-4"
|
||||
fit-margin-left="0"
|
||||
pagecolor="#ffffff"
|
||||
fit-margin-top="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:zoom="4.0745363"
|
||||
inkscape:window-x="-4"
|
||||
inkscape:window-height="1017"
|
||||
showgrid="false"
|
||||
borderopacity="1.0"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:cx="45.584279"
|
||||
inkscape:cy="49.522511"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:document-units="px"
|
||||
/>
|
||||
<g
|
||||
id="layer1"
|
||||
inkscape:label="レイヤー 1"
|
||||
inkscape:groupmode="layer"
|
||||
transform="translate(-222.76 -630.44)"
|
||||
>
|
||||
<g
|
||||
id="g7066"
|
||||
transform="matrix(1.7183 0 0 1.7068 -160 -536.05)"
|
||||
>
|
||||
<path
|
||||
id="path5336-6"
|
||||
sodipodi:nodetypes="ccccc"
|
||||
style="stroke-linejoin:round;stroke:#000000;stroke-linecap:round;stroke-width:2.6122;fill:none"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m295.94 710.91l-36.816 36.816-35.073 9.3978 9.3949-35.062 37.195-37.195"
|
||||
/>
|
||||
<rect
|
||||
id="rect5338-48"
|
||||
style="fill:#000200"
|
||||
transform="matrix(-.26499 -.96425 .70711 -.70711 0 0)"
|
||||
rx="1.8358"
|
||||
ry="1.8187"
|
||||
height="53.027"
|
||||
width="9.58"
|
||||
y="60.3"
|
||||
x="-820.59"
|
||||
/>
|
||||
<rect
|
||||
id="rect5338-4-2"
|
||||
ry="1.8187"
|
||||
style="fill:#000200"
|
||||
rx="1.377"
|
||||
transform="rotate(225)"
|
||||
height="53.819"
|
||||
width="16.654"
|
||||
y="-340.44"
|
||||
x="-702.13"
|
||||
/>
|
||||
<rect
|
||||
id="rect5338-1-1"
|
||||
style="fill:#000200"
|
||||
transform="matrix(.96593 .25882 .70711 -.70711 0 0)"
|
||||
rx="1.836"
|
||||
ry="1.8187"
|
||||
height="53.819"
|
||||
width="9.6152"
|
||||
y="-734.79"
|
||||
x="778.66"
|
||||
/>
|
||||
<path
|
||||
id="path5336-1-6"
|
||||
style="stroke-linejoin:round;stroke:#000000;stroke-linecap:round;stroke-width:2.6122;fill:#000000"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m224.06 757.12 18.038-4.8199-13.219-13.219-4.8199 18.038z"
|
||||
/>
|
||||
</g
|
||||
>
|
||||
</g
|
||||
>
|
||||
<metadata
|
||||
>
|
||||
<rdf:RDF
|
||||
>
|
||||
<cc:Work
|
||||
>
|
||||
<dc:format
|
||||
>image/svg+xml</dc:format
|
||||
>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
|
||||
/>
|
||||
<cc:license
|
||||
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
|
||||
/>
|
||||
<dc:publisher
|
||||
>
|
||||
<cc:Agent
|
||||
rdf:about="http://openclipart.org/"
|
||||
>
|
||||
<dc:title
|
||||
>Openclipart</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:publisher
|
||||
>
|
||||
<dc:title
|
||||
>Pencil Pictogram</dc:title
|
||||
>
|
||||
<dc:date
|
||||
>2013-11-16T20:22:22</dc:date
|
||||
>
|
||||
<dc:description
|
||||
>black pencil pictogram.</dc:description
|
||||
>
|
||||
<dc:source
|
||||
>https://openclipart.org/detail/188837/pencil-pictogram-by-libberry-188837</dc:source
|
||||
>
|
||||
<dc:creator
|
||||
>
|
||||
<cc:Agent
|
||||
>
|
||||
<dc:title
|
||||
>libberry</dc:title
|
||||
>
|
||||
</cc:Agent
|
||||
>
|
||||
</dc:creator
|
||||
>
|
||||
<dc:subject
|
||||
>
|
||||
<rdf:Bag
|
||||
>
|
||||
<rdf:li
|
||||
>learning</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>pencil</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>stationery</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>study</rdf:li
|
||||
>
|
||||
<rdf:li
|
||||
>writing</rdf:li
|
||||
>
|
||||
</rdf:Bag
|
||||
>
|
||||
</dc:subject
|
||||
>
|
||||
</cc:Work
|
||||
>
|
||||
<cc:License
|
||||
rdf:about="http://creativecommons.org/licenses/publicdomain/"
|
||||
>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution"
|
||||
/>
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
|
||||
/>
|
||||
</cc:License
|
||||
>
|
||||
</rdf:RDF
|
||||
>
|
||||
</metadata
|
||||
>
|
||||
</svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
1
client/src/assets/icons/trash.svg
Normal file
1
client/src/assets/icons/trash.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="1000" width="875" xmlns="http://www.w3.org/2000/svg"><path d="M0 281.296l0 -68.355q1.953 -37.107 29.295 -62.496t64.449 -25.389l93.744 0l0 -31.248q0 -39.06 27.342 -66.402t66.402 -27.342l312.48 0q39.06 0 66.402 27.342t27.342 66.402l0 31.248l93.744 0q37.107 0 64.449 25.389t29.295 62.496l0 68.355q0 25.389 -18.553 43.943t-43.943 18.553l0 531.216q0 52.731 -36.13 88.862t-88.862 36.13l-499.968 0q-52.731 0 -88.862 -36.13t-36.13 -88.862l0 -531.216q-25.389 0 -43.943 -18.553t-18.553 -43.943zm62.496 0l749.952 0l0 -62.496q0 -13.671 -8.789 -22.46t-22.46 -8.789l-687.456 0q-13.671 0 -22.46 8.789t-8.789 22.46l0 62.496zm62.496 593.712q0 25.389 18.553 43.943t43.943 18.553l499.968 0q25.389 0 43.943 -18.553t18.553 -43.943l0 -531.216l-624.96 0l0 531.216zm62.496 -31.248l0 -406.224q0 -13.671 8.789 -22.46t22.46 -8.789l62.496 0q13.671 0 22.46 8.789t8.789 22.46l0 406.224q0 13.671 -8.789 22.46t-22.46 8.789l-62.496 0q-13.671 0 -22.46 -8.789t-8.789 -22.46zm31.248 0l62.496 0l0 -406.224l-62.496 0l0 406.224zm31.248 -718.704l374.976 0l0 -31.248q0 -13.671 -8.789 -22.46t-22.46 -8.789l-312.48 0q-13.671 0 -22.46 8.789t-8.789 22.46l0 31.248zm124.992 718.704l0 -406.224q0 -13.671 8.789 -22.46t22.46 -8.789l62.496 0q13.671 0 22.46 8.789t8.789 22.46l0 406.224q0 13.671 -8.789 22.46t-22.46 8.789l-62.496 0q-13.671 0 -22.46 -8.789t-8.789 -22.46zm31.248 0l62.496 0l0 -406.224l-62.496 0l0 406.224zm156.24 0l0 -406.224q0 -13.671 8.789 -22.46t22.46 -8.789l62.496 0q13.671 0 22.46 8.789t8.789 22.46l0 406.224q0 13.671 -8.789 22.46t-22.46 8.789l-62.496 0q-13.671 0 -22.46 -8.789t-8.789 -22.46zm31.248 0l62.496 0l0 -406.224l-62.496 0l0 406.224z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -20,6 +20,7 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&__box {
|
||||
|
||||
16
client/src/components/Icon.vue
Normal file
16
client/src/components/Icon.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<img class="icon" :src="`/assets/icons/${name}.svg`" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
name: string,
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="quote-card__container" :class="{ 'quote-card__container__editable': editable }">
|
||||
<div v-if="editable" class="quote-card__action-buttons">
|
||||
<QuoteCardActionButton @click="editQuote">✎</QuoteCardActionButton>
|
||||
<QuoteCardActionButton @click="deleteQuote">🗑</QuoteCardActionButton>
|
||||
<QuoteCardActionButton @click="editQuote" icon="edit" />
|
||||
<QuoteCardActionButton @click="deleteQuote" icon="trash" />
|
||||
</div>
|
||||
<div class="quote__quote">
|
||||
{{ quote.quote }}
|
||||
|
||||
@ -1,15 +1,22 @@
|
||||
<template>
|
||||
<button class="quote-card-action-button__button">
|
||||
<slot />
|
||||
<Icon :name="icon" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
icon: string,
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~/assets/css/components';
|
||||
|
||||
.quote-card-action-button {
|
||||
&__button {
|
||||
margin: 0 4px;
|
||||
padding: 12px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: $quote-button-border;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user