Merge pull request from gitbutlerapp/e-branch-2

style: Dropzones on the stacking headers
This commit is contained in:
Esteban Vega 2024-10-29 10:35:38 +01:00 committed by GitHub
commit a3be371940
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 124 additions and 112 deletions

View File

@ -11,11 +11,28 @@
interface Props {
children: Snippet;
type?: 'commit' | 'file' | 'all';
}
const { children }: Props = $props();
const { children, type = 'all' }: Props = $props();
const actions = $derived(branchDragActionsFactory.build($branch));
const commitTypes: Props['type'][] = ['commit', 'all'];
function acceptsCommits(data: unknown) {
if (!commitTypes.includes(type)) {
return false;
}
return actions.acceptMoveCommit(data);
}
const fileTypes: Props['type'][] = ['file', 'all'];
function acceptsFiles(data: unknown) {
if (!fileTypes.includes(type)) {
return false;
}
return actions.acceptBranchDrop(data);
}
</script>
<div class="dragzone-wrapper">
@ -24,11 +41,7 @@
<!-- We require the dropzones to be nested -->
{#snippet moveCommitDropzone()}
<Dropzone
accepts={actions.acceptMoveCommit.bind(actions)}
ondrop={actions.onMoveCommit.bind(actions)}
fillHeight
>
<Dropzone accepts={acceptsCommits} ondrop={actions.onMoveCommit.bind(actions)} fillHeight>
{@render branchDropDropzone()}
{#snippet overlay({ hovered, activated })}
@ -38,11 +51,7 @@
{/snippet}
{#snippet branchDropDropzone()}
<Dropzone
accepts={actions.acceptBranchDrop.bind(actions)}
ondrop={actions.onBranchDrop.bind(actions)}
fillHeight
>
<Dropzone accepts={acceptsFiles} ondrop={actions.onBranchDrop.bind(actions)} fillHeight>
{@render children()}
{#snippet overlay({ hovered, activated })}

View File

@ -1,5 +1,6 @@
<script lang="ts">
import BranchLabel from './BranchLabel.svelte';
import Dropzones from './Dropzones.svelte';
import StackingAddSeriesModal from './StackingAddSeriesModal.svelte';
import StackingStatusIcon from './StackingStatusIcon.svelte';
import { getColorFromBranchType } from './stackingUtils';
@ -160,114 +161,116 @@
/>
<div role="article" class="branch-header" oncontextmenu={(e) => e.preventDefault()}>
<PopoverActionsContainer class="branch-actions-menu" stayOpen={contextMenuOpened}>
{#if $stackingFeatureMultipleSeries}
<Dropzones type="commit">
<PopoverActionsContainer class="branch-actions-menu" stayOpen={contextMenuOpened}>
{#if $stackingFeatureMultipleSeries}
<PopoverActionsItem
icon="plus-small"
tooltip="Add dependent branch"
onclick={() => {
stackingAddSeriesModal?.show();
}}
/>
{/if}
{#if gitHostBranch}
<PopoverActionsItem
icon="open-link"
tooltip="Open in browser"
onclick={() => {
const url = gitHostBranch?.url;
if (url) openExternalUrl(url);
}}
/>
{/if}
<PopoverActionsItem
icon="plus-small"
tooltip="Add dependent branch"
bind:el={kebabContextMenuTrigger}
activated={contextMenuOpened}
icon="kebab"
tooltip="More options"
onclick={() => {
stackingAddSeriesModal?.show();
kebabContextMenu?.toggle();
}}
/>
{/if}
{#if gitHostBranch}
<PopoverActionsItem
icon="open-link"
tooltip="Open in browser"
onclick={() => {
const url = gitHostBranch?.url;
if (url) openExternalUrl(url);
}}
/>
{/if}
<PopoverActionsItem
bind:el={kebabContextMenuTrigger}
activated={contextMenuOpened}
icon="kebab"
tooltip="More options"
onclick={() => {
kebabContextMenu?.toggle();
}}
/>
</PopoverActionsContainer>
</PopoverActionsContainer>
<div class="branch-info">
<StackingStatusIcon
lineTop={isTopSeries ? false : true}
icon={branchType === 'integrated' ? 'tick-small' : 'remote-branch-small'}
iconColor="var(--clr-core-ntrl-100)"
color={lineColor}
lineBottom={currentSeries.patches.length > 0 || branch.series.length > 1}
/>
<div class="text-14 text-bold branch-info__name">
<span class:no-upstream={!gitHostBranch} class="remote-name">
{$baseBranch.pushRemoteName ? `${$baseBranch.pushRemoteName} /` : 'origin /'}
</span>
<BranchLabel
name={currentSeries.name}
onChange={(name) => editTitle(name)}
disabled={!!gitHostBranch}
<div class="branch-info">
<StackingStatusIcon
lineTop={isTopSeries ? false : true}
icon={branchType === 'integrated' ? 'tick-small' : 'remote-branch-small'}
iconColor="var(--clr-core-ntrl-100)"
color={lineColor}
lineBottom={currentSeries.patches.length > 0 || branch.series.length > 1}
/>
</div>
</div>
{#if descriptionVisible}
<div class="branch-info__description">
<div class="branch-action__line" style:--bg-color={lineColor}></div>
<BranchLabel
name={branch.description}
onChange={(description) => editDescription(description)}
/>
</div>
{/if}
{#if ($prService && !hasNoCommits) || showCreateCloudBranch}
<div class="branch-action">
<div class="branch-action__line" style:--bg-color={lineColor}></div>
<div class="branch-action__body">
{#if $prService && !hasNoCommits}
{#if $pr}
<StackingPullRequestCard
upstreamName={currentSeries.name}
reloadPR={handleReloadPR}
pr={$pr}
{checksMonitor}
/>
{:else}
<Button
style="ghost"
wide
outline
disabled={currentSeries.patches.length === 0 || !$gitHost || !$prService}
onclick={() => handleOpenPR(!gitHostBranch)}
>
Create pull request
</Button>
{/if}
{/if}
{#if showCreateCloudBranch}
<Button
style="ghost"
outline
disabled={branch.commits.length === 0}
onclick={() => {
cloudBranchCreationService.createBranch(branch.id);
}}>Publish Branch</Button
>
{/if}
<div class="text-14 text-bold branch-info__name">
<span class:no-upstream={!gitHostBranch} class="remote-name">
{$baseBranch.pushRemoteName ? `${$baseBranch.pushRemoteName} /` : 'origin /'}
</span>
<BranchLabel
name={currentSeries.name}
onChange={(name) => editTitle(name)}
disabled={!!gitHostBranch}
/>
</div>
</div>
{/if}
{#if descriptionVisible}
<div class="branch-info__description">
<div class="branch-action__line" style:--bg-color={lineColor}></div>
<BranchLabel
name={branch.description}
onChange={(description) => editDescription(description)}
/>
</div>
{/if}
{#if ($prService && !hasNoCommits) || showCreateCloudBranch}
<div class="branch-action">
<div class="branch-action__line" style:--bg-color={lineColor}></div>
<div class="branch-action__body">
{#if $prService && !hasNoCommits}
{#if $pr}
<StackingPullRequestCard
upstreamName={currentSeries.name}
reloadPR={handleReloadPR}
pr={$pr}
{checksMonitor}
/>
{:else}
<Button
style="ghost"
wide
outline
disabled={currentSeries.patches.length === 0 || !$gitHost || !$prService}
onclick={() => handleOpenPR(!gitHostBranch)}
>
Create pull request
</Button>
{/if}
{/if}
<div class="branch-action">
<div class="branch-action__line" style:--bg-color={lineColor}></div>
<div class="branch-action__body"></div>
</div>
{#if showCreateCloudBranch}
<Button
style="ghost"
outline
disabled={branch.commits.length === 0}
onclick={() => {
cloudBranchCreationService.createBranch(branch.id);
}}>Publish Branch</Button
>
{/if}
</div>
</div>
{/if}
{#if $pr}
<PrDetailsModal bind:this={prDetailsModal} type="display" pr={$pr} />
{:else}
<PrDetailsModal bind:this={prDetailsModal} type="preview-series" {currentSeries} />
{/if}
<div class="branch-action">
<div class="branch-action__line" style:--bg-color={lineColor}></div>
<div class="branch-action__body"></div>
</div>
{#if $pr}
<PrDetailsModal bind:this={prDetailsModal} type="display" pr={$pr} />
{:else}
<PrDetailsModal bind:this={prDetailsModal} type="preview-series" {currentSeries} />
{/if}
</Dropzones>
</div>
<style lang="postcss">

View File

@ -115,7 +115,7 @@
<div class="card-stacking">
{#if branch.files?.length > 0}
<div class="branch-card__files">
<Dropzones>
<Dropzones type="file">
<BranchFiles
isUnapplied={false}
files={branch.files}
@ -148,7 +148,7 @@
/>
</div>
{:else if branch.commits.length === 0}
<Dropzones>
<Dropzones type="file">
<div class="new-branch">
<EmptyStatePlaceholder image={laneNewSvg} width={180} bottomMargin={48}>
{#snippet title()}
@ -161,7 +161,7 @@
</div>
</Dropzones>
{:else}
<Dropzones>
<Dropzones type="file">
<div class="no-changes">
<EmptyStatePlaceholder image={noChangesSvg} width={180}>
{#snippet caption()}