diff --git a/gitbutler-ui/src/lib/components/ActiveBranchStatus.svelte b/gitbutler-ui/src/lib/components/ActiveBranchStatus.svelte new file mode 100644 index 000000000..c32c69c83 --- /dev/null +++ b/gitbutler-ui/src/lib/components/ActiveBranchStatus.svelte @@ -0,0 +1,93 @@ + + +{#if !branch.upstream} + {#if !branch.active} + unapplied + {:else if hasIntegratedCommits} + integrated + {:else} + virtual + {/if} + {#if !isUnapplied} + + origin/{branch.upstreamName + ? branch.upstreamName + : normalizeBranchName(branch.name)} + {/if} +{:else} + remote + { + const url = base?.branchUrl(branch.upstream?.name); + if (url) open(url); + e.preventDefault(); + e.stopPropagation(); + }} + > + {isLaneCollapsed ? 'View branch' : `origin/${branch.upstream?.name}`} + + {#if prUrl} + { + const url = prUrl; + if (url) open(url); + e.preventDefault(); + e.stopPropagation(); + }} + > + View PR + + {/if} +{/if} diff --git a/gitbutler-ui/src/lib/components/Board.svelte b/gitbutler-ui/src/lib/components/Board.svelte index 9d899d1f5..f9e60fcac 100644 --- a/gitbutler-ui/src/lib/components/Board.svelte +++ b/gitbutler-ui/src/lib/components/Board.svelte @@ -121,6 +121,7 @@ {projectPath} {user} {githubService} + hasNextSibling={branches.find((b) => b.order === branch.order + 1)} > {/each} diff --git a/gitbutler-ui/src/lib/components/BranchCard.svelte b/gitbutler-ui/src/lib/components/BranchCard.svelte index 08c64047f..2be4e9ea4 100644 --- a/gitbutler-ui/src/lib/components/BranchCard.svelte +++ b/gitbutler-ui/src/lib/components/BranchCard.svelte @@ -131,8 +131,6 @@ } let isLaneCollapsed: boolean; - - $: console.log('collapsed', isLaneCollapsed); {#if isLaneCollapsed} @@ -154,156 +152,154 @@ /> {:else} -
+
-
- { - if (e.detail == 'generate-branch-name') { - generateBranchName(); - } - }} - /> - - - - -
- - - {#if branch.files?.length > 0} -
- - {#if branch.active} - { - if (e.detail == 'generate-branch-name') { - generateBranchName(); - } - }} - /> - {/if} -
- {:else if branch.commits.length == 0} -
-
-
- -
-

- This is a new branch. -

-

- You can drag and drop files or parts of files here. -

-
-
- {:else} - -
-
-
- -
-

- No uncommitted changes
on this branch -

-
-
- {/if} -
- - -
-
-
- 0} - minWidth={320} - sticky - on:width={(e) => { - laneWidth = e.detail / (16 * $userSettings.zoom); - lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl - $defaultBranchWidthRem = laneWidth; + { + if (e.detail == 'generate-branch-name') { + generateBranchName(); + } }} /> + + + + +
+ + + {#if branch.files?.length > 0} +
+ + {#if branch.active} + { + if (e.detail == 'generate-branch-name') { + generateBranchName(); + } + }} + /> + {/if} +
+ {:else if branch.commits.length == 0} +
+
+
+ +
+

+ This is a new branch. +

+

+ You can drag and drop files or parts of files here. +

+
+
+ {:else} + +
+
+
+ +
+

+ No uncommitted changes
on this branch +

+
+
+ {/if} +
+ +
+
+ 0} + minWidth={320} + sticky + on:width={(e) => { + laneWidth = e.detail / (16 * $userSettings.zoom); + lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl + $defaultBranchWidthRem = laneWidth; + }} + /> +
{/if} diff --git a/gitbutler-ui/src/lib/components/BranchHeader.svelte b/gitbutler-ui/src/lib/components/BranchHeader.svelte index 49c239520..73bcdae94 100644 --- a/gitbutler-ui/src/lib/components/BranchHeader.svelte +++ b/gitbutler-ui/src/lib/components/BranchHeader.svelte @@ -1,16 +1,18 @@ {#if isLaneCollapsed} -
+
- + +
+
+
+

+ {branch.name} +

+ +
+ + {#if branch.selectedForChanges} + Default branch + {/if} +
+
{:else}
@@ -146,7 +170,14 @@ />
- {#if !branch.upstream} + + + {#if branch.upstream} + {#if prIcon}
{:else}
- { + isLaneCollapsed = true; + }} /> +
{/if}
@@ -435,12 +486,12 @@ gap: var(--space-4); } .draggable { + display: flex; + cursor: grab; position: absolute; right: var(--space-4); top: var(--space-6); opacity: 0; - display: flex; - cursor: grab; color: var(--clr-theme-scale-ntrl-50); transition: opacity var(--transition-slow), @@ -450,13 +501,13 @@ color: var(--clr-theme-scale-ntrl-40); } } - /* + .branch-popup-menu { position: absolute; top: calc(100% + var(--space-4)); right: 0; z-index: 10; - } */ + } .header__remote-branch { color: var(--clr-theme-scale-ntrl-50); @@ -472,4 +523,53 @@ .pr-status { cursor: default; } + + /* COLLAPSABLE LANE */ + + .collapsed-lane { + user-select: none; + align-items: center; + height: 100%; + gap: var(--space-16); + padding: var(--space-8) var(--space-8) var(--space-16); + } + + .collapsed-lane__actions { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-4); + } + .collapsed-lane__draggable { + cursor: grab; + transform: rotate(90deg); + margin-bottom: var(--space-4); + } + + .collapsed-lane__info { + flex: 1; + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + + writing-mode: vertical-rl; + gap: var(--space-8); + /* flex-direction: column-reverse; */ + /* writing-mode: vertical-rl; + background-color: aquamarine; */ + } + + .collapsed-lane__info__details { + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: var(--space-4); + } + + .collapsed-lane__label { + color: var(--clr-theme-scale-ntrl-0); + transform: rotate(180deg); + padding: var(--space-8) 0; + } diff --git a/gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte b/gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte index 8f2007453..046be711d 100644 --- a/gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte +++ b/gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte @@ -18,10 +18,10 @@