mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-10-07 09:27:26 +03:00
refactor: empty board image and layout update
This commit is contained in:
Pavel Laptev
GitButler
parent
693e2e9840
commit
c0219ab2e5
17
gitbutler-ui/src/lib/assets/dzen-pc.svg
Normal file
17
gitbutler-ui/src/lib/assets/dzen-pc.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 237 202" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse opacity="0.14" cx="120.252" cy="194" rx="56.752" ry="8" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M156.177 98.2751L165.429 93.238C177.602 117.164 190.177 106.67 199.411 93.238L211.151 101.365C193.832 123.279 171.907 127.769 156.177 98.2751Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M233.459 76.528C226.114 87.9914 217.95 97.6385 213.264 100.372C213.319 107.54 204.376 102.423 201.93 100.792C199.087 98.7974 193.818 95.034 198.697 91.6099C197.906 91.1864 194.74 89.3879 193.327 86.1631C190.382 79.4441 194.138 74.8972 196.964 76.112C200.671 77.7056 197.575 82.232 200.251 84.4217C201.768 85.6622 205.708 85.6809 206.719 83.1448C207.589 80.9633 207.829 78.0315 204.869 76.4464C201.908 74.8612 199.457 77.4604 197.313 76.0266C194.102 73.8786 197.561 68.134 203.456 68.6845C206.364 68.956 210.279 70.7667 211.742 74.55C213.335 69.7364 213.859 68.1755 215.192 64.281C215.747 62.661 217.52 61.806 219.133 62.3819C220.751 62.9599 221.58 64.7553 220.981 66.3662C218.96 71.8049 217.964 74.6732 215.932 79.1743C218.25 75.1624 219.408 72.9852 221.764 68.2287C222.631 66.4796 224.805 65.8334 226.48 66.8354C228.01 67.7509 228.548 69.7087 227.718 71.2867C225.329 75.8233 224.906 76.8278 221.239 82.7427C224.605 78.7026 225.812 76.0128 228.107 72.724C229.139 71.2447 231.192 71.004 232.635 72.0863C234.027 73.1297 234.397 75.0638 233.459 76.528Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M213.683 82.7417C211.99 85.6232 211.08 86.9411 209.485 89.038M218.3 85.68C216.621 88.1985 214.522 90.717 213.263 91.9763" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M80.822 98.2751L71.5697 93.238C59.3969 117.164 46.822 106.67 37.5875 93.238L25.848 101.365C43.1669 123.279 65.0919 127.769 80.822 98.2751Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M3.54112 76.528C10.8861 87.9914 19.0495 97.6385 23.7361 100.372C23.6808 107.54 32.6236 102.423 35.0694 100.792C37.9132 98.7974 43.182 95.034 38.3027 91.6099C39.0936 91.1864 42.2598 89.3879 43.673 86.1631C46.6176 79.4441 42.8616 74.8972 40.0356 76.112C36.3286 77.7056 39.4252 82.232 36.7485 84.4217C35.232 85.6622 31.2916 85.6809 30.2807 83.1448C29.4112 80.9633 29.1708 78.0315 32.1312 76.4464C35.0915 74.8612 37.5431 77.4604 39.6866 76.0266C42.8978 73.8786 39.439 68.134 33.5439 68.6845C30.636 68.956 26.7208 70.7667 25.2574 74.55C23.6645 69.7364 23.1412 68.1755 21.8077 64.281C21.253 62.661 19.4797 61.806 17.8672 62.3819C16.2487 62.9599 15.4202 64.7553 16.0187 66.3662C18.0393 71.8049 19.0355 74.6732 21.0674 79.1743C18.75 75.1624 17.5922 72.9852 15.2353 68.2287C14.3686 66.4796 12.1951 65.8334 10.5199 66.8354C8.98952 67.7509 8.45126 69.7087 9.282 71.2867C11.6703 75.8233 12.0941 76.8278 15.7608 82.7427C12.3943 78.7026 11.1877 76.0128 8.89279 72.724C7.86055 71.2447 5.80738 71.004 4.36433 72.0863C2.97309 73.1297 2.60292 75.0638 3.54112 76.528Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M23.316 82.7417C25.0087 85.6232 25.9186 86.9411 27.5135 89.038M18.6987 85.68C20.3777 88.1985 22.4765 90.717 23.7357 91.9763" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M163.037 132.273L122.741 101.631L130.297 95.7546C148.486 102.611 183.354 120.772 177.309 138.569C171.265 156.367 126.957 146.283 104.57 138.867C97.1215 153.568 87.3598 158.596 73.9279 158.596L90.718 114.941L163.037 132.273Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M145.385 113.909L73.0655 133.321L88.2132 121.346L90.6769 115.036L95.0635 115.998L114.402 100.598L106.846 94.7219C88.6572 101.578 52.7492 122.861 58.7937 140.658C64.8381 158.456 108.185 146.212 130.572 138.796C138.02 153.496 147.782 158.524 161.214 158.524L145.385 113.909Z" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<rect x="64.9528" y="1.40234" width="107.173" height="99.8894" rx="12" fill="var(--clr-theme-component-illustration-fill)" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M106.572 96.0867V82.5601L118.861 87.7626L130.504 82.5601V96.0867L118.861 90.3639L106.572 96.0867Z" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<rect opacity="0.13" x="72.2352" y="8.68188" width="92.6058" height="69.7145" rx="7.86364" fill="var(--clr-theme-component-illustration-outline)"/>
|
||||
<path d="M91.5356 31.6306C97.4875 35.6829 105.312 35.6829 111.264 31.6306" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M90.276 46.3193L98.7795 54.0498C109.666 63.947 126.293 63.947 137.18 54.0498L145.683 46.3193" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
<path d="M123.856 31.6306C129.808 35.6829 137.633 35.6829 143.585 31.6306" stroke="var(--clr-theme-component-illustration-outline)" stroke-width="1.2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@ -1,9 +1,9 @@
|
||||
<script lang="ts" async="true">
|
||||
import FullscreenLoading from './FullscreenLoading.svelte';
|
||||
import NewBranchDropZone from './NewBranchDropZone.svelte';
|
||||
import dzenSvg from '$lib/assets/dzen-pc.svg?raw';
|
||||
import BranchLane from '$lib/components/BranchLane.svelte';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import ImgThemed from '$lib/components/ImgThemed.svelte';
|
||||
import { cloneWithRotation } from '$lib/dragging/draggable';
|
||||
import { getContextByClass, getContextStoreByClass } from '$lib/utils/context';
|
||||
import { BranchController } from '$lib/vbranches/branchController';
|
||||
@ -118,73 +118,78 @@
|
||||
|
||||
{#if branches.length == 0}
|
||||
<div class="empty-board">
|
||||
<div class="empty-board__image">
|
||||
<ImgThemed
|
||||
<div class="empty-board__image-wrapper">
|
||||
<div class="empty-board__image">
|
||||
{@html dzenSvg}
|
||||
</div>
|
||||
<!-- <ImgThemed
|
||||
imgSet={{
|
||||
light: '/images/dzen-pc-light.webp',
|
||||
dark: '/images/dzen-pc-dark.webp'
|
||||
}}
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<div class="empty-board__about">
|
||||
<h3 class="text-serif-40">You are up to date</h3>
|
||||
<p class="text-base-body-14">
|
||||
Your working directory matches the base branch.
|
||||
<br />
|
||||
Any edits auto-create a virtual branch for easy management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="empty-board__suggestions">
|
||||
<div class="empty-board__suggestions__block">
|
||||
<h3 class="text-base-14 text-bold">Start</h3>
|
||||
<div class="empty-board__suggestions__links">
|
||||
<a
|
||||
class="empty-board__suggestions__link"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
|
||||
>
|
||||
<div class="empty-board__suggestions__link__icon">
|
||||
<Icon name="docs" />
|
||||
</div>
|
||||
|
||||
<span class="text-base-12">GitButler Docs</span>
|
||||
</a>
|
||||
<div
|
||||
class="empty-board__suggestions__link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:keypress={() => open(`vscode://file${projectPath}/`)}
|
||||
on:click={() => open(`vscode://file${projectPath}/`)}
|
||||
>
|
||||
<div class="empty-board__suggestions__link__icon">
|
||||
<Icon name="vscode" />
|
||||
</div>
|
||||
<span class="text-base-12">Open in VSCode</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="empty-board__content">
|
||||
<div class="empty-board__about">
|
||||
<h3 class="text-serif-40">You are up to date</h3>
|
||||
<p class="text-base-body-14">
|
||||
Your working directory matches the base branch.
|
||||
<br />
|
||||
Any edits auto-create a virtual branch for easy management.
|
||||
</p>
|
||||
</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}
|
||||
<div class="empty-board__suggestions">
|
||||
<div class="empty-board__suggestions__block">
|
||||
<h3 class="text-base-14 text-bold">Start</h3>
|
||||
<div class="empty-board__suggestions__links">
|
||||
<a
|
||||
class="empty-board__suggestions__link"
|
||||
href={$baseBranch?.commitUrl(commit.id)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="Open in browser"
|
||||
href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
|
||||
>
|
||||
<div class="empty-board__suggestions__link__icon">
|
||||
<Icon name="commit" />
|
||||
<Icon name="docs" />
|
||||
</div>
|
||||
|
||||
<span class="text-base-12">{commit.description}</span>
|
||||
<span class="text-base-12">GitButler Docs</span>
|
||||
</a>
|
||||
{/each}
|
||||
<div
|
||||
class="empty-board__suggestions__link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:keypress={() => open(`vscode://file${projectPath}/`)}
|
||||
on:click={() => open(`vscode://file${projectPath}/`)}
|
||||
>
|
||||
<div class="empty-board__suggestions__link__icon">
|
||||
<Icon name="vscode" />
|
||||
</div>
|
||||
<span class="text-base-12">Open in VSCode</span>
|
||||
</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>
|
||||
@ -225,21 +230,37 @@
|
||||
.empty-board {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
background-color: var(--clr-theme-container-light);
|
||||
border: 1px solid var(--clr-theme-container-outline-light);
|
||||
border-radius: var(--radius-l);
|
||||
width: 86%;
|
||||
width: 100%;
|
||||
gap: var(--size-48);
|
||||
max-width: 45rem;
|
||||
padding: var(--size-32);
|
||||
padding: var(--size-20) var(--size-32) var(--size-32) var(--size-20);
|
||||
}
|
||||
|
||||
.empty-board__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty-board__image-wrapper {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 11rem;
|
||||
height: auto;
|
||||
border-radius: var(--radius-l);
|
||||
background-color: var(--clr-theme-component-illustration-bg);
|
||||
}
|
||||
|
||||
.empty-board__image {
|
||||
width: 14.125rem;
|
||||
margin-top: var(--size-10);
|
||||
margin-bottom: var(--size-20);
|
||||
transform: translateX(-3rem);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.empty-board__about {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Loading…
Reference in New Issue
Block a user