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

fix(style): Correct split playbutton display

This commit is contained in:
ArneBo 2025-01-16 11:02:09 +01:00
parent 3f3c06e28f
commit 9ba8f1d5e2
3 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/audio/PlayButton.vue
View File

@ -113,7 +113,7 @@ const isOpen = ref(false)
<Popover v-if="!discrete && !iconOnly" v-model:open="isOpen"> <Popover v-if="!discrete && !iconOnly" v-model:open="isOpen">
<Button <Button
v-if="!dropdownOnly" v-if="!dropdownOnly"
v-bind="{outline: playable, disabled: !playable, solid: !playable}" v-bind="{disabled: !playable, primary: playable}"
split split
splitIcon="bi-caret-down-fill" splitIcon="bi-caret-down-fill"
:aria-label="labels.replacePlay" :aria-label="labels.replacePlay"

4
front/src/components/library/ArtistBase.vue
View File

@ -134,13 +134,13 @@ watch(() => props.id, fetchData, { immediate: true })
/> />
</div> </div>
<div class="ui buttons"> <div class="ui buttons">
<play-button <PlayButton
:is-playable="isPlayable" :is-playable="isPlayable"
class="vibrant" class="vibrant"
:artist="object" :artist="object"
> >
{{ t('components.library.ArtistBase.button.play') }} {{ t('components.library.ArtistBase.button.play') }}
</play-button> </PlayButton>
</div> </div>
<semantic-modal <semantic-modal

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

@ -25,6 +25,8 @@ const props = defineProps<{
splitTitle?: string // Add this prop splitTitle?: string // Add this prop
onSplitClick?: (...args: any[]) => void | Promise<void> // Add click handler for split part onSplitClick?: (...args: any[]) => void | Promise<void> // Add click handler for split part
disabled?: boolean
autofocus? : boolean autofocus? : boolean
ariaPressed? : true ariaPressed? : true
} & (ColorProps | DefaultProps) } & (ColorProps | DefaultProps)
@ -58,7 +60,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div v-if="split" class="funkwhale button-group"> <div v-if="split" class="funkwhale split-button">
<button <button
ref="button" ref="button"
v-bind="{ v-bind="{
@ -68,6 +70,7 @@ onMounted(() => {
align(props, { alignSelf:'start', alignText:'center' })( align(props, { alignSelf:'start', alignText:'center' })(
)))}" )))}"
class="funkwhale button split-main" class="funkwhale button split-main"
:disabled="disabled || undefined"
:aria-pressed="props.ariaPressed" :aria-pressed="props.ariaPressed"
:class="{ :class="{
'is-loading': isLoading, 'is-loading': isLoading,
@ -133,24 +136,21 @@ onMounted(() => {
<style lang="scss"> <style lang="scss">
.funkwhale { .funkwhale {
&.button-group { &.split-button {
display: inline-flex;
.button { .button {
display: inline-flex; // Ensure consistent display display: inline-flex; // Ensure consistent display
align-items: center; align-items: center;
&.split-main { &.split-main {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-right: 1px solid var(--fw-color); border-right: 1px solid var(--border-color);
flex: 0 0 auto;
} }
&.split-toggle { &.split-toggle {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
padding: 8px;
flex: 0 0 auto;
} }
} }
} }
@ -167,7 +167,7 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 10px; cursor: pointer;
padding: calc(var(--padding) / 2 - var(--shift-by)) var(--padding) calc(var(--padding) / 2 + var(--shift-by)) var(--padding); padding: calc(var(--padding) / 2 - var(--shift-by)) var(--padding) calc(var(--padding) / 2 + var(--shift-by)) var(--padding);
&.is-icon-only { &.is-icon-only {