gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-22 11:02:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor CommitAction component

Browse Source
This commit is contained in:
Pavel Laptev 2024-11-15 16:06:54 +01:00 committed by estib
parent 692c0bd6c6
commit dc043da507
6 changed files with 68 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
apps/desktop/src/lib/commit/CommitAction.svelte
View File

@ -1,43 +1,22 @@
<script lang="ts">
import { intersectionObserver } from '$lib/utils/intersectionObserver';
import { getColorFromBranchType } from '@gitbutler/ui/utils/getColorFromBranchType';
import { type Snippet } from 'svelte';
import type { CellType } from '@gitbutler/ui/commitLines/types';
interface Props {
bottomBorder?: boolean;
backgroundColor?: boolean;
lines: Snippet;
type: CellType;
isLast?: boolean;
action: Snippet;
}
const { bottomBorder = true, backgroundColor = true, lines, action }: Props = $props();
let isNotInViewport = $state(false);
const { type, isLast, action }: Props = $props();
</script>
<div
class="action-row sticky"
class:not-in-viewport={!isNotInViewport}
class:sticky-z-index={!isNotInViewport}
class:bottom-border={bottomBorder}
class:background-color={backgroundColor}
use:intersectionObserver={{
callback: (entry) => {
if (entry?.isIntersecting) {
isNotInViewport = false;
} else {
isNotInViewport = true;
}
},
options: {
root: null,
rootMargin: `-100% 0px 0px 0px`,
threshold: 0
}
}}
>
<div>
{@render lines()}
<div class="action-row" style:--commit-color={getColorFromBranchType(type)}>
<div class="commit-line-wrapper">
<div class="commit-line" class:dashed={isLast}></div>
</div>
<div class="action">
{@render action()}
</div>
@ -47,10 +26,9 @@
.action-row {
position: relative;
display: flex;
background-color: var(--clr-bg-1);
border-top: 1px solid var(--clr-border-3);
overflow: hidden;
transition: border-top var(--transition-fast);
}
.background-color {
@ -61,9 +39,15 @@
display: flex;
flex-direction: column;
width: 100%;
padding-top: 10px;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 10px;
padding-bottom: 14px;
}
.commit-line-wrapper {
position: relative;
margin-left: 20px;
margin-right: 20px;
}
/* MODIFIERS */

62
apps/desktop/src/lib/commit/CommitList.svelte
View File

