From 3b5ed35ea8dace6f319ac6d3fccb35972ff34e5a Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sun, 13 Oct 2019 20:29:08 +0200
Subject: [PATCH] feat: add dropdown in RecentActivity component

---
 client/src/components/Dropdown.vue       | 63 ++++++++++++++++++++++++
 client/src/components/RecentActivity.vue | 29 ++++++++---
 2 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/Dropdown.vue

diff --git a/client/src/components/Dropdown.vue b/client/src/components/Dropdown.vue
new file mode 100644
index 0000000..b0abae2
--- /dev/null
+++ b/client/src/components/Dropdown.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <!-- trigger -->
+    <div
+      @mouseenter="isOpen = true"
+      @mousemove="mousemove"
+      @mouseleave="isOpen = false"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+    >
+      <slot name="trigger"></slot>
+    </div>
+
+    <!-- dropdown content -->
+    <div
+      v-show="isOpen"
+      class="fixed z-40 bg-blue-1000 py-2 rounded-md shadow"
+      :style="{ width, ...position }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    openMethod: {
+      type: String,
+      default: 'click'
+    },
+    width: {
+      type: String,
+      default: 'auto'
+    }
+  },
+
+  data() {
+    return {
+      isOpen: false,
+      left: 0,
+      offset: 12,
+      top: 0
+    }
+  },
+
+  computed: {
+    position() {
+      return {
+        left: `${this.left + this.offset}px`,
+        top: `${this.top + this.offset}px`,
+      }
+    }
+  },
+
+  methods: {
+    mousemove(event) {
+      this.left = event.clientX
+      this.top = event.clientY
+    }
+  }
+}
+</script>
diff --git a/client/src/components/RecentActivity.vue b/client/src/components/RecentActivity.vue
index 07dc324..1a1beba 100644
--- a/client/src/components/RecentActivity.vue
+++ b/client/src/components/RecentActivity.vue
@@ -22,13 +22,22 @@
           class="ml-2 flex flex-col flex-wrap"
           style="width: calc(20px * 15); height: calc(20px * 7)"
         >
-          <div
-            v-for="(day, index) in gridDays.slice(indexFirstMonday)"
-            :key="day.timestamp"
-            :title="day.date + ' : ' + day.matches + ' game(s)'"
-            :class="[getCaseMargin(index), getCaseColor(day.matches)]"
-            class="ml-1 w-4 h-4 cursor-pointer"
-          />
+          <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
+            <template v-slot:trigger>
+              <div
+                :class="[getCaseMargin(index), getCaseColor(day.matches)]"
+                class="ml-1 w-4 h-4 cursor-pointer"
+              />
+            </template>
+            <template v-slot:default>
+              <div class="px-2 text-white text-center text-xs">
+                <div>{{ day.date }}</div>
+                <div>
+                  <span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)
+                </div>
+              </div>
+            </template>
+          </Dropdown>
         </div>
       </div>
     </div>
@@ -36,7 +45,13 @@
 </template>
 
 <script>
+import Dropdown from '@/components/Dropdown.vue'
+
 export default {
+  components: {
+    Dropdown,
+  },
+
   props: {
     matches: {
       type: Array,