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); color: var(--panels-text);
display: block; display: block;
flex-direction: column; flex-direction: column;
/* transition: all 250ms ease-in-out; */
} }
#toggle_download_tab { #toggle_download_tab {

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

@ -1,6 +1,7 @@
/* Main Search Tab */ /* Main Search Tab */
#main_search>.search_section { #main_search > .search_section {
float: none; float: none;
cursor: pointer;
} }
.top_result { .top_result {
@ -8,18 +9,18 @@
align-items: center; align-items: center;
} }
.top_result>.cover_container { .top_result > .cover_container {
width: 156px; width: 156px;
height: 156px; height: 156px;
} }
.top_result>.info_box { .top_result > .info_box {
display: inline-block; display: inline-block;
padding-left: 24px; padding-left: 24px;
} }
.top_result>.info_box>p, .top_result > .info_box > p,
.release>p { .release > p {
margin: 0px; margin: 0px;
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -47,12 +48,12 @@
width: 156px; width: 156px;
} }
.release>.cover_container { .release > .cover_container {
width: 156px; width: 156px;
height: 156px; height: 156px;
} }
.track_row>td>img { .track_row > td > img {
width: 32px; width: 32px;
height: 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/main-search.css';
@import './modules/download-tab.css'; @import './modules/download-tab.css';
@import './modules/track-preview.css'; @import './modules/track-preview.css';
@import './modules/tracklist-tab.css';

50
public/index.html
View File

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

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

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