Sidebar SVG icons

This commit is contained in:
James Lyne 2020-12-12 21:36:41 +00:00
parent 7070353b32
commit 9a0f7eebc6
8 changed files with 268 additions and 13 deletions

101
src/assets/icons/maps.svg Normal file
View File

@ -0,0 +1,101 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="zhLDATw1to.svg"
id="svg16"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 270.29999 272.41196"
height="272.41196pt"
width="270.29999pt"
version="1.0">
<defs
id="defs20" />
<sodipodi:namedview
inkscape:current-layer="svg16"
inkscape:window-maximized="1"
inkscape:window-y="-8"
inkscape:window-x="-8"
inkscape:cy="178.54564"
inkscape:cx="86.101104"
inkscape:zoom="2.8284271"
showgrid="false"
id="namedview18"
inkscape:window-height="1377"
inkscape:window-width="2560"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<metadata
id="metadata2">
Created by potrace 1.10, written by Peter Selinger 2001-2011
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="g14"
stroke="none"
fill="#000000"
transform="matrix(0.1,0,0,-0.1,-8,280.42894)">
<path
sodipodi:nodetypes="ccccccscccccccccccccc"
id="path4"
d="M 119,2787 85,2764 82,1618 80,472 C 370.90939,324.01108 637.3133,210.00346 903,96 c 28,-12 43,-13 58,-6 19,11 19,31 19,1170 v 1158 l -24,29 c -23,27 -49,42 -126,75 -203.02451,89.7621 -406.92874,175.0979 -580,251 -87,39 -93,39 -131,14 z M 577.24855,1397.5953 C 727.66744,1400.1135 827.61319,1316.7823 830,1145 824.27759,1051.2786 797.0666,958.44919 750,880 742,867 717,813 637,639 592.59094,541.42851 577.28479,542.03863 530,620 c -18.27165,35.28647 -32.17283,68.67982 -44,98 -15,35 -42,97 -62,138 -40.09008,94.43703 -102.77263,191.8964 -104,290 0,177.7673 118.97445,251.5953 257.24855,251.5953 z" />
<path
sodipodi:nodetypes="ccccc"
id="path6"
d="M 468.83748,1147.3998 C 468.83748,1059.1248 513.50675,1040 575,1040 c 77.94244,-1.711 105,42.2161 105,106 0,75.1395 -55.34378,103.2071 -99.69107,103.3371 -66.5165,0 -111.47145,-33.1638 -111.47145,-101.9373 z" />
<path
sodipodi:nodetypes="cccccccccccccccccccc"
id="path8"
d="m 1800,2743 c -183.4327,-82.8466 -376.9795,-172.5019 -540,-245 -69.472,-28.4246 -120.282,-83.5935 -122,-103 l 4,-1140 c 3,-627 8,-1148 12,-1157 10,-22 57,-24 94,-4 333.8908,152.289 341.4118,155.81576 617,282 l 40,21 8,1147 c 5,631 6,1158 3,1171 -7,27 -32,55 -49,55 -7,-1 -37,-12 -67,-27 z m -282.1449,-412.753 c 165.535,0 242.1449,-99.1509 242.1449,-255.247 1.2323,-86.3595 -22.9209,-126.7502 -80,-265 -8,-13 -33,-67 -113,-241 -47.043,-96.4447 -61.6227,-99.9116 -117.9887,9.6517 -80.4067,176.1489 -56.8669,128.6956 -95.0113,207.3483 -40.6936,94.4898 -101.6162,190.1254 -104,290 0,209.0581 166.826,254.0118 267.8551,254.247 z" />
<path
sodipodi:nodetypes="cccccccccccc"
id="path12"
d="m 2104,2756 c -19,-14 -19,-39 -22,-1168 -1,-634 0,-1163 3,-1174 3,-13 25,-32 52,-47 160.5871,-88.09833 325.1528,-172.69695 465,-250 83,-45 115,-47 153,-7 l 28,29 -7,793 c 1.25,1110.1875 6.8761,1464.6967 0.8761,1483.6967 -7,22 -46.8761,38.3033 -181.8761,109.3033 -136.1595,71.7736 -285.7922,155.059 -403,216 -62,33 -62,34 -88,15 z" />
</g>
<path
style="stroke-width:0.0999997"
d="m 131.98927,72.630982 c 0,8.827499 4.46693,10.73998 10.61625,10.73998 7.79425,0.171099 10.5,-4.221611 10.5,-10.6 0,-7.51395 -5.53437,-10.32071 -9.9691,-10.33371 -6.65165,0 -11.14715,3.31638 -11.14715,10.19373 z"
id="path6-5"
sodipodi:nodetypes="ccccc" />
<g
transform="matrix(0.1,0,0,-0.1,-8,280.42894)"
fill="#000000"
stroke="none"
id="g45">
<path
d="M 119,2787 85,2764 82,1618 80,472 C 370.90939,324.01108 637.3133,210.00346 903,96 c 28,-12 43,-13 58,-6 19,11 19,31 19,1170 v 1158 l -24,29 c -23,27 -49,42 -126,75 -203.02451,89.7621 -406.92874,175.0979 -580,251 -87,39 -93,39 -131,14 z M 577.24855,1397.5953 C 727.66744,1400.1135 827.61319,1316.7823 830,1145 824.27759,1051.2786 797.0666,958.44919 750,880 742,867 717,813 637,639 592.59094,541.42851 577.28479,542.03863 530,620 c -18.27165,35.28647 -32.17283,68.67982 -44,98 -15,35 -42,97 -62,138 -40.09008,94.43703 -102.77263,191.8964 -104,290 0,177.7673 118.97445,251.5953 257.24855,251.5953 z"
id="path37"
sodipodi:nodetypes="ccccccscccccccccccccc" />
<path
d="M 468.83748,1147.3998 C 468.83748,1059.1248 513.50675,1040 575,1040 c 77.94244,-1.711 105,42.2161 105,106 0,75.1395 -55.34378,103.2071 -99.69107,103.3371 -66.5165,0 -111.47145,-33.1638 -111.47145,-101.9373 z"
id="path39"
sodipodi:nodetypes="ccccc" />
<path
d="m 1800,2743 c -183.4327,-82.8466 -376.9795,-172.5019 -540,-245 -69.472,-28.4246 -120.282,-83.5935 -122,-103 l 4,-1140 c 3,-627 8,-1148 12,-1157 10,-22 57,-24 94,-4 333.8908,152.289 341.4118,155.81576 617,282 l 40,21 8,1147 c 5,631 6,1158 3,1171 -7,27 -32,55 -49,55 -7,-1 -37,-12 -67,-27 z m -282.1449,-412.753 c 165.535,0 242.1449,-99.1509 242.1449,-255.247 1.2323,-86.3595 -22.9209,-126.7502 -80,-265 -8,-13 -33,-67 -113,-241 -47.043,-96.4447 -61.6227,-99.9116 -117.9887,9.6517 -80.4067,176.1489 -56.8669,128.6956 -95.0113,207.3483 -40.6936,94.4898 -101.6162,190.1254 -104,290 0,209.0581 166.826,254.0118 267.8551,254.247 z"
id="path41"
sodipodi:nodetypes="cccccccccccccccccccc" />
<path
d="m 2104,2756 c -19,-14 -19,-39 -22,-1168 -1,-634 0,-1163 3,-1174 3,-13 25,-32 52,-47 160.5871,-88.09833 325.1528,-172.69695 465,-250 83,-45 115,-47 153,-7 l 28,29 -7,793 c 1.25,1110.1875 6.8761,1464.6967 0.8761,1483.6967 -7,22 -46.8761,38.3033 -181.8761,109.3033 -136.1595,71.7736 -285.7922,155.059 -403,216 -62,33 -62,34 -88,15 z"
id="path43"
sodipodi:nodetypes="cccccccccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@ -0,0 +1,76 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
width="258.51346pt"
height="270.91769pt"
viewBox="0 0 258.51346 270.91769"
preserveAspectRatio="xMidYMid meet"
id="svg10"
sodipodi:docname="Person.svg"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
<defs
id="defs14" />
<sodipodi:namedview
inkscape:document-rotation="0"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2560"
inkscape:window-height="1377"
id="namedview12"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="2.8284271"
inkscape:cx="211.56045"
inkscape:cy="155.15055"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg10">
<sodipodi:guide
position="129.3348,111.86918"
orientation="1,0"
id="guide72" />
</sodipodi:namedview>
<metadata
id="metadata2">
Created by potrace 1.10, written by Peter Selinger 2001-2011
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(0.1,0,0,-0.1,-12.389599,276.68628)"
fill="#000000"
stroke="none"
id="g8" />
<ellipse
style="stroke-width:0.75"
ry="77.175644"
rx="76.670578"
cy="77.175644"
cx="129.43581"
id="path16" />
<path
style="fill:#000000;stroke-width:0.265165"
d="M 74.521151,270.78985 C 46.592642,270.68026 21.415221,270.52882 18.571326,270.45331 8.8214951,270.19444 2.5640411,268.47954 0.76852389,265.57434 -0.77575536,263.07564 0.12305214,246.12452 2.4314794,234.21173 6.6023471,212.6877 15.780827,192.118 28.060843,176.77432 c 4.494216,-5.61546 14.040836,-14.88954 21.440776,-20.82868 6.710574,-5.38587 13.992222,-10.11728 17.874814,-11.61457 4.970513,-1.91683 5.744025,-1.66067 17.486153,5.79077 4.332397,2.74931 10.500945,5.88105 14.437147,7.32968 5.664787,2.08479 15.866347,4.66741 21.924497,5.55038 3.28481,0.47876 12.08545,0.55685 15.26006,0.1354 6.99902,-0.92916 18.2069,-3.80636 24.18275,-6.20801 5.34086,-2.14647 9.35655,-4.30632 16.07523,-8.64613 8.99175,-5.80805 10.50963,-6.05997 16.91761,-2.80776 11.74112,5.95891 29.81862,21.6827 39.11028,34.01807 10.3778,13.77729 19.15236,33.71438 22.97746,52.20816 1.88419,9.1098 2.54734,15.18404 2.70574,24.78396 0.11877,7.19821 0.0906,7.89586 -0.35334,8.74328 -1.35702,2.59052 -5.90081,4.2825 -13.47549,5.01791 -1.87934,0.18246 -19.75233,0.33241 -50.24878,0.42157 -26.03258,0.0761 -52.22426,0.17943 -58.20373,0.22957 -5.97947,0.0502 -33.72236,0.002 -61.650869,-0.10807 z"
id="path97" />
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="HtfWq8TKUJ.svg"
id="svg8"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 284.21777 283.90866"
height="283.90866pt"
width="284.21777pt"
version="1.0">
<defs
id="defs12" />
<sodipodi:namedview
inkscape:current-layer="svg8"
inkscape:window-maximized="1"
inkscape:window-y="-8"
inkscape:window-x="-8"
inkscape:cy="207.34115"
inkscape:cx="159.82744"
inkscape:zoom="2.625"
showgrid="false"
id="namedview10"
inkscape:window-height="1377"
inkscape:window-width="2560"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<metadata
id="metadata2">
Created by potrace 1.10, written by Peter Selinger 2001-2011
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="g6"
stroke="none"
fill="#000000"
transform="matrix(0.1,0,0,-0.1,-2.0546347,285.71099)">
<path
sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccc"
id="path4"
d="m 1073,2844 c -16,-3 -59,-17 -98,-30 -38,-14 -123,-42 -187,-64 C 595,2686 593,2684 629,2590 735,2311 614,2158 343,2230 233,2259 243,2268 145,2050 119,1992 80,1907 59,1861 3,1741 5,1730 86,1685 330.90947,1558.5799 322.36586,1337.8403 73,1209 -14.288919,1158.985 30.345915,1099.8335 59,1020 76,973 113,866 142,781 193.54374,657.84782 174.89693,586.43799 293,627 574.7943,745.57003 731.10443,556.37918 660,343 631,232 621,243 850,140 c 63,-28 154,-69 201,-91 103.3509,-45.949159 111.8834,-46.8599537 169,39 119.524,218.25404 325.8544,208.47583 450,-1 63.6357,-96.1309614 88.8935,-74.4798 169,-38 47,22 138,63 201,91 130.3752,57.63369 223.4615,70.27018 190,203 -57.5548,295.64357 98.2004,398.99944 360,286 94,-36 96,-34 160,159 22,64 51,149 64,187 14,39 26,78 26,87 92.1047,172.0513 -121.2884,205.239 -186,310 -43,83 -26,175 43,240 164.3814,104.7884 198.0413,101.2495 124,268 -28,66 -115,259 -143,317 -12,23 -30,44 -40,46 -11,3 -52,-3 -91,-13 -312.4196,-60.5724 -437.5592,64.1236 -284,367 17,49 16.8571,69.1429 -16.8571,90 -11,17 -330.1429,134 -428.1429,157 -131.2475,34.9522 -108.1722,9.1113 -224,-190 -84,-86 -214,-86 -298,0 -99.2692,125.6476 -79.2896,241.0866 -223,190 z m 988.5888,-1340.9087 c 0,-480.7589 -308.4829,-659.11161 -593.4416,-659.11161 C 1069.0369,843.97969 830,1070.5895 830,1393 c 0,398.0891 216.1633,661.1996 610,666 462.7155,0 621.5888,-283.3748 621.5888,-555.9087 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -2,9 +2,17 @@
<aside class="sidebar"> <aside class="sidebar">
<header class="sidebar__buttons"> <header class="sidebar__buttons">
<button :class="{'button--maps': true, 'active': mapsActive}" <button :class="{'button--maps': true, 'active': mapsActive}"
@click="mapsActive = !mapsActive" title="Map list" aria-label="Map list"></button> @click="mapsActive = !mapsActive" title="Map list" aria-label="Map list">
<SvgIcon name="maps"></SvgIcon>
</button>
<button :class="{'button--players': true, 'active': playersActive}" <button :class="{'button--players': true, 'active': playersActive}"
@click="playersActive = !playersActive" title="Player list" aria-label="Player list"></button> @click="playersActive = !playersActive" title="Player list" aria-label="Player list">
<SvgIcon name="players"></SvgIcon>
</button>
<button :class="{'button--settings': true, 'active': settingsActive}"
@click="settingsActive = !settingsActive" title="Settings" aria-label="Settings">
<SvgIcon name="settings"></SvgIcon>
</button>
</header> </header>
<WorldList v-show="mapsActive"></WorldList> <WorldList v-show="mapsActive"></WorldList>
<PlayerList v-show="playersActive"></PlayerList> <PlayerList v-show="playersActive"></PlayerList>
@ -18,9 +26,11 @@ import PlayerList from './sidebar/PlayerList.vue';
import WorldList from './sidebar/WorldList.vue'; import WorldList from './sidebar/WorldList.vue';
import FollowTarget from './sidebar/FollowTarget.vue'; import FollowTarget from './sidebar/FollowTarget.vue';
import {useStore} from "@/store"; import {useStore} from "@/store";
import SvgIcon from "@/components/SvgIcon.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
SvgIcon,
PlayerList, PlayerList,
FollowTarget, FollowTarget,
WorldList, WorldList,
@ -30,11 +40,13 @@ export default defineComponent({
const store = useStore(); const store = useStore();
let mapsActive = ref(false), let mapsActive = ref(false),
playersActive = ref(false), playersActive = ref(false),
settingsActive = ref(false),
following = computed(() => store.state.following); following = computed(() => store.state.following);
return { return {
mapsActive, mapsActive,
playersActive, playersActive,
settingsActive,
following following
} }
} }
@ -76,22 +88,11 @@ export default defineComponent({
button { button {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
background-size: 3.2rem;
background-position: center;
background-repeat: no-repeat;
& + button { & + button {
margin-left: 1rem; margin-left: 1rem;
} }
} }
.button--maps {
background-image: url('./../assets/images/world 1.png');
}
.button--players {
background-image: url('./../assets/images/people.png');
}
} }
.sidebar__section { .sidebar__section {

View File

@ -22,6 +22,21 @@
background-color: #eeeeee; background-color: #eeeeee;
color: #121212; color: #121212;
} }
.svg-icon {
display: inline-block;
width: 3rem;
height: 3rem;
&:only-child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
} }
%panel { %panel {