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

This commit is contained in:
Roberto Tonino 2020-06-19 21:53:32 +02:00
parent 973dc630c5
commit 85e0525a1b
8 changed files with 46 additions and 57 deletions

View File

@ -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? ## What's left to do?
- Completely remove jQuery dependency
- Make the UI look coherent - Make the UI look coherent
- Style buttons - Style buttons
- Style text inputs - Style text inputs

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

@ -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 $ from 'jquery'
import { socket } from './modules/socket.js' import { socket } from './modules/socket.js'
import { toast } from './modules/toasts.js' import { toast } from './modules/toasts.js'
@ -10,8 +24,7 @@ import TrackPreview from './modules/track-preview.js'
/* ===== App initialization ===== */ /* ===== App initialization ===== */
function startApp() { function startApp() {
// Setting current theme setCurrentUserTheme()
setUserTheme()
Downloads.init() Downloads.init()
QualityModal.init() QualityModal.init()
@ -33,9 +46,8 @@ window.addEventListener('pywebviewready', initClient)
/** /**
* Sets the current theme according to * Sets the current theme according to
* the localStorage saved theme. * the localStorage saved theme.
* @since 0.1.6
*/ */
function setUserTheme() { function setCurrentUserTheme() {
let selectedTheme = localStorage.getItem('selectedTheme') let selectedTheme = localStorage.getItem('selectedTheme')
if (selectedTheme) { if (selectedTheme) {

View File

@ -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>`
})

View File

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

View File

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