extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2024-11-07 08:44:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implementing settings persistence.

Browse Source
This commit is contained in:
Bastien Wirtz 2019-10-07 22:32:30 -07:00
parent 1312fe5d1a
commit d6adb2db1b
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,
filter: '',
vlayout: true,
overrideDark: null
isDark: null
},
created: function () {
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();
that.getConfig().then(function (config) {
that.config = config;
@ -23,13 +30,6 @@ const app = new Vue({
}
}, false);
},
computed: {
isDark: function() {
return this.overrideDark !== null
? this.overrideDark
: matchMedia("(prefers-color-scheme: dark)").matches;
}
},
methods: {
checkOffline: function () {
let that = this;
@ -53,8 +53,13 @@ const app = new Vue({
});
},
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>
<body>
<div id="app" v-if="config" :class="{
'is-dark': overrideDark === true,
'is-light': overrideDark === false
}">
<div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light']">
<div id="bighead">
<section class="first-line">
<div v-cloak class="container">
@ -47,7 +44,7 @@
aria-label="Toggle dark mode"
><i class="fas fa-adjust"></i>
</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>
<div class="search-bar">
<label for="search" class="search-label"></label>