Skip to content

Commit 44dd84c

Browse files
estib-vegaestib-vega
authored
Merge pull request #7901 from gitbutlerapp/e-branch-5
v3: Show the diverged state of the commits
2 parents 6658eed + f3f96ff commit 44dd84c

File tree

7 files changed

+86
-38
lines changed

7 files changed

+86
-38
lines changed

‎apps/desktop/src/components/v3/BranchCard.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
{@const selected = selection.current?.branchName === branch.name}
9696
{@const isNewBranch = !upstreamOnlyCommits.length && !localAndRemoteCommits.length}
9797
{#if !first}
98-
<BranchDividerLine topPatchStatus={commit?.state.type ?? 'LocalOnly'} />
98+
<BranchDividerLine {commit} />
9999
{/if}
100100
<div class="branch-card" class:selected data-series-name={branchName}>
101101
<BranchHeader

‎apps/desktop/src/components/v3/BranchDividerLine.svelte‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<script lang="ts">
2-
import { getColorFromBranchType } from '$components/v3/lib';
3-
import type { CommitStateType } from '$lib/branches/v3';
2+
import { getColorFromCommitState } from '$components/v3/lib';
3+
import type { Commit } from '$lib/branches/v3';
44
55
interface Props {
6-
topPatchStatus: CommitStateType | 'Error';
6+
commit: Commit | null;
77
}
88
9-
const { topPatchStatus }: Props = $props();
9+
const { commit }: Props = $props();
1010
11-
const branchType = $derived<CommitStateType | 'Error'>(topPatchStatus);
12-
const lineColor = $derived(getColorFromBranchType(branchType));
11+
const lineColor = $derived(
12+
commit ? getColorFromCommitState(commit.id, commit.state) : 'var(--clr-commit-local)'
13+
);
1314
</script>
1415

1516
<div class="commit-line" style:--commit-color={lineColor}></div>

‎apps/desktop/src/components/v3/BranchHeader.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
{#snippet children(commit)}
7777
{@const branchType: CommitStateType = commit?.state.type ?? 'LocalOnly'}
7878

79-
<BranchHeaderIcon {branchType} lineTop={isTopBranch ? false : true} />
79+
<BranchHeaderIcon {commit} lineTop={isTopBranch ? false : true} />
8080
<div class="branch-header__content">
8181
<div class="name-line text-14 text-bold">
8282
<BranchLabel

‎apps/desktop/src/components/v3/BranchHeaderIcon.svelte‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
11
<script lang="ts">
2-
import { getColorFromBranchType } from '$components/v3/lib';
2+
import { getColorFromCommitState } from '$components/v3/lib';
33
import Icon from '@gitbutler/ui/Icon.svelte';
4-
import type { CommitStateType } from '$lib/branches/v3';
4+
import type { Commit } from '$lib/branches/v3';
55
66
interface Props {
7-
branchType: CommitStateType;
7+
commit: Commit | null;
88
lineTop?: boolean;
99
lineBottom?: boolean;
1010
}
1111
12-
const { branchType, lineTop = true, lineBottom = true }: Props = $props();
12+
const { commit, lineTop = true, lineBottom = true }: Props = $props();
1313
14-
const color = $derived(getColorFromBranchType(branchType));
14+
const color = $derived(
15+
commit ? getColorFromCommitState(commit.id, commit.state) : 'var(--clr-commit-local)'
16+
);
1517
16-
function getIcon(branchType: CommitStateType) {
17-
switch (branchType) {
18+
const iconName = $derived.by(() => {
19+
switch (commit?.state.type) {
1820
case 'LocalOnly':
1921
return 'branch-local';
2022
case 'LocalAndRemote':
21-
return 'branch-remote';
23+
return commit.state.subject !== commit.id ? 'branch-local' : 'branch-remote';
2224
case 'Integrated':
2325
return 'tick-small';
2426
default:
2527
return 'branch-local';
2628
}
27-
}
29+
});
2830
</script>
2931

3032
<div class="stack__status gap">
@@ -33,7 +35,7 @@
3335
style:--bg-color={lineTop ? color : 'var(--clr-transparent)'}
3436
></div>
3537
<div class="stack__status--icon" style:--bg-color={color}>
36-
<Icon name={getIcon(branchType)} />
38+
<Icon name={iconName} />
3739
</div>
3840
<div
3941
class="stack__status--bar last"

‎apps/desktop/src/components/v3/CommitLine.svelte‎

Lines changed: 56 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { getColorFromBranchType, isLocalAndRemoteCommit } from '$components/v3/lib';
2+
import { getColorFromCommitState, isLocalAndRemoteCommit } from '$components/v3/lib';
33
import Tooltip from '@gitbutler/ui/Tooltip.svelte';
44
import { camelCaseToTitleCase } from '@gitbutler/ui/utils/string';
55
import type { Commit, UpstreamCommit } from '$lib/branches/v3';
@@ -8,20 +8,23 @@
88
commit: Commit | UpstreamCommit;
99
lastCommit?: boolean;
1010
lastBranch?: boolean;
11-
lineColor?: string;
1211
}
1312
14-
const { commit, lastCommit, lastBranch, lineColor }: Props = $props();
13+
const { commit, lastCommit, lastBranch }: Props = $props();
1514
1615
const color = $derived(
17-
lineColor ||
18-
(isLocalAndRemoteCommit(commit)
19-
? getColorFromBranchType(commit.state?.type ?? 'LocalOnly')
20-
: 'var(--clr-commit-upstream)')
21-
);
22-
const dotRhombus = $derived(
23-
isLocalAndRemoteCommit(commit) && commit.state.type === 'LocalAndRemote'
16+
isLocalAndRemoteCommit(commit)
17+
? getColorFromCommitState(commit.id, commit.state)
18+
: 'var(--clr-commit-upstream)'
2419
);
20+
const [localAndRemote, diverged] = $derived.by(() => {
21+
const localAndRemote = isLocalAndRemoteCommit(commit) && commit.state.type === 'LocalAndRemote';
22+
if (localAndRemote) {
23+
const diverged = commit.state.subject !== commit.id;
24+
return [localAndRemote, diverged];
25+
}
26+
return [false, false];
27+
});
2528
2629
const tooltipText = $derived(
2730
!isLocalAndRemoteCommit(commit) ? 'Upstream' : camelCaseToTitleCase(commit.state.type)
@@ -30,13 +33,34 @@
3033

3134
<div class="commit-lines" style:--commit-color={color}>
3235
<div class="top"></div>
33-
<Tooltip text={tooltipText}>
34-
<div class="middle" class:rhombus={dotRhombus}></div>
35-
</Tooltip>
36+
{#if diverged}
37+
<div class="local-shadow-commit-dot">
38+
<Tooltip text={'Diverged'}>
39+
<svg class="shadow-dot" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
40+
<path
41+
d="M0.827119 6.41372C0.0460709 5.63267 0.0460709 4.36634 0.827119 3.58529L3.70602 0.706392C4.48707 -0.0746567 5.7534 -0.0746567 6.53445 0.706392L9.41335 3.58529C10.1944 4.36634 10.1944 5.63267 9.41335 6.41372L6.53445 9.29262C5.7534 10.0737 4.48707 10.0737 3.70602 9.29262L0.827119 6.41372Z"
42+
/>
43+
</svg>
44+
</Tooltip>
45+
<Tooltip text="Diverged">
46+
<svg class="local-dot" viewBox="0 0 11 10" xmlns="http://www.w3.org/2000/svg">
47+
<path
48+
fill-rule="evenodd"
49+
clip-rule="evenodd"
50+
d="M0.740712 8.93256C1.59096 9.60118 2.66337 10 3.82893 10H5.82893C8.59035 10 10.8289 7.76142 10.8289 5C10.8289 2.23858 8.59035 0 5.82893 0H3.82893C2.66237 0 1.58912 0.399504 0.738525 1.06916L1.84289 2.17353C3.40499 3.73562 3.40499 6.26828 1.84289 7.83038L0.740712 8.93256Z"
51+
/>
52+
</svg>
53+
</Tooltip>
54+
</div>
55+
{:else}
56+
<Tooltip text={tooltipText}>
57+
<div class="middle" class:rhombus={localAndRemote}></div>
58+
</Tooltip>
59+
{/if}
3660
<div class="bottom" class:dashed={lastCommit && lastBranch}></div>
3761
</div>
3862

39-
<style>
63+
<style lang="postcss">
4064
.commit-lines {
4165
display: flex;
4266
flex-direction: column;
@@ -72,4 +96,22 @@
7296
transform: rotate(45deg) scale(0.86);
7397
}
7498
}
99+
100+
.local-shadow-commit-dot {
101+
display: flex;
102+
box-sizing: border-box;
103+
margin-left: -11px;
104+
105+
.shadow-dot {
106+
width: 10px;
107+
height: 10px;
108+
fill: var(--clr-commit-shadow);
109+
}
110+
111+
.local-dot {
112+
width: 11px;
113+
height: 10px;
114+
fill: var(--clr-commit-local);
115+
}
116+
}
75117
</style>

‎apps/desktop/src/components/v3/CommitRow.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
lastCommit?: boolean;
2727
lastBranch?: boolean;
2828
selected?: boolean;
29-
lineColor?: string;
3029
opacity?: number;
3130
borderTop?: boolean;
3231
draggable?: boolean;
@@ -43,7 +42,6 @@
4342
lastCommit,
4443
lastBranch,
4544
selected,
46-
lineColor,
4745
opacity,
4846
borderTop,
4947
draggable,
@@ -160,7 +158,7 @@
160158
}
161159
: NON_DRAGGABLE}
162160
>
163-
<CommitLine {commit} {lastCommit} {lastBranch} {lineColor} />
161+
<CommitLine {commit} {lastCommit} {lastBranch} />
164162

165163
<div class="commit-content">
166164
<!-- <button type="button" {onclick} tabindex="0"> -->

‎apps/desktop/src/components/v3/lib.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { CommitStateType, UpstreamCommit, Commit } from '$lib/branches/v3';
1+
import type { UpstreamCommit, Commit, CommitState } from '$lib/branches/v3';
22
import type { PushStatus } from '$lib/stacks/stack';
33

44
const colorMap = {
@@ -8,8 +8,13 @@ const colorMap = {
88
Error: 'var(--clr-theme-err-element)'
99
};
1010

11-
export function getColorFromBranchType(type: CommitStateType | 'Error'): string {
12-
return colorMap[type];
11+
export function getColorFromCommitState(commitId: string, commitState: CommitState): string {
12+
if (commitState.type === 'LocalAndRemote' && commitState.subject !== commitId) {
13+
// Diverged
14+
return colorMap.LocalOnly;
15+
}
16+
17+
return colorMap[commitState.type];
1318
}
1419

1520
export function isUpstreamCommit(commit: Commit | UpstreamCommit): commit is UpstreamCommit {

0 commit comments

Comments
 (0)