diff options
| author |  Corentin THOMASSET <corentin.thomasset74@gmail.com>
| 2023-10-14 18:24:54 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-10-14 16:24:54 +0000 |
| commit | 025f556023c29f8f31dc00870c80a9d790bbb2f4 (patch) | |
| tree | 2886353373cc17b24f97c31f6e8880fd335c443c /src/components/NavbarButtons.vue | |
| parent | 2d2dffb14a2b51f931934055b5a59e51a070ff93 (diff) | |
| download | it-tools-025f556023c29f8f31dc00870c80a9d790bbb2f4.tar.gz it-tools-025f556023c29f8f31dc00870c80a9d790bbb2f4.tar.zst it-tools-025f556023c29f8f31dc00870c80a9d790bbb2f4.zip | |
refactor(ui): switched naive tooltip components to custom ones (#661)
Diffstat (limited to 'src/components/NavbarButtons.vue')
| -rw-r--r-- | src/components/NavbarButtons.vue | 83 |
1 files changed, 35 insertions, 48 deletions
diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue index 5b1a3a4..653afdd 100644 --- a/src/components/NavbarButtons.vue +++ b/src/components/NavbarButtons.vue @@ -7,56 +7,43 @@ const { isDarkTheme } = toRefs(styleStore); </script> <template> - <n-tooltip trigger="hover"> - <template #trigger> - <c-button - circle - variant="text" - href="https://github.com/CorentinTh/it-tools" - target="_blank" - rel="noopener noreferrer" - aria-label="IT-Tools' GitHub repository" - > - <n-icon size="25" :component="BrandGithub" /> - </c-button> - </template> - Github repository - </n-tooltip> + <c-tooltip tooltip="Github repository" position="bottom"> + <c-button + circle + variant="text" + href="https://github.com/CorentinTh/it-tools" + target="_blank" + rel="noopener noreferrer" + aria-label="IT-Tools' GitHub repository" + > + <n-icon size="25" :component="BrandGithub" /> + </c-button> + </c-tooltip> - <n-tooltip trigger="hover"> - <template #trigger> - <c-button - circle - variant="text" - href="https://twitter.com/ittoolsdottech" - rel="noopener" - target="_blank" - aria-label="IT Tools' Twitter account" - > - <n-icon size="25" :component="BrandTwitter" /> - </c-button> - </template> - IT Tools' Twitter account - </n-tooltip> + <c-tooltip tooltip="Twitter account" position="bottom"> + <c-button + circle + variant="text" + href="https://twitter.com/ittoolsdottech" + rel="noopener" + target="_blank" + aria-label="IT Tools' Twitter account" + > + <n-icon size="25" :component="BrandTwitter" /> + </c-button> + </c-tooltip> - <n-tooltip trigger="hover"> - <template #trigger> - <c-button circle variant="text" to="/about" aria-label="About"> - <n-icon size="25" :component="InfoCircle" /> - </c-button> - </template> - About - </n-tooltip> - <n-tooltip trigger="hover"> - <template #trigger> - <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()"> - <n-icon v-if="isDarkTheme" size="25" :component="Sun" /> - <n-icon v-else size="25" :component="Moon" /> - </c-button> - </template> - <span v-if="isDarkTheme">Light mode</span> - <span v-else>Dark mode</span> - </n-tooltip> + <c-tooltip tooltip="About IT-Tools" position="bottom"> + <c-button circle variant="text" to="/about" aria-label="About"> + <n-icon size="25" :component="InfoCircle" /> + </c-button> + </c-tooltip> + <c-tooltip :tooltip="isDarkTheme ? 'Light mode' : 'Dark mode'" position="bottom"> + <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()"> + <n-icon v-if="isDarkTheme" size="25" :component="Sun" /> + <n-icon v-else size="25" :component="Moon" /> + </c-button> + </c-tooltip> </template> <style lang="less" scoped> |