From 24db32ae094e513d88f852be1a77ef7f8980803f Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 8 Apr 2022 21:04:52 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B7=20add=20play=20and=20actions=20btn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/playlists/PlaylistCard.vue | 56 +++++++++++++----
 src/components/shared/Option.vue          | 74 +++++++++++++++++++++++
 src/components/shared/PlayBtn.vue         | 28 +++++----
 src/components/shared/PlayBtnRect.vue     |  2 +-
 4 files changed, 134 insertions(+), 26 deletions(-)
 create mode 100644 src/components/shared/Option.vue

diff --git a/src/components/playlists/PlaylistCard.vue b/src/components/playlists/PlaylistCard.vue
index 7a081435..931868e2 100644
--- a/src/components/playlists/PlaylistCard.vue
+++ b/src/components/playlists/PlaylistCard.vue
@@ -4,12 +4,18 @@
     :playlist="props.playlist"
     class="p-card rounded"
   >
+    <div class="drop">
+      <Option :color="'#48484a'" />
+    </div>
     <div
-      class="image rounded"
+      class="image p-image rounded shadow-sm"
       :style="{
         backgroundImage: `url(${props.playlist.image})`,
       }"
     ></div>
+    <div class="pbtn">
+      <PlayBtn />
+    </div>
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
       <div class="count">
@@ -25,33 +31,59 @@
 
 <script setup lang="ts">
 import { Playlist } from "../../interfaces";
+import PlayBtn from "../shared/PlayBtn.vue";
+import Option from "../shared/Option.vue";
 
 const props = defineProps<{
   playlist: Playlist;
 }>();
+
 </script>
 
 <style lang="scss">
 .p-card {
   width: 100%;
-  padding: $small;
+  padding: 0.75rem;
   transition: all 0.2s ease;
+  background-image: linear-gradient(37deg, #000000e8, $gray);
+  position: relative;
 
-  &:hover {
-    background-color: $accent;
-    .bottom > .count {
-      color: $white;
-    }
-  }
-
-  .image {
+  .p-image {
     min-width: 100%;
-    height: 11rem;
+    height: 10rem;
     transition: all 0.2s ease;
   }
 
+  .drop {
+    position: absolute;
+    bottom: 4rem;
+    right: 1.25rem;
+    opacity: 0;
+    transition: all 0.25s ease-in-out;
+
+    .drop-btn {
+      background-color: $gray3;
+    }
+  }
+
+  .pbtn {
+    position: absolute;
+    bottom: 4.5rem;
+    left: 1.25rem;
+    transition: all 0.25s ease-in-out;
+    z-index: 10;
+  }
+
+  &:hover {
+    .drop {
+      transition-delay: .75s;
+      opacity: 1;
+      transform: translate(0, -.5rem);
+    }
+  }
+
   .bottom {
-    margin-top: $small;
+    margin-top: 1rem;
 
     .name {
       text-transform: capitalize;
diff --git a/src/components/shared/Option.vue b/src/components/shared/Option.vue
new file mode 100644
index 00000000..2bb1a8ea
--- /dev/null
+++ b/src/components/shared/Option.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="drop-btn rounded shadow-sm"
+    id="option-drop"
+    @click="showDropdown"
+  >
+    <div
+      class="image drop-icon"
+      :class="{ clicked: clicked && src == ContextSrc.PHeader }"
+    ></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ContextSrc } from "../../composables/enums";
+
+let elem: DOMRect;
+const clicked = ref(false);
+
+const props = defineProps<{
+  src?: string;
+  color?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "showDropdown", event: any): void;
+}>();
+
+onMounted(() => {
+  elem = document.getElementById("option-drop").getBoundingClientRect();
+});
+
+function showDropdown(e: Event) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+
+  emit("showDropdown", {
+    clientX: elem.left + 45,
+    clientY: elem.top,
+  });
+
+  clicked.value = true;
+}
+</script>
+<style lang="scss">
+.drop-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: $accent;
+  transition: all 0.5s ease-in-out;
+  cursor: pointer;
+
+  .drop-icon {
+    transition: all 0.25s;
+    padding: $small;
+    height: 2.5rem;
+    width: 2.5rem;
+    background-image: url("../../assets/icons/right-arrow.svg");
+    background-size: 1.75rem;
+    transform: rotate(90deg);
+  }
+
+  .clicked {
+    transform: rotate(0deg);
+  }
+
+  &:hover {
+    background-color: $green;
+    .image {
+      transform: rotate(0deg);
+    }
+  }
+}
+</style>
diff --git a/src/components/shared/PlayBtn.vue b/src/components/shared/PlayBtn.vue
index faf18ca2..917f222c 100644
--- a/src/components/shared/PlayBtn.vue
+++ b/src/components/shared/PlayBtn.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="play-btn circular">
-    <div class="icon"></div>
-  </div>
+  <div class="play-btn rounded shadow-sm" @click="playThis"></div>
 </template>
-
+<script setup lang="ts">
+function playThis(e: Event) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+}
+</script>
 <style lang="scss">
 .play-btn {
-  width: 2rem;
-  height: 2rem;
-  background-color: $accent;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: $gray3;
   background-image: url("../../assets/icons/play.svg");
-  background-size: 1.25rem;
-  background-position: 60%;
-  background-repeat: no-repeat;
-  transition: all .25s;
+  background-size: 1.75rem;
+  background-position: 50% 50%;
+  transition: all 0.25s ease-in-out;
 
   &:hover {
-      background-color: rgb(58, 197, 58);
-      transform: scale(1.1);
+    background-color: $accent;
+    transform: scale(1.1);
   }
 }
 </style>
diff --git a/src/components/shared/PlayBtnRect.vue b/src/components/shared/PlayBtnRect.vue
index c04fbfd4..90857423 100644
--- a/src/components/shared/PlayBtnRect.vue
+++ b/src/components/shared/PlayBtnRect.vue
@@ -55,7 +55,7 @@ function play() {
   cursor: pointer;
   background: linear-gradient(34deg, $accent, $red);
   user-select: none;
-  transition: all 0.5s ease;
+  transition: all 0.5s ease-in-out;
 
   .icon {
     height: 2rem;