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

chore: refactor tooltip component in Svelte

Browse Source 
- Removed arrow middleware from floating actions.
- Updated the styles for the tooltip component
This commit is contained in:
Mattias Granlund 2023-11-22 16:24:05 +01:00
parent e59cc2a39a
commit e27c7ab289
2 changed files with 26 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/ui/src/lib/components/Tooltip.svelte
View File

@ -1,10 +1,6 @@
<script lang="ts"> <script lang="ts">
import { offset, flip, shift } from 'svelte-floating-ui/dom'; import { offset, flip, shift } from 'svelte-floating-ui/dom';
import { arrow } from 'svelte-floating-ui';
import { createFloatingActions } from 'svelte-floating-ui'; import { createFloatingActions } from 'svelte-floating-ui';
import { writable } from 'svelte/store';
let arrowRef = writable({} as HTMLElement);
export let label: string; export let label: string;
type Placement = 'top' | 'right' | 'bottom' | 'left'; type Placement = 'top' | 'right' | 'bottom' | 'left';
@ -14,24 +10,7 @@
const [floatingRef, floatingContent] = createFloatingActions({ const [floatingRef, floatingContent] = createFloatingActions({
strategy: 'absolute', strategy: 'absolute',
placement: placement, placement: placement,
middleware: [offset(8), flip(), shift(), arrow({ element: arrowRef })], middleware: [offset(8), flip(), shift()]
onComputed({ placement, middlewareData }) {
if (!middlewareData.arrow) return;
const { x, y } = middlewareData.arrow;
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right'
}[placement.split('-')[0]] as any;
if (!$arrowRef) return;
Object.assign($arrowRef.style, {
left: x != null ? `${x}px` : '',
top: y != null ? `${y}px` : '',
[staticSide]: '-4px'
});
}
}); });
let showTooltip = false; let showTooltip = false;
@ -40,7 +19,7 @@
<div <div
role="tooltip" role="tooltip"
class="inline-block h-fit overflow-auto" class="inline-block"
on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))} on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
on:mouseleave={() => { on:mouseleave={() => {
clearTimeout(timeout); clearTimeout(timeout);
@ -49,24 +28,24 @@
use:floatingRef use:floatingRef
> >
<slot /> <slot />
{#if showTooltip}
<div role="tooltip" class="tooltip" use:floatingContent>
<span>{label}</span>
</div>
{/if}
</div> </div>
{#if showTooltip} <style lang="postcss">
<div .tooltip {
role="tooltip" background-color: var(--clr-core-ntrl-10);
class=" absolute z-50 rounded-[5px] bg-[#171717] p-2 text-sm text-zinc-300 shadow-lg" border-radius: var(--radius-s);
use:floatingContent border: 1px solid var(--clr-core-ntrl-30);
> color: var(--clr-core-ntrl-60);
<span>{label}</span> display: inline-block;
<div padding-left: var(--space-8);
class=" padding-right: var(--space-8);
absolute padding-top: var(--space-4);
h-3 padding-bottom: var(--space-4);
w-3 rotate-45 z-index: 50;
rounded-sm }
bg-[#171717] </style>
"
bind:this={$arrowRef}
/>
</div>
{/if}

8
packages/ui/src/routes/[projectId]/base/BaseBranch.svelte
View File

@ -63,9 +63,11 @@
class="h-px w-full border-none bg-gradient-to-r from-transparent via-light-500 to-transparent dark:via-dark-400" class="h-px w-full border-none bg-gradient-to-r from-transparent via-light-500 to-transparent dark:via-dark-400"
/> />
{/if} {/if}
<Tooltip label="This is the current base for your virtual branches."> <div>
<h1 class="font-bold text-light-700 dark:text-dark-100">Local</h1> <Tooltip label="This is the current base for your virtual branches.">
</Tooltip> <h1 class="inline-block font-bold text-light-700 dark:text-dark-100">Local</h1>
</Tooltip>
</div>
<div class="flex flex-col gap-y-2"> <div class="flex flex-col gap-y-2">
{#each base.recentCommits as commit} {#each base.recentCommits as commit}
<CommitCard {commit} {projectId} commitUrl={base.commitUrl(commit.id)} /> <CommitCard {commit} {projectId} commitUrl={base.commitUrl(commit.id)} />