From 1ae48a1a439f800f97715de81c8355c8fe71acaf Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 18 Sep 2022 22:45:35 +0300
Subject: [PATCH] add heart icon for favoriting on songitem

---
 src/components/modals/updatePlaylist.vue | 18 +++++++--
 src/components/shared/SongItem.vue       | 50 +++++++++++++++++++++---
 2 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/src/components/modals/updatePlaylist.vue b/src/components/modals/updatePlaylist.vue
index a61328a3..d9de0362 100644
--- a/src/components/modals/updatePlaylist.vue
+++ b/src/components/modals/updatePlaylist.vue
@@ -21,6 +21,7 @@
       id="update-pl-image-upload"
       style="display: none"
       @change="handleUpload"
+      ref="dropZoneRef"
     />
     <div id="upload" class="rounded-sm" @click="selectFiles">
       <div>Click to upload cover image</div>
@@ -41,11 +42,13 @@
 </template>
 
 <script setup lang="ts">
-import { updatePlaylist } from "@/composables/fetch/playlists";
+import { onMounted, ref } from "vue";
+// import { useDropZone } from "@vueuse/core";
+
+import { paths } from "@/config";
 import { Playlist } from "@/interfaces";
 import usePStore from "@/stores/pages/playlist";
-import { onMounted, ref } from "vue";
-import { paths } from "@/config";
+import { updatePlaylist } from "@/composables/fetch/playlists";
 
 const pStore = usePStore();
 
@@ -53,6 +56,9 @@ const props = defineProps<{
   playlist: Playlist;
 }>();
 
+// const dropZoneRef = ref<HTMLDivElement>();
+// const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);
+
 onMounted(() => {
   (document.getElementById("modal-playlist-name-input") as HTMLElement).focus();
 });
@@ -83,6 +89,12 @@ function handleUpload() {
   }
 }
 
+// function handleDrop(files: File[] | null) {
+//   if (files) {
+//     handleFile(files[0]);
+//   }
+// }
+
 function handleFile(file: File) {
   if (!file || !file.type.startsWith("image/")) {
     return;
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 0f3ff20e..2e8983be 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -1,12 +1,15 @@
 <template>
   <div
-    class="songlist-item"
+    class="songlist-item rounded-sm"
     :class="[{ current: isCurrent }, { contexton: context_on }]"
     @dblclick="emitUpdate(track)"
     @contextmenu.prevent="showMenu"
   >
-    <div class="index t-center ellip">
-      {{ index }}
+    <div class="index t-center ellip" @dblclick.prevent.stop="() => {}">
+      <span class="text">
+        {{ index }}
+      </span>
+      <HeartSvg />
     </div>
     <div class="flex">
       <div @click="emitUpdate(track)" class="thumbnail">
@@ -66,13 +69,14 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import OptionSvg from "@/assets/icons/more.svg";
-
-import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
 import { formatSeconds } from "@/utils";
+import { showTrackContextMenu as showContext } from "@/composables/context";
+
 import ArtistName from "./ArtistName.vue";
+import HeartSvg from "@/assets/icons/heart.svg";
+import OptionSvg from "@/assets/icons/more.svg";
 
 const context_on = ref(false);
 const imguri = paths.images.thumb.small;
@@ -109,6 +113,7 @@ function showMenu(e: Event) {
   height: 3.75rem;
   gap: 1rem;
   user-select: none;
+  padding-left: $small;
 
   .song-title {
     cursor: pointer;
@@ -116,6 +121,18 @@ function showMenu(e: Event) {
 
   &:hover {
     background-color: $gray4;
+
+    .index {
+      .text {
+        transform: translateX($smaller);
+        opacity: 0;
+      }
+
+      svg {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
   }
 
   .song-album {
@@ -136,6 +153,27 @@ function showMenu(e: Event) {
     opacity: 0.5;
     font-size: 0.8rem;
     width: 100%;
+    position: relative;
+    height: 3rem;
+    // border: solid 1px;
+
+    .text {
+      opacity: 1;
+      display: block;
+      margin: auto 0;
+      transition: all 0.25s;
+      transform: translateX(0);
+    }
+
+    svg {
+      position: absolute;
+      left: 0;
+      transition: all 0.2s;
+      top: $medium;
+      opacity: 0;
+      transform: translateX(-1rem);
+      cursor: pointer;
+    }
   }
 
   .song-duration {