fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-01 20:08:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update UI widget designs to improve color consistency and add a narrow height mode

Browse Source
This commit is contained in:
Keavon Chambers
2025-09-08 21:48:22 -07:00
parent 485152bf8d
commit 22aa8c1264
41 changed files with 364 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/WidgetSpan.svelte
+11 -3
View File
@@ -40,6 +40,8 @@
export { className as class };
export let classes: Record<string, boolean> = {};
export let narrow = false;
$: extraClasses = Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
@@ -82,7 +84,7 @@
<!-- TODO: Refactor this component to use `<svelte:component this={attributesObject} />` to avoid all the separate conditional components -->
<div class={`widget-span ${className} ${extraClasses}`.trim()} class:row={direction === "row"} class:column={direction === "column"}>
<div class={`widget-span ${className} ${extraClasses}`.trim()} class:narrow class:row={direction === "row"} class:column={direction === "column"}>
{#each widgets as component, index}
{@const checkboxInput = narrowWidgetProps(component.props, "CheckboxInput")}
{#if checkboxInput}
@@ -202,11 +204,17 @@
.widget-span.row {
flex: 0 0 auto;
display: flex;
min-height: 32px;
--row-height: 32px;
min-height: var(--row-height);
&.narrow {
--row-height: 24px;
}
> * {
--widget-height: 24px;
margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
// Vertically center the widget within the row
margin: calc((var(--row-height) - var(--widget-height)) / 2) 0;
min-height: var(--widget-height);
&:not(.multiline) {