Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154<script lang="ts"> import Reveal from "./Reveal.svelte";
/* * A stacked pull request, no words: the pull page's commit list, an "all changes" row * over the stack, each commit its change id, subject and diff stat, on the range rail. * The rows rise in; then the selection narrows from the whole stack to one change and * back, the interdiff the pull page lets you take. */ const commits = [ { subject: "w-44", add: "w-6", del: "w-4" }, { subject: "w-56", add: "w-8", del: "w-5" }, { subject: "w-36", add: "w-5", del: "" }, { subject: "w-48", add: "w-5", del: "w-3" } ];</script>
<Reveal items=".all, .commit" class="stack"> <div class="all"> <span class="dot"></span> <span class="bar strong w-20"></span> <span class="stat"><span class="add w-8"></span><span class="del w-6"></span></span> </div> <div class="commits"> <span class="rail" aria-hidden="true"><span class="selection"></span></span> {#each commits as commit, i (i)} <div class="commit"> <span class="dot"></span> <span class="bar id w-14"></span> <span class={["bar strong", commit.subject]}></span> <span class="stat"> <span class={["add", commit.add]}></span> {#if commit.del}<span class={["del", commit.del]}></span>{/if} </span> </div> {/each} </div></Reveal>
<style> :global(.stack) { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; border-radius: var(--radius-md, 0.375rem); background: var(--color-background-default); box-shadow: 0 0 0 1px var(--color-border-default); } .all, .commit { display: flex; align-items: center; gap: 0.875rem; height: 2.5rem; padding: 0 0.75rem; } .all { border-radius: var(--radius-md, 0.375rem); background: var(--color-background-subtle); box-shadow: 0 0 0 1px var(--color-border-default); } .commits { position: relative; padding-top: 0.5rem; border-top: 1px solid var(--color-border-default); }
/* the range rail down the dots, and the selection on it */ .rail { position: absolute; top: 0.5rem; bottom: 0; left: 0.5rem; width: 1.25rem; border-radius: 999px; background: var(--color-background-subtle); box-shadow: inset 0 0 0 1px var(--color-border-default); } .selection { position: absolute; inset: 0.125rem; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--color-background-info-emphasis); } .dot { position: relative; flex: none; width: 0.5rem; height: 0.5rem; margin-left: 0.125rem; border-radius: 50%; background: var(--color-foreground-subtle); }
.bar { display: block; height: 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-foreground-default) 22%, transparent); } .bar.strong { height: 0.625rem; background: color-mix(in srgb, var(--color-foreground-default) 28%, transparent); } .bar.id { background: color-mix(in srgb, var(--color-foreground-default) 14%, transparent); }
/* the diff stat pill: green insertions, red deletions */ .stat { display: flex; margin-left: auto; overflow: clip; border-radius: var(--radius-md, 0.375rem); } .add, .del { display: block; height: 1.125rem; } .add { background: var(--color-background-success-subtle); box-shadow: inset 0 -0.3125rem 0 -0.0625rem var(--color-background-success-subtle), inset 0 0.3125rem 0 -0.0625rem var(--color-background-success-subtle); background-image: linear-gradient(var(--color-foreground-success), var(--color-foreground-success)); background-size: 60% 0.25rem; background-position: center; background-repeat: no-repeat; } .del { background: var(--color-background-danger-subtle); background-image: linear-gradient(var(--color-foreground-danger), var(--color-foreground-danger)); background-size: 60% 0.25rem; background-position: center; background-repeat: no-repeat; }
/* once the rows are in, the selection narrows to the second change and comes back */ :global(.reveal.playing) .selection { animation: narrow 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both; } @keyframes narrow { 0%, 100% { inset: 0.125rem; } 35%, 65% { inset: 2.625rem 0.125rem calc(100% - 5.125rem); } }</style>