diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue index 316ed99a6..256e9cf9e 100644 --- a/front/src/components/audio/PlayButton.vue +++ b/front/src/components/audio/PlayButton.vue @@ -11,6 +11,7 @@ import { useRouter, useRoute } from 'vue-router' import { color } from "~/composables/color.ts"; import Button from '~/components/ui/Button.vue' +import OptionsButton from '~/components/ui/button/Options.vue' import Popover from '~/components/ui/Popover.vue' import PopoverItem from '~/components/ui/popover/PopoverItem.vue' @@ -111,16 +112,26 @@ const isOpen = ref(false) + - + - + - + - + + diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue index df8056449..4cf76c18b 100644 --- a/front/src/components/ui/Button.vue +++ b/front/src/components/ui/Button.vue @@ -24,6 +24,7 @@ const props = defineProps<{ splitIcon?: string // Add this prop for the split button icon splitTitle?: string // Add this prop onSplitClick?: (...args: any[]) => void | Promise // Add click handler for split part + dropdownOnly?: boolean disabled?: boolean @@ -62,6 +63,7 @@ onMounted(() => { - + @@ -100,7 +102,7 @@ onMounted(() => { width(props, ['square'])( align(props, { alignSelf:'start', alignText:'center' })( )))}" - class="funkwhale button split-toggle" + :class="['funkwhale', 'button', {'split-toggle': !dropdownOnly}]" :title="splitTitle" @click="onSplitClick" > diff --git a/front/src/components/ui/button/options.scss b/front/src/components/ui/button/options.scss index 986cbbef5..5aa52ad41 100644 --- a/front/src/components/ui/button/options.scss +++ b/front/src/components/ui/button/options.scss @@ -4,8 +4,5 @@ transition: all .2s ease; font-size: 0.6rem !important; padding: 0.6em !important; - span { - display: none; - } } }