ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

bug tooltip (#484)

Browse source 
Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-04-21 17:12:17 +08:00 committed by GitHub
parent b1e988023c
commit 84ca1279c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
modules/desktop/src/components/top-bar/top-bar-menu.svelte
View file

@ -2,6 +2,7 @@
import { shellOpenExternal, submitLogs } from "@native";
import { navStore } from "$libs/stores";
import LoginButton from "./login-button.svelte";
import ToolTip from "@tea/ui/tool-tip/tool-tip.svelte";
const { sideNavOpen } = navStore;
const toggleSideNav = () => {
@ -19,11 +20,17 @@
<div class="mr-1 flex h-full items-center justify-end gap-2 p-2">
<button
class="border-gray group flex h-[28px] w-[28px] items-center justify-center rounded-sm border hover:bg-[#e1e1e1]"
on:click={() => submitBugReport()}
on:dblclick={preventDoubleClick}
>
<div class="icon-bug text-l text-gray flex group-hover:text-black" />
<ToolTip class="ml-[-80px]">
<div class="icon-bug text-l text-gray flex group-hover:text-black" slot="target" />
<div slot="tooltip-content" class="flex flex-col items-center">
<div>Report Feedback</div>
</div>
</ToolTip>
</button>
<!-- Add this back when dropdown is ready -->
<!-- <button

4
modules/ui/src/tool-tip/tool-tip.svelte
View file

@ -1,11 +1,13 @@
<script lang="ts">
let clazz = "";
export { clazz as class };
// TODO: this tool tip assumes it is below the target element, when multiple directions are needed, this will need to be updated
</script>
<div class="group relative">
<slot name="target" />
<div
class="tooltip invisible absolute top-full mt-4 w-full min-w-max border border-gray bg-black transition-all group-hover:visible"
class="tooltip invisible absolute top-full mt-4 w-full min-w-max border border-gray bg-black transition-all group-hover:visible {clazz}"
>
<div class="px-6 py-2">
<slot name="tooltip-content" />