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 {
height: 100vh;
--main-background: #ffffff;
--secondary-background: #eeeeee;
--main-text: #333333;
--main-text-inverted: #eeeeee;
--main-scroll: #555;
--panels-background: #222324;
--panels-text: #ffffff;
--panels-scroll: #2a2c2c;
--accent-color: #0a84ff;
--accent-text: #ffffff;
--tag-background: #0062c4;
--tag-text: #ffffff;
--toast-background: #000000dd;
@ -28,6 +21,16 @@ html {
--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'] {
--main-background: #141414;
--secondary-background: #242424;

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

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

16
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="default">
<html lang="en" dir="ltr" data-theme="light">
<head>
<meta charset="utf-8">
@ -9,8 +9,8 @@
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<script>
if ('true' === localStorage.getItem('darkMode')) {
document.documentElement.setAttribute('data-theme', 'dark')
if (localStorage.getItem('selectedTheme')) {
document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))
}
</script>
</head>
@ -57,10 +57,11 @@
<span class="main_tablinks_text">Info</span>
</span>
<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="dark" class="theme_toggler"></div>
<div id="light" class="theme_toggler active"></div>
<div class="theme_toggler" data-theme-variant="purple"></div>
<div class="theme_toggler" data-theme-variant="dark"></div>
<div class="theme_toggler theme_toggler--active" data-theme-variant="light"></div>
</div>
</span>
</aside>
@ -162,7 +163,8 @@ <h2>Start searching!</h2>
class="download_overlay"><i class="material-icons">get_app</i></div>
</div>
<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}}
</p>
<p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p>

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')
})
socket.on('init_autologin', function() {
socket.on('init_autologin', function () {
let arl = localStorage.getItem('arl')
if (arl) socket.emit('login', arl)
})
@ -87,15 +87,10 @@ socket.on('logged_out', function () {
function startApp() {
Downloads.init()
QualityModal.init()
Tabs.linkListeners()
Tabs.init()
Search.linkListeners()
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')
if (localStorage.getItem('arl')) {

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

@ -11,20 +11,9 @@ const SettingsTab = new Vue({
defaultSettings: {},
lastUser: '',
spotifyUser: '',
darkMode: false,
slimDownloads: false
}),
computed: {
changeDarkMode: {
get() {
return this.darkMode
},
set(wantDarkMode) {
this.darkMode = wantDarkMode
document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
localStorage.setItem('darkMode', wantDarkMode)
}
},
changeSlimDownloads: {
get() {
return this.slimDownloads
@ -60,7 +49,6 @@ const SettingsTab = new Vue({
}
socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
console.log(this.darkMode)
},
loadSettings(settings, spotifyCredentials, defaults = null) {
if (defaults) {
@ -104,7 +92,6 @@ const SettingsTab = new Vue({
this.spotifyUser = spotyUser
}
this.changeDarkMode = 'true' === localStorage.getItem('darkMode')
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
}
}).$mount('#settings_tab')

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

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