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

feat(ui): make Link with item render similarly to Button with icon

This commit is contained in:
upsiflu 2024-12-17 15:12:20 +01:00
parent b31a8caf86
commit efc0fb4f19
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
front/src/components/ui/Link.vue
View File

@ -13,6 +13,8 @@ const { to, icon, inline, round, ...otherProps } = defineProps<RouterLinkProps
const isExternalLink = computed(() => { const isExternalLink = computed(() => {
return typeof to === 'string' && to.startsWith('http') return typeof to === 'string' && to.startsWith('http')
}) })
const isIconOnly = computed(() => !!icon)
</script> </script>
<template> <template>
@ -22,13 +24,16 @@ const isExternalLink = computed(() => {
'interactive', 'interactive',
$style.link, $style.link,
$style.external, $style.external,
round && $style['is-round'] round && $style['is-round'],
isIconOnly && $style['is-icon-only']
]" ]"
:href="to?.toString()" :href="to?.toString()"
target="_blank" target="_blank"
> >
<i v-if="icon" :class="['bi', icon]" /> <i v-if="icon" :class="['bi', icon]" />
<span>
<slot /> <slot />
</span>
</a> </a>
<RouterLink v-else <RouterLink v-else
:to="to" :to="to"
@ -36,17 +41,18 @@ const isExternalLink = computed(() => {
:class="[ :class="[
'interactive', 'interactive',
$style.link, $style.link,
round && $style['is-round'] round && $style['is-round'],
isIconOnly && $style['is-icon-only']
]" ]"
> >
<i v-if="icon" :class="['bi', icon]" /> <i v-if="icon" :class="['bi', icon]" />
<span>
<slot /> <slot />
</span>
</RouterLink> </RouterLink>
</template> </template>
<style module lang="scss"> <style module lang="scss">
.active { outline: 3px solid red; }
.external { outline: 3px dotted blue; }
.link { .link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -58,7 +64,10 @@ const isExternalLink = computed(() => {
line-height: 1em; line-height: 1em;
padding: 0.642857142857em; padding: 0.642857142857em 0.714em 0.714em 0.714em;
&.is-icon-only {
padding: 0.675em 0.714em 0.678em 0.714em;
}
border-radius: var(--fw-border-radius); border-radius: var(--fw-border-radius);
margin: 0 0.5ch; margin: 0 0.5ch;
@ -67,10 +76,13 @@ const isExternalLink = computed(() => {
transition:background-color .3s, border-color .2s; transition:background-color .3s, border-color .2s;
i { i {
margin-right:1ch;
font-size:1.4em; font-size:1.4em;
} }
i:global(.bi) + span:not(:empty) {
margin-left: 1ch;
}
&:not(:hover):not(:global(.active)) { &:not(:hover):not(:global(.active)) {
text-decoration:none; text-decoration:none;
background-color:transparent; background-color:transparent;