Sidebar SVG icons
This commit is contained in:
James Lyne
parent
7070353b32
commit
9a0f7eebc6
101
src/assets/icons/maps.svg
Normal file
101
src/assets/icons/maps.svg
Normal 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 |
76
src/assets/icons/players.svg
Normal file
76
src/assets/icons/players.svg
Normal 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 |
62
src/assets/icons/settings.svg
Normal file
62
src/assets/icons/settings.svg
Normal 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 |
@ -2,9 +2,17 @@
|
||||
<aside class="sidebar">
|
||||
<header class="sidebar__buttons">
|
||||
<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}"
|
||||
@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>
|
||||
<WorldList v-show="mapsActive"></WorldList>
|
||||
<PlayerList v-show="playersActive"></PlayerList>
|
||||
@ -18,9 +26,11 @@ import PlayerList from './sidebar/PlayerList.vue';
|
||||
import WorldList from './sidebar/WorldList.vue';
|
||||
import FollowTarget from './sidebar/FollowTarget.vue';
|
||||
import {useStore} from "@/store";
|
||||
import SvgIcon from "@/components/SvgIcon.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
SvgIcon,
|
||||
PlayerList,
|
||||
FollowTarget,
|
||||
WorldList,
|
||||
@ -30,11 +40,13 @@ export default defineComponent({
|
||||
const store = useStore();
|
||||
let mapsActive = ref(false),
|
||||
playersActive = ref(false),
|
||||
settingsActive = ref(false),
|
||||
following = computed(() => store.state.following);
|
||||
|
||||
return {
|
||||
mapsActive,
|
||||
playersActive,
|
||||
settingsActive,
|
||||
following
|
||||
}
|
||||
}
|
||||
@ -76,22 +88,11 @@ export default defineComponent({
|
||||
button {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-size: 3.2rem;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
& + button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button--maps {
|
||||
background-image: url('./../assets/images/world 1.png');
|
||||
}
|
||||
|
||||
.button--players {
|
||||
background-image: url('./../assets/images/people.png');
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__section {
|
||||
|
||||
@ -22,6 +22,21 @@
|
||||
background-color: #eeeeee;
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user