From c9d78e3f67d421b080ba741d82d0eae03cceb77c Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Tue, 26 Nov 2024 22:43:33 +0800
Subject: [PATCH] Added tooltips to dropdown icons

#524
---
 .../peerSettingsDropdown.vue                  | 51 +++++++++++++------
 .../peerSettingsDropdownTool.vue              | 37 ++++++++++++++
 2 files changed, 72 insertions(+), 16 deletions(-)
 create mode 100644 src/static/app/src/components/configurationComponents/peerSettingsDropdownComponents/peerSettingsDropdownTool.vue

diff --git a/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue b/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
index 1387072..24c36bf 100644
--- a/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
+++ b/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
@@ -2,10 +2,12 @@
 import {fetchGet, fetchPost} from "@/utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import LocaleText from "@/components/text/localeText.vue";
+import PeerSettingsDropdownTool
+	from "@/components/configurationComponents/peerSettingsDropdownComponents/peerSettingsDropdownTool.vue";
 
 export default {
 	name: "peerSettingsDropdown",
-	components: {LocaleText},
+	components: {PeerSettingsDropdownTool, LocaleText},
 	setup(){
 		const dashboardStore = DashboardConfigurationStore()
 		return {dashboardStore}
@@ -110,21 +112,38 @@ export default {
 					</li>
 				</template>
 				<template v-else>
-					<li class="d-flex" style="padding-left: var(--bs-dropdown-item-padding-x); padding-right: var(--bs-dropdown-item-padding-x);">
-						<a class="dropdown-item text-center px-0 rounded-3" role="button" @click="this.downloadPeer()">
-							<i class="me-auto bi bi-download"></i>
-						</a>
-						<a class="dropdown-item text-center px-0 rounded-3" role="button"
-						   @click="this.downloadQRCode('qrcode')">
-							<i class="me-auto bi bi-qr-code"></i>
-						</a>
-						<a class="dropdown-item text-center px-0 rounded-3" role="button"
-						   @click="this.downloadQRCode('configurationFile')">
-							<i class="me-auto bi bi-body-text"></i>
-						</a>
-						<a class="dropdown-item text-center px-0 rounded-3" role="button" @click="this.$emit('share')">
-							<i class="me-auto bi bi-share"></i>
-						</a>
+					<li>
+						<div class="text-center text-muted">
+							
+						</div>
+						<div class="d-flex" style="padding-left: var(--bs-dropdown-item-padding-x); padding-right: var(--bs-dropdown-item-padding-x);">
+<!--							<a class="dropdown-item text-center px-0 rounded-3" role="button" @click="this.downloadPeer()">-->
+<!--								<i class="me-auto bi bi-download"></i>-->
+<!--							</a>-->
+<!--							<a class="dropdown-item text-center px-0 rounded-3" role="button"-->
+<!--							   @click="this.downloadQRCode('qrcode')">-->
+<!--								<i class="me-auto bi bi-qr-code"></i>-->
+<!--							</a>-->
+<!--							<a class="dropdown-item text-center px-0 rounded-3" role="button"-->
+<!--							   @click="this.downloadQRCode('configurationFile')">-->
+<!--								<i class="me-auto bi bi-body-text"></i>-->
+<!--							</a>-->
+<!--							<a class="dropdown-item text-center px-0 rounded-3" role="button" @click="this.$emit('share')">-->
+<!--								<i class="me-auto bi bi-share"></i>-->
+<!--							</a>-->
+							<PeerSettingsDropdownTool icon="bi-download" 
+							                          title="Download"
+							                          @click="this.downloadPeer()"></PeerSettingsDropdownTool>
+							<PeerSettingsDropdownTool icon="bi-qr-code" 
+							                          title="QR Code"
+							                          @click="this.downloadQRCode('qrcode')"></PeerSettingsDropdownTool>
+							<PeerSettingsDropdownTool icon="bi-body-text" 
+							                          title="Configuration File"
+							                          @click="this.downloadQRCode('configurationFile')"></PeerSettingsDropdownTool>
+							<PeerSettingsDropdownTool icon="bi-share" 
+							                          title="Share"
+							                          @click="this.$emit('share')"></PeerSettingsDropdownTool>
+						</div>
 					</li>
 				</template>
 				<li><hr class="dropdown-divider"></li>
diff --git a/src/static/app/src/components/configurationComponents/peerSettingsDropdownComponents/peerSettingsDropdownTool.vue b/src/static/app/src/components/configurationComponents/peerSettingsDropdownComponents/peerSettingsDropdownTool.vue
new file mode 100644
index 0000000..7ec2092
--- /dev/null
+++ b/src/static/app/src/components/configurationComponents/peerSettingsDropdownComponents/peerSettingsDropdownTool.vue
@@ -0,0 +1,37 @@
+<script setup>
+import {ref} from "vue";
+
+const props = defineProps({
+	icon: String,
+	title: String
+})
+const emit = defineEmits(["click"])
+
+const show = ref(false)
+
+</script>
+
+<template>
+	<a class="dropdown-item text-center px-0 rounded-3 position-relative" role="button"
+	   @mouseenter="show = true"
+	   @mouseleave="show = false"
+	   @click="emit('click')">
+		<i class="me-auto bi" :class="icon"></i>
+		<Transition name="zoomReversed">
+			<span
+				v-if="show"
+				class="position-absolute d-block p-1 px-2 bg-body text-body rounded-3 border shadow">
+			<small>
+				{{title}}
+			</small>
+		</span>
+		</Transition>
+	</a>
+</template>
+
+<style scoped>
+span{
+	top: -34px;
+	left: 0;
+}
+</style>
\ No newline at end of file