danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added multiple theme selector, compltely removed dark mode checkbox in settings

This commit is contained in:
Roberto Tonino 2020-05-14 18:57:43 +02:00
parent 62b3bb77c2
commit 88b51c09ac
8 changed files with 79 additions and 42221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/modules/base/base.css
View File

@ -8,16 +8,9 @@
html { html {
height: 100vh; height: 100vh;
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--main-scroll: #555; --main-scroll: #555;
--panels-background: #222324;
--panels-text: #ffffff;
--panels-scroll: #2a2c2c; --panels-scroll: #2a2c2c;
--accent-color: #0a84ff; --accent-color: #0a84ff;
--accent-text: #ffffff;
--tag-background: #0062c4; --tag-background: #0062c4;
--tag-text: #ffffff; --tag-text: #ffffff;
--toast-background: #000000dd; --toast-background: #000000dd;
@ -28,6 +21,16 @@ html {
--explicit-separator: 0.3125em; --explicit-separator: 0.3125em;
} }
html[data-theme='light'] {
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--panels-background: #222324;
--panels-text: #ffffff;
--accent-text: #ffffff;
}
html[data-theme='dark'] { html[data-theme='dark'] {
--main-background: #141414; --main-background: #141414;
--secondary-background: #242424; --secondary-background: #242424;

27
public/css/modules/sidebar.css
View File

@ -47,11 +47,20 @@
padding: 9px; padding: 9px;
} }
#sidebar .side_icon::selection {
background: none;
}
.side_icon--theme {
cursor: default;
}
#sidebar .main_tablinks.active .side_icon { #sidebar .main_tablinks.active .side_icon {
color: var(--accent-color); color: var(--accent-color);
} }
/* Theme selector */ /* Theme selector */
#theme_selector { #theme_selector {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
@ -74,27 +83,27 @@
visibility: visible; visibility: visible;
} }
#theme_togglers .theme_toggler { .theme_toggler {
width: 30px; width: 25px;
height: 30px; height: 25px;
border-radius: 1000px; border-radius: 1000px;
border: 1px solid var(--accent-color); border: 1px solid var(--separator);
cursor: pointer; cursor: pointer;
transition: border 200ms ease-in-out; transition: border 200ms ease-in-out;
} }
#theme_togglers .theme_toggler.active { .theme_toggler--active {
border-width: 3px; border-width: 3px;
} }
#theme_togglers .theme_toggler#light { .theme_toggler[data-theme-variant='light'] {
background: white; background: white;
} }
#theme_togglers .theme_toggler#dark { .theme_toggler[data-theme-variant='dark'] {
background: #141414; background: #141414;
} }
#sidebar .theme_selector_icon { .theme_toggler[data-theme-variant='purple'] {
transform: rotate(45deg); background: #460ead;
} }

18
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="default"> <html lang="en" dir="ltr" data-theme="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -9,8 +9,8 @@
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"> content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<script> <script>
if ('true' === localStorage.getItem('darkMode')) { if (localStorage.getItem('selectedTheme')) {
document.documentElement.setAttribute('data-theme', 'dark') document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))
} }
</script> </script>
</head> </head>
@ -57,10 +57,11 @@
<span class="main_tablinks_text">Info</span> <span class="main_tablinks_text">Info</span>
</span> </span>
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector"> <span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
<i class="material-icons side_icon theme_selector_icon">brightness_3</i> <i class="material-icons side_icon side_icon--theme">palette</i>
<div id="theme_togglers"> <div id="theme_togglers">
<div id="dark" class="theme_toggler"></div> <div class="theme_toggler" data-theme-variant="purple"></div>
<div id="light" class="theme_toggler active"></div> <div class="theme_toggler" data-theme-variant="dark"></div>
<div class="theme_toggler theme_toggler--active" data-theme-variant="light"></div>
</div> </div>
</span> </span>
</aside> </aside>
@ -162,7 +163,8 @@ <h2>Start searching!</h2>
class="download_overlay"><i class="material-icons">get_app</i></div> class="download_overlay"><i class="material-icons">get_app</i></div>
</div> </div>
<p class="primary-text inline-flex"> <p class="primary-text inline-flex">
<i v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1" class="material-icons explicit_icon">explicit</i> <i v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
class="material-icons explicit_icon">explicit</i>
{{release.ALB_TITLE}} {{release.ALB_TITLE}}
</p> </p>
<p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p> <p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p>
@ -1150,4 +1152,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<script src="/public/js/bundle.js"></script> <script src="/public/js/bundle.js"></script>
</html> </html>

42157
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long

9
src/js/app.js
View File

