gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-29 20:43:37 +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> </script>
<button <button
class={color + ' ' + classes + ' button'} class={color + ' ' + classes + ' button rounded-md px-2 py-0.5'}
class:small={height === 'small'} class:small={height === 'small'}
class:full-width={width === 'full-width'} class:full-width={width === 'full-width'}
class:pointer-events-none={loading} class:pointer-events-none={loading}
@ -42,8 +42,6 @@
class:justify-start={align == 'left'} class:justify-start={align == 'left'}
class:justify-center={align == 'center'} class:justify-center={align == 'center'}
class:justify-end={align == 'right'} class:justify-end={align == 'right'}
class:px-4={!!$$slots.default}
class:px-2={!$$slots.default}
{tabindex} {tabindex}
> >
{#if loading} {#if loading}

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

@ -40,7 +40,7 @@
<div <div
role="tooltip" 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:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
on:mouseleave={() => { on:mouseleave={() => {
clearTimeout(timeout); clearTimeout(timeout);

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

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

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

@ -8,9 +8,8 @@
</script> </script>
<a <a
class="mx-4 block rounded px-3 py-2 font-semibold"
class:bg-color-3={selected}
{href} {href}
class="mx-4 block rounded px-3 py-2 font-semibold"
style:background-color={selected ? 'var(--bg-surface-highlight)' : undefined} 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" /> <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 { PrService } from '$lib/github/pullrequest';
import type { BaseBranchService, VirtualBranchService } from '$lib/vbranches/branchStoresCache'; import type { BaseBranchService, VirtualBranchService } from '$lib/vbranches/branchStoresCache';
import type { RemoteBranchService } from '$lib/stores/remoteBranches'; import type { RemoteBranchService } from '$lib/stores/remoteBranches';
import ProjectSelector from './ProjectSelector.svelte';
export let vbranchService: VirtualBranchService; export let vbranchService: VirtualBranchService;
export let remoteBranchService: RemoteBranchService; export let remoteBranchService: RemoteBranchService;
@ -42,11 +43,14 @@
role="menu" role="menu"
tabindex="0" 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 --> <!-- Top spacer & drag region -->
</div> </div>
<div class="relative mx-4 mb-4 mt-1"> <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>
<div class="mb-4"> <div class="mb-4">
<DomainButton href={`/${project.id}/board`} icon={IconBranch}>Active branches</DomainButton> <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" class="flex h-full flex-shrink flex-grow flex-col pb-4"
style:background-color="var(--bg-surface)" 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 <div
class="flex w-full items-center justify-between border-b px-2 pb-2" class="flex w-full items-center justify-between border-b px-2 pb-2"
style:border-color="var(--border-surface)" style:border-color="var(--border-surface)"

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

@ -144,7 +144,7 @@ button.active {
} }
.button { .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 { .disabled {
@ -255,7 +255,7 @@ button.active {
@apply bg-[#524C93]/20; @apply bg-[#524C93]/20;
} }
.purple.filled { .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 { .purple.filled:hover {
@apply bg-[#423E7A]; @apply bg-[#423E7A];

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

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