[zine] inversible .svg <Icon/>
This commit is contained in:
Avris
parent
01ac6dfe62
commit
a04cfa4863
|
|
@ -9,6 +9,7 @@
|
|||
v: { required: true },
|
||||
set: { default: 'l' },
|
||||
size: { default: 1 },
|
||||
inverse: { type: Boolean }
|
||||
},
|
||||
computed: {
|
||||
valueParts() {
|
||||
|
|
@ -22,7 +23,7 @@
|
|||
},
|
||||
iconSource() {
|
||||
if (this.v.endsWith('.svg')) {
|
||||
return `/img/${this.v}`;
|
||||
return `/img/${this.inverse ? this.v.replace('.svg', '-inverse.svg') : this.v}`;
|
||||
}
|
||||
if (this.v.startsWith('https://')) {
|
||||
return this.v;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,21 @@
|
|||
{name: 'links.links', route: config.links.route, icon: 'bookmark', condition: config.links.links.length > 0},
|
||||
{name: 'links.academic', route: config.links.academicRoute, icon: 'vial', condition: config.links.academic.length > 0},
|
||||
{name: 'links.blog', route: config.links.blogRoute, icon: 'pen-nib', condition: config.links.blog},
|
||||
{name: 'links.zine.header', route: config.links.zine.route, icon: 'zine.svg', condition: config.links.zine && config.links.zine.enabled},
|
||||
{name: 'links.zine.header', route: config.links.zine.route, icon: 'zine.svg', iconInverse: darkMode, condition: config.links.zine && config.links.zine.enabled},
|
||||
{name: 'links.mediaShort', route: config.links.mediaRoute, icon: 'tv', condition: config.links.mediaGuests.length > 0 || config.links.mediaMentions.length > 0},
|
||||
{name: 'faq.header', route: config.faq.route, icon: 'map-marker-question', condition: config.faq.enabled},
|
||||
{name: 'english.header', route: config.english.route, icon: 'globe-americas', condition: config.english.enabled},
|
||||
]"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'darkMode',
|
||||
]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
isDark(dark) {
|
||||
this.$eventHub.$emit('mode-changed', dark);
|
||||
this.setMode(dark);
|
||||
this.$store.commit('setDarkMode', dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<section class="mt-4 mt-lg-0">
|
||||
<div class="d-none d-md-inline-flex btn-group btn-block mb-2 w-100">
|
||||
<router-link v-for="{name, icon, route, condition} in links" :key="name"
|
||||
<router-link v-for="{name, icon, iconInverse, route, condition} in links" :key="name"
|
||||
v-if="condition === undefined || condition === true"
|
||||
:to="buildRoute(route)"
|
||||
:class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
|
||||
<Icon :v="icon"/>
|
||||
<Icon :v="icon" :inverse="iconInverse === undefined ? false : (iconInverse || isActiveRoute(route))"/>
|
||||
<T>{{name}}</T>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="d-block d-md-none btn-group-vertical btn-block mb-2 w-100">
|
||||
<router-link v-for="{name, icon, route, condition} in links" :key="name"
|
||||
<router-link v-for="{name, icon, iconInverse, route, condition} in links" :key="name"
|
||||
v-if="condition === undefined || condition === true"
|
||||
:to="buildRoute(route)"
|
||||
:class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
|
||||
<Icon :v="icon"/>
|
||||
<Icon :v="icon" :inverse="iconInverse === undefined ? false : (iconInverse || isActiveRoute(route))"/>
|
||||
<T>{{name}}</T>
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<LinksNav/>
|
||||
|
||||
<h2>
|
||||
<Icon v="zine.svg"/>
|
||||
<Icon v="zine.svg" :inverse="darkMode"/>
|
||||
<T>links.zine.headerLong</T>
|
||||
</h2>
|
||||
|
||||
|
|
@ -45,8 +45,14 @@
|
|||
|
||||
<script>
|
||||
import { head } from "../src/helpers";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'darkMode',
|
||||
]),
|
||||
},
|
||||
head() {
|
||||
return head({
|
||||
title: this.$t('links.zine.headerLong'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<?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"
|
||||
viewBox="0 0 576 512"
|
||||
version="1.1"
|
||||
id="svg12"
|
||||
sodipodi:docname="zine.svg"
|
||||
inkscape:version="1.0.1 (c497b03c, 2020-09-10)">
|
||||
<metadata
|
||||
id="metadata18">
|
||||
<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>
|
||||
<defs
|
||||
id="defs16" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1680"
|
||||
inkscape:window-height="936"
|
||||
id="namedview14"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.2986111"
|
||||
inkscape:cx="300.32086"
|
||||
inkscape:cy="234.4385"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg12" />
|
||||
<path
|
||||
style="fill:#fcf434;fill-opacity:1;stroke:none;stroke-width:0.932861px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 17.71123,144.24109 268.74866,45.56838 V 89.961088 L 91.636364,47.743316 32.342246,52.434179 12.320856,83.259855 Z"
|
||||
id="path20" />
|
||||
<path
|
||||
style="fill:#2c2c2c;fill-opacity:1;stroke:none;stroke-width:0.985021px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 15.40107,351.47584 3.080213,57.53104 30.802139,21.66753 233.326208,32.12773 -1.54011,-99.37179 -266.438504,-56.03673 z"
|
||||
id="path845" />
|
||||
<path
|
||||
style="fill:#9c59d1;fill-opacity:1;stroke:none;stroke-width:1.03076px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 17.71123,226.39572 267.97861,57.27125 -4.62032,85.08869 -266.438504,-61.36204 z"
|
||||
id="path847" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.05748px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 17.71123,220.02043 267.97861,60.27904 0.77005,-77.50162 -268.74866,-58.55676 z"
|
||||
id="path849" />
|
||||
<path
|
||||
d="M514.91 32h-.16c-24.08.12-144.75 8.83-219.56 48.09-4.05 2.12-10.33 2.12-14.38 0C205.99 40.83 85.32 32.12 61.25 32h-.16C27.4 32 0 58.47 0 91.01v296.7c0 31.41 25.41 57.28 57.85 58.9 34.77 1.76 122.03 8.26 181.89 30.37 5.27 1.95 10.64 3.02 16.25 3.02h64c5.62 0 10.99-1.08 16.26-3.02 59.87-22.11 147.12-28.61 181.92-30.37 32.41-1.62 57.82-27.48 57.82-58.89V91.01C576 58.47 548.6 32 514.91 32zM272 433c0 8.61-7.14 15.13-15.26 15.13-1.77 0-3.59-.31-5.39-.98-62.45-23.21-148.99-30.33-191.91-32.51-15.39-.77-27.44-12.6-27.44-26.93V91.01c0-14.89 13.06-27 29.09-27 19.28.1 122.46 7.38 192.12 38.29 11.26 5 18.64 15.75 18.66 27.84l.13 100.32V433zm272-45.29c0 14.33-12.05 26.16-27.45 26.93-42.92 2.18-129.46 9.3-191.91 32.51-1.8.67-3.62.98-5.39.98-8.11 0-15.26-6.52-15.26-15.13V230.46l.13-100.32c.01-12.09 7.4-22.84 18.66-27.84 69.66-30.91 172.84-38.19 192.12-38.29 16.03 0 29.09 12.11 29.09 27v296.7z"
|
||||
id="path10" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -4,6 +4,7 @@ export const state = () => ({
|
|||
token: null,
|
||||
user: null,
|
||||
spelling: 'traditional',
|
||||
darkMode: false,
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
|
|
@ -38,4 +39,7 @@ export const mutations = {
|
|||
setSpelling(state, spelling) {
|
||||
state.spelling = spelling;
|
||||
},
|
||||
setDarkMode(state, isDark) {
|
||||
state.darkMode = isDark;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue