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

Moving a bit towards Pavel's unfinished nav design

Browse Source
This commit is contained in:
Mattias Granlund 2023-11-17 15:09:37 +01:00
parent 25fd709b9d
commit 6fb83315a6
9 changed files with 111 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/lib/components/Button.svelte
View File

@ -27,7 +27,7 @@
</script>
<button
class={color + ' ' + classes + ' button'}
class={color + ' ' + classes + ' button rounded-md px-2 py-0.5'}
class:small={height === 'small'}
class:full-width={width === 'full-width'}
class:pointer-events-none={loading}
@ -42,8 +42,6 @@
class:justify-start={align == 'left'}
class:justify-center={align == 'center'}
class:justify-end={align == 'right'}
class:px-4={!!$$slots.default}
class:px-2={!$$slots.default}
{tabindex}
>
{#if loading}

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

@ -40,7 +40,7 @@
<div
role="tooltip"
class="inline-block h-fit overflow-auto align-top"
class="inline-block h-fit overflow-auto"
on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
on:mouseleave={() => {
clearTimeout(timeout);

125
packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
View File

@ -1,88 +1,91 @@
<script lang="ts">
import type { Project, ProjectService } from '$lib/backend/projects';
import { page } from '$app/stores';
import type { Project } from '$lib/backend/projects';
import Button from '$lib/components/Button.svelte';
import IconButton from '$lib/components/IconButton.svelte';
import TimeAgo from '$lib/components/TimeAgo.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
import type { PrService } from '$lib/github/pullrequest';
import IconBranch from '$lib/icons/IconBranch.svelte';
import IconDropDown from '$lib/icons/IconDropDown.svelte';
import IconGithub from '$lib/icons/IconGithub.svelte';
import IconRefresh from '$lib/icons/IconRefresh.svelte';
import type { BranchController } from '$lib/vbranches/branchController';
import type { BaseBranchService } from '$lib/vbranches/branchStoresCache';
import ProjectsPopup from './ProjectsPopup.svelte';
export let project: Project;
export let projectService: ProjectService;
export let branchController: BranchController;
export let baseBranchService: BaseBranchService;
export let prService: PrService;
$: base$ = baseBranchService.base$;
$: selected = $page.url.href.endsWith('/base');
$: projects$ = projectService.projects$;
let popup: ProjectsPopup;
let baseContents: HTMLElement;
let fetching = false;
let loading = false;
</script>
<div
class="relative flex flex-col rounded-lg p-3"
style:background-color="var(--bg-card)"
<a
href="/{project.id}/base"
class="relative flex flex-grow items-center gap-x-2 rounded-md px-3 py-1 text-lg"
style:background-color={selected ? 'var(--bg-surface-highlight)' : undefined}
bind:this={baseContents}
>
<div class="flex flex-grow items-center">
<div class="flex flex-grow items-center gap-1">
<a href="/{project.id}/base" class="font-bold">{project.title}</a>
{#if ($base$?.behind || 0) > 0}
<Tooltip label="Unmerged upstream commits">
<div
class="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white"
>
{$base$?.behind}
</div>
</Tooltip>
{/if}
</div>
<div class="flex gap-x-2">
<IconButton
class="items-center justify-center align-top "
icon={IconDropDown}
on:click={() => {
popup.show();
}}
/>
<IconButton
class="items-center justify-center align-top "
on:click={() => {
fetching = true;
branchController.fetchFromTarget().finally(() => (fetching = false));
prService.reload();
}}
<div class="flex items-center gap-1">
{#if $base$?.remoteUrl.includes('github.com')}
<IconGithub class="h-4 w-4" />
{:else}
<IconBranch class="h-4 w-4" />
{/if}
</div>
<div class="font-semibold">
{$base$?.branchName}
</div>
{#if ($base$?.behind || 0) > 0}
<Tooltip label="Unmerged upstream commits">
<div
class="flex h-4 w-4 items-center justify-center rounded-full text-base font-bold"
style:background-color="var(--bg-surface-highlight)"
>
<div class:animate-spin={fetching}>
<IconRefresh class="h-4 w-4" />
</div>
</IconButton>
{$base$?.behind}
</div>
</Tooltip>
<Button
height="small"
color="purple"
{loading}
on:click={async (e) => {
loading = true;
try {
await branchController.updateBaseBranch();
} finally {
loading = false;
}
e.preventDefault();
}}
>
update
</Button>
{/if}
<IconButton
class="items-center justify-center align-top "
on:click={async () => {
fetching = true;
await branchController.fetchFromTarget().finally(() => (fetching = false));
prService.reload();
}}
>
<div class:animate-spin={fetching}>
<IconRefresh class="h-4 w-4" />
</div>
</div>
<div class="flex flex-grow items-center text-sm">
<div class="flex flex-grow items-center gap-1">
{#if $base$?.remoteUrl.includes('github.com')}
<IconGithub class="h-2.5 w-2.5" />
{:else}
<IconBranch class="h-2.5 w-2.5" />
{/if}
{$base$?.branchName}
</div>
<div>
<Tooltip label="Last fetch from upstream">
{#if $base$?.fetchedAt}
<TimeAgo date={$base$.fetchedAt} />
{/if}
</Tooltip>
</div>
</div>
</IconButton>
</a>
<div class="text-color-3 py-0.5 pl-9 text-sm">
<Tooltip label="Last fetch from upstream">
{#if $base$?.fetchedAt}
<TimeAgo date={$base$.fetchedAt} />
{/if}
</Tooltip>
</div>
<ProjectsPopup bind:this={popup} projects={$projects$} />

3
packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
View File

@ -8,9 +8,8 @@
</script>
<a
class="mx-4 block rounded px-3 py-2 font-semibold"
class:bg-color-3={selected}
{href}
class="mx-4 block rounded px-3 py-2 font-semibold"
style:background-color={selected ? 'var(--bg-surface-highlight)' : undefined}
>
<svelte:component this={icon} class="text-color-4 mr-1 inline h-4 w-4 align-middle" />

8
packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
View File

@ -19,6 +19,7 @@
import type { PrService } from '$lib/github/pullrequest';
import type { BaseBranchService, VirtualBranchService } from '$lib/vbranches/branchStoresCache';
import type { RemoteBranchService } from '$lib/stores/remoteBranches';
import ProjectSelector from './ProjectSelector.svelte';
export let vbranchService: VirtualBranchService;
export let remoteBranchService: RemoteBranchService;
@ -42,11 +43,14 @@
role="menu"
tabindex="0"
>
<div class="flex h-7 flex-shrink-0" data-tauri-drag-region>
<div class="flex h-8 flex-shrink-0" data-tauri-drag-region>
<!-- Top spacer & drag region -->
</div>
<div class="relative mx-4 mb-4 mt-1">
<BaseBranchCard {project} {branchController} {baseBranchService} {prService} {projectService} />
<ProjectSelector {project} {projectService} />
</div>
<div class="mx-4 mb-4 mt-1">
<BaseBranchCard {project} {baseBranchService} {branchController} {prService} />
</div>
<div class="mb-4">
<DomainButton href={`/${project.id}/board`} icon={IconBranch}>Active branches</DomainButton>

34
packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte Normal file
View File

@ -0,0 +1,34 @@
<script lang="ts">
import type { Project, ProjectService } from '$lib/backend/projects';
import IconButton from '$lib/components/IconButton.svelte';
import type { PrService } from '$lib/github/pullrequest';
import IconDropDown from '$lib/icons/IconDropDown.svelte';
import ProjectsPopup from './ProjectsPopup.svelte';
export let project: Project;
export let projectService: ProjectService;
$: projects$ = projectService.projects$;
let popup: ProjectsPopup;
</script>
<div
class="flex flex-grow items-center rounded-md p-3"
style:background-color="var(--bg-surface-highlight)"
>
<div class="flex flex-grow items-center gap-1 font-bold">
{project.title}
</div>
<div class="flex gap-x-2">
<IconButton
class="items-center justify-center align-top "
icon={IconDropDown}
on:click={(e) => {
popup.show();
e.preventDefault();
}}
/>
</div>
</div>
<ProjectsPopup bind:this={popup} projects={$projects$} />

2
packages/ui/src/routes/user/+page.svelte
View File

@ -167,7 +167,7 @@
class="flex h-full flex-shrink flex-grow flex-col pb-4"
style:background-color="var(--bg-surface)"
>
<div class="h-8" data-tauri-drag-region></div>
<div class="h-16" data-tauri-drag-region></div>
<div
class="flex w-full items-center justify-between border-b px-2 pb-2"
style:border-color="var(--border-surface)"

4
packages/ui/src/styles/main.postcss
View File

@ -144,7 +144,7 @@ button.active {
}
.button {
@apply relative inline-flex w-fit items-center gap-0.5 whitespace-nowrap rounded py-2 text-base font-medium leading-5 outline-blue-200 transition-none focus:outline-2 dark:outline-blue-500;
@apply relative inline-flex w-fit items-center gap-0.5 whitespace-nowrap rounded-lg py-2 text-base font-medium leading-5 outline-blue-200 transition-none focus:outline-2 dark:outline-blue-500;
}
.disabled {
@ -255,7 +255,7 @@ button.active {
@apply bg-[#524C93]/20;
}
.purple.filled {
@apply border-b border-t border-b-[#3C386D] border-t-[#7570B1] bg-gradient-to-b from-[#5852A0] to-[#474281] text-light-50 no-underline;
@apply border-b border-t bg-purple-500 font-semibold text-light-50 no-underline;
}
.purple.filled:hover {
@apply bg-[#423E7A];

2
packages/ui/tailwind.config.cjs
View File

@ -138,7 +138,7 @@ const config = {
200: '#CFC7F5',
300: '#B8ADF1',
400: '#A193EC',
500: '#8A79E7',
500: '#666ADB',
600: '#5852A0',
700: '#443D7A',
800: '#302854',