Skip to content

Commit

Permalink
Merge pull request #6050 from gitbutlerapp/sc-review-ui-tweaks
Browse files Browse the repository at this point in the history
Lots of Review UI updates
  • Loading branch information
schacon authored Jan 22, 2025
2 parents c39cede + 6876240 commit 34dfc56
Show file tree
Hide file tree
Showing 15 changed files with 251 additions and 88 deletions.
1 change: 1 addition & 0 deletions apps/web/.env
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
PUBLIC_APP_HOST=https://app.gitbutler.com/
PUBLIC_CLOUD_HOST=https://cloud.gitbutler.com/
27 changes: 21 additions & 6 deletions apps/web/src/lib/components/branches/BranchIndexCard.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import BranchStatusBadge from '../review/BranchStatusBadge.svelte';
import CommitsGraph from '../review/CommitsGraph.svelte';
import { BranchService } from '@gitbutler/shared/branches/branchService';
import {
getBranchReview,
Expand Down Expand Up @@ -55,35 +57,48 @@
<Loading loadable={branch.current}>
{#snippet children(branch)}
<tr class:rounded-top={roundedTop} class:rounded-bottom={roundedBottom} class="row">
<td><div>{branch.stackOrder}</div></td>
<td><div><BranchStatusBadge {branch} /></div></td>
<td>
<div>
<div class="title">
<a href={routes.projectReviewBranchPath({ ...linkParams, branchId: branch.branchId })}>
{branch.title}
</a>
</div>
</td>
<td><div>{branch.branchId.slice(0, 7)}</div></td>
<td><div>{branch.stackSize}</div></td>
<td><div class="uuid">{branch.branchId.slice(0, 7)}</div></td>
<td><div><CommitsGraph {branch} /></div></td>
<td>
<div>
{@render status(branch.status || BranchStatus.Active)}
</div>
</td>
<td><div>{dayjs(branch.updatedAt).fromNow()}</div></td>
<td><div class="norm">{dayjs(branch.updatedAt).fromNow()}</div></td>
<td>
<div>
{#await contributors then contributors}
<AvatarGroup avatars={contributors}></AvatarGroup>
{/await}
</div>
</td>
<td><div>{branch.version || 0}</div></td>
<td><div class="norm">{branch.version || 0}</div></td>
</tr>
{/snippet}
</Loading>

<style lang="postcss">
.title {
font-weight: bold;
}
.uuid {
font-size: 0.8em;
color: var(--clr-text-2);
font-family: var(--font-mono);
}
.norm {
font-size: 0.8em;
color: var(--clr-text-2);
}
.row {
/*
This is a magical incantation that lets the divs take up the full
Expand Down
18 changes: 14 additions & 4 deletions apps/web/src/lib/components/changes/ChangeIndexCard.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import PatchReviewersGroup from '../review/PatchReviewersGroup.svelte';
import { PatchService } from '@gitbutler/shared/branches/patchService';
import { getPatch } from '@gitbutler/shared/branches/patchesPreview.svelte';
import {
Expand Down Expand Up @@ -47,7 +48,7 @@
{:else if status === 'changes-requested'}
<Badge style="error">Changes Requested</Badge>
{:else if status === 'unreviewed'}
<Badge style="neuteral" kind="soft">Unreviewed</Badge>
<Badge style="neutral" kind="soft">Unreviewed</Badge>
{:else if status === 'in-discussion'}
<Badge style="warning" kind="soft">In Discussion</Badge>
{/if}
Expand All @@ -58,22 +59,22 @@
<tr class="row" class:rounded-bottom={last}>
<td><div>{@render status(getPatchStatus(patch))}</div></td>
<td
><div>
><div class="name">
<a href={routes.projectReviewBranchCommitPath({ ...params, changeId: patch.changeId })}
>{patch.title}</a
>
</div></td
>
<td><div>{dayjs(patch.updatedAt).fromNow()}</div></td>
<td><div>+{patch.statistics.lines} -{patch.statistics.deletions}</div></td>
<td><div class="updated">{dayjs(patch.updatedAt).fromNow()}</div></td>
<td>
<div>
{#await contributors then contributors}
<AvatarGroup avatars={contributors}></AvatarGroup>
{/await}
</div>
</td>
<td><div></div></td>
<td><div><PatchReviewersGroup {patch} /></div></td>
<td><div></div></td>
</tr>
{/snippet}
Expand Down Expand Up @@ -122,4 +123,13 @@
border-bottom-right-radius: var(--radius-m);
}
}
.name {
font-weight: bold;
}
.updated {
color: var(--clr-text-2);
font-size: 0.8rem;
}
</style>
28 changes: 28 additions & 0 deletions apps/web/src/lib/components/review/BranchStatusBadge.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<script lang="ts">
import Badge from '@gitbutler/ui/Badge.svelte';
import type { Branch, Patch } from '@gitbutler/shared/branches/types';
type Props = {
branch: Branch;
};
const { branch }: Props = $props();
const patches = branch.patches;
let anyRejected = patches.some((patch: Patch) => patch.reviewAll.rejected.length > 0);
let someApproved = patches.some((patch: Patch) => patch.reviewAll.signedOff.length > 0);
let allApproved = !patches.some((patch: Patch) => patch.reviewAll.signedOff.length === 0);
</script>

<div class="container">
{#if anyRejected}
<Badge style="error">Changes Requested</Badge>
{:else if allApproved}
<Badge style="success">Approved</Badge>
{:else if someApproved}
<Badge style="warning">In Discussion</Badge>
{:else}
<Badge style="neutral" kind="soft">Unreviewed</Badge>
{/if}
</div>
61 changes: 61 additions & 0 deletions apps/web/src/lib/components/review/CommitsGraph.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script lang="ts">
import type { Branch, Patch } from '@gitbutler/shared/branches/types';
type Props = {
branch: Branch;
};
const { branch }: Props = $props();
const patches = branch.patches;
function getClass(patch: Patch) {
if (patch.reviewAll.rejected.length > 0) {
return 'block rejected';
}
if (patch.reviewAll.signedOff.length > 0) {
return 'block signoff';
}
return 'block';
}
</script>

<div class="container">
<p class="fact">{branch.stackSize}</p>
<table class="graph" width="100%">
<tbody>
<tr>
{#each patches as patch}
<td class="patch"><div class={getClass(patch)}>&nbsp;</div></td>
{/each}
</tr>
</tbody>
</table>
</div>

<style lang="postcss">
.container {
display: flex;
align-items: center;
font-size: 0.8em;
color: var(--clr-text-2);
}
.fact {
margin-right: 8px;
}
.rejected {
background-color: var(--clr-scale-err-50);
}
.signoff {
background-color: var(--clr-scale-succ-50);
}
.discuss {
background-color: var(--clr-scale-warn-50);
}
.block {
margin-left: 0.5px;
}
</style>
27 changes: 27 additions & 0 deletions apps/web/src/lib/components/review/PatchReviewersGroup.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<script lang="ts">
import AvatarGroup from '@gitbutler/ui/avatar/AvatarGroup.svelte';
import { gravatarUrlFromEmail } from '@gitbutler/ui/avatar/gravatar';
import type { Patch } from '@gitbutler/shared/branches/types';
type Props = {
patch: Patch;
};
const { patch }: Props = $props();
async function getContributorsWithAvatars(patch: Patch) {
return await Promise.all(
patch.reviewAll.viewed.map(async (contributor) => {
return {
srcUrl: await gravatarUrlFromEmail(contributor),
name: contributor
};
})
);
}
const avatars = $derived(getContributorsWithAvatars(patch));
</script>

{#await avatars then avatars}
<div class="container"><AvatarGroup {avatars} /></div>
{/await}
2 changes: 1 addition & 1 deletion apps/web/src/lib/styles/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@import '@gitbutler/ui/fonts.css';

:root {
--text-font-family-default: 'Spline Sans Mono Variable';
--text-font-family-default: 'Inter';
--font-body: 'Spline Sans Mono Variable', monospace, ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Fira Mono', monospace;
Expand Down
51 changes: 19 additions & 32 deletions apps/web/src/routes/[ownerSlug]/[projectSlug]/reviews/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,21 @@
);
</script>

<h2>{data.ownerSlug}/{data.projectSlug}</h2>
<svelte:head>
<title>Review: {data.ownerSlug}/{data.projectSlug}</title>
</svelte:head>

<Loading loadable={brancheses?.current}>
{#snippet children(brancheses)}
<h3>Branches shared for review <Badge>{brancheses.length || 0}</Badge></h3>
<div class="title">
<div class="text">Branches shared for review</div>
<div><Badge>{brancheses.length || 0}</Badge></div>
</div>

<table class="branches-table">
<table class="commits-table">
<thead>
<tr>
<th><div>Seq.</div></th>
<th><div>Status</div></th>
<th><div>Name</div></th>
<th><div>UUID</div></th>
<th><div>Branch commits</div></th>
Expand All @@ -41,7 +46,7 @@
<th><div>Version</div></th>
</tr>
</thead>
<tbody>
<tbody class="pretty">
{#each brancheses as branches, i}
{#each branches as branch, j}
<BranchIndexCard
Expand All @@ -57,32 +62,14 @@
{/snippet}
</Loading>

<style lang="postcss">
.branches-table {
th {
padding: 0;
> div {
text-align: left;
padding: 16px;
border-top: 1px solid var(--clr-border-2);
border-bottom: 1px solid var(--clr-border-2);
overflow: hidden;
}
&:first-child {
> div {
border-left: 1px solid var(--clr-border-2);
border-top-left-radius: var(--radius-m);
}
}
&:last-child {
> div {
border-right: 1px solid var(--clr-border-2);
border-top-right-radius: var(--radius-m);
}
}
}
<style>
.title {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
gap: 10px;
}
.title > .text {
font-weight: bold;
}
</style>
Loading

0 comments on commit 34dfc56

Please sign in to comment.