mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-19 15:41:31 +03:00
Merge pull request #5347 from gitbutlerapp/e-branch-2
style: Dropzones on the stacking headers
This commit is contained in:
Esteban Vega
GitHub
commit
a3be371940
@ -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 })}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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()}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user