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

UI: tooltip styles update, tooltips for sidebar

Browse Source
This commit is contained in:
Pavel Laptev 2024-02-29 02:07:12 +01:00 committed by Mattias Granlund
parent 9a0ccdc1f2
commit e20d5cdc1c
4 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gitbutler-ui/src/lib/components/BaseBranchCard.svelte
View File

@ -2,6 +2,7 @@
import SyncButton from './SyncButton.svelte';
import Badge from '$lib/components/Badge.svelte';
import Icon from '$lib/components/Icon.svelte';
import { tooltip } from '$lib/utils/tooltip';
import type { Project } from '$lib/backend/projects';
import type { GitHubService } from '$lib/github/service';
import type { BaseBranchService } from '$lib/vbranches/branchStoresCache';
@ -18,7 +19,13 @@
let baseContents: HTMLElement;
</script>
<a href="/{project.id}/base" class="base-branch-card" class:selected bind:this={baseContents}>
<a
use:tooltip={isNavCollapsed ? 'Trunk' : ''}
href="/{project.id}/base"
class="base-branch-card"
class:selected
bind:this={baseContents}
>
<img class="icon" src="/images/domain-icons/trunk.svg" alt="" />
{#if !isNavCollapsed}

8
gitbutler-ui/src/lib/components/DomainButton.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import UpdateBaseButton from './UpdateBaseButton.svelte';
import { tooltip } from '$lib/utils/tooltip';
import type { BranchController } from '$lib/vbranches/branchController';
import type { BaseBranchService } from '$lib/vbranches/branchStoresCache';
import { page } from '$app/stores';
@ -17,7 +18,12 @@
$: selected = $page.url.href.includes(href);
</script>
<a {href} class="domain-button text-base-14 text-semibold" class:selected>
<a
use:tooltip={isNavCollapsed ? label : ''}
{href}
class="domain-button text-base-14 text-semibold"
class:selected
>
{#if domain === 'workspace'}
<img class="icon" src={iconSrc} alt="" />

2
gitbutler-ui/src/lib/components/ProjectSelector.svelte
View File

@ -3,6 +3,7 @@
import ProjectsPopup from './ProjectsPopup.svelte';
import { clickOutside } from '$lib/clickOutside';
import Icon from '$lib/components/Icon.svelte';
import { tooltip } from '$lib/utils/tooltip';
import type { Project, ProjectService } from '$lib/backend/projects';
export let project: Project | undefined;
@ -15,6 +16,7 @@
<div
class="wrapper"
use:tooltip={isNavCollapsed ? project?.title : ''}
use:clickOutside={{
handler: () => {
popup.hide();

5
gitbutler-ui/src/styles/tooltip.css
View File

@ -4,10 +4,7 @@
border: 1px solid var(--clr-core-ntrl-30);
color: var(--clr-core-ntrl-60);
display: inline-block;
padding-left: var(--space-8);
padding-right: var(--space-8);
padding-top: var(--space-4);
padding-bottom: var(--space-4);
padding: var(--space-6);
z-index: 50;
max-width: 11.25rem;