gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-10-06 00:47:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add conflict markers to file list view

Browse Source
This commit is contained in:
Mattias Granlund 2023-12-04 11:41:47 +01:00
parent d4a025e6b8
commit d0e391ab82
4 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/lib/icons/Icon.svelte
View File

@ -34,16 +34,16 @@
}
.success {
color: var(--clr-core-succ-40);
color: var(--clr-theme-scale-succ-50);
}
.error {
color: var(--clr-core-err-40);
color: var(--clr-theme-scale-err-50);
}
.pop {
color: var(--clr-core-pop-40);
color: var(--clr-theme-scale-pop-50);
}
.warn {
color: var(--clr-core-warn-40);
color: var(--clr-theme-scale-warn-60);
}
.spinning {

22
packages/ui/src/routes/[projectId]/components/FileListItem.svelte
View File

@ -1,18 +1,14 @@
<script lang="ts">
import { draggableFile } from '$lib/draggables';
import { getVSIFileIcon } from '$lib/ext-icons';
import Icon from '$lib/icons/Icon.svelte';
import { draggable } from '$lib/utils/draggable';
import { computeFileStatus } from '$lib/vbranches/fileStatus';
import type { File } from '$lib/vbranches/types';
import FileStatusCircle from './FileStatusCircle.svelte';
import FileStatusIcons from './FileStatusIcons.svelte';
export let branchId: string;
export let file: File;
export let readonly: boolean;
export let selected: boolean;
$: isLocked = file.hunks.some((h) => h.locked);
</script>
<div
@ -43,16 +39,7 @@
{file.justpath}
</span>
</div>
<div class="icons">
{#if isLocked}
<div class="locked">
<Icon name="locked-small" />
</div>
{/if}
<div class="status">
<FileStatusCircle status={computeFileStatus(file)} />
</div>
</div>
<FileStatusIcons {file} />
</div>
</div>
@ -71,11 +58,6 @@
background: var(--clr-theme-container-pale);
}
}
.icons {
display: flex;
align-items: center;
gap: var(--space-4);
}
.icon {
flex-shrink: 0;
}

38
packages/ui/src/routes/[projectId]/components/FileStatusIcons.svelte Normal file
View File

@ -0,0 +1,38 @@
<script lang="ts">
import Icon from '$lib/icons/Icon.svelte';
import { computeFileStatus } from '$lib/vbranches/fileStatus';
import type { File } from '$lib/vbranches/types';
import FileStatusCircle from './FileStatusCircle.svelte';
export let file: File;
$: isLocked = file.hunks.some((h) => h.locked);
</script>
<div class="file-status">
<div class="file-status__icons">
{#if isLocked}
<div class="locked">
<Icon name="locked-small" color="warn" />
</div>
{/if}
{#if file.conflicted}
<div class="conflicted">
<Icon name="warning-small" color="error" />
</div>
{/if}
</div>
<div class="status">
<FileStatusCircle status={computeFileStatus(file)} />
</div>
</div>
<style lang="postcss">
.file-status {
display: flex;
align-items: center;
gap: var(--space-4);
}
.file-status__icons {
display: flex;
}
</style>

7
packages/ui/src/routes/[projectId]/components/TreeListFile.svelte
View File

@ -3,9 +3,8 @@
import { getVSIFileIcon } from '$lib/ext-icons';
import Icon from '$lib/icons/Icon.svelte';
import { draggable } from '$lib/utils/draggable';
import { computeFileStatus } from '$lib/vbranches/fileStatus';
import type { File } from '$lib/vbranches/types';
import FileStatusCircle from './FileStatusCircle.svelte';
import FileStatusIcons from './FileStatusIcons.svelte';
export let branchId: string;
export let file: File;
@ -40,9 +39,7 @@
<span class="name text-base-12">
{file.filename}
</span>
<div class="status">
<FileStatusCircle status={computeFileStatus(file)} />
</div>
<FileStatusIcons {file} />
</div>
</div>