danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added Vue event modifiers, added cursor pointer to search sections titles and tracklist tab checkboxes

This commit is contained in:
Roberto Tonino 2020-04-28 21:18:40 +02:00
parent 917fa328d3
commit 497e86b6b3
8 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/modules/download-tab.css
View File

@ -5,7 +5,6 @@
color: var(--panels-text);
display: block;
flex-direction: column;
/* transition: all 250ms ease-in-out; */
}
#toggle_download_tab {

15
public/css/modules/main-search.css
View File

@ -1,6 +1,7 @@
/* Main Search Tab */
#main_search>.search_section {
#main_search > .search_section {
float: none;
cursor: pointer;
}
.top_result {
@ -8,18 +9,18 @@
align-items: center;
}
.top_result>.cover_container {
.top_result > .cover_container {
width: 156px;
height: 156px;
}
.top_result>.info_box {
.top_result > .info_box {
display: inline-block;
padding-left: 24px;
}
.top_result>.info_box>p,
.release>p {
.top_result > .info_box > p,
.release > p {
margin: 0px;
margin-bottom: 4px;
}
@ -47,12 +48,12 @@
width: 156px;
}
.release>.cover_container {
.release > .cover_container {
width: 156px;
height: 156px;
}
.track_row>td>img {
.track_row > td > img {
width: 32px;
height: 32px;
}

3
public/css/modules/tracklist-tab.css Normal file
View File

@ -0,0 +1,3 @@
.trackCheckbox {
cursor: pointer;
}

1
public/css/style.css
View File

@ -15,3 +15,4 @@
@import './modules/main-search.css';
@import './modules/download-tab.css';
@import './modules/track-preview.css';
@import './modules/tracklist-tab.css';

50
public/index.html
View File

@ -59,9 +59,9 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<div class="cover_container">
<img :src="results.allTab.TOP_RESULT[0].picture"
:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="results.allTab.TOP_RESULT[0].link" class="download_overlay"><i
class="material-icons">get_app</i></div>
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="results.allTab.TOP_RESULT[0].link"
class="download_overlay"><i class="material-icons">get_app</i></div>
</div>
<div class="info_box">
<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
@ -85,8 +85,8 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td>
<td role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
style="width: 56px; text-align: center;" class="clickable"><i
class="material-icons">get_app</i></td>
</tr>
@ -98,8 +98,8 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<div class="cover_container">
<img class="circle coverart"
:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="'https://deezer.com/artist/'+release.ART_ID"
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="'https://deezer.com/artist/'+release.ART_ID"
class="download_overlay"><i class="material-icons">get_app</i></div>
</div>
<p class="primary-text">{{release.ART_NAME}}</p>
@ -112,8 +112,8 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<div class="cover_container">
<img class="rounded coverart"
:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="'https://deezer.com/album/'+release.ALB_ID"
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="'https://deezer.com/album/'+release.ALB_ID"
class="download_overlay"><i class="material-icons">get_app</i></div>
</div>
<p class="primary-text">{{release.ALB_TITLE}}</p>
@ -126,8 +126,8 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<div class="cover_container">
<img class="rounded coverart"
:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="'https://deezer.com/playlist/'+release.PLAYLIST_ID"
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="'https://deezer.com/playlist/'+release.PLAYLIST_ID"
class="download_overlay"><i class="material-icons">get_app</i></div>
</div>
<p class="primary-text">{{ release.TITLE }}</p>
@ -171,9 +171,9 @@ <h1>No Tracks found</h1>
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
{{track.album.title}}</td>
<td>{{convertDuration(track.duration)}}</td>
<td role="button" aria-label="download" @contextmenu="openQualityModal(event)" @click="addToQueue"
:data-link="track.link" style="width: 56px; text-align: center;" class="clickable"><i
class="material-icons">get_app</i>
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
class="clickable"><i class="material-icons">get_app</i>
</td>
</tr>
</table>
@ -191,8 +191,8 @@ <h1>No Albums found</h1>
:data-id="release.id">
<div class="cover_container">
<img class="rounded coverart" :src="release.cover_medium">
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="release.link" class="download_overlay"><i
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
class="material-icons">get_app</i></div>
</div>
<p class="primary-text">{{ release.title }}</p>
@ -213,8 +213,8 @@ <h1>No Artists found</h1>
:data-id="release.id">
<div class="cover_container">
<img class="circle coverart" :src="release.picture_medium">
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="release.link" class="download_overlay"><i
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
class="material-icons">get_app</i></div>
</div>
<p class="primary-text">{{ release.name }}</p>
@ -235,8 +235,8 @@ <h1>No Playlists found</h1>
:data-id="release.id">
<div class="cover_container">
<img class="rounded coverart" :src="release.picture_medium">
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)"
@click="addToQueue" :data-link="release.link" class="download_overlay"><i
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
class="material-icons">get_app</i></div>
</div>
<p class="primary-text">{{ release.title }}</p>
@ -521,7 +521,7 @@ <h1>About</h1>
<header class="inline-flex"
:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1>{{ title }}</h1>
<div role="button" aria-label="download" @contextmenu="openQualityModal(event)" @click="addToQueue"
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
:data-link="link" class="fab right"><i class="material-icons">get_app</i></div>
</header>
@ -554,7 +554,7 @@ <h1>{{ title }}</h1>
style="color:#FF7300;">fiber_new</i>
</td>
<td>{{release.release_date}}</td>
<td @click="addToQueue" @contextmenu="openQualityModal(event)" :data-link="release.link"
<td @click.stop="addToQueue" @contextmenu.prevent="openQualityModal" :data-link="release.link"
class="clickable"><i class="material-icons">file_download</i></td>
</tr>
</tbody>
@ -578,7 +578,7 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<tr>
<th v-for="data in head" v-html="data.title" :style="{ 'width': data.width ? data.width : 'auto'}">
</th>
<th style="width: 32px"><input @click="toggleAll(event)" class="selectAll" type="checkbox"></th>
<th style="width: 32px"><input @click="toggleAll" class="selectAll" type="checkbox"></th>
</tr>
</thead>
<tbody>
@ -608,9 +608,9 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<span v-if="label"
style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
<footer>
<button @contextmenu="openQualityModal(event)" @click="addToQueue" :data-link="link">Download
<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="link">Download
{{ type }}</button>
<button class="with_icon" @contextmenu="openQualityModal(event)" @click="addToQueue"
<button class="with_icon" @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
:data-link="selectedLinks()">Download selection<i class="material-icons">file_download</i></button>
<button class="back-button">Back</button>
</footer>

5
public/js/modules/components/artist-tab.js
View File

@ -35,11 +35,12 @@ const ArtistTab = new Vue({
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
e.preventDefault()
QualityModal.open(e.currentTarget.dataset.link)
},
moreInfo(url, e) {
if (e) e.preventDefault()
if (e) {
e.preventDefault()
}
showTrackListSelective(url, true)
},
sortBy(key) {

2
public/js/modules/components/main-search.js
View File

@ -81,11 +81,9 @@ const MainSearch = new Vue({
}
},
addToQueue: function (e) {
e.stopPropagation()
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
QualityModal.open(e.currentTarget.dataset.link)
},
numberWithDots: Utils.numberWithDots,

1
public/js/modules/components/tracklist-tab.js
View File

@ -37,7 +37,6 @@ const TracklistTab = new Vue({
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal: function (e) {
e.preventDefault()
QualityModal.open(e.currentTarget.dataset.link)
},
toggleAll: function (e) {