From 289ffb3ecc37121bf95eb2c976be18fe4dbc9515 Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Sun, 3 May 2020 22:08:59 +0200 Subject: [PATCH] added dark mode toggle with animation, continued re-organization of settings tab --- public/css/modules/base.css | 27 +-- public/css/modules/globals.css | 26 ++- public/css/modules/middle-section.css | 21 ++- public/css/modules/normalize.css | 9 + public/css/modules/settings.css | 8 + public/css/style.css | 1 + public/index.html | 162 ++++++++++-------- public/js/modules/components/settings-tab.js | 28 ++- public/js/modules/components/tracklist-tab.js | 12 +- 9 files changed, 180 insertions(+), 114 deletions(-) create mode 100644 public/css/modules/normalize.css diff --git a/public/css/modules/base.css b/public/css/modules/base.css index e348183..32776ca 100644 --- a/public/css/modules/base.css +++ b/public/css/modules/base.css @@ -1,15 +1,10 @@ -/* Normalizing */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + transition: background-color 500ms ease-in-out; } -body { - font-size: 16px; -} +html { + height: 100%; -:root { --main-background: #ffffff; --secondary-background: #eeeeee; --main-text: #333333; @@ -26,8 +21,7 @@ body { --toast-text: #ffffffde; } -/* Add to body to switch to dark mode */ -.dark-theme { +html[data-theme='dark'] { --main-background: #141414; --secondary-background: #242424; --main-text: #eeeeee; @@ -35,23 +29,12 @@ body { --panels-text: #ffffff; } -html { - height: 100%; -} - body { margin: 0px; width: 100%; height: 100%; font-family: 'Open Sans'; overflow: hidden; - background-color: var(--main-background); + background: var(--main-background); color: var(--main-text); } - -#main_content { - margin-left: 48px; - width: calc(100% - 48px); - height: 100%; - display: flex; -} diff --git a/public/css/modules/globals.css b/public/css/modules/globals.css index 22c3e35..32f051c 100644 --- a/public/css/modules/globals.css +++ b/public/css/modules/globals.css @@ -1,4 +1,10 @@ -/* Global stuff */ +#main_content { + margin-left: 48px; + width: calc(100% - 48px); + height: 100%; + display: flex; +} + img.rounded { border-radius: 5px; } @@ -260,3 +266,21 @@ th.sort-desc:after { font-size: 24px; padding: 16px; } + +.with_checkbox { + display: flex; + align-items: center; +} + +.with_checkbox [type='checkbox'] { + cursor: pointer; +} + +.with_checkbox .checkbox_text { + margin-left: 10px; + cursor: pointer; +} + +.with_checkbox .checkbox_text::selection { + background: none; +} diff --git a/public/css/modules/middle-section.css b/public/css/modules/middle-section.css index aa1f3ed..0ee8663 100644 --- a/public/css/modules/middle-section.css +++ b/public/css/modules/middle-section.css @@ -7,7 +7,7 @@ } /* Center section */ -#search>#searchbar { +#search > #searchbar { width: calc(100% - 32px); height: 32px; padding: 0px 8px; @@ -15,7 +15,7 @@ border: 0px; border-radius: 6px; background-color: var(--secondary-background); - color: var(--primary-text) + color: var(--primary-text); } #content { @@ -24,7 +24,7 @@ height: calc(100% - 48px); overflow-y: scroll; overflow-x: hidden; - padding-left: 10px + padding-left: 10px; } #content::-webkit-scrollbar { @@ -58,8 +58,8 @@ width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + background-color: rgb(0, 0, 0); /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ animation-duration: 0.3s; } @@ -73,25 +73,28 @@ top: 50%; transform: translateY(-50%); } -.smallmodal-content button{ +.smallmodal-content button { width: 100%; margin-bottom: 8px; } @media only screen and (min-width: 601px) { - #container, .smallmodal-content { + #container, + .smallmodal-content { width: 85%; } } @media only screen and (min-width: 993px) { - #container, .smallmodal-content { + #container, + .smallmodal-content { width: 70%; } } @media only screen and (max-width: 600px) { - #container, .smallmodal-content { + #container, + .smallmodal-content { width: 100%; } } diff --git a/public/css/modules/normalize.css b/public/css/modules/normalize.css new file mode 100644 index 0000000..e118b4f --- /dev/null +++ b/public/css/modules/normalize.css @@ -0,0 +1,9 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-size: 16px; +} diff --git a/public/css/modules/settings.css b/public/css/modules/settings.css index 3859a40..0fdae25 100644 --- a/public/css/modules/settings.css +++ b/public/css/modules/settings.css @@ -57,3 +57,11 @@ .settings_group > * { margin-bottom: 15px; } + +.input_group { + margin-bottom: 25px; +} + +.input_group .input_group_text { + margin-bottom: 7px; +} diff --git a/public/css/style.css b/public/css/style.css index 67559f3..f15c2a8 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -3,6 +3,7 @@ @import './vendor/OpenSans.css'; @import './vendor/toastify.css'; +@import './modules/normalize.css'; @import './modules/base.css'; @import './modules/globals.css'; @import './modules/progressbar.css'; diff --git a/public/index.html b/public/index.html index fe3af1a..25bceba 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + @@ -9,7 +9,7 @@ content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"> @@ -165,7 +165,9 @@

No Tracks found

v-if="track.preview" class="material-icons preview_controls">play_arrow - {{track.title + (track.title_version ? ' '+track.title_version : '')}} + + {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} + {{track.artist.name}} @@ -260,7 +262,9 @@

Top Tracks

v-if="track.preview" class="material-icons preview_controls">play_arrow - {{track.title + (track.title_version ? ' '+track.title_version : '')}} + + {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} + {{track.artist.name}} @@ -323,15 +327,16 @@

Top Playlists

Charts

-
+
- + @@ -341,7 +346,9 @@

Charts

v-if="track.preview" class="material-icons preview_controls">play_arrow - + @@ -814,4 +842,4 @@

{{ metadata }} - + \ No newline at end of file diff --git a/public/js/modules/components/settings-tab.js b/public/js/modules/components/settings-tab.js index e65b08f..2d42860 100644 --- a/public/js/modules/components/settings-tab.js +++ b/public/js/modules/components/settings-tab.js @@ -2,13 +2,23 @@ import { toast } from '../toasts.js' import { socket } from '../socket.js' const SettingsTab = new Vue({ - data() { - return { - settings: { tags: {} }, - lastSettings: {}, - lastCredentials: {}, - spotifyFeatures: {}, - defaultSettings: {} + data: () => ({ + settings: { tags: {} }, + lastSettings: {}, + lastCredentials: {}, + spotifyFeatures: {}, + defaultSettings: {} + }), + computed: { + darkMode: { + get() { + return 'true' === localStorage.getItem('darkMode') + }, + set(wantDarkMode) { + document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default') + + localStorage.setItem('darkMode', wantDarkMode) + } } }, methods: { @@ -28,7 +38,7 @@ const SettingsTab = new Vue({ this.lastCredentials = { ...SettingsTab.spotifyFeatures } socket.emit('saveSettings', this.lastSettings, this.lastCredentials) }, - loadSettings(settings, spotifyCredentials, defaults=null) { + loadSettings(settings, spotifyCredentials, defaults = null) { if (defaults) this.defaultSettings = { ...defaults } this.lastSettings = { ...settings } this.lastCredentials = { ...spotifyCredentials } @@ -52,7 +62,7 @@ const SettingsTab = new Vue({ this.loadSettings(settings, credentials) toast('Settings updated!', 'settings') }, - resetSettings(){ + resetSettings() { this.settings = { ...this.defaultSettings } } }, diff --git a/public/js/modules/components/tracklist-tab.js b/public/js/modules/components/tracklist-tab.js index c87a47d..dcf75db 100644 --- a/public/js/modules/components/tracklist-tab.js +++ b/public/js/modules/components/tracklist-tab.js @@ -5,7 +5,7 @@ import QualityModal from '../quality-modal.js' import TrackPreview from '../track-preview.js' const TracklistTab = new Vue({ - data: { + data: () => ({ title: '', metadata: '', release_date: '', @@ -16,7 +16,7 @@ const TracklistTab = new Vue({ link: '', head: null, body: [] - }, + }), methods: { artistView, albumView, @@ -32,21 +32,21 @@ const TracklistTab = new Vue({ this.head = [] this.body = [] }, - addToQueue: function (e) { + addToQueue(e) { e.stopPropagation() Downloads.sendAddToQueue(e.currentTarget.dataset.link) }, - openQualityModal: function (e) { + openQualityModal(e) { QualityModal.open(e.currentTarget.dataset.link) }, - toggleAll: function (e) { + toggleAll(e) { this.body.forEach(item => { if (item.type == 'track') { item.selected = e.currentTarget.checked } }) }, - selectedLinks: function () { + selectedLinks() { var selected = [] if (this.body) { this.body.forEach(item => {

{{ track.position }} {{track.title + (track.title_version ? ' '+track.title_version : '')}} + {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} + {{track.artist.name}} @@ -420,6 +427,13 @@

Settings

+
+ +
+

Login

@@ -455,70 +469,75 @@

Templates

Folders

+ - - -
-

Playlist folder template

+
+

Playlist folder template

-
-

Create folder for artist

+
+ Create folder for artist + -
-

Artist folder template

+
+

Artist folder template

-
-

Create folder for album

+
+ Create folder for album + -
-

Album folder template

+
+

Album folder template

-
-

Create folder for CDs

+
+ Create folder for CDs + -
-

Create folder structure for playlists

+
+ Create folder structure for playlists + -
-

Create folder structure for singles

+
+ Create folder structure for singles +
-
- - -
+
+

Track titles

+

Pad tracks

-
+

Overwrite padding size

-
+

Illegal Character replacer

-
+
+ +
+

Downloads

+

Concurrent Downloads

-
+

Preferred Bitrate

-
+

Bitrate fallback

-
+

Search fallback

-
+ +

Create log file for errors

-
+

Create log file for searched tracks

-
+

Create playlist file

-
+

Create .lyr files (Sync Lyrics)

-
+
+ +
+

Album covers

+

Save covers

-
+

Cover name template

-
+

Save artist image

-
+

Artist image name template

-
+

Local artwork size

-
+

Embedded artwork size

-
+

Save images as png

-
+

JPEG image quality

-
+ +
+ +
+

Save playlists as compilation

-
+

Use null separator

-
+

Save ID3v1 as well

-
+

How would you like to separate your artists?

-
+

Remove album version from track title

-
+

Date format for FLAC files

-
+

What should I do with featured artists

-
+

Title casing

-
+

Artist casing

-
+

Command to execute after download

Leave blank for no action

-
+

Spotify clientID

-
+

Spotify Client Secret

@@ -748,7 +776,7 @@

{{ metadata }}play_arrow

 {{ track.track_position }} explicit{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+track.title_version : '') }} + class="material-icons">explicit{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} {{ track.artist.name }}