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

build: v1.1.2, chore: improved charts displaying by removing duplicated worldwide chart code; style: removed a lot of .scss files in favor off tailwind utilities; chore: removed some unused ids; style: improved feedback on section-tabs; chore: replaced css variable in primary color in tailwind config with the hsl color code

Browse Source
This commit is contained in:
Roberto Tonino
2020-10-14 22:18:13 +02:00
parent f600e8afad
commit c1bde5357d
35 changed files with 318 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/TheSearchBar.vue
View File

@@ -44,6 +44,10 @@ $searchbar-height: 45px;
i {
font-size: $icon-dimension;
color: var(--foreground);
&::selection {
background: none;
}
}
}

52
src/components/downloads/QueueItem.vue
View File

@@ -129,6 +129,58 @@
}
}
}
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: var(--secondary-background);
border-radius: 2px;
margin: 0.5rem 0 1rem 0;
overflow: hidden;
.determinate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--primary-color);
transition: width 0.3s linear;
}
.converting {
background-color: var(--secondary-color);
transition: none !important;
}
.indeterminate {
background-color: var(--primary-color);
&::before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
&::after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 1.15s;
}
}
}
</style>
<script>

56
src/components/downloads/TheDownloadBar.vue
View File

@@ -1,16 +1,23 @@
<template>
<div
id="download_tab_container"
class="tab_hidden"
class="block tab_hidden bg-panels-bg text-panels-text"
@transitionend="$refs.container.style.transition = ''"
ref="container"
:data-label="$t('downloads')"
aria-label="downloads"
>
<div id="download_tab_drag_handler" @mousedown.prevent="startDrag" ref="dragHandler"></div>
<!-- Drag Handler -->
<div
v-show="isExpanded"
class="absolute w-4 h-full bg-grayscale-200"
@mousedown.prevent="startDrag"
style="cursor: ew-resize"
></div>
<i
id="toggle_download_tab"
class="material-icons download_bar_icon"
class="m-1 text-2xl cursor-pointer material-icons"
@click.prevent="toggleDownloadTab"
ref="toggler"
:title="$t('globals.toggle_download_tab_hint')"
@@ -18,20 +25,25 @@
<div id="queue_buttons">
<i
v-if="clientMode"
class="material-icons download_bar_icon"
class="m-1 text-2xl cursor-pointer material-icons"
:title="$t('globals.open_downloads_folder')"
@click="openDownloadsFolder"
>
folder_open
</i>
<i class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
<i class="m-1 text-2xl cursor-pointer material-icons" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
clear_all
</i>
<i class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">
<i
class="m-1 text-2xl cursor-pointer material-icons"
@click="cancelQueue"
:title="$t('globals.cancel_queue_hint')"
>
delete_sweep
</i>
</div>
<div id="download_list" ref="list">
<div v-show="isExpanded" id="download_list" class="w-full pr-2" ref="list">
<QueueItem
v-for="item in queueList"
:queue-item="item"
@@ -47,6 +59,27 @@
#download_tab_container {
height: 100vh;
}
#download_list {
height: calc(100% - 32px);
padding-left: 28px;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--panels-background);
}
&::-webkit-scrollbar-thumb {
background: var(--panels-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
</style>
<script>
@@ -68,8 +101,8 @@ export default {
cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
queue: [],
queueList: {},
queueComplete: []
// clientMode: window.clientMode
queueComplete: [],
isExpanded: localStorage.getItem('downloadTabOpen') === 'true'
}
},
computed: {
@@ -273,12 +306,13 @@ export default {
// Toggle returns a Boolean based on the action it performed
let isHidden = this.$refs.container.classList.toggle('tab_hidden')
this.isExpanded = !isHidden
if (!isHidden) {
if (this.isExpanded) {
this.setTabWidth(this.cachedTabWidth)
}
localStorage.setItem('downloadTabOpen', !isHidden)
localStorage.setItem('downloadTabOpen', this.isExpanded)
},
cleanQueue() {
socket.emit('removeFinishedDownloads')

45
src/components/globals/BaseLoadingPlaceholder.vue
View File

@@ -9,6 +9,51 @@
</div>
</div>
</template>
<style lang="scss" scoped>
// Source: https://loading.io/css/
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
&:nth-child(1) {
animation-delay: -0.45s;
}
&:nth-child(2) {
animation-delay: -0.3s;
}
&:nth-child(3) {
animation-delay: -0.15s;
}
}
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
export default {
props: {

5
src/components/pages/About.vue
View File

@@ -1,6 +1,7 @@
<template>
<div id="about_tab" class="main_tabcontent" ref="root">
<h2 class="page_heading">{{ $t('sidebar.about') }}</h2>
<div id="about_tab" ref="root">
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>
<ul>
<li>
{{ $t('about.updates.currentVersion') }}:

17
src/components/pages/Artist.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="artist_tab" class="main_tabcontent image_header" ref="root">
<div id="artist_tab" class="relative image_header" ref="root">
<header
class="inline-flex"
:style="{
@@ -7,18 +7,19 @@
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}"
>
<h1>{{ title }}</h1>
<h1 class="m-0">{{ title }}</h1>
<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</header>
<div class="tab">
<div class="my-4">
<button
v-for="(item, name) in body"
:key="name"
class="btn btn-primary"
:class="{ active: name === currentTab }"
class="mr-2 btn bg-background-main"
:class="{ 'btn-primary': name === currentTab }"
:href="'#artist_' + name"
@click="changeTab(name)"
>
@@ -70,12 +71,6 @@
</div>
</template>
<style lang="scss" scoped>
.main_tabcontent {
position: relative;
}
</style>
<script>
import { isEmpty, orderBy } from 'lodash-es'
import { socket } from '@/utils/socket'

75
src/components/pages/Charts.vue
View File

@@ -1,40 +1,25 @@
<template>
<div id="charts_tab" class="main_tabcontent" ref="root">
<h2 class="page_heading">{{ $t('charts.title') }}</h2>
<div v-if="country === ''" id="charts_selection">
<div class="release_grid charts_grid">
<template v-for="release in countries">
<div
role="button"
:aria-label="release.title"
v-if="release.title === 'Worldwide'"
class="release clickable"
@click="getTrackList"
:data-title="release.title"
:data-id="release.id"
:key="release.id"
>
<img class="rounded coverart" :src="release.picture_medium" />
</div>
</template>
<div>
<h1 class="mb-8 text-5xl">{{ $t('charts.title') }}</h1>
<template v-for="release in countries">
<div
role="button"
:aria-label="release.title"
v-if="release.title !== 'Worldwide'"
class="release clickable"
@click="getTrackList"
:data-title="release.title"
:data-id="release.id"
:key="release.id"
>
<img class="rounded coverart" :src="release.picture_medium" />
</div>
</template>
<div v-if="country === ''">
<div class="release_grid charts_grid">
<div
v-for="release in countries"
role="button"
:aria-label="release.title"
class="w-40 h-40 release clickable"
@click="getTrackList"
:data-title="release.title"
:data-id="release.id"
:key="release.id"
>
<img class="w-full rounded coverart" :src="release.picture_medium" />
</div>
</div>
</div>
<div v-else id="charts_table">
<div v-else>
<button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
<button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
{{ $t('charts.download') }}
@@ -118,13 +103,32 @@ export default {
chart: []
}
},
computed: {
worldwideRelease() {
let worldwideRelease = this.countries.filter(country => {
return country.title === 'Worldwide'
})
return worldwideRelease[0]
}
},
async created() {
socket.on('setChartTracks', this.setTracklist)
this.$on('hook:destroyed', () => {
socket.off('setChartTracks')
})
const chartsData = await getChartsData()
let chartsData = await getChartsData()
let worldwideChart
chartsData = chartsData.filter(item => {
if (item.title === 'Worldwide') {
worldwideChart = item
}
return item.title !== 'Worldwide'
})
chartsData.unshift(worldwideChart)
this.initCharts(chartsData)
},
@@ -183,6 +187,3 @@ export default {
}
}
</script>
<style>
</style>

4
src/components/pages/Errors.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="errors_tab" class="main_tabcontent">
<h1>{{ $t('errors.title', { name: title }) }}</h1>
<div>
<h1 class="mb-8 text-5xl">{{ $t('errors.title', { name: title }) }}</h1>
<table class="table table--tracklist">
<tr>

24
src/components/pages/Favorites.vue
View File

@@ -1,20 +1,20 @@
<template>
<div class="main_tabcontent">
<h2 class="page_heading">
<div>
<h1 class="mb-8 text-5xl">
{{ $t('favorites.title') }}
<div
@click="reloadTabs"
class="clickable reload-button reload-button--inline"
class="inline-block clickable reload-button"
ref="reloadButton"
role="button"
aria-label="reload"
>
<i class="material-icons">sync</i>
</div>
</h2>
</h1>
<div class="section-tabs">
<div
<ul class="section-tabs">
<li
class="section-tabs__tab favorites_tablinks"
:class="{ active: activeTab === tab }"
@click="activeTab = tab"
@@ -22,8 +22,8 @@
:key="tab"
>
{{ $tc(`globals.listTabs.${tab}`, 2) }}
</div>
</div>
</li>
</ul>
<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
@@ -228,6 +228,14 @@
display: block;
}
}
.reload-button {
&.spin {
i {
animation: spin 500ms infinite ease-out reverse;
}
}
}
</style>
<script>