@ -18,7 +18,7 @@ socket.on('logging_in', function () {
toast('Logging in', 'loading', false, 'login-toast') toast('Logging in', 'loading', false, 'login-toast')
}) })
socket.on('init_autologin', function() { socket.on('init_autologin', function () {
let arl = localStorage.getItem('arl') let arl = localStorage.getItem('arl')
if (arl) socket.emit('login', arl) if (arl) socket.emit('login', arl)
}) })
@ -87,15 +87,10 @@ socket.on('logged_out', function () {
function startApp() { function startApp() {
Downloads.init() Downloads.init()
QualityModal.init() QualityModal.init()
Tabs.linkListeners() Tabs.init()
Search.linkListeners() Search.linkListeners()
TrackPreview.init() TrackPreview.init()
if ('true' === localStorage.getItem('darkMode')) {
document.querySelector('.theme_toggler.active').classList.remove('active')
document.querySelector('.theme_toggler#dark').classList.add('active')
}
document.getElementById('logged_in_info').classList.add('hide') document.getElementById('logged_in_info').classList.add('hide')
if (localStorage.getItem('arl')) { if (localStorage.getItem('arl')) {

13
src/js/modules/components/settings-tab.js
View File

@ -11,20 +11,9 @@ const SettingsTab = new Vue({
defaultSettings: {}, defaultSettings: {},
lastUser: '', lastUser: '',
spotifyUser: '', spotifyUser: '',
darkMode: false,
slimDownloads: false slimDownloads: false
}), }),
computed: { computed: {
changeDarkMode: {
get() {
return this.darkMode
},
set(wantDarkMode) {
this.darkMode = wantDarkMode
document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
localStorage.setItem('darkMode', wantDarkMode)
}
},
changeSlimDownloads: { changeSlimDownloads: {
get() { get() {
return this.slimDownloads return this.slimDownloads
@ -60,7 +49,6 @@ const SettingsTab = new Vue({
} }
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) { if (defaults) {
@ -104,7 +92,6 @@ const SettingsTab = new Vue({
this.spotifyUser = spotyUser this.spotifyUser = spotyUser
} }
this.changeDarkMode = 'true' === localStorage.getItem('darkMode')
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads') this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
} }
}).$mount('#settings_tab') }).$mount('#settings_tab')

57
src/js/modules/tabs.js
View File

@ -80,21 +80,21 @@ function linkListeners() {
* @since 0.1.0 * @since 0.1.0
*/ */
function handleSidebarClick(event) { function handleSidebarClick(event) {
if ( const wantToChangeTab = event.target.matches('.main_tablinks') || event.target.parentElement.matches('.main_tablinks')
!( const wantToChangeTheme = event.target.matches('.theme_toggler')
event.target.matches('.main_tablinks') ||
event.target.parentElement.matches('.main_tablinks') ||
event.target.parentElement.parentElement.matches('.main_tablinks')
)
)
return
let sidebarEl = event.target.matches('.main_tablinks') if (!(wantToChangeTab || wantToChangeTheme)) return
? event.target
: event.target.parentElement.matches('.main_tablinks') let sidebarEl
? event.target.parentElement let targetID
: event.target.parentElement.parentElement
let targetID = sidebarEl.id if (wantToChangeTab) {
sidebarEl = event.target.matches('.main_tablinks') ? event.target : event.target.parentElement
targetID = sidebarEl.id
} else {
sidebarEl = event.target
targetID = 'theme_toggler'
}
switch (targetID) { switch (targetID) {
case 'main_search_tablink': case 'main_search_tablink':
@ -118,13 +118,14 @@ function handleSidebarClick(event) {
case 'main_about_tablink': case 'main_about_tablink':
changeTab(sidebarEl, 'main', 'about_tab') changeTab(sidebarEl, 'main', 'about_tab')
break break
case 'theme_selector': case 'theme_toggler':
if (!event.target.matches('.theme_toggler')) return document.querySelector('.theme_toggler--active').classList.remove('theme_toggler--active')
sidebarEl.classList.add('theme_toggler--active')
event.target.parentElement.querySelector('.theme_toggler.active').classList.remove('active') let themeColor = sidebarEl.dataset.themeVariant
event.target.classList.add('active') document.documentElement.setAttribute('data-theme', themeColor)
let wantDarkMode = event.target.id === 'dark' localStorage.setItem('selectedTheme', themeColor)
document.querySelectorAll('*').forEach(el => { document.querySelectorAll('*').forEach(el => {
el.style.transition = 'all 200ms ease-in-out' el.style.transition = 'all 200ms ease-in-out'
@ -138,9 +139,6 @@ function handleSidebarClick(event) {
document.documentElement.removeEventListener('transitionend', transitionHandler) document.documentElement.removeEventListener('transitionend', transitionHandler)
}) })
document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
localStorage.setItem('darkMode', wantDarkMode)
break break
default: default:
@ -270,8 +268,21 @@ function backTab() {
TrackPreview.stopStackedTabsPreview() TrackPreview.stopStackedTabsPreview()
} }
function init() {
let selectedTheme = localStorage.getItem('selectedTheme')
if (selectedTheme) {
document.querySelector('.theme_toggler--active').classList.remove('theme_toggler--active')
document
.querySelector(`.theme_toggler[data-theme-variant="${selectedTheme}"]`)
.classList.add('theme_toggler--active')
}
linkListeners()
}
export default { export default {
linkListeners, init,
artistView, artistView,
albumView, albumView,
playlistView, playlistView,