Tweak the design of the RadioInput widget

Keavon · Keavon · commit 63cce26755c9 · 2025-05-24T16:07:01.000-07:00
diff --git a/frontend/src/components/panels/Spreadsheet.svelte b/frontend/src/components/panels/Spreadsheet.svelte
@@ -42,7 +42,7 @@
 			width: calc(100% + 2 * 4px);
 			margin-top: 8px;
 
-			span {
+			.text-label {
 				white-space: wrap;
 			}
 		}
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
@@ -994,7 +994,7 @@
 				{/if}
 				<div class="details">
 					<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
-					<span>{node.displayName}</span>
+					<TextLabel>{node.displayName}</TextLabel>
 				</div>
 				<div class="solo-drag-grip" title="Drag only this layer without pushing others outside the stack"></div>
 				<IconButton
@@ -1585,7 +1585,7 @@
 			.details {
 				margin: 0 8px;
 
-				span {
+				.text-label {
 					white-space: nowrap;
 					line-height: 48px;
 				}
diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages";
 
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
 	import WidgetTable from "@graphite/components/widgets/WidgetTable.svelte";
@@ -19,7 +20,7 @@
 	{:else if isWidgetTable(layoutGroup)}
 		<WidgetTable widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
 	{:else}
-		<span style="color: #d6536e">Error: The widget layout that belongs here has an invalid layout group type</span>
+		<TextLabel styles={{ color: "#d6536e" }}>Error: The widget layout that belongs here has an invalid layout group type</TextLabel>
 	{/if}
 {/each}
 
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
@@ -65,11 +65,11 @@
 				{#if isWidgetSpanRow(layoutGroup)}
 					<WidgetSpan widgetData={layoutGroup} {layoutTarget} />
 				{:else if isWidgetSpanColumn(layoutGroup)}
-					<span style="color: #d6536e">Error: The WidgetSpan used here should be a row not a column</span>
+					<TextLabel styles={{ color: "#d6536e" }}>Error: The WidgetSpan used here should be a row not a column</TextLabel>
 				{:else if isWidgetSection(layoutGroup)}
 					<svelte:self widgetData={layoutGroup} {layoutTarget} />
 				{:else}
-					<span style="color: #d6536e">Error: The widget that belongs here has an invalid layout group type</span>
+					<TextLabel styles={{ color: "#d6536e" }}>Error: The widget that belongs here has an invalid layout group type</TextLabel>
 				{/if}
 			{/each}
 		</LayoutCol>
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -155,7 +155,7 @@
 			&.disabled {
 				background: var(--color-2-mildblack);
 
-				span {
+				.text-label {
 					color: var(--color-8-uppergray);
 				}
 
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
@@ -156,7 +156,7 @@
 			&.open {
 				background: var(--color-6-lowergray);
 
-				span {
+				.text-label {
 					color: var(--color-f-white);
 				}
 			}
@@ -168,7 +168,7 @@
 			&.disabled {
 				background: var(--color-2-mildblack);
 
-				span {
+				.text-label {
 					color: var(--color-8-uppergray);
 				}
 			}
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -24,27 +24,32 @@
 	}
 </script>
 
-<LayoutRow class="radio-input" classes={{ disabled }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
+<LayoutRow class="radio-input" classes={{ disabled, mixed }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
 	{#each entries as entry, index}
-		<button class:active={index === selectedIndex} class:mixed class:disabled on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
+		<button class:active={!mixed ? index === selectedIndex : undefined} 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={mixed}>{entry.label}</TextLabel>
+				<TextLabel>{entry.label}</TextLabel>
 			{/if}
 		</button>
 	{/each}
 </LayoutRow>
 
 <style lang="scss" global>
 	.radio-input {
+		background: var(--color-5-dullgray);
+		border-radius: 2px;
+		height: 24px;
+
 		button {
 			background: var(--color-5-dullgray);
 			fill: var(--color-e-nearwhite);
-			height: 24px;
-			margin: 0;
+			border-radius: 2px;
+			height: 20px;
 			padding: 0;
+			margin: 2px 1px;
 			border: none;
 			display: flex;
 			align-items: center;
@@ -54,8 +59,12 @@
 			min-width: fit-content;
 			flex: 1 1 0;
 
-			&.mixed {
-				background: var(--color-4-dimgray);
+			&:first-of-type {
+				margin-left: 2px;
+			}
+
+			&:last-of-type {
+				margin-right: 2px;
 			}
 
 			&:hover {
@@ -76,7 +85,34 @@
 				}
 			}
 
-			&.disabled {
+			.icon-label {
+				margin: 2px;
+
+				+ .text-label {
+					margin-left: 0;
+				}
+			}
+
+			.text-label {
+				margin: 0 8px;
+				overflow: hidden;
+				flex: 0 0 auto;
+			}
+		}
+
+		&.mixed {
+			background: var(--color-4-dimgray);
+
+			button:not(:hover),
+			&.disabled button:hover {
+				background: var(--color-5-dullgray);
+			}
+		}
+
+		&.disabled {
+			background: var(--color-4-dimgray);
+
+			button {
 				background: var(--color-4-dimgray);
 				color: var(--color-8-uppergray);
 
@@ -93,37 +129,6 @@
 					}
 				}
 			}
-
-			& + button {
-				margin-left: 1px;
-			}
-
-			&:first-of-type {
-				border-radius: 2px 0 0 2px;
-			}
-
-			&:last-of-type {
-				border-radius: 0 2px 2px 0;
-			}
-
-			.icon-label {
-				margin: 0 4px;
-
-				+ .text-label {
-					margin-left: 0;
-				}
-			}
-
-			.text-label {
-				margin: 0 8px;
-				overflow: hidden;
-				flex: 0 0 auto;
-			}
-		}
-
-		&.combined-before button:first-of-type,
-		&.combined-after button:last-of-type {
-			border-radius: 0;
 		}
 	}
 </style>
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
@@ -248,7 +248,7 @@
 						}
 					}
 
-					span {
+					.text-label {
 						flex: 1 1 100%;
 						overflow-x: hidden;
 						white-space: nowrap;

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@`
`42`	`42`	`width: calc(100% + 2 * 4px);`
`43`	`43`	`margin-top: 8px;`
`44`	`44`
`45`		`- span {`
	`45`	`+ .text-label {`
`46`	`46`	`white-space: wrap;`
`47`	`47`	`}`
`48`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -155,7 +155,7 @@`
`155`	`155`	`&.disabled {`
`156`	`156`	`background: var(--color-2-mildblack);`
`157`	`157`
`158`		`- span {`
	`158`	`+ .text-label {`
`159`	`159`	`color: var(--color-8-uppergray);`
`160`	`160`	`}`
`161`	`161`
Original file line number	Diff line number	Diff line change
`@@ -156,7 +156,7 @@`
`156`	`156`	`&.open {`
`157`	`157`	`background: var(--color-6-lowergray);`
`158`	`158`
`159`		`- span {`
	`159`	`+ .text-label {`
`160`	`160`	`color: var(--color-f-white);`
`161`	`161`	`}`
`162`	`162`	`}`
`@@ -168,7 +168,7 @@`
`168`	`168`	`&.disabled {`
`169`	`169`	`background: var(--color-2-mildblack);`
`170`	`170`
`171`		`- span {`
	`171`	`+ .text-label {`
`172`	`172`	`color: var(--color-8-uppergray);`
`173`	`173`	`}`
`174`	`174`	`}`
Original file line number	Diff line number	Diff line change
`@@ -248,7 +248,7 @@`
`248`	`248`	`}`
`249`	`249`	`}`
`250`	`250`
`251`		`- span {`
	`251`	`+ .text-label {`
`252`	`252`	`flex: 1 1 100%;`
`253`	`253`	`overflow-x: hidden;`
`254`	`254`	`white-space: nowrap;`