feat: add contextMenu to checks and pr btns in StackingPullRequestCard

This commit is contained in:
ndom91 2024-10-23 16:50:38 +02:00 committed by Nico Domino
parent 97c344404f
commit ffce14296a

View File

@ -2,9 +2,13 @@
import MergeButton from './MergeButton.svelte'; import MergeButton from './MergeButton.svelte';
import { Project } from '$lib/backend/projects'; import { Project } from '$lib/backend/projects';
import { BaseBranchService } from '$lib/baseBranch/baseBranchService'; import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
import ContextMenu from '$lib/components/contextmenu/ContextMenu.svelte';
import ContextMenuItem from '$lib/components/contextmenu/ContextMenuItem.svelte';
import ContextMenuSection from '$lib/components/contextmenu/ContextMenuSection.svelte';
import { getGitHostChecksMonitor } from '$lib/gitHost/interface/gitHostChecksMonitor'; import { getGitHostChecksMonitor } from '$lib/gitHost/interface/gitHostChecksMonitor';
import { getGitHostListingService } from '$lib/gitHost/interface/gitHostListingService'; import { getGitHostListingService } from '$lib/gitHost/interface/gitHostListingService';
import { getGitHostPrService } from '$lib/gitHost/interface/gitHostPrService'; import { getGitHostPrService } from '$lib/gitHost/interface/gitHostPrService';
import { copyToClipboard } from '$lib/utils/clipboard';
import * as toasts from '$lib/utils/toasts'; import * as toasts from '$lib/utils/toasts';
import { openExternalUrl } from '$lib/utils/url'; import { openExternalUrl } from '$lib/utils/url';
import { VirtualBranchService } from '$lib/vbranches/virtualBranch'; import { VirtualBranchService } from '$lib/vbranches/virtualBranch';
@ -27,6 +31,11 @@
messageStyle?: MessageStyle; messageStyle?: MessageStyle;
}; };
let checksContextMenuEl = $state<ReturnType<typeof ContextMenu>>();
let prContextMenuEl = $state<ReturnType<typeof ContextMenu>>();
let checksContextMenuTarget = $state<HTMLElement>();
let prContextMenuTarget = $state<HTMLElement>();
const vbranchService = getContext(VirtualBranchService); const vbranchService = getContext(VirtualBranchService);
const baseBranchService = getContext(BaseBranchService); const baseBranchService = getContext(BaseBranchService);
const project = getContext(Project); const project = getContext(Project);
@ -131,29 +140,69 @@
{prStatusInfo.text} {prStatusInfo.text}
</Button> </Button>
{#if !$pr?.closedAt && checksTagInfo} {#if !$pr?.closedAt && checksTagInfo}
<Button <div bind:this={checksContextMenuTarget}>
size="tag" <Button
clickable={false} size="tag"
icon={checksTagInfo.icon} clickable={false}
style={checksTagInfo.style} icon={checksTagInfo.icon}
kind={checksTagInfo.icon === 'success-small' ? 'solid' : 'soft'} style={checksTagInfo.style}
> kind={checksTagInfo.icon === 'success-small' ? 'solid' : 'soft'}
{checksTagInfo.text} oncontextmenu={(e: MouseEvent) => {
</Button> e.preventDefault();
checksContextMenuEl?.open();
}}
>
{checksTagInfo.text}
</Button>
</div>
<ContextMenu bind:this={checksContextMenuEl} target={checksContextMenuTarget}>
<ContextMenuSection>
<ContextMenuItem
label="Open checks"
onclick={() => {
openExternalUrl(`${$pr.htmlUrl}/checks`);
}}
/>
<ContextMenuItem
label="Copy Checks"
onclick={() => {
copyToClipboard(`${$pr.htmlUrl}/checks`);
}}
/>
</ContextMenuSection>
</ContextMenu>
{/if} {/if}
{#if $pr?.htmlUrl} {#if $pr?.htmlUrl}
<Button <div bind:this={prContextMenuTarget}>
icon="open-link" <Button
size="tag" icon="open-link"
style="ghost" size="tag"
outline style="ghost"
tooltip="Open in browser" outline
onclick={() => { tooltip="Open in browser"
openExternalUrl($pr.htmlUrl); onclick={() => {
}} openExternalUrl($pr.htmlUrl);
> }}
View PR oncontextmenu={(e: MouseEvent) => {
</Button> e.preventDefault();
prContextMenuEl?.open();
}}
>
View PR
</Button>
</div>
<ContextMenu bind:this={prContextMenuEl} target={prContextMenuTarget}>
<ContextMenuSection>
<ContextMenuItem
label="Copy PR Link"
onclick={() => {
copyToClipboard($pr.htmlUrl);
}}
/>
</ContextMenuSection>
</ContextMenu>
{/if} {/if}
</div> </div>
@ -222,6 +271,7 @@
display: flex; display: flex;
gap: 4px; gap: 4px;
padding: 0 14px 12px 14px; padding: 0 14px 12px 14px;
align-items: baseline;
} }
.pr-header-actions { .pr-header-actions {