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

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

Browse Source
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) {