gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 10:33:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: stackingCommitList reorder-dropzone and "add empty commit" btn rendering (#5066)

Browse Source
This commit is contained in:
Nico Domino 2024-10-09 16:59:37 +02:00 committed by GitHub
parent 7858230812
commit 531cbde1ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 39 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,10 +188,7 @@
<!-- LOCAL COMMITS -->
{#if localCommits.length > 0}
<div class="commits-group">
<InsertEmptyCommitAction
isFirst
on:click={() => insertBlankCommit($branch.head, 'above')}
/>
<InsertEmptyCommitAction isFirst onclick={() => insertBlankCommit($branch.head, 'above')} />
{@render reorderDropzone(
reorderDropzoneManager.topDropzone,
getReorderDropzoneOffset({ isFirst: true })
@ -221,7 +218,7 @@
<InsertEmptyCommitAction
isLast={idx + 1 === localCommits.length}
on:click={() => insertBlankCommit(commit.id, 'below')}
onclick={() => insertBlankCommit(commit.id, 'below')}
/>
{/each}
{#if pushButton}
@ -263,7 +260,7 @@
)}
<InsertEmptyCommitAction
isLast={idx + 1 === localAndRemoteCommits.length}
on:click={() => insertBlankCommit(commit.id, 'below')}
onclick={() => insertBlankCommit(commit.id, 'below')}
/>
{/each}

61
apps/desktop/src/lib/commit/StackingCommitList.svelte
View File

@ -98,27 +98,12 @@
}
branchController.insertBlankCommit($branch.id, commitId, location === 'above' ? -1 : 1);
}
function getReorderDropzoneOffset({
isFirst = false,
isMiddle = false,
isLast = false
}: {
isFirst?: boolean;
isMiddle?: boolean;
isLast?: boolean;
}) {
if (isFirst) return 12;
if (isMiddle) return 6;
if (isLast) return 0;
return 0;
}
</script>
{#snippet reorderDropzone(dropzone: ReorderDropzone, yOffsetPx: number)}
{#snippet reorderDropzone(dropzone: ReorderDropzone)}
<Dropzone accepts={dropzone.accepts.bind(dropzone)} ondrop={dropzone.onDrop.bind(dropzone)}>
{#snippet overlay({ hovered, activated })}
<LineOverlay {hovered} {activated} {yOffsetPx} />
<LineOverlay {hovered} {activated} />
{/snippet}
</Dropzone>
{/snippet}
@ -170,14 +155,10 @@
<!-- LOCAL COMMITS -->
{#if localCommits.length > 0}
<div class="commits-group">
<InsertEmptyCommitAction
isFirst
on:click={() => insertBlankCommit($branch.head, 'above')}
/>
{@render reorderDropzone(
reorderDropzoneManager.topDropzone,
getReorderDropzoneOffset({ isFirst: true })
)}
<InsertEmptyCommitAction isFirst onclick={() => insertBlankCommit($branch.head, 'above')} />
{@render reorderDropzone(reorderDropzoneManager.topDropzone)}
{#each localCommits as commit, idx (commit.id)}
<StackingCommitDragItem {commit}>
<StackingCommitCard
@ -194,17 +175,11 @@
</StackingCommitCard>
</StackingCommitDragItem>
{@render reorderDropzone(
reorderDropzoneManager.dropzoneBelowCommit(commit.id),
getReorderDropzoneOffset({
isLast: idx + 1 === localCommits.length,
isMiddle: idx + 1 === localCommits.length
})
)}
{@render reorderDropzone(reorderDropzoneManager.dropzoneBelowCommit(commit.id))}
<InsertEmptyCommitAction
isLast={idx + 1 === localCommits.length}
on:click={() => insertBlankCommit(commit.id, 'below')}
onclick={() => insertBlankCommit(commit.id, 'below')}
/>
{/each}
</div>
@ -213,6 +188,14 @@
<!-- LOCAL AND REMOTE COMMITS -->
{#if localAndRemoteCommits.length > 0}
<div class="commits-group">
{#if localCommits.length === 0}
<InsertEmptyCommitAction
isFirst
onclick={() => insertBlankCommit($branch.head, 'above')}
/>
{@render reorderDropzone(reorderDropzoneManager.topDropzone)}
{/if}
{#each localAndRemoteCommits as commit, idx (commit.id)}
<StackingCommitDragItem {commit}>
<StackingCommitCard
@ -229,15 +212,12 @@
{/snippet}
</StackingCommitCard>
</StackingCommitDragItem>
{@render reorderDropzone(
reorderDropzoneManager.dropzoneBelowCommit(commit.id),
getReorderDropzoneOffset({
isMiddle: idx + 1 === localAndRemoteCommits.length
})
)}
{@render reorderDropzone(reorderDropzoneManager.dropzoneBelowCommit(commit.id))}
<InsertEmptyCommitAction
isLast={idx + 1 === localAndRemoteCommits.length}
on:click={() => insertBlankCommit(commit.id, 'below')}
onclick={() => insertBlankCommit(commit.id, 'below')}
/>
{/each}
@ -284,7 +264,6 @@
flex-direction: column;
background-color: var(--clr-bg-2);
border-radius: 0 0 var(--radius-m) var(--radius-m);
overflow: hidden;
}
.commits-group {

27
apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte
View File

@ -1,19 +1,21 @@
<script lang="ts">
import { stackingFeature } from '$lib/config/uiFeatureFlags';
import Button from '@gitbutler/ui/Button.svelte';
import { createEventDispatcher } from 'svelte';
export let isLast = false;
export let isFirst = false;
export let isMiddle = false;
interface Props {
isLast?: boolean;
isFirst?: boolean;
onclick?: () => void;
}
const dispatch = createEventDispatcher<{ click: void }>();
const { isLast = false, isFirst = false, onclick }: Props = $props();
</script>
<div
class="line-container"
class:is-last={isLast}
class:is-first={isFirst}
class:is-middle={isMiddle}
class:not-stacking={!$stackingFeature}
>
<div class="hover-target">
<Button
@ -25,7 +27,7 @@
width={26}
tooltip="Insert empty commit"
helpShowDelay={500}
onclick={() => dispatch('click')}
onclick={onclick?.()}
/>
</div>
</div>
@ -93,16 +95,11 @@
}
/* MODIFIERS */
.line-container.is-last {
transform: translateY(-4px);
}
.line-container.is-first {
.line-container.not-stacking.is-first {
transform: translateY(16px);
}
.line-container.is-middle {
transform: translateY(6px);
.line-container.not-stacking.is-last {
transform: translateY(-4px);
}
</style>

5
apps/desktop/src/lib/stack/StackSeries.svelte
View File

@ -59,6 +59,9 @@
border: 1px solid var(--clr-border-2);
border-radius: var(--radius-m);
background: var(--clr-bg-1);
overflow: hidden;
&:last-child {
margin-bottom: 12px;
}
}
</style>