gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-18 14:31:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Remove vertical orientation as a prop (#3717)

Browse Source
This commit is contained in:
Pavel Laptev 2024-05-07 00:51:34 +02:00 committed by GitHub
parent 5bfb3395a0
commit f83fa5f669
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 51 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/lib/components/ActiveBranchStatus.svelte
View File

@ -20,8 +20,7 @@
icon="virtual-branch-small" icon="virtual-branch-small"
style="neutral" style="neutral"
help="These changes are stashed away from your working directory." help="These changes are stashed away from your working directory."
reversedDirection reversedDirection>unapplied</Tag
verticalOrientation={isLaneCollapsed}>unapplied</Tag
> >
{:else if hasIntegratedCommits} {:else if hasIntegratedCommits}
<Tag <Tag
@ -29,16 +28,14 @@
style="success" style="success"
kind="solid" kind="solid"
help="These changes have been integrated upstream, update your workspace to make this lane disappear." help="These changes have been integrated upstream, update your workspace to make this lane disappear."
reversedDirection reversedDirection>Integrated</Tag
verticalOrientation={isLaneCollapsed}>Integrated</Tag
> >
{:else} {:else}
<Tag <Tag
icon="virtual-branch-small" icon="virtual-branch-small"
style="neutral" style="neutral"
help="These changes are in your working directory." help="These changes are in your working directory."
reversedDirection reversedDirection>Virtual</Tag
verticalOrientation={isLaneCollapsed}>Virtual</Tag
> >
{/if} {/if}
{#if !isUnapplied && !isLaneCollapsed} {#if !isUnapplied && !isLaneCollapsed}
@ -47,7 +44,6 @@
shrinkable shrinkable
disabled disabled
help="Branch name that will be used when pushing. You can change it from the lane menu." help="Branch name that will be used when pushing. You can change it from the lane menu."
verticalOrientation={isLaneCollapsed}
> >
{$baseBranch.actualPushRemoteName()}/{branchName}</Tag {$baseBranch.actualPushRemoteName()}/{branchName}</Tag
> >
@ -58,7 +54,6 @@
kind="solid" kind="solid"
icon="remote-branch-small" icon="remote-branch-small"
help="At least some of your changes have been pushed" help="At least some of your changes have been pushed"
verticalOrientation={isLaneCollapsed}
reversedDirection>Remote</Tag reversedDirection>Remote</Tag
> >
<Tag <Tag
@ -67,7 +62,6 @@
kind="solid" kind="solid"
clickable clickable
shrinkable shrinkable
verticalOrientation={isLaneCollapsed}
on:click={(e) => { on:click={(e) => {
const url = $baseBranch?.branchUrl($branch.upstream?.name); const url = $baseBranch?.branchUrl($branch.upstream?.name);
if (url) openExternalUrl(url); if (url) openExternalUrl(url);

6
app/src/lib/components/BranchCard.svelte
View File

@ -144,7 +144,7 @@
</script> </script>
{#if $isLaneCollapsed} {#if $isLaneCollapsed}
<div class="collapsed-lane-wrapper"> <div class="collapsed-lane-container">
<BranchHeader <BranchHeader
{isUnapplied} {isUnapplied}
uncommittedChanges={branch.files.length} uncommittedChanges={branch.files.length}
@ -184,7 +184,7 @@
} }
}} }}
/> />
<PullRequestCard isLaneCollapsed={$isLaneCollapsed} /> <PullRequestCard />
<!-- DROPZONES --> <!-- DROPZONES -->
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" /> <DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" /> <DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
@ -419,7 +419,7 @@
} }
/* COLLAPSED LANE */ /* COLLAPSED LANE */
.collapsed-lane-wrapper { .collapsed-lane-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--size-12); padding: var(--size-12);

77
app/src/lib/components/BranchHeader.svelte
View File

