gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-03 03:33:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use 1 sec tooltip delay for ahead/behind

Browse Source
This commit is contained in:
Mattias Granlund 2024-01-28 21:08:25 +01:00
parent e5c5d143a6
commit eca69de970
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
gitbutler-ui/src/lib/utils/tooltip.ts
View File

@ -1,10 +1,12 @@
export interface ToolTipOptions {
text: string;
// In the near future we'll need the ability to specify multiple
// options for the tooltip, such as a hotkey.
// hotkey?: string;
delay?: number;
}
const defaultOptions: Partial<ToolTipOptions> = {
delay: 1500
};
export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string) {
// The tooltip element we are adding to the dom
let tooltip: HTMLDivElement | undefined;
@ -15,12 +17,15 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
// Note that we use this both for delaying show, as well as delaying hide
let timeoutId: any;
// Options
let { delay } = defaultOptions;
// Most use cases only involve passing a string, so we allow either opts of
// simple text.
if (typeof optsOrString == 'string') {
text = optsOrString;
} else {
text = optsOrString.text;
({ text, delay } = optsOrString);
}
if (!text) return;
@ -29,7 +34,7 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
// If tooltip is displayed we clear hide timeout
if (tooltip && timeoutId) clearTimeout(timeoutId);
// If no tooltip and no timeout id we set a show timeout
else if (!tooltip && !timeoutId) timeoutId = setTimeout(() => show(), 1500);
else if (!tooltip && !timeoutId) timeoutId = setTimeout(() => show(), delay);
}
function onMouseLeave() {

18
gitbutler-ui/src/routes/[projectId]/components/AheadBehind.svelte
View File

@ -9,15 +9,17 @@
</script>
{#if ahead !== undefined && behind !== undefined}
<div
class="ahead-behind text-base-9 text-bold"
>
<div class="ahead-behind text-base-9 text-bold">
<div
use:tooltip={`${behindMessage}`}
class="behind" class:neutral={behind == 0}>{behind}</div>
<div
use:tooltip={`${aheadMessage}`}
class="ahead" class:neutral={ahead == 0}>{ahead}</div>
use:tooltip={{ text: behindMessage, delay: 1000 }}
class="behind"
class:neutral={behind == 0}
>
{behind}
</div>
<div use:tooltip={{ text: aheadMessage, delay: 1000 }} class="ahead" class:neutral={ahead == 0}>
{ahead}
</div>
</div>
{/if}