From c6854d8ceb56e814dd205f34a213ded60e598732 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 16 Jan 2025 13:55:10 +0100
Subject: [PATCH] feat(ui): Split playbutton can be seperate dropdown only
 using optionsbutton

---
 front/src/components/audio/PlayButton.vue   | 23 +++++++++++++++------
 front/src/components/audio/track/Row.vue    | 19 ++++++++---------
 front/src/components/ui/Button.vue          |  6 ++++--
 front/src/components/ui/button/options.scss |  3 ---
 4 files changed, 30 insertions(+), 21 deletions(-)

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)
 
 <template>
   <Popover v-if="!discrete && !iconOnly" v-model:open="isOpen">
+    <OptionsButton
+      v-if="dropdownOnly"
+      @click="isOpen = !isOpen"
+    />
     <Button
-      v-if="!dropdownOnly"
-      v-bind="{disabled: !playable, primary: playable}"
-      split
-      splitIcon="bi-caret-down-fill"
+      v-else
+      v-bind="{
+        disabled: !playable,
+        primary: playable,
+        split: true,
+        splitIcon: 'bi-caret-down-fill',
+        splitTitle: title
+      }"
       :aria-label="labels.replacePlay"
-      :class="[...buttonClasses, 'ui', {loading: isLoading, 'mini': discrete}]"
+      :class="[...buttonClasses]"
+      :isloading="isLoading"
+      :dropdownOnly="dropdownOnly"
+      :tiny="discrete"
       @click.stop.prevent="replacePlay()"
       @split-click="isOpen = !isOpen"
-      :split-title="title"
     >
       <template #main>
         <i
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 49855bacc..246958b07 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -9,6 +9,7 @@ import usePlayOptions from '~/composables/audio/usePlayOptions'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import PlayIndicator from '~/components/audio/track/PlayIndicator.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
+import Button from '~/components/ui/Button.vue'
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
@@ -90,7 +91,7 @@ const hover = ref(false)
         "
         class="ui really tiny basic icon button play-button paused"
       >
-        <i class="play icon" />
+        <i class="bi bi-play-fill" />
       </button>
       <button
         v-else-if="
@@ -100,13 +101,13 @@ const hover = ref(false)
         "
         class="ui really tiny basic icon button play-button"
       >
-        <i class="pause icon" />
+        <i class="bi bi-pause-fill" />
       </button>
       <button
         v-else-if="hover"
         class="ui really tiny basic icon button play-button"
       >
-        <i class="play icon" />
+        <i class="bi bi-play-fill" />
       </button>
       <span
         v-else-if="showPosition"
@@ -209,18 +210,16 @@ const hover = ref(false)
       v-if="displayActions"
       class="meta right floated column"
     >
-      <play-button
+      <PlayButton
         id="playmenu"
-        class="play-button basic icon"
         :dropdown-only="true"
         :is-playable="track.is_playable"
-        :dropdown-icon-classes="[
-          'ellipsis',
-          'vertical',
-          'large really discrete',
-        ]"
         :track="track"
       />
     </div>
   </div>
 </template>
+
+<style scoped>
+
+</style>
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<void>  // Add click handler for split part
+  dropdownOnly?: boolean
 
   disabled?: boolean
 
@@ -62,6 +63,7 @@ onMounted(() => {
 <template>
 <div v-if="split" class="funkwhale split-button">
   <button
+    v-if="!dropdownOnly"
     ref="button"
     v-bind="{
       ...$attrs,
@@ -85,7 +87,7 @@ onMounted(() => {
   <slot name="main">
     <i v-if="icon && !icon.startsWith('right ')" :class="['bi', icon]" />
 
-    <span>
+    <span v-if="!isIconOnly">
       <slot />
     </span>
 
@@ -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;
-    }
   }
 }