mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-24 01:51:57 +03:00
refactor: replace empty state images with SVG
This commit is contained in:
Pavel Laptev
GitButler
parent
12309e0c9e
commit
1817879788
14
gitbutler-ui/src/lib/assets/empty-state/lane-new.svg
Normal file
14
gitbutler-ui/src/lib/assets/empty-state/lane-new.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.27" d="M42.5343 9C41.7567 9 41.0056 9.53614 40.7388 10.2816L32.641 32.9072C31.0074 37.4715 26.7569 40.9989 21.9453 41.7834L8.56654 43.9649C7.78625 44.0922 7.13197 44.7373 7.01745 45.4924C6.90441 46.2378 7.34999 46.8776 8.0781 47.0153L20.9131 49.4435C25.4316 50.2983 28.5882 53.7737 28.9448 58.2859L30.4808 77.7246C30.5397 78.4703 31.1367 79 31.9183 79C32.7 79 33.4576 78.4703 33.7428 77.7246L41.1748 58.2859C42.8999 53.7737 47.1107 50.2983 51.8884 49.4435L65.46 47.0153C66.2299 46.8776 66.8695 46.2378 66.9825 45.4924C67.097 44.7373 66.6384 44.0922 65.8968 43.9649L53.1796 41.7834C48.606 40.9989 45.4254 37.4715 45.1763 32.9072L43.9411 10.2816C43.9004 9.53614 43.3119 9 42.5343 9Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path opacity="0.17" d="M77.5827 4C77.2198 4 76.8693 4.26807 76.7448 4.64082L72.9658 15.9536C72.2035 18.2357 70.2199 19.9994 67.9745 20.3917L61.7311 21.4825C61.3669 21.5461 61.0616 21.8687 61.0081 22.2462C60.9554 22.6189 61.1633 22.9388 61.5031 23.0077L67.4928 24.2218C69.6014 24.6492 71.0745 26.3868 71.2409 28.643L71.9577 38.3623C71.9852 38.7352 72.2638 39 72.6286 39C72.9933 39 73.3469 38.7352 73.48 38.3623L76.9482 28.643C77.7533 26.3868 79.7183 24.6492 81.9479 24.2218L88.2813 23.0077C88.6406 22.9388 88.9391 22.6189 88.9919 22.2462C89.0453 21.8687 88.8313 21.5461 88.4852 21.4825L82.5505 20.3917C80.4161 19.9994 78.9319 18.2357 78.8156 15.9536L78.2392 4.64082C78.2202 4.26807 77.9456 4 77.5827 4Z" fill="var(--clr-theme-scale-pop-50)"/>
|
||||
<g opacity="0.3">
|
||||
<path d="M97.9768 33.3239C102.873 32.5178 106.96 32.3412 110.009 32.7994C113.098 33.2633 114.865 34.3321 115.564 35.7602C116.318 37.3008 115.974 39.5655 114.127 42.5881C112.31 45.5625 109.187 49.0102 104.955 52.7098C101.75 55.5105 97.936 58.4336 93.6201 61.3824C94.0891 61.9362 94.5043 62.3178 95.1331 62.7701C99.3522 59.869 103.099 56.9883 106.271 54.2156C110.575 50.4531 113.866 46.8512 115.834 43.6308C117.772 40.4586 118.585 37.3834 117.36 34.881C116.222 32.5549 113.61 31.3178 110.306 30.8216C106.964 30.3195 102.646 30.5283 97.6519 31.3505L97.9768 33.3239Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path d="M78.8983 72.7036C78.5715 72.2261 78.0388 71.6063 77.5361 71.1688C74.7406 72.6928 71.839 74.1939 68.8474 75.658C53.8973 82.9747 39.595 87.9495 28.5732 90.0915C23.0549 91.164 18.4165 91.5148 14.9526 91.1251C11.4327 90.729 9.43356 89.6108 8.67958 88.0702L6.88318 88.9494C8.10788 91.4518 11.0349 92.6968 14.729 93.1125C18.4792 93.5345 23.3427 93.1455 28.9548 92.0548C40.1936 89.8705 54.6655 84.8255 69.7266 77.4544C72.8869 75.9077 75.9505 74.3187 78.8983 72.7036Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
</g>
|
||||
<g opacity="0.32">
|
||||
<path d="M88.7418 39.9704C88.9375 39.4059 89.4883 39 90.0585 39C90.6287 39 91.0603 39.4059 91.0901 39.9704L91.9959 57.1012C92.1311 59.6568 93.6308 61.405 93.6149 61.3857C88.8189 64.6623 83.4039 67.9706 77.5195 71.1777C76.6012 70.4115 75.4758 69.8701 74.203 69.6215L64.7906 67.783C64.2567 67.6787 63.9299 67.1943 64.0128 66.6299C64.0968 66.0582 64.5766 65.5698 65.1488 65.4734L74.9599 63.8217C78.4884 63.2277 81.6054 60.557 82.8034 57.1012L88.7418 39.9704Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path d="M78.8869 72.7096C79.5659 73.7402 79.9896 74.9671 80.0928 76.3165L81.2192 91.0343C81.2624 91.599 81.7002 92 82.2735 92C82.8467 92 83.4023 91.599 83.6114 91.0343L89.0615 76.3165C90.3266 72.9001 93.4145 70.2687 96.9182 69.6215L106.871 67.783C107.435 67.6787 107.904 67.1943 107.987 66.6299C108.071 66.0582 107.735 65.5698 107.191 65.4734L97.8651 63.8217C96.8573 63.6433 95.9418 63.2773 95.1491 62.7589C90.3013 66.0931 84.829 69.4544 78.8869 72.7096Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
</g>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M17.53 71.348C13.6703 73.7603 10.104 77.6552 8.35339 80.5212L6.64661 79.4787C8.54831 76.3653 12.3297 72.2396 16.47 69.652L17.53 71.348Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<circle opacity="0.32" cx="51" cy="71" r="3" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
11
gitbutler-ui/src/lib/assets/empty-state/lane-no-changes.svg
Normal file
11
gitbutler-ui/src/lib/assets/empty-state/lane-no-changes.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3044_13588)">
|
||||
<rect opacity="0.32" x="9.9397" y="62.8136" width="91.1362" height="7" transform="rotate(-11.7556 9.9397 62.8136)" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path opacity="0.27" d="M41.2719 20.5983C42.0166 22.7014 40.15 25.4704 36.6371 28.074C41.0057 27.887 44.1988 28.8645 44.9434 30.9675C45.6881 33.0705 43.8215 35.8395 40.3087 38.4432C44.6772 38.2562 47.8703 39.2337 48.615 41.3367C49.9053 44.981 43.3547 50.6251 33.9836 53.9432C24.6126 57.2613 15.9698 56.9969 14.6794 53.3526C13.9348 51.2495 15.8014 48.4805 19.3142 45.8769C14.9457 46.0639 11.7526 45.0864 11.0079 42.9834C10.2633 40.8804 12.1298 38.1114 15.6427 35.5077C11.2742 35.6947 8.08106 34.7172 7.33642 32.6142C6.04605 28.9699 12.5967 23.3258 21.9678 20.0077C31.3388 16.6896 39.9816 16.954 41.2719 20.5983Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path opacity="0.17" d="M46.97 7.26501L87.0563 2.14758L89.1848 18.8209L101.011 25.4781L102.714 40.8168L52.0784 47.2809L46.97 7.26501Z" fill="var(--clr-theme-scale-pop-50)"/>
|
||||
<path opacity="0.5" d="M58.7361 27.0385L69.2679 33.475L78.6941 18.0709" stroke="var(--clr-theme-scale-pop-50)" stroke-width="4"/>
|
||||
<ellipse opacity="0.17" cx="31.386" cy="81.3788" rx="11.999" ry="15.4123" transform="rotate(-134.891 31.386 81.3788)" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path opacity="0.21" d="M97.4642 62.4342L116.948 92.8499L82.0197 95.087L97.4642 62.4342Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path opacity="0.32" fill-rule="evenodd" clip-rule="evenodd" d="M63.1736 95.5492L68.2287 77.4483C68.5396 76.3351 67.8892 75.1806 66.776 74.8697C65.6628 74.5588 64.5083 75.2093 64.1974 76.3225L59.1422 94.4233L45.6582 90.6575L50.7134 72.5567C53.1041 63.9965 61.9815 58.995 70.5418 61.3857C79.102 63.7764 84.1034 72.6539 81.7128 81.2141L76.6576 99.3149L63.1736 95.5492Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
30
gitbutler-ui/src/lib/assets/empty-state/no-branches.svg
Normal file
30
gitbutler-ui/src/lib/assets/empty-state/no-branches.svg
Normal file
@ -0,0 +1,30 @@
|
||||
<svg width="130" height="130" viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2507_35712)">
|
||||
<path opacity="0.45" fill-rule="evenodd" clip-rule="evenodd" d="M32.0002 7.99826C37.523 7.99833 42.0001 12.4755 42 17.9984L41.9997 41.9989L56.9994 41.9983L57 61.9983L21.9995 61.9995L22 17.9981C22.0001 12.4753 26.4773 7.99819 32.0002 7.99826Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path opacity="0.32" fill-rule="evenodd" clip-rule="evenodd" d="M102 27.9983C96.4773 27.9983 92.0003 32.4755 92.0003 37.9984L92.0006 61.9989L77.0005 61.9983L76.9999 81.9983L112.001 81.9995L112 37.9981C112 32.4753 107.523 27.9982 102 27.9983Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<path opacity="0.26" fill-rule="evenodd" clip-rule="evenodd" d="M67 14C72.5228 14 77 18.4772 77 24L77 101L57 101L57 24C57 18.4772 61.4772 14 67 14Z" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<g opacity="0.27">
|
||||
<rect x="87" y="95" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="92" y="112" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="106" y="94" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="79" y="115" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="119" y="109" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="59" y="120" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="69" y="110" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="52" y="112" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="36" y="115" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="46" y="102" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="30" y="101" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="41" y="93" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="109" y="119" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="101" y="105" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="21" y="118" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
<rect x="15" y="101" width="3.20122" height="3.20122" fill="var(--clr-theme-scale-ntrl-60)"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2507_35712">
|
||||
<rect width="130" height="130" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -6,9 +6,10 @@
|
||||
import DropzoneOverlay from './DropzoneOverlay.svelte';
|
||||
import PullRequestCard from './PullRequestCard.svelte';
|
||||
import ScrollableContainer from './ScrollableContainer.svelte';
|
||||
import laneNewSvg from '$lib/assets/empty-state/lane-new.svg?raw';
|
||||
import noChangesSvg from '$lib/assets/empty-state/lane-no-changes.svg?raw';
|
||||
import { ButlerAIProvider } from '$lib/backend/aiProviders';
|
||||
import { Summarizer } from '$lib/backend/summarizer';
|
||||
import ImgThemed from '$lib/components/ImgThemed.svelte';
|
||||
import Resizer from '$lib/components/Resizer.svelte';
|
||||
import { projectAiGenAutoBranchNamingEnabled } from '$lib/config/config';
|
||||
import { projectAiGenEnabled } from '$lib/config/config';
|
||||
@ -283,12 +284,7 @@
|
||||
<div class="new-branch card" data-dnd-ignore>
|
||||
<div class="new-branch__content">
|
||||
<div class="new-branch__image">
|
||||
<ImgThemed
|
||||
imgSet={{
|
||||
light: '/images/lane-new-light.webp',
|
||||
dark: '/images/lane-new-dark.webp'
|
||||
}}
|
||||
/>
|
||||
{@html laneNewSvg}
|
||||
</div>
|
||||
<h2 class="new-branch__title text-base-body-15 text-semibold">
|
||||
This is a new branch.
|
||||
@ -303,12 +299,7 @@
|
||||
<div class="no-changes card" data-dnd-ignore>
|
||||
<div class="new-branch__content">
|
||||
<div class="new-branch__image">
|
||||
<ImgThemed
|
||||
imgSet={{
|
||||
light: '/images/lane-no-changes-light.webp',
|
||||
dark: '/images/lane-no-changes-dark.webp'
|
||||
}}
|
||||
/>
|
||||
{@html noChangesSvg}
|
||||
</div>
|
||||
<h2 class="new-branch__caption text-base-body-13">
|
||||
No uncommitted changes<br />on this branch
|
||||
@ -345,22 +336,6 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="divider-line">
|
||||
<Resizer
|
||||
viewport={rsViewport}
|
||||
direction="right"
|
||||
minWidth={320}
|
||||
sticky
|
||||
defaultLineColor={$selectedFiles.length > 0
|
||||
? 'transparent'
|
||||
: 'var(--clr-theme-container-outline-light)'}
|
||||
on:width={(e) => {
|
||||
laneWidth = e.detail / (16 * $userSettings.zoom);
|
||||
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
|
||||
$defaultBranchWidthRem = laneWidth;
|
||||
}}
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import BranchItem from './BranchItem.svelte';
|
||||
import BranchesHeader from './BranchesHeader.svelte';
|
||||
import noBranchesSvg from '$lib/assets/empty-state/no-branches.svg?raw';
|
||||
import { BranchService } from '$lib/branches/service';
|
||||
import FilterPopupMenu from '$lib/components/FilterPopupMenu.svelte';
|
||||
import ImgThemed from '$lib/components/ImgThemed.svelte';
|
||||
import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
|
||||
import TextBox from '$lib/components/TextBox.svelte';
|
||||
import { GitHubService } from '$lib/github/service';
|
||||
@ -175,12 +175,7 @@
|
||||
{:else if $branches$.length > 0}
|
||||
<div class="branch-list__empty-state">
|
||||
<div class="branch-list__empty-state__image">
|
||||
<ImgThemed
|
||||
imgSet={{
|
||||
light: '/images/no-branches-light.webp',
|
||||
dark: '/images/no-branches-dark.webp'
|
||||
}}
|
||||
/>
|
||||
{@html noBranchesSvg}
|
||||
</div>
|
||||
<span class="branch-list__empty-state__caption text-base-body-14 text-semibold"
|
||||
>No branches match your filter</span
|
||||
@ -189,12 +184,7 @@
|
||||
{:else}
|
||||
<div class="branch-list__empty-state">
|
||||
<div class="branch-list__empty-state__image">
|
||||
<ImgThemed
|
||||
imgSet={{
|
||||
light: '/images/no-branches-light.webp',
|
||||
dark: '/images/no-branches-dark.webp'
|
||||
}}
|
||||
/>
|
||||
{@html noBranchesSvg}
|
||||
</div>
|
||||
<span class="branch-list__empty-state__caption text-base-body-14 text-semibold"
|
||||
>You have no branches</span
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue
Block a user