chadtmiller.com/knotless
git that lives in your Atmosphere account
1
10
A commit's checks menu is drawn when first opened, not on the server
web/src/lib/molecules/CheckMark.svelte+24−18
| @@ -5,30 +5,36 @@ | ||
import Icon from '#lib/atoms/Icon.svelte'; | ||
/** The checks of the commit shown, as one mark: how they stand and how many passed, opening to each, linked to its steps and log. */ | ||
let { checks }: { checks: CheckView[] } = $props(); | ||
const state = $derived(overall(checks.map((c) => c.status))); | ||
const all = $derived(overall(checks.map((c) => c.status))); | ||
const passed = $derived(checks.filter((c) => c.status === 'success').length); | ||
// Its menu is drawn once it is first asked for, not on the server: a | ||
// list draws a mark on each of its rows, and few are opened. The | ||
// click that opens it draws it before the menu is painted. | ||
let drawn = $state(false); | ||
</script> | ||
| ||
{#if checks.length} | ||
<details class="popover checks-menu"> | ||
<summary class="checks {state}" title="The checks of this commit" | ||
><Icon name={commitCheckIcon(state)} /><span>{`${passed} / ${checks.length}`}</span></summary | ||
<details class="popover checks-menu" ontoggle={(e) => e.currentTarget.open && (drawn = true)}> | ||
<summary class="checks {all}" title="The checks of this commit" onclick={() => (drawn = true)} | ||
><Icon name={commitCheckIcon(all)} /><span>{`${passed} / ${checks.length}`}</span></summary | ||
> | ||
<div class="menu"> | ||
<div class="menu-head">{`${passed} of ${checks.length} checks passed`}</div> | ||
{#each byStanding(checks) as c (c.workflow)} | ||
<a href={checkHref(c.repo, c.uri)} | ||
><span class="mark {standing(c)}"><Icon name={commitCheckIcon(standing(c))} /></span><b | ||
>{c.workflow}</b | ||
><span class="mute" title={c.skipped ?? undefined} | ||
>{c.error | ||
? 'Error' | ||
: c.skipped | ||
? 'Skipped' | ||
: `${capitalized(c.status)}${ran(c.startedAt, c.finishedAt) ? ` in ${ran(c.startedAt, c.finishedAt)}` : ''}`}</span | ||
></a | ||
> | ||
{/each} | ||
{#if drawn} | ||
<div class="menu-head">{`${passed} of ${checks.length} checks passed`}</div> | ||
{#each byStanding(checks) as c (c.workflow)} | ||
<a href={checkHref(c.repo, c.uri)} | ||
><span class="mark {standing(c)}"><Icon name={commitCheckIcon(standing(c))} /></span><b | ||
>{c.workflow}</b | ||
><span class="mute" title={c.skipped ?? undefined} | ||
>{c.error | ||
? 'Error' | ||
: c.skipped | ||
? 'Skipped' | ||
: `${capitalized(c.status)}${ran(c.startedAt, c.finishedAt) ? ` in ${ran(c.startedAt, c.finishedAt)}` : ''}`}</span | ||
></a | ||
> | ||
{/each} | ||
{/if} | ||
</div> | ||
</details> | ||
{/if} | ||