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

Merge pull request 'Style, hints and JS modification' () from mortalis/deemix-webui:main into main

Browse Source 
Reviewed-on: https://codeberg.org/RemixDev/deemix-webui/pulls/1
This commit is contained in:
RemixDev 2020-07-25 16:48:52 +02:00
commit 8a3eded47a
16 changed files with 71 additions and 34 deletions

2
public/css/style.css

File diff suppressed because one or more lines are too long

6
public/js/bundle.js

File diff suppressed because one or more lines are too long

4
src/components/ArtistTab.vue

@ -16,7 +16,7 @@
:data-link="link" :data-link="link"
class="fab right" class="fab right"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</header> </header>
@ -75,7 +75,7 @@
:data-link="release.link" :data-link="release.link"
class="clickable" class="clickable"
> >
<i class="material-icons"> <i class="material-icons" :title="$t('globals.download_hint')">
file_download file_download
</i> </i>
</td> </td>

3
src/components/TheChartsTab.vue

@ -62,6 +62,7 @@
@mouseleave="previewMouseLeave" @mouseleave="previewMouseLeave"
v-if="track.preview" v-if="track.preview"
class="material-icons preview_controls" class="material-icons preview_controls"
:title="$t('globals.play_hint')"
> >
play_arrow play_arrow
</i> </i>
@ -101,7 +102,7 @@
role="button" role="button"
aria-label="download" aria-label="download"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</td> </td>
</tr> </tr>
</tbody> </tbody>

5
src/components/TheDownloadTab.vue

@ -12,13 +12,14 @@
class="material-icons download_bar_icon" class="material-icons download_bar_icon"
@click.prevent="toggleDownloadTab" @click.prevent="toggleDownloadTab"
ref="toggler" ref="toggler"
:title="$t('globals.toggle_download_tab_hint')"
></i> ></i>
<div id="queue_buttons"> <div id="queue_buttons">
<i id="open_downloads_folder" class="material-icons download_bar_icon hide" @click="openDownloadsFolder"> <i id="open_downloads_folder" class="material-icons download_bar_icon hide" @click="openDownloadsFolder">
folder_open folder_open
</i> </i>
<i id="clean_queue" class="material-icons download_bar_icon" @click="cleanQueue">clear_all</i> <i id="clean_queue" class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon" @click="cancelQueue">delete_sweep</i> <i id="cancel_queue" class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">delete_sweep</i>
</div> </div>
<div id="download_list" @click="handleListClick" ref="list"></div> <div id="download_list" @click="handleListClick" ref="list"></div>
</div> </div>

11
src/components/TheFavoritesTab.vue

@ -43,7 +43,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
@ -69,7 +69,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
@ -100,7 +100,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
@ -124,7 +124,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.name }}</p> <p class="primary-text">{{ release.name }}</p>
@ -153,6 +153,7 @@
@mouseleave="previewMouseLeave" @mouseleave="previewMouseLeave"
v-if="track.preview" v-if="track.preview"
class="material-icons preview_controls" class="material-icons preview_controls"
:title="$t('globals.play_hint')"
> >
play_arrow play_arrow
</i> </i>
@ -191,7 +192,7 @@
aria-label="download" aria-label="download"
> >
<div class="table__cell-content table__cell-content--vertical-center"> <div class="table__cell-content table__cell-content--vertical-center">
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</td> </td>
</tr> </tr>

4
src/components/TheHomeTab.vue

@ -25,7 +25,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
@ -55,7 +55,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>

2
src/components/TheLinkAnalyzerTab.vue

@ -47,7 +47,7 @@
:data-link="link" :data-link="link"
class="fab right" class="fab right"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</header> </header>
<table class="table"> <table class="table">

19
src/components/TheMainSearch.vue

