MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-16 00:58:18 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Simplify modal dialogs

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-02-08 14:35:25 +01:00
parent a1e68a1aa6
commit bb8b2a72e4
21 changed files with 92 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web-src/src/components/ListAlbums.vue
View File

@ -47,7 +47,7 @@
@remove-podcast="open_remove_podcast_dialog()"
@play-count-changed="play_count_changed()"
/>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')"
@ -64,20 +64,20 @@
</template>
</i18n-t>
</template>
</modal-dialog-action>
</modal-dialog>
</teleport>
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
import { useSettingsStore } from '@/stores/settings'
import webapi from '@/webapi'
export default {
name: 'ListAlbums',
components: { CoverArtwork, ModalDialogAction, ModalDialogAlbum },
components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
props: {
items: { required: true, type: Object },
media_kind: { default: '', type: String }

20
web-src/src/components/ModalDialog.vue
View File

@ -5,10 +5,20 @@
<div class="modal-content">
<div class="card">
<div class="card-content">
<slot name="content" />
<p v-if="title" class="title is-4" v-text="title" />
<slot name="modal-content" />
</div>
<footer class="card-footer">
<slot name="footer" />
<a
v-for="action in actions"
:key="action.event"
class="card-footer-item"
:class="{ 'is-disabled': action.disabled }"
@click="$emit(action.event)"
>
<mdicon class="icon" :name="action.icon" size="16" />
<span class="is-size-7" v-text="action.label" />
</a>
</footer>
</div>
</div>
@ -18,9 +28,11 @@
<script>
export default {
name: 'ModalDialog',
name: 'ModalDialogCombined',
props: {
show: Boolean
show: Boolean,
title: { type: String, default: '' },
actions: { type: Array, required: true }
},
emits: ['close'],
watch: {

44
web-src/src/components/ModalDialogAction.vue
View File

@ -1,44 +0,0 @@
<template>
<modal-dialog :show="show">
<template #content>
<p v-if="title" class="title is-4" v-text="title" />
<slot name="modal-content" />
</template>
<template #footer>
<a
v-for="action in actions"
:key="action.event"
class="card-footer-item"
:class="{ 'is-disabled': action.disabled }"
@click="$emit(action.event)"
>
<mdicon class="icon" :name="action.icon" size="16" />
<span class="is-size-7" v-text="action.label" />
</a>
</template>
</modal-dialog>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
export default {
name: 'ModalDialogAction',
components: { ModalDialog },
props: {
actions: { type: Array, required: true },
show: Boolean,
title: { default: '', type: String }
},
watch: {
show() {
const { classList } = document.querySelector('html')
if (this.show) {
classList.add('is-clipped')
} else {
classList.remove('is-clipped')
}
}
}
}
</script>

8
web-src/src/components/ModalDialogAddRss.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@cancel="$emit('close')"
@ -26,16 +26,16 @@
<p class="help" v-text="$t('dialog.add.rss.help')" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAddRss',
components: { ModalDialogAction },
components: { ModalDialog },
props: { show: Boolean },
emits: ['close', 'podcast-added'],
data() {

8
web-src/src/components/ModalDialogAddUrlStream.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="add"
@ -28,16 +28,16 @@
</div>
</form>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAddUrlStream',
components: { ModalDialogAction },
components: { ModalDialog },
props: { show: Boolean },
emits: ['close'],
data() {

8
web-src/src/components/ModalDialogAlbum.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -84,17 +84,17 @@
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAlbum',
components: { ModalDialogAction, CoverArtwork },
components: { ModalDialog, CoverArtwork },
props: {
item: { required: true, type: Object },
media_kind: { default: '', type: String },

8
web-src/src/components/ModalDialogAlbumSpotify.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -43,17 +43,17 @@
<div class="title is-6" v-text="item.album_type" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAlbumSpotify',
components: { ModalDialogAction, CoverArtwork },
components: { ModalDialog, CoverArtwork },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
data() {

8
web-src/src/components/ModalDialogArtist.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -37,16 +37,16 @@
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogArtist',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {

8
web-src/src/components/ModalDialogArtistSpotify.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -29,16 +29,16 @@
<div class="title is-6" v-text="item.genres.join(', ')" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogArtistSpotify',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {

8
web-src/src/components/ModalDialogComposer.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -40,16 +40,16 @@
/>
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogComposer',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {

6
web-src/src/components/ModalDialogDirectory.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
:title="item"
@ -11,12 +11,12 @@
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogDirectory',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: String }, show: Boolean },
emits: ['close'],
computed: {

8
web-src/src/components/ModalDialogGenre.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -36,16 +36,16 @@
/>
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogGenre',
components: { ModalDialogAction },
components: { ModalDialog },
props: {
item: { required: true, type: Object },
media_kind: { required: true, type: String },

8
web-src/src/components/ModalDialogPlaylist.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -33,16 +33,16 @@
<div class="title is-6" v-text="item.item_count" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylist',
components: { ModalDialogAction },
components: { ModalDialog },
props: {
item: { required: true, type: Object },
show: Boolean,

8
web-src/src/components/ModalDialogPlaylistSave.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@cancel="$emit('close')"
@ -27,16 +27,16 @@
</div>
</form>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylistSave',
components: { ModalDialogAction },
components: { ModalDialog },
props: { show: Boolean },
emits: ['close'],
data() {

8
web-src/src/components/ModalDialogPlaylistSpotify.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -33,16 +33,16 @@
<div class="title is-6" v-text="item.uri" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylistSpotify',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {

8
web-src/src/components/ModalDialogQueueItem.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@remove="remove"
@ -120,18 +120,18 @@
</div>
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import { useServicesStore } from '@/stores/services'
import webapi from '@/webapi'
export default {
name: 'ModalDialogQueueItem',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
setup() {

10
web-src/src/components/ModalDialogRemotePairing.vue
View File

@ -1,8 +1,8 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@cancel="cancel"
@cancel="$emit('close')"
@close="$emit('close')"
@pair="pair"
>
@ -24,17 +24,17 @@
</div>
</form>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import { useRemotesStore } from '@/stores/remotes'
import webapi from '@/webapi'
export default {
name: 'ModalDialogRemotePairing',
components: { ModalDialogAction },
components: { ModalDialog },
props: { show: Boolean },
emits: ['close'],
setup() {

8
web-src/src/components/ModalDialogTrack.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -157,18 +157,18 @@
<div class="title is-6" v-text="item.comment" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import { useServicesStore } from '@/stores/services'
import webapi from '@/webapi'
export default {
name: 'ModalDialogTrack',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close', 'play-count-changed'],
setup() {

8
web-src/src/components/ModalDialogTrackSpotify.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
@add="queue_add"
@ -66,16 +66,16 @@
<div class="title is-6" v-text="item.uri" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogTrackSpotify',
components: { ModalDialogAction },
components: { ModalDialog },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {

8
web-src/src/components/ModalDialogUpdate.vue
View File

@ -1,5 +1,5 @@
<template>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show"
:title="$t('dialog.update.title')"
@ -39,19 +39,19 @@
<p class="mb-3" v-text="$t('dialog.update.progress')" />
</div>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
<script>
import ControlSwitch from '@/components/ControlSwitch.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import { useLibraryStore } from '@/stores/library'
import { useServicesStore } from '@/stores/services'
import webapi from '@/webapi'
export default {
name: 'ModalDialogUpdate',
components: { ControlSwitch, ModalDialogAction },
components: { ControlSwitch, ModalDialog },
props: { show: Boolean },
emits: ['close'],

8
web-src/src/pages/PagePodcast.vue
View File

@ -46,7 +46,7 @@
@play-count-changed="reload_tracks"
@remove-podcast="open_remove_podcast_dialog"
/>
<modal-dialog-action
<modal-dialog
:actions="actions"
:show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')"
@ -63,7 +63,7 @@
</template>
</i18n-t>
</template>
</modal-dialog-action>
</modal-dialog>
</template>
</content-with-hero>
</div>
@ -74,7 +74,7 @@ import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
import webapi from '@/webapi'
@ -98,7 +98,7 @@ export default {
ContentWithHero,
CoverArtwork,
ListTracks,
ModalDialogAction,
ModalDialog,
ModalDialogAlbum
},