extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2025-03-13 06:49:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3 from bastienwirtz/localstorage-settings

Browse Source 
Implementing settings persistence.
This commit is contained in:
Bastien Wirtz 2019-10-08 08:04:09 -07:00 committed by GitHub
commit 89c89a0db7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app.js
View File

@ -5,11 +5,18 @@ const app = new Vue({
offline: false, offline: false,
filter: '', filter: '',
vlayout: true, vlayout: true,
overrideDark: null isDark: null
}, },
created: function () { created: function () {
let that = this; let that = this;
this.isDark = 'overrideDark' in localStorage ?
JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
if ('vlayout' in localStorage) {
this.vlayout = JSON.parse(localStorage.vlayout)
}
this.checkOffline(); this.checkOffline();
that.getConfig().then(function (config) { that.getConfig().then(function (config) {
that.config = config; that.config = config;
@ -23,13 +30,6 @@ const app = new Vue({
} }
}, false); }, false);
}, },
computed: {
isDark: function() {
return this.overrideDark !== null
? this.overrideDark
: matchMedia("(prefers-color-scheme: dark)").matches;
}
},
methods: { methods: {
checkOffline: function () { checkOffline: function () {
let that = this; let that = this;
@ -53,8 +53,13 @@ const app = new Vue({
}); });
}, },
toggleTheme: function() { toggleTheme: function() {
this.overrideDark = !this.isDark; this.isDark = !this.isDark;
} localStorage.overrideDark = this.isDark;
},
toggleLayout: function() {
this.vlayout = !this.vlayout;
localStorage.vlayout = this.vlayout;
},
} }
}); });

7
index.html
View File

@ -14,10 +14,7 @@
</head> </head>
<body> <body>
<div id="app" v-if="config" :class="{ <div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light']">
'is-dark': overrideDark === true,
'is-light': overrideDark === false
}">
<div id="bighead"> <div id="bighead">
<section class="first-line"> <section class="first-line">
<div v-cloak class="container"> <div v-cloak class="container">
@ -47,7 +44,7 @@
aria-label="Toggle dark mode" aria-label="Toggle dark mode"
><i class="fas fa-adjust"></i> ><i class="fas fa-adjust"></i>
</a> </a>
<a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i <a v-on:click="toggleLayout()" class="icon-button navbar-item"><i
:class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
<div class="search-bar"> <div class="search-bar">
<label for="search" class="search-label"></label> <label for="search" class="search-label"></label>