MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix modals

This commit is contained in:
Kasper Seweryn 2022-05-01 13:45:07 +02:00 committed by Georg Krause
parent 8cc73ed73e
commit 3915716dd6
28 changed files with 208 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/.eslintrc.js
View File

@ -4,7 +4,7 @@ module.exports = {
es6: true
},
extends: [
'plugin:vue/recommended',
'plugin:vue/vue3-recommended',
'@vue/typescript/recommended',
'@vue/standard'
@ -13,7 +13,9 @@ module.exports = {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module'
},

28
front/src/App.vue
View File

@ -132,15 +132,13 @@ const showSetInstanceModal = ref(false)
property="stylesheet"
:href="url"
>
<sidebar
:width="width"
@show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
@show:shortcuts-modal="toggleShortcutsModal"
/>
<set-instance-modal
:show="showSetInstanceModal"
@update:show="showSetInstanceModal = $event"
/>
<set-instance-modal v-model:show="showSetInstanceModal" />
<service-messages />
<transition name="queue">
<queue
@ -150,17 +148,18 @@ const showSetInstanceModal = ref(false)
</transition>
<router-view
v-show="!store.state.ui.queueFocused"
v-slot="{ Component }"
role="main"
>
<Suspense v-if="Component">
<component :is="Component" />
<template #fallback>
<!-- TODO (wvffle): Add loader -->
Loading...
</template>
</Suspense>
<template v-if="Component">
<Suspense>
<component :is="Component" />
<template #fallback>
<!-- TODO (wvffle): Add loader -->
Loading...
</template>
</Suspense>
</template>
</router-view>
<audio-player ref="player" />
@ -168,10 +167,7 @@ const showSetInstanceModal = ref(false)
<channel-upload-modal v-if="store.state.auth.authenticated" />
<filter-modal v-if="store.state.auth.authenticated" />
<report-modal />
<shortcuts-modal
:show="showShortcutsModal"
@update:show="showShortcutsModal = $event"
/>
<shortcuts-modal v-model:show="showShortcutsModal" />
</div>
</template>

10
front/src/components/SetInstanceModal.vue
View File

@ -1,7 +1,7 @@
<template>
<modal
:show="show"
@update:show="$emit('update:show', $event); isError = false"
v-model:show="showRef"
@update:show="isError = false"
>
<h3 class="header">
<translate translate-context="Popup/Instance/Title">
@ -108,12 +108,18 @@
import Modal from '~/components/semantic/Modal.vue'
import axios from 'axios'
import { uniq } from 'lodash-es'
import { useVModel } from '@vueuse/core'
export default {
components: {
Modal
},
props: { show: { type: Boolean, required: true } },
setup (props) {
// TODO (wvffle): Add defineEmits when rewriting to <script setup>
const showRef = useVModel(props, 'show'/*, emit*/)
return { showRef }
},
data () {
return {
instanceUrl: null,

214
front/src/components/ShortcutsModal.vue
View File

@ -1,8 +1,109 @@
<script setup lang="ts">
import Modal from '~/components/semantic/Modal.vue'
import { useVModel } from '@vueuse/core'
import { computed } from 'vue'
import { useGettext } from 'vue3-gettext'
interface Props {
show: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(['update:show'])
const showRef = useVModel(props, 'show', emit)
const { $pgettext } = useGettext()
const general = computed(() => [
{
title: $pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'),
shortcuts: [
{
key: 'h',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Show available keyboard shortcuts')
},
{
key: 'shift + f',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Focus searchbar')
},
{
key: 'esc',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Unfocus searchbar')
}
]
}
])
const player = computed(() => [
{
title: $pgettext('Popup/Keyboard shortcuts/Title', 'Audio player shortcuts'),
shortcuts: [
{
key: 'p',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
},
{
key: 'left',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 5s')
},
{
key: 'right',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 5s')
},
{
key: 'shift + left',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 30s')
},
{
key: 'shift + right',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 30s')
},
{
key: 'ctrl + shift + left',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
},
{
key: 'ctrl + shift + right',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
},
{
key: 'shift + up',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume')
},
{
key: 'shift + down',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Decrease volume')
},
{
key: 'm',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle mute')
},
{
key: 'e',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Expand queue/player view')
},
{
key: 'l',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle queue looping')
},
{
key: 's',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Shuffle queue')
},
{
key: 'q',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Clear queue')
},
{
key: 'f',
summary: $pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle favorite')
}
]
}
])
</script>
<template>
<modal
:show="show"
@update:show="$emit('update:show', $event)"
>
<modal v-model:show="showRef">
<header class="header">
<translate translate-context="*/*/*/Noun">
Keyboard shortcuts
@ -57,108 +158,3 @@
</footer>
</modal>
</template>
<script>
import Modal from '~/components/semantic/Modal.vue'
export default {
components: {
Modal
},
props: { show: { type: Boolean, required: true } },
computed: {
general () {
return [
{
title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'),
shortcuts: [
{
key: 'h',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Show available keyboard shortcuts')
},
{
key: 'shift + f',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Focus searchbar')
},
{
key: 'esc',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Unfocus searchbar')
}
]
}
]
},
player () {
return [
{
title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'Audio player shortcuts'),
shortcuts: [
{
key: 'p',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
},
{
key: 'left',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 5s')
},
{
key: 'right',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 5s')
},
{
key: 'shift + left',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 30s')
},
{
key: 'shift + right',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 30s')
},
{
key: 'ctrl + shift + left',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
},
{
key: 'ctrl + shift + right',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
},
{
key: 'shift + up',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume')
},
{
key: 'shift + down',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Decrease volume')
},
{
key: 'm',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle mute')
},
{
key: 'e',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Expand queue/player view')
},
{
key: 'l',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle queue looping')
},
{
key: 's',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Shuffle queue')
},
{
key: 'q',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Clear queue')
},
{
key: 'f',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle favorite')
}
]
}
]
}
}
}
</script>

6
front/src/components/Sidebar.vue
View File

@ -161,8 +161,7 @@
<modal
ref="languageModal"
:fullscreen="false"
:show="showLanguageModal"
@update:show="showLanguageModal = $event"
v-model:show="showLanguageModal"
>
<i
role="button"
@ -193,8 +192,7 @@
<modal
ref="themeModal"
:fullscreen="false"
:show="showThemeModal"
@update:show="showThemeModal = $event"
v-model:show="showThemeModal"
>
<i
role="button"

13
front/src/components/audio/podcast/Modal.vue
View File

@ -1,17 +1,14 @@
<template>
<modal
ref="modal"
:show="show"
v-model:show="showRef"
:scrolling="true"
:additional-classes="['scrolling-track-options']"
@update:show="$emit('update:show', $event)"
>
<div class="header">
<div class="ui large centered rounded image">
<img
v-if="
track.album && track.album.cover && track.album.cover.urls.original
"
v-if="track.album && track.album.cover && track.album.cover.urls.original"
v-lazy="
$store.getters['instance/absoluteUrl'](
track.album.cover.urls.medium_square_crop
@ -229,6 +226,7 @@
import Modal from '~/components/semantic/Modal.vue'
import ReportMixin from '~/components/mixins/Report.vue'
import PlayOptionsMixin from '~/components/mixins/PlayOptions.vue'
import { useVModel } from '@vueuse/core'
export default {
components: {
@ -242,6 +240,11 @@ export default {
isArtist: { type: Boolean, required: false, default: false },
isAlbum: { type: Boolean, required: false, default: false }
},
setup (props) {
// TODO (wvffle): Add defineEmits when rewriting to <script setup>
const showRef = useVModel(props, 'show'/*, emit*/)
return { showRef }
},
data () {
return {
isShowing: this.show,

9
front/src/components/audio/track/Modal.vue
View File

@ -1,10 +1,9 @@
<template>
<modal
ref="modal"
:show="show"
v-model:show="showRef"
:scrolling="true"
:additional-classes="['scrolling-track-options']"
@update:show="$emit('update:show', $event)"
>
<div class="header">
<div class="ui large centered rounded image">
@ -229,6 +228,7 @@
import Modal from '~/components/semantic/Modal.vue'
import ReportMixin from '~/components/mixins/Report.vue'
import PlayOptionsMixin from '~/components/mixins/PlayOptions.vue'
import { useVModel } from '@vueuse/core/index'
export default {
components: {
@ -242,6 +242,11 @@ export default {
isArtist: { type: Boolean, required: false, default: false },
isAlbum: { type: Boolean, required: false, default: false }
},
setup (props) {
// TODO (wvffle): Add defineEmits when rewriting to <script setup>
const showRef = useVModel(props, 'show'/*, emit*/)
return { showRef }
},
data () {
return {
isShowing: this.show,

2
front/src/components/channels/AlbumModal.vue
View File

@ -1,7 +1,7 @@
<template>
<modal
v-model:show="show"
class="small"
:show.sync="show"
>
<h4 class="header">
<translate

5
front/src/components/channels/UploadModal.vue
View File

@ -1,8 +1,7 @@
<template>
<modal
v-model:show="$store.state.channels.showUploadModal"
class="small"
:show="$store.state.channels.showUploadModal"
@update:show="update"
>
<h4 class="header">
<translate
@ -145,7 +144,7 @@
import Modal from '~/components/semantic/Modal.vue'
import ChannelUploadForm from '~/components/channels/UploadForm.vue'
import { humanSize } from '~/utils/filters'
import {onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
export default {
components: {

2
front/src/components/common/DangerousButton.vue
View File

@ -7,8 +7,8 @@
<slot />
<modal
v-model:show="showModal"
class="small"
:show.sync="showModal"
>
<h4 class="header">
<slot name="modal-header">

2
front/src/components/common/LoginModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal :show.sync="show">
<modal v-model:show="show">
<h4 class="header">
{{ labels.header }}
</h4>

9
front/src/components/common/UserModal.vue
View File

@ -1,10 +1,9 @@
<template>
<!-- TODO make generic and move to semantic/modal? -->
<modal
:show="show"
v-model:show="showRef"
:scrolling="true"
:fullscreen="false"
@update:show="$emit('update:show', $event)"
>
<div
v-if="$store.state.auth.authenticated"
@ -208,6 +207,7 @@ import Modal from '~/components/semantic/Modal.vue'
import { mapGetters } from 'vuex'
import useThemeList from '~/composables/useThemeList'
import useTheme from '~/composables/useTheme'
import { useVModel } from '@vueuse/core/index'
export default {
components: {
@ -216,8 +216,11 @@ export default {
props: {
show: { type: Boolean, required: true }
},
setup () {
setup (props) {
// TODO (wvffle): Add defineEmits when rewriting to <script setup>
const showRef = useVModel(props, 'show'/*, emit*/)
return {
showRef,
theme: useTheme(),
themes: useThemeList()
}

2
front/src/components/federation/FetchButton.vue
View File

@ -7,8 +7,8 @@
<slot />
</div>
<modal
v-model:show="showModal"
class="small"
:show.sync="showModal"
>
<h3 class="header">
<translate translate-context="Popup/*/Title">

2
front/src/components/library/AlbumDropdown.vue
View File

@ -3,7 +3,7 @@
<modal
v-if="isEmbedable"
:show.sync="showEmbedModal"
v-model:show="showEmbedModal"
>
<h4 class="header">
<translate translate-context="Popup/Album/Title/Verb">Embed this album on your website</translate>

2
front/src/components/library/ArtistBase.vue
View File

@ -59,7 +59,7 @@
<modal
v-if="publicLibraries.length > 0"
:show.sync="showEmbedModal"
v-model:show="showEmbedModal"
>
<h4 class="header">
<translate translate-context="Popup/Artist/Title/Verb">

2
front/src/components/library/ImportStatusModal.vue
View File

@ -1,5 +1,5 @@
<template>
<modal :show.sync="showModal">
<modal v-model:show="showModal">
<h4 class="header">
<translate translate-context="Popup/Import/Title">
Import detail

2
front/src/components/library/Podcasts.vue
View File

@ -152,8 +152,8 @@
</div>
</section>
<modal
v-model:show="showSubscribeModal"
class="tiny"
:show.sync="showSubscribeModal"
:fullscreen="false"
>
<h2 class="header">

2
front/src/components/library/TrackBase.vue
View File

@ -57,7 +57,7 @@
</a>
<modal
v-if="isEmbedable"
:show.sync="showEmbedModal"
v-model:show="showEmbedModal"
>
<h4 class="header">
<translate translate-context="Popup/Track/Title">

2
front/src/components/library/radios/Filter.vue
View File

@ -68,7 +68,7 @@
</a>
<modal
v-if="checkResult"
:show.sync="showCandidadesModal"
v-model::show="showCandidadesModal"
>
<h4 class="header">
<translate translate-context="Popup/Radio/Title/Noun">

2
front/src/components/manage/moderation/InstancePolicyModal.vue
View File

@ -10,7 +10,7 @@
</translate>
</slot>
<modal
:show.sync="show"
v-model:show="show"
@show="fetchData"
>
<h4 class="header">

12
front/src/components/moderation/FilterModal.vue
View File

@ -1,6 +1,6 @@
<template>
<modal
:show="$store.state.moderation.showFilterModal"
v-model:show="showRef"
@update:show="update"
>
<h4 class="header">
@ -90,7 +90,8 @@
<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { mapState, useStore } from 'vuex'
import { computed } from 'vue'
import Modal from '~/components/semantic/Modal.vue'
import useLogger from '~/composables/useLogger'
@ -101,6 +102,11 @@ export default {
components: {
Modal
},
setup () {
const store = useStore()
const showRef = computed(() => store.state.moderation.showFilterModal)
return { showRef }
},
data () {
return {
formKey: String(new Date()),
@ -117,7 +123,7 @@ export default {
methods: {
update (v) {
this.$store.commit('moderation/showFilterModal', v)
this.errors = []
this.errors.length = 0
},
hide () {
const self = this

10
front/src/components/moderation/ReportModal.vue
View File

@ -1,6 +1,6 @@
<template>
<modal
:show="$store.state.moderation.showReportModal"
v-model:show="showRef"
@update:show="update"
>
<h2
@ -155,7 +155,8 @@
<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { mapState, useStore } from 'vuex'
import { computed } from 'vue'
import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
import Modal from '~/components/semantic/Modal.vue'
@ -170,6 +171,11 @@ export default {
ReportCategoryDropdown,
Modal
},
setup () {
const store = useStore()
const showRef = computed(() => store.state.moderation.showReportModal)
return { showRef }
},
data () {
return {
formKey: String(new Date()),

10
front/src/components/playlists/PlaylistModal.vue
View File

@ -1,7 +1,6 @@
<template>
<modal
:show="$store.state.playlists.showModal"
@update:show="update"
v-model:show="$store.state.playlists.showModal"
>
<h4 class="header">
<template v-if="track">
@ -138,7 +137,7 @@
<td>
<router-link
:to="{name: 'library.playlists.detail', params: {id: playlist.id }}"
@click.native="update(false)"
@click.native="$store.state.playlists.showModal = false"
>
{{ playlist.name }}
</router-link>
@ -256,9 +255,6 @@ export default {
}
},
methods: {
update (v) {
this.$store.commit('playlists/showModal', v)
},
addToPlaylist (playlistId, allowDuplicate) {
const self = this
const payload = {
@ -270,7 +266,7 @@ export default {
return axios.post(`playlists/${playlistId}/add`, payload).then(response => {
logger.info('Successfully added track to playlist')
self.update(false)
self.$store.state.playlists.showModal = false
self.$store.dispatch('playlists/fetchOwn')
}, error => {
if (error.backendErrors.length === 1 && error.backendErrors[0].code === 'tracks_already_exist_in_playlist') {

2
front/src/views/auth/ProfileOverview.vue
View File

@ -55,7 +55,7 @@
</library-widget>
</div>
<modal :show.sync="showCreateModal">
<modal v-model:show="showCreateModal">
<h4 class="header">
<translate
v-if="step === 1"

6
front/src/views/channels/DetailBase.vue
View File

@ -89,8 +89,8 @@
<i class="feed icon" />
</a>
<modal
v-model:show="showSubscribeModal"
class="tiny"
:show.sync="showSubscribeModal"
>
<h4 class="header">
<translate translate-context="Popup/Channel/Title/Verb">
@ -311,7 +311,7 @@
<modal
v-if="totalTracks > 0"
:show.sync="showEmbedModal"
v-model:show="showEmbedModal"
>
<h4 class="header">
<translate translate-context="Popup/Artist/Title/Verb">
@ -336,7 +336,7 @@
</modal>
<modal
v-if="isOwner"
:show.sync="showEditModal"
v-model:show="showEditModal"
>
<h4 class="header">
<translate

2
front/src/views/channels/SubscriptionsList.vue
View File

@ -15,7 +15,7 @@
</h1>
<modal
class="tiny"
:show.sync="showSubscribeModal"
v-model:show="showSubscribeModal"
:fullscreen="false"
>
<h2 class="header">

40
front/src/views/content/Home.vue
View File

@ -1,3 +1,20 @@
<script setup lang="ts">
import { humanSize } from '~/utils/filters'
import { useGettext } from 'vue3-gettext'
import { computed } from 'vue'
import { useStore } from 'vuex'
const { $pgettext } = useGettext()
const labels = computed(() => ({
title: $pgettext('Content/Library/Title/Verb', 'Add and manage content')
}))
const store = useStore()
const quota = computed(() => store.state.instance.settings.users.upload_quota.value)
const defaultQuota = computed(() => humanSize(quota.value * 1e6))
</script>
<template>
<section
v-title="labels.title"
@ -27,7 +44,7 @@
</translate>
</p>
<router-link
:to="{name: 'profile.overview', params: {username: $store.state.auth.username}, hash: '#channels'}"
:to="{name: 'profile.overview', params: {username: store.state.auth.username}, hash: '#channels'}"
class="ui primary button"
>
<translate translate-context="Content/Library/Button.Label/Verb">
@ -80,24 +97,3 @@
</div>
</section>
</template>
<script>
import { humanSize } from '~/utils/filters'
export default {
computed: {
labels () {
return {
title: this.$pgettext('Content/Library/Title/Verb', 'Add and manage content')
}
},
defaultQuota () {
const quota =
this.$store.state.instance.settings.users.upload_quota.value *
1000 *
1000
return humanSize(quota)
}
}
}
</script>

2
front/src/views/playlists/Detail.vue
View File

@ -104,7 +104,7 @@
</div>
<modal
v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
:show.sync="showEmbedModal"
v-model:show="showEmbedModal"
>
<h4 class="header">
<translate translate-context="Popup/Album/Title/Verb">