07b1dcd980
* feat(frontend): wip * feat(frontend): wip * feat(frontend): wip * fix(frontend): improve buttons * fix(frontend): improve buttons wip * fix(frontend): wip * fix(frontend): rework done * feat(frontend): Fix grey buttons
45 lines
1.3 KiB
Svelte
45 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { msToSec } from '$lib/utils'
|
|
import { ExternalLink } from 'lucide-svelte'
|
|
import Popover from './Popover.svelte'
|
|
|
|
export let position: 'center' | 'left' | 'right' = 'center'
|
|
export let total: number
|
|
export let min: number | undefined
|
|
export let started_at: number | undefined
|
|
export let len: number
|
|
export let id: string
|
|
export let running: boolean
|
|
export let concat: boolean = false
|
|
export let gray: boolean = false
|
|
</script>
|
|
|
|
{#if min && started_at != undefined}
|
|
{#if !concat}
|
|
<div style="width: {((started_at - min) / total) * 100}%" class="h-4" />
|
|
{/if}
|
|
<Popover
|
|
style="width: {(len / total) * 100}%"
|
|
class="h-4 {gray
|
|
? 'bg-gray-300 dark:bg-gray-600'
|
|
: running
|
|
? 'bg-blue-400/90'
|
|
: 'bg-blue-500/90'} {position == 'left'
|
|
? 'rounded-l-sm'
|
|
: position == 'right'
|
|
? 'rounded-r-sm'
|
|
: 'rounded-sm'} center-center text-white text-2xs whitespace-nowrap hover:outline outline-1 outline-black"
|
|
>
|
|
<svelte:fragment slot="text"
|
|
><a href="/run/{id}" class="inline-flex items-center gap-1" target="_blank"
|
|
>{id} <ExternalLink size={14} /></a
|
|
></svelte:fragment
|
|
>
|
|
{#if len > 0}
|
|
<span class={len / total < 0.09 ? '-ml-14 text-primary font-mono' : 'font-mono'}
|
|
>{#if len}{msToSec(len, 1)}s{/if}</span
|
|
>
|
|
{/if}
|
|
</Popover>
|
|
{/if}
|