diff --git a/app/src/lib/components/ActiveBranchStatus.svelte b/app/src/lib/components/ActiveBranchStatus.svelte index ae04f5ab7..9e6c54b7e 100644 --- a/app/src/lib/components/ActiveBranchStatus.svelte +++ b/app/src/lib/components/ActiveBranchStatus.svelte @@ -20,8 +20,7 @@ icon="virtual-branch-small" style="neutral" help="These changes are stashed away from your working directory." - reversedDirection - verticalOrientation={isLaneCollapsed}>unappliedunapplied {:else if hasIntegratedCommits} IntegratedIntegrated {:else} VirtualVirtual {/if} {#if !isUnapplied && !isLaneCollapsed} @@ -47,7 +44,6 @@ shrinkable disabled help="Branch name that will be used when pushing. You can change it from the lane menu." - verticalOrientation={isLaneCollapsed} > {$baseBranch.actualPushRemoteName()}/{branchName} @@ -58,7 +54,6 @@ kind="solid" icon="remote-branch-small" help="At least some of your changes have been pushed" - verticalOrientation={isLaneCollapsed} reversedDirection>Remote { const url = $baseBranch?.branchUrl($branch.upstream?.name); if (url) openExternalUrl(url); diff --git a/app/src/lib/components/BranchCard.svelte b/app/src/lib/components/BranchCard.svelte index 548067cd2..d041f9b79 100644 --- a/app/src/lib/components/BranchCard.svelte +++ b/app/src/lib/components/BranchCard.svelte @@ -144,7 +144,7 @@ {#if $isLaneCollapsed} -
+
- + @@ -419,7 +419,7 @@ } /* COLLAPSED LANE */ - .collapsed-lane-wrapper { + .collapsed-lane-container { display: flex; flex-direction: column; padding: var(--size-12); diff --git a/app/src/lib/components/BranchHeader.svelte b/app/src/lib/components/BranchHeader.svelte index 80ff10856..c01a74dcb 100644 --- a/app/src/lib/components/BranchHeader.svelte +++ b/app/src/lib/components/BranchHeader.svelte @@ -47,6 +47,8 @@ } $: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated); + + let headerInfoHeight = 0; {#if $isLaneCollapsed} @@ -69,31 +71,32 @@ />
-
-
- {#if uncommittedChanges > 0} - - {uncommittedChanges} - {uncommittedChanges == 1 ? 'change' : 'changes'} - - {/if} +
+
+
+

+ {branch.name} +

+ {#if uncommittedChanges > 0} + + {uncommittedChanges} + {uncommittedChanges == 1 ? 'change' : 'changes'} + + {/if} +
-

- {branch.name} -

-
- -
- - {#if branch.selectedForChanges} - Default branch - {/if} +
+ + {#if branch.selectedForChanges} + Default branch + {/if} +
@@ -332,6 +335,8 @@ user-select: none; align-items: center; height: 100%; + width: var(--size-48); + overflow: hidden; gap: var(--size-8); padding: var(--size-8) var(--size-8) var(--size-20); @@ -360,18 +365,23 @@ } } - .collapsed-lane__info { - flex: 1; - display: flex; - flex-direction: row-reverse; - align-items: center; - justify-content: space-between; - height: 100%; + /* */ - writing-mode: vertical-rl; - gap: var(--size-8); + .collapsed-lane__info-wrap { + display: flex; + height: 100%; } + .collapsed-lane__info { + display: flex; + justify-content: space-between; + gap: var(--size-8); + transform: rotate(-90deg); + direction: ltr; + } + + /* */ + .collapsed-lane__info__details { display: flex; flex-direction: row-reverse; @@ -388,7 +398,6 @@ .collapsed-lane__label { color: var(--clr-scale-ntrl-0); - transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/app/src/lib/components/PullRequestCard.svelte b/app/src/lib/components/PullRequestCard.svelte index 36ac5e83d..3576d4692 100644 --- a/app/src/lib/components/PullRequestCard.svelte +++ b/app/src/lib/components/PullRequestCard.svelte @@ -20,8 +20,6 @@ import type iconsJson from '../icons/icons.json'; import type { Readable } from 'svelte/store'; - export let isLaneCollapsed: boolean; - type StatusInfo = { text: string; icon: keyof typeof iconsJson | undefined; @@ -266,7 +264,6 @@ icon={prStatusInfo.icon} style={prStatusInfo.style} kind={prStatusInfo.text !== 'Open' && prStatusInfo.text !== 'Status' ? 'solid' : 'soft'} - verticalOrientation={isLaneCollapsed} > {prStatusInfo.text} @@ -275,7 +272,6 @@ icon={checksTagInfo.icon} style={checksTagInfo.style} kind={checksTagInfo.icon == 'success-small' ? 'solid' : 'soft'} - verticalOrientation={isLaneCollapsed} > {checksTagInfo.text} @@ -286,7 +282,6 @@ kind="solid" clickable shrinkable - verticalOrientation={isLaneCollapsed} on:click={(e) => { const url = pr?.htmlUrl; if (url) openExternalUrl(url); diff --git a/app/src/lib/components/Tag.svelte b/app/src/lib/components/Tag.svelte index 62fe77dce..05a905c1e 100644 --- a/app/src/lib/components/Tag.svelte +++ b/app/src/lib/components/Tag.svelte @@ -11,7 +11,6 @@ export let loading = false; // Layout props export let shrinkable = false; - export let verticalOrientation = false; export let icon: keyof typeof iconsJson | undefined = undefined; export let reversedDirection = false; // Style props @@ -24,7 +23,6 @@ class:disabled class:shrinkable class:reversedDirection - class:verticalOrientation class:not-button={!clickable} role={clickable ? 'button' : undefined} use:tooltip={help} @@ -32,13 +30,13 @@ on:mousedown on:contextmenu > - + {#if loading} {:else if icon} -
+
{/if} @@ -237,20 +235,4 @@ text-overflow: ellipsis; } } - - .verticalOrientation { - writing-mode: vertical-rl; - height: max-content; - width: var(--size-tag); - padding: var(--size-4) var(--size-2); - transform: rotate(180deg); - } - - .verticalIcon { - transform: rotate(90deg); - } - - .verticalLabel { - padding: var(--size-2) 0; - }