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

refactor(ui): alignment props for alerts and buttons

This commit is contained in:
ArneBo 2025-02-12 10:49:04 +01:00
parent 15bd54ab5f
commit 6a75aef93f
8 changed files with 37 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,7 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<Alert blue style="text-align: center;">
<Alert blue align-items="center">
<h4 class="ui header">
<div class="content">
<slot name="title">

3
front/src/components/favorites/List.vue
View File

@ -190,7 +190,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
:tracks="results"
/>
</Layout>
<Alert blue style="text-align: center;"
<Alert blue align-items="center"
v-else
>
<i class="bi bi-heartbreak-fill" style="font-size: 100px;" />
@ -202,7 +202,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
solid
primary
icon="bi-headphones"
align-self="center"
>
{{ t('components.favorites.List.link.library') }}
</Link>

8
front/src/components/ui/Alert.vue
View File

@ -9,9 +9,13 @@ const props = defineProps<Props>()
<template>
<div
class="funkwhale is-colored solid alert"
class="funkwhale alert"
role="alert"
v-bind="color(align(props)())"
v-bind="{
...$attrs,
...color(props, ['solid'])(
align(props)(
))}"
>
<slot />

2
front/src/components/ui/Button.vue
View File

@ -72,7 +72,7 @@ onMounted(() => {
...$attrs,
...color(props, ['interactive'])(
width(props, isIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])(
align(props, { alignSelf:'start', alignText:'center' })(
align(props, { alignText:'center' })(
)))}"
class="funkwhale button split-main"
:autofocus="autofocus || undefined"

33
front/src/components/ui/alert.scss
View File

@ -1,37 +1,4 @@
.funkwhale.alert {
// color: var(--fw-gray-900);
// @include light-theme {
// background-color: var(--fw-pastel-1, var(--fw-bg-color));
// > .actions .funkwhale.button {
// --fw-bg-color: var(--fw-pastel-2);
// &:hover, &.is-hovered {
// --fw-bg-color: var(--fw-pastel-3);
// }
// &:active, &.is-active {
// --fw-bg-color: var(--fw-pastel-4);
// }
// }
// }
// @include dark-theme {
// background-color: var(--fw-pastel-3, var(--fw-bg-color));
// > .actions .funkwhale.button {
// --fw-bg-color: var(--fw-pastel-4);
// &:hover, &.is-hovered {
// --fw-bg-color: var(--fw-pastel-2);
// }
// &:active, &.is-active {
// --fw-bg-color: var(--fw-pastel-1);
// }
// }
// }
padding: 2rem 2rem;
line-height: 1.2;

13
front/src/composables/alignment.ts
View File

@ -3,7 +3,8 @@ import type { HTMLAttributes } from "vue";
export type AlignmentProps = {
alignText?: 'left' | 'center' | 'right' | 'stretch' | 'space-out',
alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch',
alignItems?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
} & {
[T in 'center' | 'stretch']?: true
}
@ -14,7 +15,7 @@ const styles = {
stretch: 'place-content: stretch stretch; place-self: stretch stretch;',
alignText: (a:AlignmentProps['alignText'])=>({
left: 'justify-content: flex-start;',
center: 'justify-content: center;',
center: 'place-content: center;',
baseline: 'align-items: baseline;',
right: 'justify-content: flex-end;',
stretch: 'place-content: stretch;',
@ -27,6 +28,14 @@ const styles = {
auto: 'align-self: auto;',
baseline: 'align-self: baseline;',
stretch: 'align-self: stretch;'
}[a!]),
alignItems: (a:AlignmentProps['alignSelf'])=> ({
start: 'align-items: flex-start;',
center: 'align-items: center;',
end: 'align-items: flex-end;',
auto: 'align-items: auto;',
baseline: 'align-items: baseline;',
stretch: 'align-items: stretch;'
}[a!])
} as const;

6
front/src/views/content/libraries/FilesTable.vue
View File

@ -229,10 +229,12 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
<Alert
v-else-if="!result || result?.results.length === 0 && !needsRefresh"
blue
align-text="center"
align-items="center"
>
<i class="bi bi-upload" />
{{ t('views.content.libraries.FilesTable.empty.noTracks') }}
<span>
{{ t('views.content.libraries.FilesTable.empty.noTracks') }}
</span>
</Alert>
<action-table
v-else

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

@ -21,6 +21,7 @@ import Spacer from '~/components/ui/Spacer.vue'
import Loader from '~/components/ui/Loader.vue'
import Button from '~/components/ui/Button.vue'
import Modal from '~/components/ui/Modal.vue'
import Alert from '~/components/ui/Alert.vue'
import PlaylistDropdown from '~/components/playlists/PlaylistDropdown.vue'
@ -237,15 +238,20 @@ const deletePlaylist = async () => {
</template>
<Alert blue
v-else
align-items="center"
>
<i class="bi bi-music-note-list" />
<Layout flex :gap="8">
<i class="bi bi-music-note-list" />
{{ t('views.playlists.Detail.empty.noTracks') }}
<Button
icon="bi-pencil"
@click="edit = !edit"
>
{{ t('views.playlists.Detail.button.edit') }}
</Button>
</Layout>
<Spacer size-16 />
<Button
primary
icon="bi-pencil"
@click="edit = !edit"
>
{{ t('views.playlists.Detail.button.edit') }}
</Button>
</Alert>
<library-widget
:url="'playlists/' + playlist?.id + '/libraries/'"