@ -51,7 +51,7 @@
:data-link="results.allTab.TOP_RESULT[0].link" :data-link="results.allTab.TOP_RESULT[0].link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<div class="info_box"> <div class="info_box">
@ -119,7 +119,7 @@
role="button" role="button"
aria-label="download" aria-label="download"
> >
<i class="material-icons"> <i class="material-icons" :title="$t('globals.download_hint')">
get_app get_app
</i> </i>
</td> </td>
@ -152,7 +152,7 @@
:data-link="'https://deezer.com/artist/' + release.ART_ID" :data-link="'https://deezer.com/artist/' + release.ART_ID"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.ART_NAME }}</p> <p class="primary-text">{{ release.ART_NAME }}</p>
@ -184,7 +184,7 @@
:data-link="'https://deezer.com/album/' + release.ALB_ID" :data-link="'https://deezer.com/album/' + release.ALB_ID"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text inline-flex"> <p class="primary-text inline-flex">
@ -225,7 +225,7 @@
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID" :data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.TITLE }}</p> <p class="primary-text">{{ release.TITLE }}</p>
@ -278,6 +278,7 @@
@mouseleave="previewMouseLeave" @mouseleave="previewMouseLeave"
v-if="track.preview" v-if="track.preview"
class="material-icons preview_controls" class="material-icons preview_controls"
:title="$t('globals.play_hint')"
> >
play_arrow play_arrow
</i> </i>
@ -322,7 +323,7 @@
role="button" role="button"
aria-label="download" aria-label="download"
> >
<i class="material-icons"> <i class="material-icons" :title="$t('globals.download_hint')">
get_app get_app
</i> </i>
</td> </td>
@ -353,7 +354,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text inline-flex"> <p class="primary-text inline-flex">
@ -387,7 +388,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.name }}</p> <p class="primary-text">{{ release.name }}</p>
@ -418,7 +419,7 @@
:data-link="release.link" :data-link="release.link"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </div>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>

10
src/components/TracklistTab.vue

