okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better more info modal

Browse source
This commit is contained in:
vapormusic 2022-04-06 22:27:25 +07:00
parent ac030ddd4a
commit c85d40df28
7 changed files with 109 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/views/app/panels.ejs
View file

@ -34,6 +34,9 @@
<transition name="modal">
<qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal>
</transition>
<transition name="modal">
<moreinfo-modal v-if="modals.moreInfo" :data="moreinfodata"></moreinfo-modal>
</transition>
<div id="apple-music-video-container">
<div id="apple-music-video-player-controls">
<div id="player-exit" title="Close" @click="exitMV()">

42
src/renderer/views/components/moreinfo-modal.ejs Normal file
View file

@ -0,0 +1,42 @@
<script type="text/x-template" id="moreinfo-modal">
<div class="modal-fullscreen spatialproperties-panel moreinfo-modal" @click.self="if(timedelay) close()">
<div class="modal-window" >
<div class="modal-header">
<div class="modal-title">{{data.title}}</div>
<div class="modal-subtitle modal-title">{{data.subtitle ?? ""}}</div>
<button class="close-btn" @click="close()"></button>
</div>
<div class="modal-content">
<div class="content" v-html="data.content">
</div>
</div>
</div>
</div>
</script>
<script>
Vue.component('moreinfo-modal', {
template: '#moreinfo-modal',
data: function () {
return {
app: this.$root,
timedelay: false,
}
},
props: ["data"],
mounted() {
let self = this;
this.$nextTick(()=>{
setTimeout(function(){
self.timedelay = true
}, 1000);
})
},
methods: {
close() {
app.modals.moreInfo = false;
},
}
});
</script>

16
src/renderer/views/pages/cider-playlist.ejs
View file

@ -52,13 +52,13 @@
</template>
<div class="playlist-desc" v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
<div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null" class="content"
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"></div>
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()"></div>
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null" class="content"
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
<button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
<!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
@click="editorialNotesExpanded = !editorialNotesExpanded">
{{app.getLz('term.showMore')}}
</button>
</button> -->
</div>
</div>
</template>
@ -254,6 +254,16 @@
}
},
methods: {
openInfoModal(){
app.moreinfodata = [];
app.moreinfodata = {
title : this.data?.attributes ? (this.data?.attributes?.name ??
(this.data?.attributes?.title ?? '') ?? '') : '',
subtitle: this.data?.attributes?.artistName ?? '',
content: ((this.data?.attributes?.editorialNotes != null ) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '') ) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : ''))
}
app.modals.moreInfo = true;
},
generateNestedPlaylist(){
this.nestedPlaylist = [];
if (this.data?.type?.includes("album")){

20
src/renderer/views/pages/playlist-inline.ejs
View file

@ -60,13 +60,13 @@
</template>
<div class="playlist-desc" v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
<div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null" class="content"
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"></div>
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()"></div>
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null" class="content"
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
<button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
@click="editorialNotesExpanded = !editorialNotesExpanded">
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard" ></div>
<!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
@click="openInfoModal()">
{{app.getLz('term.showMore')}}
</button>
</button> -->
</div>
</div>
</template>
@ -278,6 +278,16 @@
}
},
methods: {
openInfoModal(){
app.moreinfodata = [];
app.moreinfodata = {
title : this.data?.attributes ? (this.data?.attributes?.name ??
(this.data?.attributes?.title ?? '') ?? '') : '',
subtitle: this.data?.attributes?.artistName ?? '',
content: ((this.data?.attributes?.editorialNotes != null ) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '') ) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : ''))
}
app.modals.moreInfo = true;
},
generateNestedPlaylist(){
this.nestedPlaylist = [];
if (this.data?.type?.includes("album")){