taigrr/homer
1
0
Fork 0
mirror of https://github.com/taigrr/homer synced 2025-01-18 04:53:12 -08:00
Code Issues Projects Releases Wiki Activity

feat: adds support for vlayout config option

Browse Source
This commit is contained in:
Tai Groot 2020-10-26 03:01:39 -07:00
parent 729d1b5309
commit ae8d62958b
Signed by: taigrr
GPG Key ID: D00C269A87614812
3 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -31,6 +31,7 @@
<DarkMode :isDark="this.isDark" @updated="isDark = $event" /> <DarkMode :isDark="this.isDark" @updated="isDark = $event" />
<LayoutToggle <LayoutToggle
:vlayout="this.vlayout"
@updated="vlayout = $event" @updated="vlayout = $event"
name="vlayout" name="vlayout"
icon="fa-list" icon="fa-list"
@ -145,7 +146,7 @@ export default {
offline: false, offline: false,
services: null, services: null,
showMenu: false, showMenu: false,
vlayout: true, vlayout: null,
}; };
}, },
created: async function () { created: async function () {

4
src/components/DarkMode.vue
View File

@ -13,7 +13,7 @@ export default {
name: "Darkmode", name: "Darkmode",
props: ["isDark"], props: ["isDark"],
created: function () { created: function () {
var isDark = let isDark =
"overrideDark" in localStorage "overrideDark" in localStorage
? JSON.parse(localStorage.overrideDark) ? JSON.parse(localStorage.overrideDark)
: this.isDark === null : this.isDark === null
@ -23,7 +23,7 @@ export default {
}, },
methods: { methods: {
toggleTheme: function () { toggleTheme: function () {
var isDark = !this.isDark; let isDark = !this.isDark;
localStorage.overrideDark = isDark; localStorage.overrideDark = isDark;
this.$emit("updated", isDark); this.$emit("updated", isDark);
}, },

24
src/components/LayoutToggle.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile"> <a v-on:click="toggleLayout()" class="navbar-item is-inline-block-mobile">
<span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span> <span><i :class="['fas', 'fa-fw', vlayout ? icon : secondaryIcon]"></i></span>
<slot></slot> <slot></slot>
</a> </a>
</template> </template>
@ -12,27 +12,31 @@ export default {
name: String, name: String,
icon: String, icon: String,
iconAlt: String, iconAlt: String,
vlayout: Boolean,
}, },
data: function () { data: function () {
return { return {
secondaryIcon: null, secondaryIcon: null,
value: true,
}; };
}, },
created: function () { created: function () {
this.secondaryIcon = this.iconAlt || this.icon; this.secondaryIcon = this.iconAlt || this.icon;
let vlayout;
if (this.name in localStorage) { if (this.name in localStorage) {
this.value = JSON.parse(localStorage[this.name]); vlayout = JSON.parse(localStorage[this.name]);
} else {
vlayout = this.vlayout === null
? true
: this.vlayout;
} }
this.$emit("updated", this.value); this.$emit("updated", vlayout);
}, },
methods: { methods: {
toggleSetting: function () { toggleLayout: function () {
this.value = !this.value; let vlayout = !this.vlayout;
localStorage[this.name] = this.value; localStorage[this.name] = vlayout;
this.$emit("updated", this.value); this.$emit("updated", vlayout);
}, },
}, },
}; };