Fix a couple frontend rendering flaws

This commit is contained in:
Keavon Chambers 2024-01-07 07:36:36 -08:00
parent 6a10bcc3fc
commit 1727694dfc
2 changed files with 6 additions and 11 deletions

View file

@ -1,4 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20,6v12H4V6H20 M22,4H2v16h20V4L22,4z" />
<rect x="5.5" y="7.5" class="color-vector" width="13" height="9" />
<!-- M0,0L24,24 is drawn invisibly and used to defeat Firefox's attempts to round the rectangle to the integer grid -->
<path class="color-vector" d="M0,0L24,24 M5.5,7.5v9h13v-9h-13" />
</svg>

Before

Width:  |  Height:  |  Size: 189 B

After

Width:  |  Height:  |  Size: 308 B

Before After
Before After

View file

@ -13,6 +13,8 @@
export let selectedIndex: number | undefined = undefined;
export let disabled = false;
$: mixed = selectedIndex === undefined && !disabled;
function handleEntryClick(radioEntryData: RadioEntryData) {
const index = entries.indexOf(radioEntryData);
dispatch("selectedIndex", index);
@ -23,20 +25,12 @@
<LayoutRow class="radio-input" classes={{ disabled }}>
{#each entries as entry, index}
<button
class:active={index === selectedIndex}
class:mixed={selectedIndex === undefined}
class:disabled
on:click={() => handleEntryClick(entry)}
title={entry.tooltip}
tabindex={index === selectedIndex ? -1 : 0}
{disabled}
>
<button class:active={index === selectedIndex} class:mixed class:disabled on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
{#if entry.icon}
<IconLabel icon={entry.icon} />
{/if}
{#if entry.label}
<TextLabel italic={selectedIndex === undefined}>{entry.label}</TextLabel>
<TextLabel italic={mixed}>{entry.label}</TextLabel>
{/if}
</button>
{/each}