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); 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 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<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 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<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 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<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 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<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 @@ <h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
<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 @@ <h1>No Tracks found</h1>
<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 @@ <h1>No Albums found</h1>
: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 @@ <h1>No Artists found</h1>
: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 @@ <h1>No Playlists found</h1>
: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 @@ <h1>About</h1>
<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 @@ <h1>{{ title }}</h1>
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 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<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 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<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) {