16
src/components/pages/Home.vue
View File

@@ -1,16 +1,16 @@
<template>
<div id="home_tab" class="main_tabcontent" ref="root">
<h2 class="page_heading">{{ $t('globals.welcome') }}</h2>
<div id="home_tab">
<h1 class="mb-8 text-5xl">{{ $t('globals.welcome') }}</h1>
<section class="home_section" ref="notLogged" v-if="!isLoggedIn">
<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
<section class="py-6 border-0 border-t border-solid border-grayscale-500" ref="notLogged" v-if="!isLoggedIn">
<p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
<router-link tag="button" name="button" :to="{ name: 'Settings' }" class="btn btn-primary">
{{ $t('home.openSettings') }}
</router-link>
</section>
<section v-if="playlists.length" class="home_section">
<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3>
<section v-if="playlists.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularPlaylists') }}</h2>
<div class="release_grid">
<router-link
tag="div"
@@ -47,8 +47,8 @@
</div>
</section>
<section v-if="albums.length" class="home_section">
<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3>
<section v-if="albums.length" class="py-6 border-0 border-t border-solid border-grayscale-500">
<h2 class="mb-6 text-3xl">{{ $t('home.sections.popularAlbums') }}</h2>
<div class="release_grid">
<router-link
tag="div"

