evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed dark mode and slim download checkboxes resetting when saving

Browse Source
This commit is contained in:
Roberto Tonino 2020-05-05 21:24:29 +02:00
parent 3fe3841f62
commit 89da9b2d13
2 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@ -377,8 +377,7 @@ <h1>Favorites</h1>
<h1>No Playlists found</h1> <h1>No Playlists found</h1>
</div> </div>
<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0"> <div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
<div v-for="release in playlists" class="release clickable" @click="playlistView" <div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
:data-id="release.id">
<div class="cover_container"> <div class="cover_container">
<img class="rounded coverart" :src="release.picture_medium"> <img class="rounded coverart" :src="release.picture_medium">
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal" <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@ -526,11 +525,11 @@ <h2 id="settings_heading">Settings</h2>
<div class="settings_group"> <div class="settings_group">
<label class="with_checkbox"> <label class="with_checkbox">
<input type="checkbox" v-model="darkMode"> <input type="checkbox" v-model="changeDarkMode">
<span class="checkbox_text">Dark Mode</span> <span class="checkbox_text">Dark Mode</span>
</label> </label>
<label class="with_checkbox"> <label class="with_checkbox">
<input type="checkbox" v-model="slimDownloads"> <input type="checkbox" v-model="changeSlimDownloads">
<span class="checkbox_text">Slim download tab</span> <span class="checkbox_text">Slim download tab</span>
</label> </label>
</div> </div>
@ -997,8 +996,7 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')" :class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
:data-preview="track.preview_url">play_arrow</i></td> :data-preview="track.preview_url">play_arrow</i></td>
<td>{{ i+1 }}</td> <td>{{ i+1 }}</td>
<td class="inline-flex"><i v-if="track.explicit" <td class="inline-flex"><i v-if="track.explicit" class="material-icons">explicit</i>{{ track.name }}
class="material-icons">explicit</i>{{ track.name }}
</td> </td>
<td>{{ track.artists[0].name }}</td> <td>{{ track.artists[0].name }}</td>
<td>{{ track.album.name }}</td> <td>{{ track.album.name }}</td>

32
public/js/modules/components/settings-tab.js
View File

@ -9,27 +9,28 @@ const SettingsTab = new Vue({
lastCredentials: {}, lastCredentials: {},
defaultSettings: {}, defaultSettings: {},
lastUser: '', lastUser: '',
spotifyUser: '' spotifyUser: '',
darkMode: false,
slimDownloads: false
}), }),
computed: { computed: {
darkMode: { changeDarkMode: {
get() { get() {
return 'true' === localStorage.getItem('darkMode') return this.darkMode
}, },
set(wantDarkMode) { set(wantDarkMode) {
this.darkMode = wantDarkMode
document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default') document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
localStorage.setItem('darkMode', wantDarkMode) localStorage.setItem('darkMode', wantDarkMode)
} }
}, },
slimDownloads: { changeSlimDownloads: {
get() { get() {
return 'true' === localStorage.getItem('slimDownloads') return this.slimDownloads
}, },
set(wantSlimDownloads) { set(wantSlimDownloads) {
if (wantSlimDownloads) this.slimDownloads = wantSlimDownloads
document.getElementById("download_list").classList.add("slim") document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
else
document.getElementById("download_list").classList.remove("slim")
localStorage.setItem('slimDownloads', wantSlimDownloads) localStorage.setItem('slimDownloads', wantSlimDownloads)
} }
} }
@ -47,8 +48,8 @@ const SettingsTab = new Vue({
toast('ARL copied to clipboard', 'assignment') toast('ARL copied to clipboard', 'assignment')
}, },
saveSettings() { saveSettings() {
this.lastSettings = { ...SettingsTab.settings } this.lastSettings = { ...this.settings }
this.lastCredentials = { ...SettingsTab.spotifyFeatures } this.lastCredentials = { ...this.spotifyFeatures }
let changed = false let changed = false
if (this.lastUser != this.spotifyUser) { if (this.lastUser != this.spotifyUser) {
// force cloning without linking // force cloning without linking
@ -56,10 +57,15 @@ const SettingsTab = new Vue({
localStorage.setItem('spotifyUser', this.lastUser) localStorage.setItem('spotifyUser', this.lastUser)
changed = true changed = true
} }
socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false) socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
console.log(this.darkMode)
}, },
loadSettings(settings, spotifyCredentials, defaults = null) { loadSettings(settings, spotifyCredentials, defaults = null) {
if (defaults) this.defaultSettings = { ...defaults } if (defaults) {
this.defaultSettings = { ...defaults }
}
this.lastSettings = { ...settings } this.lastSettings = { ...settings }
this.lastCredentials = { ...spotifyCredentials } this.lastCredentials = { ...spotifyCredentials }
this.settings = settings this.settings = settings
@ -90,7 +96,7 @@ const SettingsTab = new Vue({
socket.on('init_settings', this.initSettings) socket.on('init_settings', this.initSettings)
socket.on('updateSettings', this.updateSettings) socket.on('updateSettings', this.updateSettings)
let spotyUser = localStorage.getItem('spotifyUser') let spotyUser = localStorage.getItem('spotifyUser')
if (spotyUser){ if ('' !== spotyUser) {
this.lastUser = spotyUser this.lastUser = spotyUser
this.spotifyUser = spotyUser this.spotifyUser = spotyUser
} }