Mirrors/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2025-06-28 09:16:55 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added tooltips to dropdown icons

Browse Source 
#524
This commit is contained in:
Donald Zou 2024-11-26 22:43:33 +08:00
parent b4f3fb3b30
commit c9d78e3f67
2 changed files with 72 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
View File

@ -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>

37
src/static/app/src/components/configurationComponents/peerSettingsDropdownComponents/peerSettingsDropdownTool.vue Normal file
View File

@ -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>