Merge pull request #3183 from gitbutlerapp/virtual-branch-updates-branch

refactor: Updated empty board layout
This commit is contained in:
Pavel Laptev 2024-03-18 02:21:47 +01:00 committed by GitHub
commit 00f118345a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -117,74 +117,76 @@
{/each} {/each}
{#if branches.length == 0} {#if branches.length == 0}
<div class="empty-board"> <div data-tauri-drag-region class="empty-board__wrapper">
<div class="empty-board__content"> <div class="empty-board">
<div class="empty-board__about"> <div class="empty-board__content">
<h3 class="text-serif-40">You are up to date</h3> <div class="empty-board__about">
<p class="text-base-body-14"> <h3 class="text-serif-40">You are up to date</h3>
Your working directory matches the base branch. <p class="text-base-body-14">
<br /> Your working directory matches the base branch.
Any edits auto-create a virtual branch for easy management. <br />
</p> Any edits auto-create a virtual branch for easy management.
</div> </p>
</div>
<div class="empty-board__suggestions"> <div class="empty-board__suggestions">
<div class="empty-board__suggestions__block"> <div class="empty-board__suggestions__block">
<h3 class="text-base-14 text-bold">Start</h3> <h3 class="text-base-14 text-bold">Start</h3>
<div class="empty-board__suggestions__links"> <div class="empty-board__suggestions__links">
<a <a
class="empty-board__suggestions__link" class="empty-board__suggestions__link"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes" href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
> >
<div class="empty-board__suggestions__link__icon"> <div class="empty-board__suggestions__link__icon">
<Icon name="docs" /> <Icon name="docs" />
</div> </div>
<span class="text-base-12">GitButler Docs</span> <span class="text-base-12">GitButler Docs</span>
</a> </a>
<div <div
class="empty-board__suggestions__link" class="empty-board__suggestions__link"
role="button" role="button"
tabindex="0" tabindex="0"
on:keypress={() => open(`vscode://file${projectPath}/`)} on:keypress={() => open(`vscode://file${projectPath}/`)}
on:click={() => open(`vscode://file${projectPath}/`)} on:click={() => open(`vscode://file${projectPath}/`)}
> >
<div class="empty-board__suggestions__link__icon"> <div class="empty-board__suggestions__link__icon">
<Icon name="vscode" /> <Icon name="vscode" />
</div>
<span class="text-base-12">Open in VSCode</span>
</div> </div>
<span class="text-base-12">Open in VSCode</span> </div>
</div>
<div class="empty-board__suggestions__block">
<h3 class="text-base-14 text-bold">Recent commits</h3>
<div class="empty-board__suggestions__links">
{#each ($baseBranch?.recentCommits || []).slice(0, 4) as commit}
<a
class="empty-board__suggestions__link"
href={$baseBranch?.commitUrl(commit.id)}
target="_blank"
rel="noreferrer"
title="Open in browser"
>
<div class="empty-board__suggestions__link__icon">
<Icon name="commit" />
</div>
<span class="text-base-12">{commit.description}</span>
</a>
{/each}
</div> </div>
</div> </div>
</div> </div>
<div class="empty-board__suggestions__block">
<h3 class="text-base-14 text-bold">Recent commits</h3>
<div class="empty-board__suggestions__links">
{#each ($baseBranch?.recentCommits || []).slice(0, 4) as commit}
<a
class="empty-board__suggestions__link"
href={$baseBranch?.commitUrl(commit.id)}
target="_blank"
rel="noreferrer"
title="Open in browser"
>
<div class="empty-board__suggestions__link__icon">
<Icon name="commit" />
</div>
<span class="text-base-12">{commit.description}</span>
</a>
{/each}
</div>
</div>
</div> </div>
</div>
<div class="empty-board__image-wrapper"> <div data-tauri-drag-region class="empty-board__image-wrapper">
<div class="empty-board__image"> <div class="empty-board__image">
{@html dzenSvg} {@html dzenSvg}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -221,10 +223,19 @@
user-select: auto; user-select: auto;
} }
.empty-board { /* EMPTY BOARD */
user-select: none;
.empty-board__wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
padding: 0 var(--size-40);
}
.empty-board {
display: flex; display: flex;
margin: auto;
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-light); border: 1px solid var(--clr-theme-container-outline-light);
border-radius: var(--radius-l); border-radius: var(--radius-l);
@ -235,6 +246,7 @@
} }
.empty-board__content { .empty-board__content {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;