@ -35,8 +35,8 @@
</thead> </thead>
<tbody> <tbody>
<template v-if="type !== 'spotifyPlaylist'"> <template v-if="type !== 'spotifyPlaylist'">
<template v-for="track in body"> <template v-for="(track, index) in body">
<tr v-if="track.type == 'track'"> <tr v-if="track.type == 'track'" @click="selectRow(index, track)">
<td class="table__cell--x-small table__cell--center"> <td class="table__cell--x-small table__cell--center">
<div class="table__cell-content table__cell-content--vertical-center"> <div class="table__cell-content table__cell-content--vertical-center">
<i <i
@ -44,6 +44,7 @@
:class="{ preview_playlist_controls: track.preview, disabled: !track.preview }" :class="{ preview_playlist_controls: track.preview, disabled: !track.preview }"
v-on="{ click: track.preview ? playPausePreview : false }" v-on="{ click: track.preview ? playPausePreview : false }"
:data-preview="track.preview" :data-preview="track.preview"
:title="$t('globals.play_hint')"
> >
play_arrow play_arrow
</i> </i>
@ -111,6 +112,7 @@
@click="playPausePreview" @click="playPausePreview"
:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')" :class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
:data-preview="track.preview_url" :data-preview="track.preview_url"
:title="$t('globals.play_hint')"
> >
play_arrow play_arrow
</i> </i>
@ -285,10 +287,14 @@ export default {
} else { } else {
this.body = playlistTracks this.body = playlistTracks
} }
},
selectRow(index, track) {
track.selected = !track.selected;
} }
}, },
mounted() { mounted() {
EventBus.$on('tracklistTab:reset', this.reset) EventBus.$on('tracklistTab:reset', this.reset)
EventBus.$on('tracklistTab:selectRow', this.selectRow)
socket.on('show_album', this.showAlbum) socket.on('show_album', this.showAlbum)
socket.on('show_playlist', this.showPlaylist) socket.on('show_playlist', this.showPlaylist)

5
src/lang/en.js

@ -6,6 +6,11 @@ const en = {
download: 'Download {0}', download: 'Download {0}',
by: 'by {0}', by: 'by {0}',
in: 'in {0}', in: 'in {0}',
download_hint: 'Download',
play_hint: 'Play',
toggle_download_tab_hint: 'Expand/Collapse',
clean_queue_hint: 'Clear Finished',
cancel_queue_hint: 'Cancel All',
listTabs: { listTabs: {
empty: '', empty: '',
all: 'all', all: 'all',

5
src/lang/it.js

@ -6,6 +6,11 @@ const it = {
download: 'Scarica {0}', download: 'Scarica {0}',
by: 'di {0}', by: 'di {0}',
in: 'in {0}', in: 'in {0}',
download_hint: 'Scarica',
play_hint: 'Play',
toggle_download_tab_hint: 'Expand/Collapse',
clean_queue_hint: 'Clear Finished',
cancel_queue_hint: 'Cancel All',
listTabs: { listTabs: {
all: 'tutto', all: 'tutto',
top_result: 'miglior risultato', top_result: 'miglior risultato',

10
src/styles/scss/base/_base.scss

@ -22,9 +22,11 @@ html[data-theme='light'] {
--sidebar-link-bg: hsl(0, 0%, 24%); --sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2); --sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 100%); --table-bg: hsl(0, 0%, 100%);
--table-zebra: hsl(0, 0%, 79%); --table-zebra: hsl(0, 0%, 90%);
--table-highlight: hsl(0, 0%, 56%); --table-highlight: hsl(0, 0%, 84%);
} }
html[data-theme='dark'] { html[data-theme='dark'] {
@ -40,6 +42,8 @@ html[data-theme='dark'] {
--sidebar-link-bg: hsl(0, 0%, 24%); --sidebar-link-bg: hsl(0, 0%, 24%);
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2); --sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
--icon-hover: var(--accent-color);
--table-bg: hsl(0, 0%, 8%); --table-bg: hsl(0, 0%, 8%);
--table-zebra: hsl(0, 0%, 14%); --table-zebra: hsl(0, 0%, 14%);
--table-highlight: hsl(0, 0%, 20%); --table-highlight: hsl(0, 0%, 20%);
@ -58,6 +62,8 @@ html[data-theme='purple'] {
--sidebar-link-bg: hsl(257, 70%, 17%); --sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2); --sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
--icon-hover: hsl(186, 44%, 54%);
--table-bg: hsl(261, 74%, 6%); --table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%); --table-zebra: hsl(257, 61%, 10%);
--table-highlight: hsl(257, 66%, 27%); --table-highlight: hsl(257, 66%, 27%);

5
src/styles/scss/globals/_globals.scss

@ -142,6 +142,7 @@ i {
&.explicit_icon { &.explicit_icon {
color: hsl(3, 100%, 59%); color: hsl(3, 100%, 59%);
margin-right: $explicit-separator; margin-right: $explicit-separator;
margin-left: -3px;
&.explicit_icon--right { &.explicit_icon--right {
margin-left: $explicit-separator; margin-left: $explicit-separator;
@ -179,6 +180,10 @@ a {
.clickable { .clickable {
cursor: pointer !important; cursor: pointer !important;
} }
.table--tracklist .clickable:hover,
.table--charts .clickable:hover {
text-decoration: underline;
}
.fixed_footer footer { .fixed_footer footer {
position: sticky; position: sticky;

3
src/styles/scss/globals/_tables.scss

@ -9,6 +9,7 @@ $table-border-radius: 3px;
tbody { tbody {
tr:not(.table__row-no-highlight):hover { tr:not(.table__row-no-highlight):hover {
background: var(--table-highlight); background: var(--table-highlight);
cursor: default;
} }
} }
@ -199,7 +200,7 @@ $table-border-radius: 3px;
&:hover { &:hover {
i.material-icons { i.material-icons {
color: var(--table-bg); color: var(--icon-hover);
} }
} }
} }

7
src/utils/toasts.js

@ -31,7 +31,12 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`, text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
duration: dismiss ? 3000 : 0, duration: dismiss ? 3000 : 0,
gravity: 'bottom', gravity: 'bottom',
position: 'left' position: 'left',
onClick: function(){
if (toastObj) {
toastObj.hideToast()
}
}
}).showToast() }).showToast()
if (id) { if (id) {
toastsWithId[id] = toastObj toastsWithId[id] = toastObj