@ -15,14 +15,13 @@
BranchController,
type SeriesIntegrationStrategy
} from '$lib/vbranches/branchController';
import { DetailedCommit, VirtualBranch, type CommitStatus } from '$lib/vbranches/types';
import { DetailedCommit, VirtualBranch } from '$lib/vbranches/types';
import { getContext } from '@gitbutler/shared/context';
import { getContextStore } from '@gitbutler/shared/context';
import Button from '@gitbutler/ui/Button.svelte';
import Modal from '@gitbutler/ui/Modal.svelte';
import Line from '@gitbutler/ui/commitLines/Line.svelte';
import { LineManagerFactory, LineSpacer } from '@gitbutler/ui/commitLines/lineManager';
import type { Snippet } from 'svelte';
import { LineManagerFactory } from '@gitbutler/ui/commitLines/lineManager';
const integrationStrategies = {
default: {
@ -32,7 +31,7 @@
action: integrate
},
reset: {
label: 'Reset to remote',
label: 'Reset to remote…',
stretegy: 'hardreset',
style: 'error',
action: confirmReset
@ -46,8 +45,6 @@
patches: DetailedCommit[];
seriesName: string;
isUnapplied: boolean;
pushButton?: Snippet<[{ disabled: boolean }]>;
hasConflicts: boolean;
stackingReorderDropzoneManager: StackingReorderDropzoneManager;
isBottom?: boolean;
}
@ -56,8 +53,6 @@
patches,
seriesName,
isUnapplied,
pushButton,
hasConflicts,
stackingReorderDropzoneManager,
isBottom = false
}: Props = $props();
@ -86,9 +81,9 @@
const hasRemoteCommits = $derived(remoteOnlyPatches.length > 0);
let isIntegratingCommits = $state(false);
const topPatch = $derived(patches[0]);
const branchType = $derived<CommitStatus>(topPatch?.status ?? 'local');
const isBranchIntegrated = $derived(branchType === 'integrated');
// const topPatch = $derived(patches[0]);
// const branchType = $derived<CommitStatus>(topPatch?.status ?? 'local');
// const isBranchIntegrated = $derived(branchType === 'integrated');
let confirmResetModal = $state<ReturnType<typeof Modal>>();
@ -139,18 +134,22 @@
isHeadCommit={commit.id === headCommit?.id}
>
{#snippet lines()}
<Line line={lineManager.get(commit.id)} />
<Line
line={lineManager.get(commit.id)}
isBottom={!hasCommits && idx === remoteOnlyPatches.length - 1}
/>
{/snippet}
</CommitCard>
{/each}
{#snippet action()}
{@render integrateUpstreamButton('default')}
{/snippet}
<CommitAction type="remote" isLast={!hasCommits}>
{#snippet action()}
{@render integrateUpstreamButton('default')}
{/snippet}
</CommitAction>
</UpstreamCommitsAccordion>
{/if}
<!-- DIVERGED -->
<!-- REMAINING LOCAL, LOCALANDREMOTE, AND INTEGRATED COMMITS -->
{#if patches.length > 0}
<div class="commits-group">
@ -183,17 +182,23 @@
<!-- RESET TO REMOTE BUTTON -->
{#if lastDivergentCommit?.id === commit.id}
<div class="action-row" class:last={idx === patches.length - 1}>
<CommitAction type="local" isLast={idx === patches.length - 1}>
{#snippet action()}
{@render integrateUpstreamButton('reset')}
{/snippet}
</CommitAction>
<!-- <div class="action-row" class:last={idx === patches.length - 1}>
<div class="action-row__line" class:last={idx === patches.length - 1}></div>
<div class="action-row__button-wrapper">
{@render integrateUpstreamButton('reset')}
</div>
</div>
</div> -->
{/if}
{/each}
</div>
{/if}
{#if remoteOnlyPatches.length > 0 && patches.length === 0 && !isBranchIntegrated && pushButton}
<!-- {#if remoteOnlyPatches.length > 0 && patches.length === 0 && !isBranchIntegrated && pushButton}
<CommitAction>
{#snippet lines()}
<Line line={lineManager.get(LineSpacer.LocalAndRemote)} />
@ -202,7 +207,7 @@
{@render pushButton({ disabled: hasConflicts })}
{/snippet}
</CommitAction>
{/if}
{/if} -->
</div>
<Modal
@ -245,6 +250,21 @@
}
}
.accordion-row__actions {
display: flex;
width: 100%;
align-items: stretch;
padding-right: 14px;
background-color: var(--clr-bg-1);
}
.accordion-row__actions__content {
display: flex;
flex-direction: column;
flex: 1;
padding: 14px 0 14px;
}
.action-row {
display: flex;
width: 100%;

17
apps/desktop/src/lib/commit/UpstreamCommitsAccordion.svelte
View File

@ -6,12 +6,12 @@
count: number;
isLast?: boolean;
children: Snippet;
action: Snippet;
}
const { count, isLast, children, action }: Props = $props();
const { count, isLast, children }: Props = $props();
let isOpen = $state(count === 1);
// let isOpen = true;
function toggle() {
isOpen = !isOpen;
@ -55,13 +55,6 @@
<div class="accordion-children">
{@render children()}
</div>
<div class="accordion-row__actions">
<div class="accordion-row__line"></div>
<div class="accordion-row__actions__content">
{@render action()}
</div>
</div>
{/if}
</div>
@ -89,7 +82,7 @@
}
}
.accordion-row__actions {
/* .accordion-row__actions {
display: flex;
width: 100%;
align-items: stretch;
@ -102,7 +95,7 @@
flex-direction: column;
flex: 1;
padding: 14px 0 14px;
}
} */
.accordion-row__header {
display: flex;
@ -164,6 +157,6 @@
min-height: 44px;
align-items: stretch;
text-align: left;
border-bottom: 1px solid var(--clr-border-3);
/* border-bottom: 1px solid var(--clr-border-3); */
}
</style>

10
apps/desktop/src/lib/components/BaseBranch.svelte
View File

@ -220,10 +220,7 @@
{/each}
{#if base.diverged}
<CommitAction backgroundColor={false}>
{#snippet lines()}
<Line line={lineManager.get(LineSpacer.Remote)} />
{/snippet}
<CommitAction type={'remote'}>
{#snippet action()}
<Button
wide
@ -260,10 +257,7 @@
</CommitCard>
{/each}
<CommitAction backgroundColor={false}>
{#snippet lines()}
<Line line={lineManager.get(LineSpacer.Local)} />
{/snippet}
<CommitAction type={'local'}>
{#snippet action()}
<div class="local-actions-wrapper">
<Button

4
apps/desktop/src/lib/stack/SeriesList.svelte
View File

@ -24,9 +24,6 @@
const { branch, lastPush }: Props = $props();
const branchController = getContext(BranchController);
const hasConflicts = $derived(
branch.series.flatMap((s) => s.patches).some((patch) => patch.conflicted)
);
const nonArchivedSeries = $derived(branch.series.filter((s) => !s.archived));
@ -82,7 +79,6 @@
isUnapplied={false}
isBottom={idx === branch.series.length - 1}
{stackingReorderDropzoneManager}
{hasConflicts}
/>
{/if}
</CurrentSeries>

2
packages/ui/src/lib/commitLines/Cell.svelte
View File

@ -6,7 +6,7 @@
const { isBottom = false }: Props = $props();
</script>
<div class="commit-line stacked" class:dashed={isBottom}></div>
<div class="commit-line" class:dashed={isBottom}></div>
<style lang="postcss">
.commit-line {