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

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,
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>