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

Added new icons, merge conflicts resolved

Browse Source
This commit is contained in:
Pavel Laptev 2024-02-09 12:17:47 +01:00 committed by GitButler
commit c6bc57cb90
7 changed files with 499 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
gitbutler-ui/src/lib/components/BranchCard.svelte
View File

@ -49,7 +49,10 @@
let rsViewport: HTMLElement; let rsViewport: HTMLElement;
const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT); const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
const defaultBranchWidthRem = persisted<number | undefined>(24, 'defaulBranchWidth' + project.id); const defaultBranchWidthRem = persisted<number | undefined>(
24,
'defaulBranchWidth' + project.id
);
const laneWidthKey = 'laneWidth_'; const laneWidthKey = 'laneWidth_';
let laneWidth: number; let laneWidth: number;
@ -126,149 +129,174 @@
); );
} }
} }
let isLaneCollapsed: boolean;
$: console.log('collapsed', isLaneCollapsed);
</script> </script>
<div class="branch-card-wrapper"> {#if isLaneCollapsed}
<div <div class="collapsed-lane-wrapper">
class="branch-card" <BranchHeader
data-tauri-drag-region {isUnapplied}
class:target-branch={branch.active && branch.selectedForChanges} {branchController}
> {branch}
<div {base}
bind:this={rsViewport} {githubService}
style:width={`${laneWidth || $defaultBranchWidthRem}rem`} {branchService}
class="branch-card__contents" bind:isLaneCollapsed
> projectId={project.id}
<BranchHeader on:action={(e) => {
{isUnapplied} if (e.detail == 'generate-branch-name') {
{branchController} generateBranchName();
{branch} }
{base}
{githubService}
{branchService}
projectId={project.id}
on:action={(e) => {
if (e.detail == 'generate-branch-name') {
generateBranchName();
}
}}
/>
<!-- DROPZONES -->
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
<div
class="branch-card__dropzone-wrapper"
use:dropzone={{
hover: 'cherrypick-dz-hover',
active: 'cherrypick-dz-active',
accepts: acceptCherrypick,
onDrop: onCherrypicked,
disabled: isUnapplied
}}
use:dropzone={{
hover: 'lane-dz-hover',
active: 'lane-dz-active',
accepts: acceptBranchDrop,
onDrop: onBranchDrop,
disabled: isUnapplied
}}
>
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
{#if branch.files?.length > 0}
<div class="card">
<BranchFiles
{branch}
{isUnapplied}
{selectedOwnership}
{selectedFiles}
showCheckboxes={$commitBoxOpen}
/>
{#if branch.active}
<CommitDialog
projectId={project.id}
{branchController}
{branch}
{cloud}
{selectedOwnership}
{user}
bind:expanded={commitBoxOpen}
on:action={(e) => {
if (e.detail == 'generate-branch-name') {
generateBranchName();
}
}}
/>
{/if}
</div>
{:else if branch.commits.length == 0}
<div class="new-branch card" data-dnd-ignore>
<div class="new-branch__content">
<div class="new-branch__image">
<ImgThemed
imgSet={{
light: '/images/lane-new-light.webp',
dark: '/images/lane-new-dark.webp'
}}
/>
</div>
<h2 class="new-branch__title text-base-body-15 text-semibold">
This is a new branch.
</h2>
<p class="new-branch__caption text-base-body-13">
You can drag and drop files or parts of files here.
</p>
</div>
</div>
{:else}
<!-- attention: these markers have custom css at the bottom of thise file -->
<div class="no-changes card" data-dnd-ignore>
<div class="new-branch__content">
<div class="new-branch__image">
<ImgThemed
imgSet={{
light: '/images/lane-no-changes-light.webp',
dark: '/images/lane-no-changes-dark.webp'
}}
/>
</div>
<h2 class="new-branch__caption text-base-body-13">
No uncommitted changes<br />on this branch
</h2>
</div>
</div>
{/if}
</div>
<BranchCommits
{base}
{branch}
{project}
{githubService}
{branchController}
{branchService}
{branchCount}
{isUnapplied}
{selectedFiles}
/>
</div>
</div>
<div class="divider-line">
<Resizer
viewport={rsViewport}
direction="right"
inside={$selectedFiles.length > 0}
minWidth={320}
sticky
on:width={(e) => {
laneWidth = e.detail / (16 * $userSettings.zoom);
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
$defaultBranchWidthRem = laneWidth;
}} }}
/> />
</div> </div>
</div> {:else}
<div class="branch-card-wrapper">
<div
class="branch-card"
data-tauri-drag-region
class:target-branch={branch.active && branch.selectedForChanges}
>
<div
bind:this={rsViewport}
style:width={`${laneWidth || $defaultBranchWidthRem}rem`}
class="branch-card__contents"
>
<BranchHeader
{isUnapplied}
{branchController}
{branch}
{base}
{githubService}
{branchService}
bind:isLaneCollapsed
projectId={project.id}
on:action={(e) => {
if (e.detail == 'generate-branch-name') {
generateBranchName();
}
}}
/>
<!-- DROPZONES -->
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
<div
class="branch-card__dropzone-wrapper"
use:dropzone={{
hover: 'cherrypick-dz-hover',
active: 'cherrypick-dz-active',
accepts: acceptCherrypick,
onDrop: onCherrypicked,
disabled: isUnapplied
}}
use:dropzone={{
hover: 'lane-dz-hover',
active: 'lane-dz-active',
accepts: acceptBranchDrop,
onDrop: onBranchDrop,
disabled: isUnapplied
}}
>
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
{#if branch.files?.length > 0}
<div class="card">
<BranchFiles
{branch}
{isUnapplied}
{selectedOwnership}
{selectedFiles}
showCheckboxes={$commitBoxOpen}
/>
{#if branch.active}
<CommitDialog
projectId={project.id}
{branchController}
{branch}
{cloud}
{selectedOwnership}
{user}
bind:expanded={commitBoxOpen}
on:action={(e) => {
if (e.detail == 'generate-branch-name') {
generateBranchName();
}
}}
/>
{/if}
</div>
{:else if branch.commits.length == 0}
<div class="new-branch card" data-dnd-ignore>
<div class="new-branch__content">
<div class="new-branch__image">
<ImgThemed
imgSet={{
light: '/images/lane-new-light.webp',
dark: '/images/lane-new-dark.webp'
}}
/>
</div>
<h2 class="new-branch__title text-base-body-15 text-semibold">
This is a new branch.
</h2>
<p class="new-branch__caption text-base-body-13">
You can drag and drop files or parts of files here.
</p>
</div>
</div>
{:else}
<!-- attention: these markers have custom css at the bottom of thise file -->
<div class="no-changes card" data-dnd-ignore>
<div class="new-branch__content">
<div class="new-branch__image">
<ImgThemed
imgSet={{
light: '/images/lane-no-changes-light.webp',
dark: '/images/lane-no-changes-dark.webp'
}}
/>
</div>
<h2 class="new-branch__caption text-base-body-13">
No uncommitted changes<br />on this branch
</h2>
</div>
</div>
{/if}
</div>
<BranchCommits
{base}
{branch}
{project}
{githubService}
{branchController}
{branchService}
{branchCount}
{isUnapplied}
{selectedFiles}
/>
</div>
</div>
<div class="divider-line">
<Resizer
viewport={rsViewport}
direction="right"
inside={$selectedFiles.length > 0}
minWidth={320}
sticky
on:width={(e) => {
laneWidth = e.detail / (16 * $userSettings.zoom);
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
$defaultBranchWidthRem = laneWidth;
}}
/>
</div>
</div>
{/if}
<style lang="postcss"> <style lang="postcss">
.branch-card-wrapper { .branch-card-wrapper {
@ -397,4 +425,12 @@
flex-direction: column; flex-direction: column;
min-height: 100%; min-height: 100%;
} }
/* COLLAPSED LANE */
.collapsed-lane-wrapper {
display: flex;
flex-direction: column;
padding: var(--space-12);
height: 100%;
}
</style> </style>

509
gitbutler-ui/src/lib/components/BranchHeader.svelte
View File

@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import BranchHeaderSecondaryActions from './BranchHeaderSecondaryActions.svelte';
import BranchLabel from './BranchLabel.svelte'; import BranchLabel from './BranchLabel.svelte';
import BranchLanePopupMenu from './BranchLanePopupMenu.svelte'; // import BranchLanePopupMenu from './BranchLanePopupMenu.svelte';
import MergeButton from './MergeButton.svelte'; import MergeButton from './MergeButton.svelte';
import Tag from './Tag.svelte'; import Tag from './Tag.svelte';
import { clickOutside } from '$lib/clickOutside'; // import { clickOutside } from '$lib/clickOutside';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import Icon, { type IconColor } from '$lib/components/Icon.svelte'; import Icon, { type IconColor } from '$lib/components/Icon.svelte';
import { normalizeBranchName } from '$lib/utils/branch'; import { normalizeBranchName } from '$lib/utils/branch';
@ -26,6 +27,8 @@
export let branchService: BranchService; export let branchService: BranchService;
export let projectId: string; export let projectId: string;
export let isLaneCollapsed = false;
export let githubService: GitHubService; export let githubService: GitHubService;
$: pr$ = githubService.get(branch.upstreamName); $: pr$ = githubService.get(branch.upstreamName);
@ -117,254 +120,258 @@
$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated); $: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
</script> </script>
<div class="header__wrapper"> {#if isLaneCollapsed}
<div class="header card" bind:this={container} class:isUnapplied> <div class="collapsed-lane" data-remove-from-draggable data-tauri-drag-region>
<div class="header__info"> <div class="collapsed-lane__actions">
<div class="header__label"> <BranchHeaderSecondaryActions
<BranchLabel {visible}
bind:name={branch.name} {isUnapplied}
on:change={handleBranchNameChange} {branch}
disabled={isUnapplied} {branchController}
/> {projectId}
</div> bind:isLaneCollapsed
<div class="header__remote-branch"> bind:meatballButton
{#if !branch.upstream} />
{#if !branch.active} </div>
<div </div>
class="status-tag text-base-11 text-semibold unapplied" {:else}
use:tooltip={'These changes are stashed away from your working directory.'} <div class="header__wrapper">
> <div class="header card" bind:this={container} class:isUnapplied>
<Icon name="removed-branch-small" /> unapplied <div class="header__info">
</div> <div class="header__label">
{:else if hasIntegratedCommits} <BranchLabel
<div bind:name={branch.name}
class="status-tag text-base-11 text-semibold integrated" on:change={handleBranchNameChange}
use:tooltip={'These changes have been integrated upstream, update your workspace to make this lane disappear.'} disabled={isUnapplied}
> />
<Icon name="removed-branch-small" /> integrated </div>
</div> <div class="header__remote-branch">
{:else} {#if !branch.upstream}
<div {#if !branch.active}
class="status-tag text-base-11 text-semibold pending" <Tag
use:tooltip={'These changes are in your working directory.'} icon="virtual-branch-small"
> color="light"
<Icon name="virtual-branch-small" /> virtual help="These changes are stashed away from your working directory."
</div> reversedDirection>unapplied</Tag
{/if} >
{#if !isUnapplied} {:else if hasIntegratedCommits}
<div <Tag
class="pending-name" icon="removed-branch-small"
use:tooltip={'Branch name that will be used when pushing. You can change it from the lane menu.'} color="success"
> help="These changes have been integrated upstream, update your workspace to make this lane disappear."
<span class="text-base-11 text-semibold"> reversedDirection>integrated</Tag
>
{:else}
<Tag
icon="virtual-branch-small"
color="light"
help="These changes are in your working directory."
reversedDirection>virtual</Tag
>
{/if}
{#if !isUnapplied}
<Tag
disabled
help="Branch name that will be used when pushing. You can change it from the lane menu."
>
origin/{branch.upstreamName origin/{branch.upstreamName
? branch.upstreamName ? branch.upstreamName
: normalizeBranchName(branch.name)} : normalizeBranchName(branch.name)}</Tag
</span> >
</div> {/if}
{/if} {:else}
{:else}
<div
class="status-tag text-base-11 text-semibold remote"
use:tooltip={'At least some of your changes have been pushed'}
>
<Icon name="remote-branch-small" /> remote
</div>
<Tag
icon="open-link"
color="ghost"
border
clickable
shrinkable
on:click={(e) => {
const url = base?.branchUrl(branch.upstream?.name);
if (url) open(url);
e.preventDefault();
e.stopPropagation();
}}
>
origin/{branch.upstreamName}
</Tag>
{#if $pr$?.htmlUrl}
<Tag <Tag
icon="pr-small" color="dark"
icon="remote-branch-small"
help="At least some of your changes have been pushed"
reversedDirection>remote</Tag
>
<Tag
icon="open-link"
color="ghost" color="ghost"
border border
clickable clickable
shrinkable
on:click={(e) => { on:click={(e) => {
const url = $pr$?.htmlUrl; const url = base?.branchUrl(branch.upstream?.name);
if (url) open(url); if (url) open(url);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}} }}
> >
View PR origin/{branch.upstreamName}
</Tag> </Tag>
{#if $pr$?.htmlUrl}
<Tag
icon="pr-small"
color="ghost"
border
clickable
on:click={(e) => {
const url = $pr$?.htmlUrl;
if (url) open(url);
e.preventDefault();
e.stopPropagation();
}}
>
View PR
</Tag>
{/if}
{#if prIcon}
<div
class="pr-status"
role="button"
tabindex="0"
on:click={fetchPrStatus}
on:keypress={fetchPrStatus}
use:tooltip={statusToTooltip(prStatus)}
>
{#if isFetching}
<Icon name="spinner" />
{:else}
<Icon name={prIcon} color={prColor} />
{/if}
</div>
{/if}
{/if} {/if}
{#if prIcon} {#await branch.isMergeable then isMergeable}
<div {#if !isMergeable}
class="pr-status" <Tag
role="button" icon="locked-small"
tabindex="0" color="warning"
on:click={fetchPrStatus} help="Applying this branch will add merge conflict markers that you will have to resolve"
on:keypress={fetchPrStatus} >
use:tooltip={statusToTooltip(prStatus)} Conflict
> </Tag>
{#if isFetching} {/if}
<Icon name="spinner" /> {/await}
{:else} </div>
<Icon name={prIcon} color={prColor} /> <div class="draggable" data-drag-handle>
{/if} <Icon name="draggable" />
</div> </div>
{/if}
{/if}
{#await branch.isMergeable then isMergeable}
{#if !isMergeable}
<Tag
icon="locked-small"
color="warning"
help="Applying this branch will add merge conflict markers that you will have to resolve"
>
Conflict
</Tag>
{/if}
{/await}
</div> </div>
<div class="draggable" data-drag-handle> <div class="header__actions">
<Icon name="draggable-narrow" /> <div class="header__buttons">
</div> {#if branch.active}
</div> {#if branch.selectedForChanges}
<div class="header__actions"> <Button
<div class="header__buttons"> help="New changes will land here"
{#if branch.active} icon="target"
{#if branch.selectedForChanges} notClickable
<Button disabled={isUnapplied}>Default branch</Button
help="New changes will land here" >
icon="target" {:else}
notClickable <Button
disabled={isUnapplied}>Default branch</Button help="When selected, new changes will land here"
> icon="target"
{:else} kind="outlined"
<Button color="neutral"
help="When selected, new changes will land here" disabled={isUnapplied}
icon="target" on:click={async () => {
kind="outlined" await branchController.setSelectedForChanges(branch.id);
color="neutral" }}
disabled={isUnapplied} >
on:click={async () => { Set as default
await branchController.setSelectedForChanges(branch.id); </Button>
}} {/if}
>
Set as default
</Button>
{/if} {/if}
{/if} <!-- We can't show the merge button until we've waited for checks
<!-- We can't show the merge button until we've waited for checks
We use a octokit.checks.listForRef to find checks running for a PR, but right after We use a octokit.checks.listForRef to find checks running for a PR, but right after
creation this request succeeds but returns an empty array. So we need a better way creation this request succeeds but returns an empty array. So we need a better way
determining "no checks will run for this PR" such that we can show the merge button determining "no checks will run for this PR" such that we can show the merge button
immediately. --> immediately. -->
{#if $pr$ && !isFetching && (!prStatus || prStatus?.success)} {#if $pr$ && !isFetching && (!prStatus || prStatus?.success)}
<MergeButton <MergeButton
{projectId}
disabled={isUnapplied || !$pr$}
loading={isMerging}
help="Merge pull request and refresh"
on:click={async (e) => {
isMerging = true;
const method = e.detail.method;
try {
if ($pr$) {
await githubService.merge($pr$.number, method);
}
} catch {
// TODO: Should we show the error from GitHub?
toasts.error('Failed to merge pull request');
} finally {
isMerging = false;
await fetchPrStatus();
await branchService.reloadVirtualBranches();
}
}}
/>
{/if}
</div>
<div class="relative" bind:this={meatballButton}>
{#if isUnapplied}
<Button
help="Deletes the local virtual branch (only)"
icon="bin-small"
color="neutral"
kind="outlined"
loading={isDeleting}
on:click={async () => {
isDeleting = true;
try {
await branchController.deleteBranch(branch.id);
goto(`/${projectId}/board`);
} catch (e) {
const err = 'Failed to delete branch';
toasts.error(err);
console.error(err, e);
} finally {
isDeleting = false;
}
}}
>
Delete
</Button>
<Button
help="Restores these changes into your working directory"
icon="plus-small"
color="primary"
kind="outlined"
loading={isApplying}
on:click={async () => {
isApplying = true;
try {
await branchController.applyBranch(branch.id);
goto(`/${projectId}/board`);
} catch (e) {
const err = 'Failed to apply branch';
toast.error(err);
console.error(err, e);
} finally {
isApplying = false;
}
}}
>
Apply
</Button>
{:else}
<Button
icon="kebab"
kind="outlined"
color="neutral"
on:click={() => (visible = !visible)}
/>
<div
class="branch-popup-menu"
use:clickOutside={{
trigger: meatballButton,
handler: () => (visible = false)
}}
>
<BranchLanePopupMenu
{branchController}
{branch}
{projectId} {projectId}
{isUnapplied} disabled={isUnapplied || !$pr$}
bind:visible loading={isMerging}
on:action help="Merge pull request and refresh"
on:click={async (e) => {
isMerging = true;
const method = e.detail.method;
try {
if ($pr$) {
await githubService.merge($pr$.number, method);
}
} catch {
// TODO: Should we show the error from GitHub?
toasts.error('Failed to merge pull request');
} finally {
isMerging = false;
await fetchPrStatus();
await branchService.reloadVirtualBranches();
}
}}
/> />
</div> {/if}
{/if} </div>
<div class="relative" bind:this={meatballButton}>
{#if isUnapplied}
<Button
help="Deletes the local virtual branch (only)"
icon="bin-small"
color="neutral"
kind="outlined"
loading={isDeleting}
on:click={async () => {
isDeleting = true;
try {
await branchController.deleteBranch(branch.id);
goto(`/${projectId}/board`);
} catch (e) {
const err = 'Failed to delete branch';
toasts.error(err);
console.error(err, e);
} finally {
isDeleting = false;
}
}}
>
Delete
</Button>
<Button
help="Restores these changes into your working directory"
icon="plus-small"
color="primary"
kind="outlined"
loading={isApplying}
on:click={async () => {
isApplying = true;
try {
await branchController.applyBranch(branch.id);
goto(`/${projectId}/board`);
} catch (e) {
const err = 'Failed to apply branch';
toast.error(err);
console.error(err, e);
} finally {
isApplying = false;
}
}}
>
Apply
</Button>
{:else}
<div class="header__buttons">
<BranchHeaderSecondaryActions
{visible}
{isUnapplied}
{branch}
{branchController}
{projectId}
bind:isLaneCollapsed
bind:meatballButton
/>
</div>
{/if}
</div>
</div> </div>
</div> </div>
<div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region />
</div> </div>
<div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region /> {/if}
</div>
<style lang="postcss"> <style lang="postcss">
.header__wrapper { .header__wrapper {
@ -443,13 +450,13 @@
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
} }
} }
/*
.branch-popup-menu { .branch-popup-menu {
position: absolute; position: absolute;
top: calc(100% + var(--space-4)); top: calc(100% + var(--space-4));
right: 0; right: 0;
z-index: 10; z-index: 10;
} } */
.header__remote-branch { .header__remote-branch {
color: var(--clr-theme-scale-ntrl-50); color: var(--clr-theme-scale-ntrl-50);
@ -462,56 +469,6 @@
align-items: center; align-items: center;
} }
.status-tag {
cursor: default;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
border-radius: var(--radius-m);
}
.pending {
color: var(--clr-theme-scale-pop-30);
background: var(--clr-theme-scale-pop-80);
}
.pending-name {
background: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent);
border-radius: var(--radius-m);
line-height: 120%;
height: var(--space-20);
display: flex;
align-items: center;
padding: 0 var(--space-6);
overflow: hidden;
& span {
overflow: hidden;
text-overflow: ellipsis;
}
}
.pending {
color: var(--clr-theme-scale-ntrl-30);
background: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 20%, transparent);
}
.integrated {
color: var(--clr-theme-succ-on-element);
background: var(--clr-theme-succ-element);
}
.remote {
color: var(--clr-theme-scale-ntrl-100);
background: var(--clr-theme-scale-ntrl-40);
}
.unapplied {
color: var(--clr-theme-scale-ntrl-30);
background: var(--clr-theme-scale-ntrl-80);
}
.pr-status { .pr-status {
cursor: default; cursor: default;
} }

63
gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte Normal file
View File

@ -0,0 +1,63 @@
<script lang="ts">
import BranchLanePopupMenu from './BranchLanePopupMenu.svelte';
import { clickOutside } from '$lib/clickOutside';
import Button from '$lib/components/Button.svelte';
import type { BranchController } from '$lib/vbranches/branchController';
import type { Branch } from '$lib/vbranches/types';
export let isLaneCollapsed = false;
export let visible = false;
export let isUnapplied = false;
export let branch: Branch;
export let branchController: BranchController;
export let projectId: string;
export let meatballButton: HTMLDivElement;
</script>
<div style="display: contents;">
<Button
icon="fold-lane"
kind="outlined"
color="neutral"
help="Fold this lane"
on:click={() => {
isLaneCollapsed = !isLaneCollapsed;
}}
/>
<Button
icon="kebab"
kind="outlined"
color="neutral"
on:click={() => {
console.log('meatballButton', meatballButton);
visible = !visible;
}}
/>
<div
class="branch-popup-menu"
use:clickOutside={{
trigger: meatballButton,
handler: () => (visible = false)
}}
>
<BranchLanePopupMenu
{branchController}
{branch}
{projectId}
{isUnapplied}
bind:visible
on:action
/>
</div>
</div>
<style lang="post-css">
.branch-popup-menu {
position: absolute;
top: calc(100% + var(--space-4));
right: 0;
z-index: 10;
}
</style>

6
gitbutler-ui/src/lib/components/BranchLabel.svelte
View File

@ -24,7 +24,7 @@
</script> </script>
{#if inputActive} {#if inputActive}
<span class="branch-name-mesure-el text-base-13" bind:this={mesureEl}>{name}</span> <span class="branch-name-mesure-el text-base-13 text-bold" bind:this={mesureEl}>{name}</span>
<input <input
type="text" type="text"
{disabled} {disabled}
@ -39,7 +39,7 @@
} }
}} }}
title={name} title={name}
class="branch-name-input text-base-13" class="branch-name-input text-base-13 text-bold"
on:dblclick|stopPropagation on:dblclick|stopPropagation
on:blur={() => (inputActive = false)} on:blur={() => (inputActive = false)}
on:keydown={(e) => { on:keydown={(e) => {
@ -64,7 +64,7 @@
bind:this={label} bind:this={label}
role="textbox" role="textbox"
tabindex="0" tabindex="0"
class="branch-name text-base-13 truncate" class="branch-name text-base-13 text-bold truncate"
on:keydown={(e) => e.key == 'Enter' && activateInput()} on:keydown={(e) => e.key == 'Enter' && activateInput()}
on:click={activateInput} on:click={activateInput}
> >

31
gitbutler-ui/src/lib/components/Tag.svelte
View File

@ -77,7 +77,7 @@
} }
.clickable { .clickable {
cursor: default; cursor: default;
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-container-sub); background: var(--clr-theme-container-sub);
} }
} }
@ -86,7 +86,7 @@
.ghost { .ghost {
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%); background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%);
} }
&.tag-border { &.tag-border {
@ -97,7 +97,7 @@
.light { .light {
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%); background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 75%); background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 75%);
} }
&.tag-border { &.tag-border {
@ -108,7 +108,7 @@
.dark { .dark {
color: var(--clr-theme-scale-ntrl-100); color: var(--clr-theme-scale-ntrl-100);
background: var(--clr-theme-scale-ntrl-40); background: var(--clr-theme-scale-ntrl-40);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-scale-ntrl-30); background: var(--clr-theme-scale-ntrl-30);
} }
} }
@ -116,7 +116,7 @@
.success { .success {
color: var(--clr-theme-scale-succ-20); color: var(--clr-theme-scale-succ-20);
background: color-mix(in srgb, var(--clr-core-succ-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-succ-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-succ-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-succ-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -125,7 +125,7 @@
&.filled { &.filled {
color: var(--clr-theme-succ-on-element); color: var(--clr-theme-succ-on-element);
background: var(--clr-theme-succ-element); background: var(--clr-theme-succ-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-succ-element-dim); background: var(--clr-theme-succ-element-dim);
} }
} }
@ -134,7 +134,7 @@
.error { .error {
color: var(--clr-theme-scale-err-20); color: var(--clr-theme-scale-err-20);
background: color-mix(in srgb, var(--clr-core-err-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-err-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-err-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-err-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -143,7 +143,7 @@
&.filled { &.filled {
color: var(--clr-theme-err-on-element); color: var(--clr-theme-err-on-element);
background: var(--clr-theme-err-element); background: var(--clr-theme-err-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-err-element-dim); background: var(--clr-theme-err-element-dim);
} }
} }
@ -152,7 +152,7 @@
.warning { .warning {
color: var(--clr-theme-scale-warn-20); color: var(--clr-theme-scale-warn-20);
background: color-mix(in srgb, var(--clr-core-warn-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-warn-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-warn-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-warn-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -161,7 +161,7 @@
&.filled { &.filled {
color: var(--clr-theme-warn-on-element); color: var(--clr-theme-warn-on-element);
background: var(--clr-theme-warn-element); background: var(--clr-theme-warn-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-warn-element-dim); background: var(--clr-theme-warn-element-dim);
} }
} }
@ -170,7 +170,7 @@
.purple { .purple {
color: var(--clr-theme-scale-purple-20); color: var(--clr-theme-scale-purple-20);
background: color-mix(in srgb, var(--clr-core-purple-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-purple-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-purple-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-purple-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -179,7 +179,7 @@
&.filled { &.filled {
color: var(--clr-theme-purple-on-element); color: var(--clr-theme-purple-on-element);
background: var(--clr-theme-purple-element); background: var(--clr-theme-purple-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-purple-element-dim); background: var(--clr-theme-purple-element-dim);
} }
} }
@ -188,7 +188,7 @@
.pop { .pop {
color: var(--clr-theme-scale-pop-20); color: var(--clr-theme-scale-pop-20);
background: color-mix(in srgb, var(--clr-core-pop-50), transparent 80%); background: color-mix(in srgb, var(--clr-core-pop-50), transparent 80%);
&:hover { &:not(.not-button):hover {
background: color-mix(in srgb, var(--clr-core-pop-50), transparent 70%); background: color-mix(in srgb, var(--clr-core-pop-50), transparent 70%);
} }
&.tag-border { &.tag-border {
@ -197,7 +197,7 @@
&.filled { &.filled {
color: var(--clr-theme-pop-on-element); color: var(--clr-theme-pop-on-element);
background: var(--clr-theme-pop-element); background: var(--clr-theme-pop-element);
&:hover { &:not(.not-button):hover {
background: var(--clr-theme-pop-element-dim); background: var(--clr-theme-pop-element-dim);
} }
} }
@ -206,11 +206,10 @@
/* modifiers */ /* modifiers */
.not-button { .not-button {
pointer-events: none; user-select: none;
} }
.disabled { .disabled {
pointer-events: none;
background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent); background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent);
color: var(--clr-core-ntrl-50); color: var(--clr-core-ntrl-50);
} }

10
gitbutler-ui/src/lib/icons/icons.json
View File

@ -69,5 +69,13 @@
"removed-branch-small": "M3.38588 10.6431L8.00002 7.87463L12.6142 10.6431L13.3859 9.35687L9.45775 6.99999L13.3859 4.64311L12.6141 3.35687L8.00002 6.12534L3.38589 3.35687L2.61415 4.64311L6.54228 6.99999L2.61414 9.35687L3.38588 10.6431Z M8.75002 13V9.99999H7.25002V13H8.75002Z", "removed-branch-small": "M3.38588 10.6431L8.00002 7.87463L12.6142 10.6431L13.3859 9.35687L9.45775 6.99999L13.3859 4.64311L12.6141 3.35687L8.00002 6.12534L3.38589 3.35687L2.61415 4.64311L6.54228 6.99999L2.61414 9.35687L3.38588 10.6431Z M8.75002 13V9.99999H7.25002V13H8.75002Z",
"target": "M5.24988 7.99805C5.24988 6.47926 6.48109 5.24805 7.99988 5.24805C9.51866 5.24805 10.7499 6.47926 10.7499 7.99805C10.7499 9.51683 9.51866 10.748 7.99988 10.748C6.48109 10.748 5.24988 9.51683 5.24988 7.99805ZM7.99988 6.74805C7.30952 6.74805 6.74988 7.30769 6.74988 7.99805C6.74988 8.6884 7.30952 9.24805 7.99988 9.24805C8.69023 9.24805 9.24988 8.6884 9.24988 7.99805C9.24988 7.30769 8.69023 6.74805 7.99988 6.74805Z M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM8 3.75C5.65279 3.75 3.75 5.65279 3.75 8C3.75 10.3472 5.65279 12.25 8 12.25C10.3472 12.25 12.25 10.3472 12.25 8C12.25 5.65279 10.3472 3.75 8 3.75Z", "target": "M5.24988 7.99805C5.24988 6.47926 6.48109 5.24805 7.99988 5.24805C9.51866 5.24805 10.7499 6.47926 10.7499 7.99805C10.7499 9.51683 9.51866 10.748 7.99988 10.748C6.48109 10.748 5.24988 9.51683 5.24988 7.99805ZM7.99988 6.74805C7.30952 6.74805 6.74988 7.30769 6.74988 7.99805C6.74988 8.6884 7.30952 9.24805 7.99988 9.24805C8.69023 9.24805 9.24988 8.6884 9.24988 7.99805C9.24988 7.30769 8.69023 6.74805 7.99988 6.74805Z M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM8 3.75C5.65279 3.75 3.75 5.65279 3.75 8C3.75 10.3472 5.65279 12.25 8 12.25C10.3472 12.25 12.25 10.3472 12.25 8C12.25 5.65279 10.3472 3.75 8 3.75Z",
"pin": "M4.65842 2.07243L1.94734 4.78351C1.1397 5.59115 1.1397 6.9006 1.94735 7.70824C2.47262 8.23351 3.22365 8.4253 3.91415 8.25174L4.95432 9.82158C4.42239 10.6621 4.53518 11.7726 5.25174 12.4892C6.09106 13.3285 7.45187 13.3285 8.29119 12.4892L9.79734 10.983L13.3089 14.4946L14.3696 13.4339L10.858 9.92235L12.3641 8.41628C13.2034 7.57697 13.2034 6.21616 12.3641 5.37685C11.6475 4.66024 10.5369 4.54748 9.69633 5.07953L8.12657 4.03941C8.30021 3.34887 8.10844 2.59775 7.58312 2.07243C6.77549 1.2648 5.46605 1.2648 4.65842 2.07243ZM3.00801 5.84417L5.71908 3.13309C5.94093 2.91124 6.30061 2.91124 6.52246 3.13309C6.71029 3.32092 6.74288 3.61383 6.60094 3.83835L6.16002 4.53577L9.75834 6.92001L10.4452 6.38456C10.7036 6.18309 11.0717 6.2058 11.3034 6.43751C11.5569 6.69104 11.5569 7.10209 11.3034 7.35562L7.23053 11.4285C6.97699 11.682 6.56594 11.682 6.3124 11.4285C6.08069 11.1968 6.05798 10.8287 6.25944 10.5703L7.98437 8.59718L6.95997 7.54196L5.94244 8.59718L5.18683 7.45682L5.95283 6.73243L4.92218 5.64258L3.90389 6.60557L3.71328 6.72606C3.48875 6.86801 3.19584 6.83541 3.00801 6.64758C2.78615 6.42572 2.78615 6.06602 3.00801 5.84417Z", "pin": "M4.65842 2.07243L1.94734 4.78351C1.1397 5.59115 1.1397 6.9006 1.94735 7.70824C2.47262 8.23351 3.22365 8.4253 3.91415 8.25174L4.95432 9.82158C4.42239 10.6621 4.53518 11.7726 5.25174 12.4892C6.09106 13.3285 7.45187 13.3285 8.29119 12.4892L9.79734 10.983L13.3089 14.4946L14.3696 13.4339L10.858 9.92235L12.3641 8.41628C13.2034 7.57697 13.2034 6.21616 12.3641 5.37685C11.6475 4.66024 10.5369 4.54748 9.69633 5.07953L8.12657 4.03941C8.30021 3.34887 8.10844 2.59775 7.58312 2.07243C6.77549 1.2648 5.46605 1.2648 4.65842 2.07243ZM3.00801 5.84417L5.71908 3.13309C5.94093 2.91124 6.30061 2.91124 6.52246 3.13309C6.71029 3.32092 6.74288 3.61383 6.60094 3.83835L6.16002 4.53577L9.75834 6.92001L10.4452 6.38456C10.7036 6.18309 11.0717 6.2058 11.3034 6.43751C11.5569 6.69104 11.5569 7.10209 11.3034 7.35562L7.23053 11.4285C6.97699 11.682 6.56594 11.682 6.3124 11.4285C6.08069 11.1968 6.05798 10.8287 6.25944 10.5703L7.98437 8.59718L6.95997 7.54196L5.94244 8.59718L5.18683 7.45682L5.95283 6.73243L4.92218 5.64258L3.90389 6.60557L3.71328 6.72606C3.48875 6.86801 3.19584 6.83541 3.00801 6.64758C2.78615 6.42572 2.78615 6.06602 3.00801 5.84417Z",
"draggable-horizontal-narrow": "M4 4.25C4 3.83579 4.33579 3.5 4.75 3.5H11.25C11.6642 3.5 12 3.83579 12 4.25C12 4.66421 11.6642 5 11.25 5H4.75C4.33579 5 4 4.66421 4 4.25Z M4 8.25C4 7.83579 4.33579 7.5 4.75 7.5H11.25C11.6642 7.5 12 7.83579 12 8.25C12 8.66421 11.6642 9 11.25 9H4.75C4.33579 9 4 8.66421 4 8.25Z M4 12.25C4 11.8358 4.33579 11.5 4.75 11.5H11.25C11.6642 11.5 12 11.8358 12 12.25C12 12.6642 11.6642 13 11.25 13H4.75C4.33579 13 4 12.6642 4 12.25Z" "draggable-horizontal-narrow": "M4 4.25C4 3.83579 4.33579 3.5 4.75 3.5H11.25C11.6642 3.5 12 3.83579 12 4.25C12 4.66421 11.6642 5 11.25 5H4.75C4.33579 5 4 4.66421 4 4.25Z M4 8.25C4 7.83579 4.33579 7.5 4.75 7.5H11.25C11.6642 7.5 12 7.83579 12 8.25C12 8.66421 11.6642 9 11.25 9H4.75C4.33579 9 4 8.66421 4 8.25Z M4 12.25C4 11.8358 4.33579 11.5 4.75 11.5H11.25C11.6642 11.5 12 11.8358 12 12.25C12 12.6642 11.6642 13 11.25 13H4.75C4.33579 13 4 12.6642 4 12.25Z",
"fold-lane": "M3 2C1.89543 2 1 2.89543 1 4V12C1 13.1046 1.89543 14 3 14H4C5.10457 14 6 13.1046 6 12V4C6 2.89543 5.10457 2 4 2H3ZM4 3.5H3C2.72386 3.5 2.5 3.72386 2.5 4V12C2.5 12.2761 2.72386 12.5 3 12.5H4C4.27614 12.5 4.5 12.2761 4.5 12V4C4.5 3.72386 4.27614 3.5 4 3.5Z M12.75 2C12.3358 2 12 2.33579 12 2.75C12 3.16421 12.3358 3.5 12.75 3.5H13C13.2761 3.5 13.5 3.72386 13.5 4V4.25C13.5 4.66421 13.8358 5 14.25 5C14.6642 5 15 4.66421 15 4.25V4C15 2.89543 14.1046 2 13 2H12.75Z M15 11.75C15 11.3358 14.6642 11 14.25 11C13.8358 11 13.5 11.3358 13.5 11.75V12C13.5 12.2761 13.2761 12.5 13 12.5H12.75C12.3358 12.5 12 12.8358 12 13.25C12 13.6642 12.3358 14 12.75 14H13C14.1046 14 15 13.1046 15 12V11.75Z M14.25 6.5C13.8358 6.5 13.5 6.83579 13.5 7.25V8.75C13.5 9.16421 13.8358 9.5 14.25 9.5C14.6642 9.5 15 9.16421 15 8.75V7.25C15 6.83579 14.6642 6.5 14.25 6.5Z M9.75 12.5C10.1642 12.5 10.5 12.8358 10.5 13.25C10.5 13.6642 10.1642 14 9.75 14H8.25C7.83579 14 7.5 13.6642 7.5 13.25C7.5 12.8358 7.83579 12.5 8.25 12.5H9.75Z M10.5 2.75C10.5 2.33579 10.1642 2 9.75 2H8.25C7.83579 2 7.5 2.33579 7.5 2.75C7.5 3.16421 7.83579 3.5 8.25 3.5H9.75C10.1642 3.5 10.5 3.16421 10.5 2.75Z",
"unfold-lane": "M4 2.75C4 2.33579 3.66421 2 3.25 2H3C1.89543 2 1 2.89543 1 4V4.25C1 4.66421 1.33579 5 1.75 5C2.16421 5 2.5 4.66421 2.5 4.25V4C2.5 3.72386 2.72386 3.5 3 3.5H3.25C3.66421 3.5 4 3.16421 4 2.75Z M1.75 11C1.33579 11 1 11.3358 1 11.75V12C1 13.1046 1.89543 14 3 14H3.25C3.66421 14 4 13.6642 4 13.25C4 12.8358 3.66421 12.5 3.25 12.5H3C2.72386 12.5 2.5 12.2761 2.5 12V11.75C2.5 11.3358 2.16421 11 1.75 11Z M1.75 6.5C2.16421 6.5 2.5 6.83579 2.5 7.25V8.75C2.5 9.16421 2.16421 9.5 1.75 9.5C1.33579 9.5 1 9.16421 1 8.75V7.25C1 6.83579 1.33579 6.5 1.75 6.5Z M6.25 12.5C5.83579 12.5 5.5 12.8358 5.5 13.25C5.5 13.6642 5.83579 14 6.25 14H8.75C8.78211 14 8.81375 13.998 8.84479 13.9941C8.89601 13.998 8.94777 14 9 14H13C14.1046 14 15 13.1046 15 12V4C15 2.89543 14.1046 2 13 2H9C8.94777 2 8.89601 2.002 8.84479 2.00593C8.81375 2.00202 8.78211 2 8.75 2H6.25C5.83579 2 5.5 2.33579 5.5 2.75C5.5 3.16421 5.83579 3.5 6.25 3.5H7.06301C7.02188 3.65981 7 3.82735 7 4V12C7 12.1726 7.02188 12.3402 7.06301 12.5H6.25ZM9 3.5H13C13.2761 3.5 13.5 3.72386 13.5 4V12C13.5 12.2761 13.2761 12.5 13 12.5H9C8.72386 12.5 8.5 12.2761 8.5 12V4C8.5 3.72386 8.72386 3.5 9 3.5Z",
"merged-pr-small": "M6.32237 6.86159C7.29909 6.52151 8 5.59261 8 4.5C8 3.11929 6.88071 2 5.5 2C4.11929 2 3 3.11929 3 4.5C3 5.61941 3.73572 6.56698 4.75 6.88555V13H6.25V8.89185C6.48404 9.01126 6.73846 9.09858 7.00806 9.1476L9.22361 9.55043C9.81797 9.65849 10.25 10.1762 10.25 10.7803V13H11.75V10.7803C11.75 9.45123 10.7995 8.31237 9.49193 8.07462L7.27639 7.6718C6.82616 7.58994 6.46908 7.27305 6.32237 6.86159Z",
"closed-pr-small": "M8.93934 6L6.46967 3.53033L7.53033 2.46967L10 4.93934L12.4697 2.46967L13.5303 3.53033L11.0607 6L13.5303 8.46967L12.4697 9.53033L10 7.06066L7.53033 9.53033L6.46967 8.46967L8.93934 6Z M3.25 4V13H4.75V4H3.25Z M9.25 9V13H10.75V9H9.25Z",
"draft-pr-small": "M10.75 7.88555C11.7643 7.56698 12.5 6.61941 12.5 5.5C12.5 4.11929 11.3807 3 10 3C8.61929 3 7.5 4.11929 7.5 5.5C7.5 6.61941 8.23572 7.56698 9.25 7.88555V10H10.75V7.88555Z M3.25 4V13H4.75V4H3.25Z M9.25 11V13H10.75V11H9.25Z",
"error-small": "M6.49662 2.5C5.95319 2.5 5.43315 2.72114 5.05616 3.11253L3.05954 5.18542C2.70056 5.55811 2.5 6.05543 2.5 6.57289V9.51506C2.5 10.0441 2.70961 10.5516 3.08293 10.9264L5.05988 12.9114C5.43518 13.2882 5.94511 13.5 6.47695 13.5H9.4673C10.0059 13.5 10.5217 13.2828 10.898 12.8975L12.9307 10.8165C13.2957 10.4428 13.5 9.94127 13.5 9.41897V6.58103C13.5 6.05873 13.2957 5.55716 12.9307 5.18353L10.898 3.1025C10.5217 2.71722 10.0059 2.5 9.4673 2.5H6.49662ZM7 7.42857C7 7.98086 7.44771 8.42857 8 8.42857C8.55228 8.42857 9 7.98086 9 7.42857V6C9 5.44771 8.55228 5 8 5C7.44771 5 7 5.44771 7 6V7.42857ZM7 10.1429C7 10.6162 7.38376 11 7.85714 11H8.14286C8.61624 11 9 10.6162 9 10.1429C9 9.66947 8.61624 9.28571 8.14286 9.28571H7.85714C7.38376 9.28571 7 9.66947 7 10.1429Z",
"info-small": "M8 2.5C4.96244 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM9 8.57143C9 8.01914 8.55229 7.57143 8 7.57143C7.44772 7.57143 7 8.01914 7 8.57143V10C7 10.5523 7.44772 11 8 11C8.55229 11 9 10.5523 9 10V8.57143ZM9 5.85714C9 5.38376 8.61625 5 8.14286 5H7.85715C7.38376 5 7 5.38376 7 5.85714C7 6.33053 7.38376 6.71429 7.85714 6.71429H8.14286C8.61625 6.71429 9 6.33053 9 5.85714Z",
"success-small": "M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM7.58583 8.6724C7.48652 8.78274 7.31349 8.78274 7.21418 8.6724L5.55748 6.83161L4.44253 7.83506L6.09924 9.67584C6.79441 10.4483 8.00559 10.4483 8.70077 9.67584L11.5575 6.50172L10.4425 5.49828L7.58583 8.6724Z"
} }

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

@ -4,7 +4,7 @@ export interface ToolTipOptions {
} }
const defaultOptions: Partial<ToolTipOptions> = { const defaultOptions: Partial<ToolTipOptions> = {
delay: 1500 delay: 1200
}; };
export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string | undefined) { export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string | undefined) {