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

fix(front): regressions after rebase on `develop`

This commit is contained in:
upsiflu 2025-01-09 01:15:31 +01:00
parent d122f7cdf4
commit af239917bc
8 changed files with 70 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
front/src/App.vue
View File

@ -1,31 +1,33 @@
<script setup lang="ts">
// import LegacyLayout from '~/LegacyLayout.vue'
// TODO: see below (isUIv2)
import UiApp from '~/ui/App.vue'
import type { QueueTrack } from '~/composables/audio/queue'
import { watchEffect, computed, onMounted, nextTick } from 'vue'
import { useQueue } from '~/composables/audio/queue'
import { type QueueTrack, useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
import useLogger from '~/composables/useLogger'
import { useLocalStorage, useStyleTag, useIntervalFn} from '@vueuse/core'
import { color } from '~/composables/color';
import { generateTrackCreditStringFromQueue } from '~/utils/utils'
const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
const PlaylistModal = defineAsyncComponent(() => import('~/components/playlists/PlaylistModal.vue'))
const FilterModal = defineAsyncComponent(() => import('~/components/moderation/FilterModal.vue'))
const ReportModal = defineAsyncComponent(() => import('~/components/moderation/ReportModal.vue'))
const ServiceMessages = defineAsyncComponent(() => import('~/components/ServiceMessages.vue'))
const ShortcutsModal = defineAsyncComponent(() => import('~/components/ShortcutsModal.vue'))
const AudioPlayer = defineAsyncComponent(() => import('~/components/audio/Player.vue'))
const Sidebar = defineAsyncComponent(() => import('~/components/Sidebar.vue'))
const Queue = defineAsyncComponent(() => import('~/components/Queue.vue'))
import { useLocalStorage, useStyleTag, useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
// TODO: Check if these modals are still needed:
// import ChannelUploadModal from '~/components/channels/UploadModal.vue'
// import PlaylistModal from '~/components/playlists/PlaylistModal.vue'
// import FilterModal from '~/components/moderation/FilterModal.vue'
// import ReportModal from '~/components/moderation/ReportModal.vue'
// import ServiceMessages from '~/components/ServiceMessages.vue'
// TODO: Modernise and add player/queue:
// import AudioPlayer from '~/components/audio/Player.vue'
// import Queue from '~/components/Queue.vue'
import Sidebar from '~/ui/components/Sidebar.vue'
import ShortcutsModal from '~/ui/modals/Shortcuts.vue'
import LanguagesModal from '~/ui/modals/Languages.vue'
import UploadModal from '~/ui/modals/Upload.vue';
// Fake content
onMounted(async () => {
await nextTick()
document.getElementById('fake-app')?.remove()
})
const logger = useLogger()
logger.debug('App setup()')
@ -74,22 +76,34 @@ useIntervalFn(() => {
// because we want to learn if we are authenticated at all
store.dispatch('auth/fetchUser')
// TODO:
// Research...
// - "What is the use case for this toggle?"
// - "Is Local Storage (persistence on a specific browser
// on a specific machine) the right place?"
const isUIv2 = useLocalStorage('ui-v2', true)
</script>
<template>
<UiApp/>
<!-- <LegacyLayout v-else /> -->
<div class="funkwhale responsive">
<Sidebar/>
<RouterView v-bind="color({}, ['default', 'solid'])()" />
<LanguagesModal />
<ShortcutsModal />
<UploadModal />
</div>
</template>
<style>
html, body {
font-size: 16px;
}
<style scoped lang="scss">
.responsive {
display: grid !important;
grid-template-columns: 100%;
grid-template-rows: min-content;
min-height: 100vh;
@media screen and (min-width: 1024px) {
grid-template-columns: 300px 5fr;
grid-template-rows: 100%;
}
}
</style>
<style>
/* Make inert pages (behind modals) unscrollable */
body:has(#app[inert="true"]) {
overflow:hidden;
}
</style>

9
front/src/components/federation/UserFollowButton.vue
View File

@ -2,8 +2,11 @@
import type { Actor } from '~/types'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { t } = useI18n()
interface Events {
(e: 'unfollowed'): void
(e: 'followed'): void
@ -39,13 +42,13 @@ const toggle = () => {
>
<i class="heart icon" />
<span v-if="isApproved">
{{ $t('components.audio.LibraryFollowButton.button.unfollow') }}
{{ t('components.audio.LibraryFollowButton.button.unfollow') }}
</span>
<span v-else-if="isPending">
{{ $t('components.audio.LibraryFollowButton.button.cancel') }}
{{ t('components.audio.LibraryFollowButton.button.cancel') }}
</span>
<span v-else>
{{ $t('components.audio.LibraryFollowButton.button.follow') }}
{{ t('components.audio.LibraryFollowButton.button.follow') }}
</span>
</button>
</template>

2
front/src/components/playlists/PlaylistDropdown.vue
View File

@ -95,7 +95,7 @@ const triggerFileInput = () => {
{{ labels.export }}
</div>
<div
v-if="$store.state.auth.authenticated && playlist.actor.full_username !== $store.state.auth.fullUsername"
v-if="store.state.auth.authenticated && playlist.actor.full_username !== store.state.auth.fullUsername"
role="button"
class="basic item"
:title="t('components.playlists.PlaylistDropdown.button.import.description')"

10
front/src/components/ui/layout/Section.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import type { RouterLinkProps } from 'vue-router'
import { useAttrs } from 'vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
@ -20,13 +21,14 @@ const [headingLevel, title] =
const numberOfColumnsPerItem =
'noItems' in props && props.noItems ? 1 : 'tinyItems' in props && props.tinyItems ? 2 : 'smallItems' in props && props['smallItems'] ? 3 : 4
const { style, ...fallthroughProps } = useAttrs()
const headerGrid =
`auto / repeat(auto-fit, calc(46px * ${numberOfColumnsPerItem} + 32px * ${numberOfColumnsPerItem - 1}))`
</script>
<template>
<section>
<section style="flex-grow: 1;">
<Layout header :grid="headerGrid"
:style="`${'alignLeft' in props && props.alignLeft ? 'justify-content: start' : ''};
margin-top: -64px;`"
@ -49,10 +51,10 @@ const headerGrid =
<Spacer grow />
<!-- Action! You can either specify `to` or `onClick`. -->
<Button v-if="props.action && 'onClick' in props.action"
ghost thin-font minWidth align-self="baseline"
ghost thin-font min-content align-self="baseline"
:style="`margin-right: ${('primary' in props || 'secondary' in props || 'destructive' in props) ? '0px' : '-16px'}`"
:onClick="props.action.onClick"
v-bind="$attrs"
v-bind="fallthroughProps"
>
{{ props.action.text }}
</Button>
@ -60,7 +62,7 @@ const headerGrid =
ghost force-underline thinFont align-self="baseline"
:style="`margin-right: ${('primary' in props || 'secondary' in props || 'destructive' in props) ? '0px' : '-16px'}`"
:to="props.action.to"
v-bind="$attrs"
v-bind="fallthroughProps"
>
{{ props.action.text }}
</Link>

2
front/src/composables/width.ts
View File

@ -18,7 +18,7 @@ export type WidthProps =
export type Key = KeysOfUnion<WidthProps>
const widths = {
minContent: 'width: min-content;',
minContent: 'width: min-content; flex-grow: 0;',
iconWidth: 'width: 40px;',
tiny: "width: 124px; grid-column: span 2;",
buttonWidth: "width: 136px; grid-column: span 2; flex-grow: 0; min-width: min-content;",

45
front/src/ui/App.vue
View File

@ -1,45 +0,0 @@
<script setup lang="ts">
import { onMounted, nextTick } from 'vue'
import { color } from '~/composables/color';
import Sidebar from '~/ui/components/Sidebar.vue'
import ShortcutsModal from './modals/Shortcuts.vue'
import LanguagesModal from './modals/Languages.vue'
import UploadModal from './modals/Upload.vue';
// Fake content
onMounted(async () => {
await nextTick()
document.getElementById('fake-app')?.remove()
})
</script>
<template>
<div class="funkwhale responsive">
<Sidebar/>
<RouterView v-bind="color({}, ['default', 'solid'])()" />
<LanguagesModal />
<ShortcutsModal />
<UploadModal />
</div>
</template>
<style scoped lang="scss">
.responsive {
display: grid !important;
grid-template-columns: 100%;
grid-template-rows: min-content;
min-height: 100vh;
@media screen and (min-width: 1024px) {
grid-template-columns: 300px 5fr;
grid-template-rows: 100%;
}
}
</style>
<style>
body:has(#app[inert="true"]) {
overflow:hidden;
}
</style>

12
front/src/ui/components/Sidebar.vue
View File

@ -3,12 +3,10 @@ import { ref, onMounted, watch, computed } from 'vue'
import { useUploadsStore } from '../stores/upload'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
import { color } from '~/composables/color'
import Logo from '~/components/Logo.vue'
import Input from '~/components/ui/Input.vue'
import Link from '~/components/ui/Link.vue'
import ActorAvatar from '~/components/common/ActorAvatar.vue'
import UserMenu from './UserMenu.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
@ -62,7 +60,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
round
square-small
icon="bi-upload"
:class="[$style.button]"
ghost
@click="store.commit('ui/toggleModal', 'upload')"
:aria-pressed="store.state.ui.modalsOpen.has('upload') || undefined"
@ -106,7 +103,9 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
/>
</form>
<!-- Sign up, Log in -->
<Spacer />
<!-- Sign up, Log in -->
<div style="display:contents;" v-if="!store.state.auth.authenticated">
<Layout flex grow style="--gap:16px;">
<Link :to="{ name: 'login' }"
@ -275,11 +274,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
}
}
.search {
padding: 0 4px;
margin-bottom: 28px;
}
> h3 {
margin: 0;
padding: 0 32px 8px;

22
front/src/views/auth/ProfileBase.vue
View File

@ -36,6 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
const { report, getReportableObjects } = useReport()
const store = useStore()
// We are working either with an Actor or null
const object = ref<Actor | null>(null)
const displayName = computed(() => object.value?.name ?? object.value?.preferred_username)
@ -79,7 +80,6 @@ watch(props, fetchData, { immediate: true })
<template>
<Layout stack main
v-title="labels.usernameProfile"
class="page-profile"
>
<Layout flex>
<!-- Profile Picture -->
@ -136,7 +136,7 @@ watch(props, fetchData, { immediate: true })
</div>
</button>
<user-follow-button
v-if="$store.state.auth.authenticated && object && object.full_username !== $store.state.auth.fullUsername"
v-if="store.state.auth.authenticated && object && object.full_username !== store.state.auth.fullUsername"
:actor="object"
/>
<h1 class="ui center aligned icon header">
@ -204,21 +204,11 @@ watch(props, fetchData, { immediate: true })
</div>
</div>
</div> -->
</Layout>
<Layout stack noGap style="flex-grow: 2;">
<Layout flex style="justify-content: space-between;">
<!-- <Section h1="{{ displayName }}" :action="{ text: 'Edit profile', to:'/settings' }" /> -->
<h1>{{ displayName }}</h1>
<Link ghost alignSelf="center" minContent forceUnderline primary style="color: var(--fw-primary);" to="/settings">Edit profile</Link>
</Layout>
<span>{{ object?.full_username }}<i class="bi bi-copy" style="margin-left: 8px;"/></span>
<rendered-description
>
<!-- Profile description -->
<Section no-items
:h1="store.state.auth.username"
:action="{ text:'Edit profile', to:'/settings' }"
style="flex-grow:1"
style="flex-grow: 1; margin-top: 58px;"
>
<span style="grid-column: 1 / -1">
{{ object?.full_username }}
@ -226,12 +216,16 @@ watch(props, fetchData, { immediate: true })
</span>
<RenderedDescription
style="grid-column: 1 / -1"
:content="object?.summary"
:content="object?.summary? {text: object.summary} : null"
:field-name="'summary'"
:update-url="`users/${store.state.auth.username}/`"
:can-update="store.state.auth.authenticated && object?.full_username === store.state.auth.fullUsername"
@updated="emit('updated', $event)"
/>
<UserFollowButton
v-if="store.state.auth.authenticated && object && object.full_username !== store.state.auth.fullUsername"
:actor="object"
/>
</Section>
</Layout>
<!-- TODO: Make routerlinks work for tabs -->