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

feat: add ProjectHeader component to display project title and GitHub icon, update SVG components to spread props for reusability

Browse Source
This commit is contained in:
Kiril Videlov 2023-11-02 17:32:30 +01:00 committed by Kiril Videlov
parent dc4fddf81f
commit 232a0dcf01
4 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/src/lib/icons/IconChevronRight.svelte
View File

@ -4,6 +4,7 @@
</script>
<svg
{...$$restProps}
class={className}
xmlns="http://www.w3.org/2000/svg"
width="24"
@ -15,6 +16,6 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 6l6 6l-6 6" />
<path {...$$restProps} stroke="none" d="M0 0h24v24H0z" fill="none" />
<path {...$$restProps} d="M9 6l6 6l-6 6" />
</svg>

2
packages/ui/src/lib/icons/IconGithub.svelte
View File

@ -4,6 +4,7 @@
</script>
<svg
{...$$restProps}
class={className}
width="20"
height="20"
@ -12,6 +13,7 @@
xmlns="http://www.w3.org/2000/svg"
>
<path
{...$$restProps}
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.98091 0.599976C3.45242 0.599976 0.599976 3.47344 0.599976 7.02832C0.599976 9.86992 2.42763 12.2753 4.96308 13.1266C5.28007 13.1906 5.39619 12.9883 5.39619 12.8181C5.39619 12.6691 5.38574 12.1582 5.38574 11.626C3.61072 12.0092 3.24109 10.8597 3.24109 10.8597C2.95583 10.1147 2.53317 9.92321 2.53317 9.92321C1.9522 9.52941 2.57549 9.52941 2.57549 9.52941C3.21993 9.57199 3.55808 10.1893 3.55808 10.1893C4.12847 11.1683 5.04758 10.8917 5.41735 10.7214C5.47011 10.3063 5.63926 10.0189 5.81885 9.85934C4.40314 9.71031 2.91364 9.15691 2.91364 6.68768C2.91364 5.98525 3.16703 5.41055 3.56853 4.9636C3.50518 4.80399 3.28327 4.14401 3.63201 3.26068C3.63201 3.26068 4.17078 3.09036 5.38561 3.92053C5.90572 3.77982 6.4421 3.70824 6.98091 3.70763C7.51968 3.70763 8.06891 3.78221 8.57607 3.92053C9.79103 3.09036 10.3298 3.26068 10.3298 3.26068C10.6785 4.14401 10.4565 4.80399 10.3932 4.9636C10.8052 5.41055 11.0482 5.98525 11.0482 6.68768C11.0482 9.15691 9.55867 9.6996 8.13238 9.85934C8.36487 10.0615 8.56549 10.4446 8.56549 11.0513C8.56549 11.9133 8.55504 12.6052 8.55504 12.818C8.55504 12.9883 8.67129 13.1906 8.98815 13.1267C11.5236 12.2751 13.3513 9.86992 13.3513 7.02832C13.3617 3.47344 10.4988 0.599976 6.98091 0.599976Z"

6
packages/ui/src/routes/[projectId]/board/+page.svelte
View File

@ -3,6 +3,7 @@
import type { PageData } from './$types';
import IconExternalLink from '$lib/icons/IconExternalLink.svelte';
import Board from './Board.svelte';
import ProjectHeader from './ProjectHeader.svelte';
export let data: PageData;
let {
@ -21,6 +22,11 @@
</script>
<div class="flex h-full w-full flex-grow flex-col overflow-hidden">
<ProjectHeader
{projectId}
projectTitle={$project?.title || ''}
isGitHub={$githubContextStore !== undefined}
></ProjectHeader>
{#if $baseBranchStore?.remoteUrl.startsWith('https') && !$httpsWarningBannerDismissed}
<div class="w-full bg-yellow-200/70 px-2 py-1 dark:bg-yellow-700/70">
HTTPS remote detected. In order to push & fetch, you may need to&nbsp;

28
packages/ui/src/routes/[projectId]/board/ProjectHeader.svelte Normal file
View File

@ -0,0 +1,28 @@
<script lang="ts">
import IconChevronRight from '$lib/icons/IconChevronRight.svelte';
import IconGithub from '$lib/icons/IconGithub.svelte';
export let projectId: string;
export let projectTitle: string;
export let isGitHub: boolean;
// Optional page title as a prop instead of a slot to ensure header is always draggable
export let pageTitle: string | undefined = undefined;
</script>
<!-- data-tauri-drag-region needs to be on all elements recursively https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1178574760 -->
<div class="flex h-8 items-center justify-center gap-x-1" data-tauri-drag-region>
<div class="relative flex items-center gap-x-1" data-tauri-drag-region>
{#if isGitHub}
<IconGithub class="h-4 w-4" data-tauri-drag-region></IconGithub>
{/if}
<a data-tauri-drag-region class="cursor-default font-semibold" href={`/${projectId}/board`}>
{projectTitle}</a
>
<!-- Center only the project title to avoid content shift during navigatin -->
<div class="absolute left-full flex items-center" data-tauri-drag-region>
{#if pageTitle}
<IconChevronRight class="h-4 w-4" data-tauri-drag-region></IconChevronRight>
{pageTitle}
{/if}
</div>
</div>
</div>