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

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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">
@ -61,8 +61,8 @@
results.allTab.TOP_RESULT[0].type == 'artist' results.allTab.TOP_RESULT[0].type == 'artist'
? $t('search.fans', [$n(results.allTab.TOP_RESULT[0].nb_fan)]) ? $t('search.fans', [$n(results.allTab.TOP_RESULT[0].nb_fan)])
: $t('globals.by', [results.allTab.TOP_RESULT[0].artist]) + : $t('globals.by', [results.allTab.TOP_RESULT[0].artist]) +
' - ' + ' - ' +
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song) $tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
}} }}
</p> </p>
<span class="tag">{{ <span class="tag">{{
@ -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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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