changed purple sidebar link active color; now app.js is importing all the vue components to make sure they are all mounted

README.md

@@ -4,6 +4,7 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 
 ## What's left to do?
 
+- Completely remove jQuery dependency
 - Make the UI look coherent
   - Style buttons
   - Style text inputs

public/index.html

@@ -224,15 +224,7 @@ <h1>No results</h1>
 									</div>
 									<!-- ### Track Search Tab ### -->
 									<div id="track_search" class="search_tabcontent">
-										<div v-if="!results.trackTab.loaded" class="loading_placeholder">
+										<loading-placeholder v-if="!results.trackTab.loaded"></loading-placeholder>
-											<span class="loading_placeholder__text">Loading...</span>
-											<div class="lds-ring">
-												<div></div>
-												<div></div>
-												<div></div>
-												<div></div>
-											</div>
-										</div>
 										<div v-else-if="results.trackTab.data.length == 0">
 											<h1>No Tracks found</h1>
 										</div>
@@ -294,15 +286,7 @@ <h1>No Tracks found</h1>
 									</div>
 									<!-- ### Album Search Tab ### -->
 									<div id="album_search" class="search_tabcontent">
-										<div v-if="!results.albumTab.loaded" class="loading_placeholder">
+										<loading-placeholder v-if="!results.albumTab.loaded"></loading-placeholder>
-											<span class="loading_placeholder__text">Loading...</span>
-											<div class="lds-ring">
-												<div></div>
-												<div></div>
-												<div></div>
-												<div></div>
-											</div>
-										</div>
 										<div v-else-if="results.albumTab.data.length == 0">
 											<h1>No Albums found</h1>
 										</div>
@@ -325,15 +309,7 @@ <h1>No Albums found</h1>
 									</div>
 									<!-- ### Artist Search Tab ### -->
 									<div id="artist_search" class="search_tabcontent">
-										<div v-if="!results.artistTab.loaded" class="loading_placeholder">
+										<loading-placeholder v-if="!results.artistTab.loaded"></loading-placeholder>
-											<span class="loading_placeholder__text">Loading...</span>
-											<div class="lds-ring">
-												<div></div>
-												<div></div>
-												<div></div>
-												<div></div>
-											</div>
-										</div>
 										<div v-else-if="results.artistTab.data.length == 0">
 											<h1>No Artists found</h1>
 										</div>
@@ -353,15 +329,7 @@ <h1>No Artists found</h1>
 									</div>
 									<!-- ### Playlist Search Tab ### -->
 									<div id="playlist_search" class="search_tabcontent">
-										<div v-if="!results.playlistTab.loaded" class="loading_placeholder">
+										<loading-placeholder v-if="!results.playlistTab.loaded"></loading-placeholder>
-											<span class="loading_placeholder__text">Loading...</span>
-											<div class="lds-ring">
-												<div></div>
-												<div></div>
-												<div></div>
-												<div></div>
-											</div>
-										</div>
 										<div v-else-if="results.playlistTab.data.length == 0">
 											<h1>No Playlists found</h1>
 										</div>
@@ -613,7 +581,7 @@ <h1>No Favorite Tracks found</h1>
 						</div>
 
 						<div id="analyzer_tab" class="main_tabcontent image_header">
-							<h1>Link Analyzer</h1>
+							<h2 class="page_heading">Link Analyzer</h2>
 							<div v-if="link == ''">
 								<p>You can use this section to find out more information about the link you are trying to
 									download<br />This is usefull if you're trying to download some tracks that are not available in your

src/js/app.js

@@ -1,3 +1,17 @@
+// Global Vue components
+import './modules/components/LoadingPlaceholder.js'
+
+// Vue views components
+import './modules/components/artist-tab.js'
+import './modules/components/charts-tab.js'
+import './modules/components/errors-tab.js'
+import './modules/components/favorites-tab.js'
+import './modules/components/home-tab.js'
+import './modules/components/link-analyzer-tab.js'
+import './modules/components/main-search.js'
+import './modules/components/settings-tab.js'
+import './modules/components/tracklist-tab.js'
+
 import $ from 'jquery'
 import { socket } from './modules/socket.js'
 import { toast } from './modules/toasts.js'
@@ -10,8 +24,7 @@ import TrackPreview from './modules/track-preview.js'
 /* ===== App initialization ===== */
 
 function startApp() {
-	// Setting current theme
+	setCurrentUserTheme()
-	setUserTheme()
 
 	Downloads.init()
 	QualityModal.init()
@@ -33,9 +46,8 @@ window.addEventListener('pywebviewready', initClient)
 /**
  * Sets the current theme according to
  * the localStorage saved theme.
- * @since		0.1.6
  */
-function setUserTheme() {
+function setCurrentUserTheme() {
 	let selectedTheme = localStorage.getItem('selectedTheme')
 
 	if (selectedTheme) {

src/js/modules/components/LoadingPlaceholder.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+Vue.component('loading-placeholder', {
+	template: `<div class="loading_placeholder">
+		<span class="loading_placeholder__text">Loading...</span>
+		<div class="lds-ring">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	</div>`
+})

src/js/modules/tabs.js

@@ -1,9 +1,6 @@
 import ArtistTab from './components/artist-tab.js'
 import TracklistTab from './components/tracklist-tab.js'
 import LinkAnalyzerTab from './components/link-analyzer-tab.js'
-import HomeTab from './components/home-tab.js'
-import ChartsTab from './components/charts-tab.js'
-import FavoritesTab from './components/favorites-tab.js'
 import ErrorsTab from './components/errors-tab.js'
 import { socket } from './socket.js'
 import SettingsTab from './components/settings-tab.js'
@@ -73,7 +70,6 @@ function linkListeners() {
  * according to clicked icon.
  * Uses event delegation
  * @param		{Event}		event
- * @since		0.1.0
  */
 function handleSidebarClick(event) {
 	const { target } = event

src/styles/scss/_sidebar.scss

@@ -74,7 +74,7 @@ $sidebar-delay: 75ms;
 
 				// Fix for purple theme in which grayscale shows incoherent color
 				html[data-theme='purple'] & {
-					background: var(--sidebar-link-bg);
+					background: var(--sidebar-link-bg-20);
 					filter: grayscale(0);
 				}