From f470e0649e9073afac8c7679ec861a5818b20ac7 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Sun, 24 Jul 2022 21:54:01 +0000
Subject: [PATCH] Better fav button in queue item

---
 front/src/components/Queue.vue          |  3 ++-
 front/src/components/QueueItem.vue      | 14 ++++++++++----
 front/src/style/components/_player.scss |  3 +--
 front/src/style/components/_queue.scss  |  2 --
 front/src/types.ts                      |  1 +
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 8aee92169..31f09e85a 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -130,7 +130,8 @@ const queueItems = computed(() => tracks.value.map((track, index) => ({
   coverUrl: getCover(track),
   labels: {
     remove: $pgettext('*/*/*', 'Remove'),
-    selectTrack: $pgettext('*/*/*', 'Select track')
+    selectTrack: $pgettext('*/*/*', 'Select track'),
+    favorite: $pgettext('*/*/*', 'Favorite track')
   },
   duration: time.durationFormatted(track.uploads[0]?.duration ?? 0) ?? ''
 }) as QueueItemSource))
diff --git a/front/src/components/QueueItem.vue b/front/src/components/QueueItem.vue
index 562b5f47f..a35d79875 100644
--- a/front/src/components/QueueItem.vue
+++ b/front/src/components/QueueItem.vue
@@ -53,11 +53,17 @@ defineEmits<Emits>()
       </template>
     </div>
     <div class="controls">
-      <i
-        :class="$store.getters['favorites/isFavorite'](source.track.id) ? 'pink' : ''"
-        class="heart icon"
+      <button
+        :aria-label="source.labels.favorite"
+        :title="source.labels.favorite"
+        class="ui really basic circular icon button"
         @click.stop="$store.dispatch('favorites/toggle', source.track.id)"
-      />
+      >
+        <i
+          :class="$store.getters['favorites/isFavorite'](source.track.id) ? 'pink' : ''"
+          class="heart icon"
+        />
+      </button>
       <button
         :aria-label="source.labels.remove"
         :title="source.labels.remove"
diff --git a/front/src/style/components/_player.scss b/front/src/style/components/_player.scss
index 721623d48..702e1ffaa 100644
--- a/front/src/style/components/_player.scss
+++ b/front/src/style/components/_player.scss
@@ -220,9 +220,8 @@
 
     }
     .position.control {
-      padding-right: 1em;
       flex-grow: 1;
-      padding-left: 0;
+
       i.stream.icon {
         position: relative;
         top: -2px;
diff --git a/front/src/style/components/_queue.scss b/front/src/style/components/_queue.scss
index 63a071263..798bbbce3 100644
--- a/front/src/style/components/_queue.scss
+++ b/front/src/style/components/_queue.scss
@@ -322,8 +322,6 @@
     padding: 0 0.875rem;
 
     .heart {
-      margin-right: 1rem;
-
       &:not(.pink) {
         color: rgba(0, 0, 0, 0.2)
       }
diff --git a/front/src/types.ts b/front/src/types.ts
index a5b23f737..4ba3fd72e 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -28,6 +28,7 @@ export interface QueueItemSource {
   labels: {
     remove: string
     selectTrack: string
+    favorite: string
   }
 }