evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
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?
- Completely remove jQuery dependency
- Make the UI look coherent
- Style buttons
- Style text inputs

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

42
public/index.html
View File

@ -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">
<span class="loading_placeholder__text">Loading...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<loading-placeholder v-if="!results.trackTab.loaded"></loading-placeholder>
<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">
<span class="loading_placeholder__text">Loading...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<loading-placeholder v-if="!results.albumTab.loaded"></loading-placeholder>
<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">
<span class="loading_placeholder__text">Loading...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<loading-placeholder v-if="!results.artistTab.loaded"></loading-placeholder>
<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">
<span class="loading_placeholder__text">Loading...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<loading-placeholder v-if="!results.playlistTab.loaded"></loading-placeholder>
<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

19
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

20
src/js/app.js
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 { 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
setUserTheme()
setCurrentUserTheme()
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) {

13
src/js/modules/components/LoadingPlaceholder.js Normal file
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>`
})

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

@ -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

2
src/styles/scss/_sidebar.scss
View File

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