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

1
src/main/base/browserwindow.ts
View file

@ -75,6 +75,7 @@ export class BrowserWindow {
"components/plugin-menu",
"components/audio-controls",
"components/qrcode-modal",
"components/moreinfo-modal",
"components/equalizer",
"components/add-to-playlist",
"components/queue",

32
src/renderer/less/helpers.less
View file

@ -411,3 +411,35 @@
margin: auto;
}
}
.moreinfo-modal {
.modal-window{
height: 70%;
max-height: 100%;
width: 45%;
max-width: 100%;
overflow: hidden;
line-height: 1.25;
}
.modal-content{
padding: 1em;
font-size: 0.8rem;
br {
display: block; /* makes it have a width */
content: ""; /* clears default height */
margin: 2em;
margin-bottom: -0.6rem;
}
}
.modal-header{
flex-direction: column;
.modal-title{
text-align: unset !important;
width: 100%;
&:not(.modal-subtitle){
font-size: 25px;
}
}
}
}

4
src/renderer/main/vueapp.js
View file

@ -204,7 +204,8 @@ const app = new Vue({
pluginMenu: false,
audioControls: false,
showPlaylist: false,
castMenu: false
castMenu: false,
moreInfo: false,
},
socialBadges: {
badgeMap: {},
@ -227,6 +228,7 @@ const app = new Vue({
page: "hello-world",
pages: [],
},
moreinfodata: [],
},
watch: {
cfg: {

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")){