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

refactor(ui): move all Ui components into the same directory level

This commit is contained in:
upsiflu 2025-01-10 00:46:57 +01:00
parent fce2709b9f
commit 7e19fd23f0
29 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/audio/track/Table.vue
View File

@ -13,7 +13,7 @@ import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
import Pagination from '~/components/vui/Pagination.vue'
import TrackRow from '~/components/audio/track/Row.vue'
import Input from '~/components/ui/Input.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import useErrorHandler from '~/composables/useErrorHandler'

2
front/src/components/auth/LoginForm.vue
View File

@ -10,7 +10,7 @@ import { useStore } from '~/store'
import Alert from '~/components/ui/Alert.vue'
import Input from '~/components/ui/Input.vue'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Layout from '~/components/ui/Layout.vue'
interface Props {

2
front/src/components/auth/Logout.vue
View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Alert from '~/components/ui/Alert.vue'
import Link from '~/components/ui/Link.vue'

2
front/src/components/auth/SignupForm.vue
View File

@ -13,7 +13,7 @@ import Alert from '~/components/ui/Alert.vue'
import Input from '~/components/ui/Input.vue'
import Textarea from '~/components/ui/Textarea.vue'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Layout from '~/components/ui/Layout.vue'
import useLogger from '~/composables/useLogger'

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

@ -15,8 +15,8 @@ import TrackTable from '~/components/audio/track/Table.vue'
import RadioButton from '~/components/radios/Button.vue'
import Pagination from '~/components/ui/Pagination.vue'
import Layout from '~/components/ui/Layout.vue'
import Section from '~/components/ui/layout/Section.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Section from '~/components/ui/Section.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Button from '~/components/ui/Button.vue'
import Link from '~/components/ui/Link.vue'
import Alert from '~/components/ui/Alert.vue'

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

@ -22,7 +22,7 @@ import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
import Toggle from '~/components/ui/Toggle.vue'
import Alert from '~/components/ui/Alert.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Pills from '~/components/ui/Pills.vue'
import Loader from '~/components/ui/Loader.vue'

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

@ -23,7 +23,7 @@ import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
import Toggle from '~/components/ui/Toggle.vue'
import Alert from '~/components/ui/Alert.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Pills from '~/components/ui/Pills.vue'
import Loader from '~/components/ui/Loader.vue'

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

@ -23,7 +23,7 @@ import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
import Alert from '~/components/ui/Alert.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Pills from '~/components/ui/Pills.vue'
import Loader from '~/components/ui/Loader.vue'

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

@ -15,7 +15,7 @@ import axios from 'axios'
import $ from 'jquery'
import Layout from '~/components/ui/Layout.vue'
import Section from '~/components/ui/layout/Section.vue'
import Section from '~/components/ui/Section.vue'
import Pagination from '~/components/ui/Pagination.vue'
import RadioCard from '~/components/radios/Card.vue'
import Button from '~/components/ui/Button.vue'

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

@ -8,7 +8,7 @@ import { type WidthProps, width } from '~/composables/width'
import Pill from './Pill.vue'
import Alert from './Alert.vue'
import Layout from './Layout.vue';
import Spacer from './layout/Spacer.vue';
import Spacer from './Spacer.vue';
const props = defineProps<{
title: string

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

@ -4,7 +4,7 @@ import { watchEffect } from 'vue';
import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
const { title, overPopover = false, ...colorProps } = defineProps<{
title:string,

2
front/src/components/ui/layout/Section.vue → front/src/components/ui/Section.vue
View File

@ -3,7 +3,7 @@ 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'
import Spacer from '~/components/ui/Spacer.vue'
import Button from '~/components/ui/Button.vue'
import Link from '~/components/ui/Link.vue'

29
front/src/components/ui/layout/Spacer.vue → front/src/components/ui/Spacer.vue
View File

@ -1,21 +1,32 @@
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
const { grow, shrink, title, size = 16, ...direction } = defineProps<{
type Size = 'no-size' | `size-${ '4' | '8' | '12' | '16' | '32' | '46' | '64'}`
const props = defineProps<{
grow?:true;
shrink?:true;
title?:string;
size?:number;
} & { [Direction in 'h' | 'v']? : true }>()
} & { [Direction in 'h' | 'v']? : true }
& ({ [S in Size]? : true } | {size?:number})>()
const minSize = 0;
const measure = ref()
watchEffect(() => measure.value = {
size: `${Math.max(size, minSize)}px`,
margin: `${(size-Math.max(size, minSize))/2}px`
})
watchEffect(() => {
const maybeSize = Object.entries(props).find(
([key, value]) => value===true && key.startsWith('size'))
const size =
maybeSize ?
+(maybeSize[0].replace('size', ''))
: 'size' in props && props.size ? props.size
: 'noSize' in props && props.noSize ? 0
: 32
measure.value = {
size: `${Math.max(size, minSize)}px`,
margin: `${(size-Math.max(size, minSize))/2}px`
}})
</script>
<template>
@ -26,8 +37,8 @@ watchEffect(() => measure.value = {
<style module lang="scss">
.spacer {
width: v-bind('direction.v ? 0 : measure.size');
height: v-bind('direction.h ? 0 : measure.size');
width: v-bind('props.v ? 0 : measure.size');
height: v-bind('props.h ? 0 : measure.size');
margin: v-bind('measure.margin');
flex-grow:v-bind('grow ? 1 : 0');
flex-shrink:v-bind('shrink ? 1 : 0');

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

@ -10,7 +10,7 @@ import Link from '~/components/ui/Link.vue'
import UserMenu from './UserMenu.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import { useRoute } from 'vue-router'
const isCollapsed = ref(true)

2
front/src/ui/modals/Shortcuts.vue
View File

@ -7,7 +7,7 @@ import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
import Modal from '~/components/ui/Modal.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
const { t } = useI18n()
const store = useStore()

2
front/src/ui/modals/Upload.vue
View File

@ -8,7 +8,7 @@ import Modal from '~/components/ui/Modal.vue'
import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Alert from '~/components/ui/Alert.vue';
import Card from '~/components/ui/Card.vue';
import Pagination from '~/components/ui/Pagination.vue';

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

@ -7,7 +7,7 @@ import { useRouter } from 'vue-router'
import Input from '~/components/ui/Input.vue'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Layout from '~/components/ui/Layout.vue'
import Link from '~/components/ui/Link.vue'

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

@ -13,8 +13,8 @@ import useReport from '~/composables/moderation/useReport'
import RenderedDescription from '~/components/common/RenderedDescription.vue'
import Layout from '~/components/ui/Layout.vue'
import Section from '~/components/ui/layout/Section.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Section from '~/components/ui/Section.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Link from '~/components/ui/Link.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Tab from '~/components/ui/Tab.vue'

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

@ -19,7 +19,7 @@ import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
import Alert from '~/components/ui/Alert.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering'

2
front/ui-docs/components/ui/input.md
View File

@ -2,7 +2,7 @@
import Input from "~/components/ui/Input.vue"
import Button from "~/components/ui/Button.vue"
import Layout from "~/components/ui/Layout.vue"
import Spacer from "~/components/ui/layout/Spacer.vue"
import Spacer from "~/components/ui/Spacer.vue"
import Alert from "~/components/ui/Alert.vue"
</script>

2
front/ui-docs/components/ui/layout.md
View File

@ -4,7 +4,7 @@ import { ref } from 'vue'
import Card from '~/components/ui/Card.vue'
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Tab from '~/components/ui/Tab.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Toggle from '~/components/ui/Toggle.vue'

2
front/ui-docs/components/ui/layout/columns.md
View File

@ -4,7 +4,7 @@ import { ref } from 'vue'
import Card from '~/components/ui/Card.vue'
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Tab from '~/components/ui/Tab.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Toggle from '~/components/ui/Toggle.vue'

2
front/ui-docs/components/ui/layout/flex.md
View File

@ -4,7 +4,7 @@ import { ref } from 'vue'
import Card from '~/components/ui/Card.vue'
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Tab from '~/components/ui/Tab.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Toggle from '~/components/ui/Toggle.vue'

2
front/ui-docs/components/ui/layout/grid.md
View File

@ -4,7 +4,7 @@ import { ref } from 'vue'
import Card from '~/components/ui/Card.vue'
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Tab from '~/components/ui/Tab.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Toggle from '~/components/ui/Toggle.vue'

11
front/ui-docs/components/ui/layout/section.md
View File

@ -6,16 +6,11 @@ import { type Track, type User } from '~/types'
import Card from '~/components/ui/Card.vue'
import Layout from '~/components/ui/Layout.vue'
import Toggle from '~/components/ui/Toggle.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Activity from '~/components/ui/Activity.vue'
import Section from '~/components/ui/layout/Section.vue'
import Section from '~/components/ui/Section.vue'
const alignLeft = ref(false)
const attributes = computed(() => ({
style: alignLeft.value ? 'justify-content: start' : ''
}))
const alignLeft = ref(true)
const track: Track = {
id: 0,

3
front/ui-docs/components/ui/layout/spacer.md
View File

@ -1,8 +1,9 @@
<script setup lang="ts">
import { ref } from 'vue';
import Alert from '~/components/ui/Alert.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Input from '~/components/ui/Input.vue'
import Card from '~/components/ui/Card.vue'

2
front/ui-docs/components/ui/layout/stack.md
View File

@ -4,7 +4,7 @@ import { ref } from 'vue'
import Card from '~/components/ui/Card.vue'
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Tab from '~/components/ui/Tab.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Toggle from '~/components/ui/Toggle.vue'

8
front/ui-docs/designing-pages.md
View File

@ -6,16 +6,12 @@ import { type Track, type User } from '~/types'
import Card from '~/components/ui/Card.vue'
import Layout from '~/components/ui/Layout.vue'
import Toggle from '~/components/ui/Toggle.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Button from '~/components/ui/Button.vue'
import Activity from '~/components/ui/Activity.vue'
import Section from '~/components/ui/layout/Section.vue'
import Section from '~/components/ui/Section.vue'
const alignLeft = ref(false)
const attributes = computed(() => ({
style: alignLeft.value ? 'justify-content: start' : ''
}))
</script>
# Designing Pages

10
front/ui-docs/index.md
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import Layout from '../src/components/ui/Layout.vue'
import Card from '../src/components/ui/Card.vue'
import Spacer from '../src/components/ui/layout/Spacer.vue'
import Spacer from '../src/components/ui/Spacer.vue'
</script>
# Funkwhale design component library
@ -10,13 +10,13 @@ import Spacer from '../src/components/ui/layout/Spacer.vue'
<Layout flex>
<Card to="designing-pages"
<Card default raised to="/designing-pages"
title="Designing pages"
style="width:min-content"
min-content
/>
<Card to="https://design.funkwhale.audio"
title="Ui designs" style="width:max-content">
<Card default raised to="https://design.funkwhale.audio"
title="Ui designs" >
Check out the design system on our Penpot.
</Card>