mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-18 14:31:30 +03:00
Refactor: Remove vertical orientation as a prop (#3717)
This commit is contained in:
Pavel Laptev
GitHub
parent
5bfb3395a0
commit
f83fa5f669
@ -20,8 +20,7 @@
|
||||
icon="virtual-branch-small"
|
||||
style="neutral"
|
||||
help="These changes are stashed away from your working directory."
|
||||
reversedDirection
|
||||
verticalOrientation={isLaneCollapsed}>unapplied</Tag
|
||||
reversedDirection>unapplied</Tag
|
||||
>
|
||||
{:else if hasIntegratedCommits}
|
||||
<Tag
|
||||
@ -29,16 +28,14 @@
|
||||
style="success"
|
||||
kind="solid"
|
||||
help="These changes have been integrated upstream, update your workspace to make this lane disappear."
|
||||
reversedDirection
|
||||
verticalOrientation={isLaneCollapsed}>Integrated</Tag
|
||||
reversedDirection>Integrated</Tag
|
||||
>
|
||||
{:else}
|
||||
<Tag
|
||||
icon="virtual-branch-small"
|
||||
style="neutral"
|
||||
help="These changes are in your working directory."
|
||||
reversedDirection
|
||||
verticalOrientation={isLaneCollapsed}>Virtual</Tag
|
||||
reversedDirection>Virtual</Tag
|
||||
>
|
||||
{/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}</Tag
|
||||
>
|
||||
@ -58,7 +54,6 @@
|
||||
kind="solid"
|
||||
icon="remote-branch-small"
|
||||
help="At least some of your changes have been pushed"
|
||||
verticalOrientation={isLaneCollapsed}
|
||||
reversedDirection>Remote</Tag
|
||||
>
|
||||
<Tag
|
||||
@ -67,7 +62,6 @@
|
||||
kind="solid"
|
||||
clickable
|
||||
shrinkable
|
||||
verticalOrientation={isLaneCollapsed}
|
||||
on:click={(e) => {
|
||||
const url = $baseBranch?.branchUrl($branch.upstream?.name);
|
||||
if (url) openExternalUrl(url);
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
</script>
|
||||
|
||||
{#if $isLaneCollapsed}
|
||||
<div class="collapsed-lane-wrapper">
|
||||
<div class="collapsed-lane-container">
|
||||
<BranchHeader
|
||||
{isUnapplied}
|
||||
uncommittedChanges={branch.files.length}
|
||||
@ -184,7 +184,7 @@
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<PullRequestCard isLaneCollapsed={$isLaneCollapsed} />
|
||||
<PullRequestCard />
|
||||
<!-- DROPZONES -->
|
||||
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
|
||||
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
|
||||
@ -419,7 +419,7 @@
|
||||
}
|
||||
|
||||
/* COLLAPSED LANE */
|
||||
.collapsed-lane-wrapper {
|
||||
.collapsed-lane-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--size-12);
|
||||
|
||||
@ -47,6 +47,8 @@
|
||||
}
|
||||
|
||||
$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
|
||||
|
||||
let headerInfoHeight = 0;
|
||||
</script>
|
||||
|
||||
{#if $isLaneCollapsed}
|
||||
@ -69,31 +71,32 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="collapsed-lane__info">
|
||||
<div class="collapsed-lane__label-wrap">
|
||||
{#if uncommittedChanges > 0}
|
||||
<Tag style="warning" kind="soft" verticalOrientation help="Uncommitted changes">
|
||||
{uncommittedChanges}
|
||||
{uncommittedChanges == 1 ? 'change' : 'changes'}
|
||||
</Tag>
|
||||
{/if}
|
||||
<div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
|
||||
<div class="collapsed-lane__info" style="width: {headerInfoHeight}px">
|
||||
<div class="collapsed-lane__label-wrap">
|
||||
<h3 class="collapsed-lane__label text-base-13 text-bold">
|
||||
{branch.name}
|
||||
</h3>
|
||||
{#if uncommittedChanges > 0}
|
||||
<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">
|
||||
{branch.name}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="collapsed-lane__info__details">
|
||||
<ActiveBranchStatus
|
||||
branchName={branch.upstreamName ?? branchName}
|
||||
{isUnapplied}
|
||||
{hasIntegratedCommits}
|
||||
remoteExists={!!branch.upstream}
|
||||
isLaneCollapsed={$isLaneCollapsed}
|
||||
/>
|
||||
{#if branch.selectedForChanges}
|
||||
<Tag style="pop" kind="solid" icon="target" verticalOrientation>Default branch</Tag>
|
||||
{/if}
|
||||
<div class="collapsed-lane__info__details">
|
||||
<ActiveBranchStatus
|
||||
branchName={branch.upstreamName ?? branchName}
|
||||
{isUnapplied}
|
||||
{hasIntegratedCommits}
|
||||
remoteExists={!!branch.upstream}
|
||||
isLaneCollapsed={$isLaneCollapsed}
|
||||
/>
|
||||
{#if branch.selectedForChanges}
|
||||
<Tag style="pop" kind="solid" icon="target">Default branch</Tag>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
|
||||
@ -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}
|
||||
</Tag>
|
||||
@ -275,7 +272,6 @@
|
||||
icon={checksTagInfo.icon}
|
||||
style={checksTagInfo.style}
|
||||
kind={checksTagInfo.icon == 'success-small' ? 'solid' : 'soft'}
|
||||
verticalOrientation={isLaneCollapsed}
|
||||
>
|
||||
{checksTagInfo.text}
|
||||
</Tag>
|
||||
@ -286,7 +282,6 @@
|
||||
kind="solid"
|
||||
clickable
|
||||
shrinkable
|
||||
verticalOrientation={isLaneCollapsed}
|
||||
on:click={(e) => {
|
||||
const url = pr?.htmlUrl;
|
||||
if (url) openExternalUrl(url);
|
||||
|
||||
@ -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
|
||||
>
|
||||
<span class="label" class:verticalLabel={verticalOrientation}>
|
||||
<span class="label">
|
||||
<slot />
|
||||
</span>
|
||||
{#if loading}
|
||||
<Icon name="spinner" />
|
||||
{:else if icon}
|
||||
<div class="icon" class:verticalIcon={verticalOrientation}>
|
||||
<div class="icon">
|
||||
<Icon name={icon} spinnerRadius={3.5} />
|
||||
</div>
|
||||
{/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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user