mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-11-30 01:17:37 +03:00
Improve the PR preview page a bit
This commit is contained in:
Mattias Granlund
parent
8213e0628c
commit
24ecfabf57
@ -84,6 +84,7 @@
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-scale-succ-60);
|
||||
}
|
||||
&.filled {
|
||||
color: var(--clr-theme-succ-on-element);
|
||||
background: var(--clr-theme-succ-element);
|
||||
&:hover {
|
||||
background: var(--clr-theme-succ-element-dim);
|
||||
@ -118,6 +119,7 @@
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-scale-warn-60);
|
||||
}
|
||||
&.filled {
|
||||
color: var(--clr-theme-warn-on-element);
|
||||
background: var(--clr-theme-warn-element);
|
||||
&:hover {
|
||||
background: var(--clr-theme-warn-element-dim);
|
||||
|
||||
@ -13,12 +13,8 @@
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="h-full flex-grow overflow-y-auto overscroll-none p-3">
|
||||
<div
|
||||
class="flex max-w-4xl flex-col gap-y-6 overflow-visible rounded-lg px-5 py-4"
|
||||
style:background-color="var(--bg-surface)"
|
||||
style:border-color="var(--border-surface)"
|
||||
>
|
||||
<div class="wrapper overflow-y-auto overscroll-none">
|
||||
<div class="inner flex px-5 py-4">
|
||||
{#if !$pr}
|
||||
<p>Loading...</p>
|
||||
{:else if pr}
|
||||
@ -28,3 +24,11 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.wrapper {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,77 +2,91 @@
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import type { BranchController } from '$lib/vbranches/branchController';
|
||||
import type { PullRequest } from '$lib/github/types';
|
||||
import { IconPullRequest, IconDraftPullRequest } from '$lib/icons';
|
||||
import Link from '$lib/components/Link.svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
import Tag from '../../components/Tag.svelte';
|
||||
import TextArea from '$lib/components/TextArea.svelte';
|
||||
|
||||
export let pullrequest: PullRequest | undefined;
|
||||
export let branchController: BranchController;
|
||||
</script>
|
||||
|
||||
{#if pullrequest != undefined}
|
||||
<div class="flex w-full max-w-full flex-col gap-y-4 p-4">
|
||||
<div class="flex flex-grow flex-col gap-y-6">
|
||||
<div class="flex flex-col">
|
||||
<h class="truncate text-lg font-semibold">
|
||||
<div class="wrapper max-w-4xl">
|
||||
<div class="pr">
|
||||
<div class="text-base-body-16 text-semibold flex items-center justify-between">
|
||||
<span class="whitespace-pre-wrap">
|
||||
{pullrequest.title}
|
||||
<span class="text-color-4">
|
||||
<Link target="_blank" rel="noreferrer" href={pullrequest.htmlUrl} class="text-3">
|
||||
#{pullrequest.number}
|
||||
</Link>
|
||||
</span>
|
||||
</h>
|
||||
|
||||
<div class="flex items-center gap-1 truncate">
|
||||
{#if pullrequest.draft}
|
||||
<div
|
||||
class="flex items-center gap-x-1 rounded-full bg-zinc-500 px-2 py-0.5 text-sm font-medium text-white"
|
||||
>
|
||||
<IconDraftPullRequest class="h-3.5 w-3.5 "></IconDraftPullRequest>
|
||||
|
||||
<span>Draft</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="flex items-center gap-x-1 rounded-full bg-green-500 px-2 py-0.5 text-sm font-medium text-white"
|
||||
>
|
||||
<IconPullRequest class="h-3.5 w-3.5 "></IconPullRequest>
|
||||
<span>Open</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="text-color-3">
|
||||
<span class="font-semibold">
|
||||
{pullrequest.author?.name}
|
||||
</span>
|
||||
wants to merge into
|
||||
<span class="rounded bg-blue-500/10 px-1 py-0.5 text-blue-500">
|
||||
{pullrequest.sourceBranch}
|
||||
</span>
|
||||
from
|
||||
<span class="rounded bg-blue-500/10 px-1 py-0.5 text-blue-500">
|
||||
{pullrequest.targetBranch}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
{#if pullrequest.draft}
|
||||
<Tag color="neutral-dim" icon="pr-draft">Draft</Tag>
|
||||
{:else}
|
||||
<Tag color="success" icon="pr-draft" filled>Open</Tag>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="text-color-3">
|
||||
<span class="font-semibold">
|
||||
{pullrequest.author?.name}
|
||||
</span>
|
||||
wants to merge into
|
||||
<span class="rounded bg-blue-500/10 px-1 py-0.5 text-blue-500">
|
||||
{pullrequest.sourceBranch}
|
||||
</span>
|
||||
from
|
||||
<span class="rounded bg-blue-500/10 px-1 py-0.5 text-blue-500">
|
||||
{pullrequest.targetBranch}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if pullrequest.body}
|
||||
<div class="text-3">
|
||||
<div class="body">
|
||||
{@html pullrequest.body}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<Tooltip label="Does not create a commit. Can be toggled.">
|
||||
<Button
|
||||
color="primary"
|
||||
on:click={() =>
|
||||
pullrequest &&
|
||||
branchController.createvBranchFromBranch(
|
||||
'refs/remotes/origin/' + pullrequest.targetBranch
|
||||
)}>Apply to working directory</Button
|
||||
>
|
||||
</Tooltip>
|
||||
<div class="actions">
|
||||
<Tooltip label="Does not create a commit. Can be toggled.">
|
||||
<Button
|
||||
color="primary"
|
||||
on:click={() =>
|
||||
pullrequest &&
|
||||
branchController.createvBranchFromBranch(
|
||||
'refs/remotes/origin/' + pullrequest.targetBranch
|
||||
)}>Apply</Button
|
||||
>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.pr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--clr-theme-container-outline-light);
|
||||
background-color: var(--clr-theme-container-light);
|
||||
padding: var(--space-16);
|
||||
border-radius: var(--radius-m);
|
||||
gap: var(--space-12);
|
||||
}
|
||||
.body {
|
||||
white-space: wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user