mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-13 00:03:00 +00:00
Guilhem LemouelandClaude Opus 5
4293b7683a
The title, the queue counters, the kind and status filters, the schedule and future-job switches, the search field and the timeframe picker all ride the band now, and the page starts at the chart — one row of vertical space back. The two toggle groups appear from 1500px: below that the bar cannot hold them next to the search field, and the same filtering is reachable from the search field's own kind and status chips. The search field is what gives width back, and the breadcrumb yields last, so a page's own name stays whole while the workspace and fork names truncate. The queue counters keep their icon form at every width, since the bar has room for two counters and never for the two labelled blocks. Their counts hang outside their icons, so the group carries the margins that keep a badge off its neighbour, and the suspended counter answers a hover at zero rather than sitting there as a dead icon. The band is 44px rather than 40, and a page can hand the breadcrumb a hint — the documentation tooltip that belongs with the page's name rather than with its buttons. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
85 lines
2.1 KiB
Svelte
85 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { untrack } from 'svelte'
|
|
import { twMerge } from 'tailwind-merge'
|
|
import Popover from '$lib/components/Popover.svelte'
|
|
import DropdownV2 from '$lib/components/DropdownV2.svelte'
|
|
import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
|
|
import Tooltip from '$lib/components/meltComponents/Tooltip.svelte'
|
|
|
|
type TogglableItem = {
|
|
label: string
|
|
value: string
|
|
tooltip?: string
|
|
}
|
|
|
|
interface Props {
|
|
disabled?: boolean
|
|
small?: boolean
|
|
id?: string | undefined
|
|
item?: any | undefined
|
|
selected?: string | undefined
|
|
togglableItems: TogglableItem[]
|
|
btnText?: string
|
|
class?: string
|
|
hideSelectedOption?: boolean
|
|
}
|
|
|
|
let {
|
|
disabled = false,
|
|
small = false,
|
|
id = undefined,
|
|
item = undefined,
|
|
selected = $bindable(undefined),
|
|
togglableItems,
|
|
btnText,
|
|
class: className = '',
|
|
hideSelectedOption = false
|
|
}: Props = $props()
|
|
|
|
let items = untrack(() => togglableItems).map((i) => ({
|
|
displayName: i.label,
|
|
action: () => (selected = i.value),
|
|
tooltip: i.tooltip
|
|
}))
|
|
|
|
function isAnOptionSelected(selected: string | undefined) {
|
|
return togglableItems.some((i) => i.value === selected)
|
|
}
|
|
</script>
|
|
|
|
<Popover
|
|
disablePopup={true}
|
|
notClickable
|
|
class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className)}
|
|
disappearTimeout={0}
|
|
>
|
|
<div {id} class="flex">
|
|
{#if isAnOptionSelected(selected) && !hideSelectedOption}
|
|
{@const tooltip = togglableItems.find((i) => i.value === selected)?.tooltip}
|
|
<ToggleButton
|
|
{disabled}
|
|
value={selected ?? ''}
|
|
{item}
|
|
{small}
|
|
{id}
|
|
label={togglableItems.find((i) => i.value === selected)?.label}
|
|
{tooltip}
|
|
showTooltipIcon={!!tooltip}
|
|
/>
|
|
{/if}
|
|
<div class="flex items-center">
|
|
<!-- The tooltip fixes a bug where the other tooltips won't disappear -->
|
|
<Tooltip disablePopup>
|
|
<!-- fixedHeight pins the wrapper at h-8, which overhangs a small group's 28px row. -->
|
|
<DropdownV2
|
|
{btnText}
|
|
enableFlyTransition
|
|
{items}
|
|
size={small ? 'sm' : 'md'}
|
|
fixedHeight={!small}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</Popover>
|