10
src/components/pages/LinkAnalyzer.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="analyzer_tab" class="main_tabcontent image_header" ref="root">
<h2 class="page_heading page_heading--capitalize">{{ $t('sidebar.linkAnalyzer') }}</h2>
<div id="analyzer_tab" class="image_header" ref="root">
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.linkAnalyzer') }}</h1>
<div v-if="link === ''">
<p>
@@ -24,8 +24,8 @@
}"
>
<div>
<h1>{{ title }}</h1>
<h2 v-if="type === 'track'">
<h1 class="m-0">{{ title }}</h1>
<h2 v-if="type === 'track'" class="m-0 mb-3 text-lg">
<i18n path="globals.by" tag="span">
<router-link
tag="span"
@@ -48,7 +48,7 @@
</router-link>
</i18n>
</h2>
<h2 v-else-if="type === 'album'">
<h2 v-else-if="type === 'album'" class="m-0 mb-3 text-lg">
<i18n path="globals.by" tag="span">
<router-link
tag="span"

2
src/components/pages/Search.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="search_tab" class="main_tabcontent" ref="root">
<div id="search_tab" ref="root">
<div v-show="!showSearchTab">
<h2>{{ $t('search.startSearching') }}</h2>
<p>{{ $t('search.description') }}</p>

10
src/components/pages/Settings.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="settings_tab" class="main_tabcontent fixed_footer" ref="root">
<h2 class="page_heading">{{ $t('settings.title') }}</h2>
<div id="settings_tab" class="fixed_footer" ref="root">
<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
@@ -31,7 +31,7 @@
ref="loginInput"
placeholder="ARL"
/>
<button id="settings_btn_copyArl" class="btn btn-primary btn-only-icon ml-2" @click="copyARLtoClipboard">
<button id="settings_btn_copyArl" class="ml-2 btn btn-primary btn-only-icon" @click="copyARLtoClipboard">
<i class="material-icons">assignment</i>
</button>
</div>
@@ -83,7 +83,7 @@
<button
id="select_downloads_folder"
v-if="clientMode"
class="btn btn-primary btn-only-icon ml-2"
class="ml-2 btn btn-primary btn-only-icon"
@click="selectDownloadFolder"
>
<i class="material-icons">folder</i>
@@ -618,7 +618,7 @@
</div>
<footer>
<button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button>
<button class="mr-2 btn btn-primary" @click="resetSettings">{{ $t('settings.reset') }}</button>
<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
</footer>
</div>

12
src/components/pages/Tracklist.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="main_tabcontent fixed_footer image_header" ref="root">
<div class="relative fixed_footer image_header" ref="root">
<header
:style="{
'background-image':
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}"
>
<h1 class="inline-flex">
<h1 class="inline-flex m-0 text-5xl">
{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
</h1>
<h2>
<h2 class="m-0 mb-3 text-lg">
<p v-if="metadata">{{ metadata }}</p>
<p v-if="release_date">{{ release_date }}</p>
</h2>
@@ -150,12 +150,6 @@
</div>
</template>
<style lang="scss" scoped>
.main_tabcontent {
position: relative;
}
</style>
<script>
import { isEmpty } from 'lodash-es'
import { socket } from '@/utils/socket'