From e96ab50486dab9e144bcba87d3763c6acc1625b7 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 27 Apr 2023 08:40:24 -0700
Subject: [PATCH] feat: adds styles to popup

---
 assets/components.d.ts         |  1 +
 assets/components/Popup.vue    | 41 +++++++++++++++++++++++++
 assets/components/SideMenu.vue | 56 +++++++++++++++++++---------------
 3 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 assets/components/Popup.vue

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 69d50e31..e9ef3bea 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -42,6 +42,7 @@ declare module '@vue/runtime-core' {
     'Octicon:download24': typeof import('~icons/octicon/download24')['default']
     'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
     PastTime: typeof import('./components/PastTime.vue')['default']
+    Popup: typeof import('./components/Popup.vue')['default']
     RelativeTime: typeof import('./components/RelativeTime.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/assets/components/Popup.vue b/assets/components/Popup.vue
new file mode 100644
index 00000000..6965e53a
--- /dev/null
+++ b/assets/components/Popup.vue
@@ -0,0 +1,41 @@
+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="show = false" ref="trigger"><slot></slot></div>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-show="show && delayedShow" class="content" ref="content">
+        <slot name="content"></slot>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { refDebounced } from "@vueuse/core";
+let show = ref(false);
+let delayedShow = refDebounced(show, 1000);
+let content: HTMLElement | null = $ref(null);
+let trigger: HTMLElement | null = $ref(null);
+
+function onMouseEnter(e: MouseEvent) {
+  show.value = true;
+  if (e.target && content) {
+    const x = e.target.offsetLeft + e.target.offsetWidth + 10;
+    const y = e.target.offsetTop;
+
+    content.style.left = `${x}px`;
+    content.style.top = `${y}px`;
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  position: fixed;
+  z-index: 9999;
+  background: var(--scheme-main-ter);
+  border-radius: 0.5em;
+  padding: 1em;
+  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--border-color);
+}
+</style>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index d4a57729..9d9972f2 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -57,34 +57,42 @@
     <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" v-if="ready">
       <li v-for="item in sortedContainers" :key="item.id" :class="item.state">
-        <router-link
-          :to="{ name: 'container-id', params: { id: item.id } }"
-          active-class="is-active"
-          :title="item.name"
-        >
-          <div class="container is-flex is-align-items-center">
-            <div class="is-flex-grow-1 is-ellipsis">
-              <span class="has-text-weight-semibold">{{ item.name }}</span
-              ><span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">.{{ item.swarmId }}</span>
-            </div>
-            <div class="is-flex-shrink-1 is-flex icons">
-              <div
-                class="icon is-small pin"
-                @click.stop.prevent="store.appendActiveContainer(item)"
-                v-show="!activeContainersById[item.id]"
-                :title="$t('tooltip.pin-column')"
-              >
-                <cil:columns />
+        <popup>
+          <router-link
+            :to="{ name: 'container-id', params: { id: item.id } }"
+            active-class="is-active"
+            :title="item.name"
+          >
+            <div class="container is-flex is-align-items-center">
+              <div class="is-flex-grow-1 is-ellipsis">
+                <span class="has-text-weight-semibold">{{ item.name }}</span
+                ><span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">.{{ item.swarmId }}</span>
               </div>
+              <div class="is-flex-shrink-1 is-flex icons">
+                <div
+                  class="icon is-small pin"
+                  @click.stop.prevent="store.appendActiveContainer(item)"
+                  v-show="!activeContainersById[item.id]"
+                  :title="$t('tooltip.pin-column')"
+                >
+                  <cil:columns />
+                </div>
 
-              <div class="icon is-small health" :health="item.health" v-if="item.health" :title="item.health">
-                <cil:check-circle v-if="item.health == 'healthy'" />
-                <cil:x-circle v-else-if="item.health == 'unhealthy'" />
-                <cil:circle v-else />
+                <div class="icon is-small health" :health="item.health" v-if="item.health" :title="item.health">
+                  <cil:check-circle v-if="item.health == 'healthy'" />
+                  <cil:x-circle v-else-if="item.health == 'unhealthy'" />
+                  <cil:circle v-else />
+                </div>
               </div>
             </div>
-          </div>
-        </router-link>
+          </router-link>
+          <template #content>
+            <div class="tooltip">
+              This is data
+              <button>test</button>
+            </div>
+          </template>
+        </popup>
       </li>
     </ul>
     <ul class="menu-list is-hidden-mobile loading" v-else>