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

refactor(front): make secondary default for pills and display raised tagslist on cards

This commit is contained in:
ArneBo 2025-01-30 15:59:35 +01:00
parent 3c1eb11163
commit f48b7c59d5
3 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/components/tags/List.vue
View File

@ -36,21 +36,18 @@ const tags = computed(() => {
</script> </script>
<template> <template>
<Layout flex style="gap: 8px" class="component-tags-list"> <Layout flex gap-8 class="component-tags-list">
<router-link <router-link
v-for="tag in tags" v-for="tag in tags"
:key="tag" :key="tag"
:to="{name: props.detailRoute, params: { id: tag } }" :to="{name: props.detailRoute, params: { id: tag } }"
:class="props.labelClasses" :class="props.labelClasses"
> >
<Pill solid raised secondary> <Pill raised>
#{{ truncate(tag, props.truncateSize) }} #{{ truncate(tag, props.truncateSize) }}
</Pill> </Pill>
</router-link> </router-link>
<Pill <Pill
solid
raised
secondary
v-if="props.showMore && tags.length < props.tags.length" v-if="props.showMore && tags.length < props.tags.length"
@click.prevent="honorLimit = false" @click.prevent="honorLimit = false"
> >

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

@ -5,7 +5,7 @@ import { type RouterLinkProps, RouterLink } from 'vue-router';
import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/color' import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/color'
import { type WidthProps, width } from '~/composables/width' import { type WidthProps, width } from '~/composables/width'
import Pill from './Pill.vue' import TagsList from '~/components/tags/List.vue'
import Alert from './Alert.vue' import Alert from './Alert.vue'
import { type Props as AlertProps } from './Alert.vue' import { type Props as AlertProps } from './Alert.vue'
import Layout from './Layout.vue'; import Layout from './Layout.vue';
@ -89,15 +89,13 @@ const attributes = computed(() =>
</Alert> </Alert>
<Layout flex gap-4 v-if="tags" :class="$style.tags"> <Layout flex gap-4 v-if="tags" :class="$style.tags">
<Pill <TagsList
solid label-classes="tiny"
raised :truncate-size="8"
secondary :limit="2"
v-for="tag in tags" :show-more="false"
:key="tag" :tags="tags"
> />
#{{ tag }}
</Pill>
</Layout> </Layout>
<Layout no-gap v-if="$slots.default" :class="$style.content"> <Layout no-gap v-if="$slots.default" :class="$style.content">

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

@ -16,7 +16,7 @@ const model = defineModel<string>()
class="funkwhale pill" class="funkwhale pill"
:class="props.noUnderline && 'no-underline'" :class="props.noUnderline && 'no-underline'"
:is="model ? 'label' : 'button'" :is="model ? 'label' : 'button'"
v-bind="color(props, ['interactive', 'outline'])()" v-bind="color(props, ['interactive', 'secondary'])()"
@click.stop="handleClick" @click.stop="handleClick"
> >
<div v-if="!!$slots.image" class="pill-image"> <div v-if="!!$slots.image" class="pill-image">