@ -47,6 +47,8 @@
} }
$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated); $: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
let headerInfoHeight = 0;
</script> </script>
{#if $isLaneCollapsed} {#if $isLaneCollapsed}
@ -69,31 +71,32 @@
/> />
</div> </div>
<div class="collapsed-lane__info"> <div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
<div class="collapsed-lane__label-wrap"> <div class="collapsed-lane__info" style="width: {headerInfoHeight}px">
{#if uncommittedChanges > 0} <div class="collapsed-lane__label-wrap">
<Tag style="warning" kind="soft" verticalOrientation help="Uncommitted changes"> <h3 class="collapsed-lane__label text-base-13 text-bold">
{uncommittedChanges} {branch.name}
{uncommittedChanges == 1 ? 'change' : 'changes'} </h3>
</Tag> {#if uncommittedChanges > 0}
{/if} <Tag style="warning" kind="soft" help="Uncommitted changes">
{uncommittedChanges}
{uncommittedChanges == 1 ? 'change' : 'changes'}
</Tag>
{/if}
</div>
<h3 class="collapsed-lane__label text-base-13 text-bold"> <div class="collapsed-lane__info__details">
{branch.name} <ActiveBranchStatus
</h3> branchName={branch.upstreamName ?? branchName}
</div> {isUnapplied}
{hasIntegratedCommits}
<div class="collapsed-lane__info__details"> remoteExists={!!branch.upstream}
<ActiveBranchStatus isLaneCollapsed={$isLaneCollapsed}
branchName={branch.upstreamName ?? branchName} />
{isUnapplied} {#if branch.selectedForChanges}
{hasIntegratedCommits} <Tag style="pop" kind="solid" icon="target">Default branch</Tag>
remoteExists={!!branch.upstream} {/if}
isLaneCollapsed={$isLaneCollapsed} </div>
/>
{#if branch.selectedForChanges}
<Tag style="pop" kind="solid" icon="target" verticalOrientation>Default branch</Tag>
{/if}
</div> </div>
</div> </div>
</div> </div>
@ -332,6 +335,8 @@
user-select: none; user-select: none;
align-items: center; align-items: center;
height: 100%; height: 100%;
width: var(--size-48);
overflow: hidden;
gap: var(--size-8); gap: var(--size-8);
padding: var(--size-8) var(--size-8) var(--size-20); 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; .collapsed-lane__info-wrap {
gap: var(--size-8); 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 { .collapsed-lane__info__details {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -388,7 +398,6 @@
.collapsed-lane__label { .collapsed-lane__label {
color: var(--clr-scale-ntrl-0); color: var(--clr-scale-ntrl-0);
transform: rotate(180deg);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

5
app/src/lib/components/PullRequestCard.svelte
View File

@ -20,8 +20,6 @@
import type iconsJson from '../icons/icons.json'; import type iconsJson from '../icons/icons.json';
import type { Readable } from 'svelte/store'; import type { Readable } from 'svelte/store';
export let isLaneCollapsed: boolean;
type StatusInfo = { type StatusInfo = {
text: string; text: string;
icon: keyof typeof iconsJson | undefined; icon: keyof typeof iconsJson | undefined;
@ -266,7 +264,6 @@
icon={prStatusInfo.icon} icon={prStatusInfo.icon}
style={prStatusInfo.style} style={prStatusInfo.style}
kind={prStatusInfo.text !== 'Open' && prStatusInfo.text !== 'Status' ? 'solid' : 'soft'} kind={prStatusInfo.text !== 'Open' && prStatusInfo.text !== 'Status' ? 'solid' : 'soft'}
verticalOrientation={isLaneCollapsed}
> >
{prStatusInfo.text} {prStatusInfo.text}
</Tag> </Tag>
@ -275,7 +272,6 @@
icon={checksTagInfo.icon} icon={checksTagInfo.icon}
style={checksTagInfo.style} style={checksTagInfo.style}
kind={checksTagInfo.icon == 'success-small' ? 'solid' : 'soft'} kind={checksTagInfo.icon == 'success-small' ? 'solid' : 'soft'}
verticalOrientation={isLaneCollapsed}
> >
{checksTagInfo.text} {checksTagInfo.text}
</Tag> </Tag>
@ -286,7 +282,6 @@
kind="solid" kind="solid"
clickable clickable
shrinkable shrinkable
verticalOrientation={isLaneCollapsed}
on:click={(e) => { on:click={(e) => {
const url = pr?.htmlUrl; const url = pr?.htmlUrl;
if (url) openExternalUrl(url); if (url) openExternalUrl(url);

22
app/src/lib/components/Tag.svelte
View File

@ -11,7 +11,6 @@
export let loading = false; export let loading = false;
// Layout props // Layout props
export let shrinkable = false; export let shrinkable = false;
export let verticalOrientation = false;
export let icon: keyof typeof iconsJson | undefined = undefined; export let icon: keyof typeof iconsJson | undefined = undefined;
export let reversedDirection = false; export let reversedDirection = false;
// Style props // Style props
@ -24,7 +23,6 @@
class:disabled class:disabled
class:shrinkable class:shrinkable
class:reversedDirection class:reversedDirection
class:verticalOrientation
class:not-button={!clickable} class:not-button={!clickable}
role={clickable ? 'button' : undefined} role={clickable ? 'button' : undefined}
use:tooltip={help} use:tooltip={help}
@ -32,13 +30,13 @@
on:mousedown on:mousedown
on:contextmenu on:contextmenu
> >
<span class="label" class:verticalLabel={verticalOrientation}> <span class="label">
<slot /> <slot />
</span> </span>
{#if loading} {#if loading}
<Icon name="spinner" /> <Icon name="spinner" />
{:else if icon} {:else if icon}
<div class="icon" class:verticalIcon={verticalOrientation}> <div class="icon">
<Icon name={icon} spinnerRadius={3.5} /> <Icon name={icon} spinnerRadius={3.5} />
</div> </div>
{/if} {/if}
@ -237,20 +235,4 @@
text-overflow: ellipsis; 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;
}
</style> </style>