Update some UI components to polish the frontend

Keavon · Keavon · commit 2c88bee0ee42 · 2025-02-21T12:58:05.000-08:00
diff --git a/frontend/assets/icon-16px-solid/transformation-rotate.svg b/frontend/assets/icon-16px-solid/transformation-rotate.svg
@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-	<polygon ="15 12.5 12 10 12 12 4 12 4 4 6 4 3.5 1 1 4 3 4 3 13 12 13 12 15 15 12.5" />
 	<path d="M13.5,5l-2.5,3h2c0,2.76-2.24,5-5,5v1c3.31,0,6-2.69,6-6h2l-2.5-3z" />
 	<path d="M9,4v-1c-3.31,0-6,2.69-6,6H1l2.5,3,2.5-3h-2c0-2.76,2.24-5,5-5z" />
 	<circle cx="8.5" cy="8.5" r="1.25" />
diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
@@ -235,11 +235,11 @@
 		.scrollable-y {
 			overflow: hidden;
 
-			// Firefox (standardized in CSS, but less capable)
 			scrollbar-width: thin;
+			// Not supported in Safari
 			scrollbar-color: var(--color-5-dullgray) transparent;
 
-			// WebKit (only in Chromium/Safari but more capable)
+			// Safari (more capable, removed from recent versions of Chromium, possibly still supported in Safari but not tested)
 			&::-webkit-scrollbar {
 				width: calc(2px + 6px + 2px);
 				height: calc(2px + 6px + 2px);
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
@@ -614,23 +614,24 @@
 			.tool-shelf {
 				flex: 0 0 auto;
 				justify-content: space-between;
-				// A precaution in case the variables above somehow fail
-				max-width: var(--columns-width-max);
 
 				.tools {
 					flex: 0 1 auto;
 
+					// Disabled because Firefox appears to have switched to using overlay scrollbars which float atop the content and don't affect the layout (as of FF 135 on Windows).
+					// We'll keep this here in case it's needed in the future.
+					//
 					// Firefox-specific workaround for this bug causing the scrollbar to cover up the toolbar instead of widening to accommodate the scrollbar:
 					// <https://bugzilla.mozilla.org/show_bug.cgi?id=764076>
 					// <https://stackoverflow.com/questions/63278303/firefox-does-not-take-vertical-scrollbar-width-into-account-when-calculating-par>
 					// Remove this when the Firefox bug is fixed.
-					@-moz-document url-prefix() {
-						--available-height-plus-1: calc(var(--available-height) + 1px);
-						--3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--separator-height));
-						--overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px));
-						--firefox-scrollbar-width-space-occupied: 8; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows
-						padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns));
-					}
+					// @-moz-document url-prefix() {
+					// 	--available-height-plus-1: calc(var(--available-height) + 1px);
+					// 	--3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--height-of-separator));
+					// 	--overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px));
+					// 	--firefox-scrollbar-width-space-occupied: 2; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows
+					// 	padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns));
+					// }
 
 					.widget-span {
 						flex-wrap: wrap;
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -146,11 +146,12 @@
 		}
 
 		&.flush {
-			background: none;
+			--button-background-color: none;
+			--button-text-color: var(--color-e-nearwhite);
 
 			&:hover,
 			&.open {
-				background: var(--color-5-dullgray);
+				--button-background-color: var(--color-5-dullgray);
 			}
 		}
 
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -138,6 +138,7 @@
 
 			.dropdown-arrow {
 				margin: 4px;
+				margin-right: 2px;
 				flex: 0 0 auto;
 			}
 
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
@@ -72,7 +72,7 @@
 			dispatch("fontFamily", newName);
 
 			family = newName;
-			style = "Normal (400)";
+			style = "Regular (400)";
 		}
 
 		const fontFileUrl = await fonts.getFontFileUrl(family, style);
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -739,10 +739,6 @@
 				// An outline can appear when pressing the arrow button with left click then hitting Escape, so this stops that from showing
 				outline: none;
 
-				&:hover {
-					background: var(--color-4-dimgray);
-				}
-
 				&.right {
 					right: 0;
 					padding-left: 7px;
@@ -774,6 +770,18 @@
 						border-color: transparent var(--color-e-nearwhite) transparent transparent;
 					}
 				}
+
+				&:hover {
+					background: var(--color-4-dimgray);
+
+					&::before {
+						border-color: transparent transparent transparent var(--color-f-white);
+					}
+
+					&::after {
+						border-color: transparent var(--color-f-white) transparent transparent;
+					}
+				}
 			}
 		}
 
diff --git a/frontend/src/components/widgets/labels/Separator.svelte b/frontend/src/components/widgets/labels/Separator.svelte
@@ -25,7 +25,7 @@
 			}
 
 			&.section {
-				// If changing this, update `--separator-height` in `Document.svelte`
+				// If changing this, update `--height-of-separator` in `Document.svelte`
 				margin: 12px 0;
 				width: 100%;
 
diff --git a/frontend/src/state-providers/fonts.ts b/frontend/src/state-providers/fonts.ts
@@ -106,7 +106,7 @@ const weightNameMapping = new Map([
 	[100, "Thin"],
 	[200, "Extra Light"],
 	[300, "Light"],
-	[400, "Normal"],
+	[400, "Regular"],
 	[500, "Medium"],
 	[600, "Semi Bold"],
 	[700, "Bold"],
diff --git a/node-graph/gcore/src/consts.rs b/node-graph/gcore/src/consts.rs
@@ -6,4 +6,4 @@ pub const LAYER_OUTLINE_STROKE_WEIGHT: f64 = 1.;
 
 // Fonts
 pub const DEFAULT_FONT_FAMILY: &str = "Cabin";
-pub const DEFAULT_FONT_STYLE: &str = "Normal (400)";
+pub const DEFAULT_FONT_STYLE: &str = "Regular (400)";
diff --git a/node-graph/gcore/src/text/font_cache.rs b/node-graph/gcore/src/text/font_cache.rs
@@ -7,7 +7,7 @@ use std::collections::HashMap;
 pub struct Font {
 	#[serde(rename = "fontFamily")]
 	pub font_family: String,
-	#[serde(rename = "fontStyle")]
+	#[serde(rename = "fontStyle", deserialize_with = "migrate_font_style")]
 	pub font_style: String,
 }
 impl Font {
@@ -73,3 +73,9 @@ impl core::hash::Hash for FontCache {
 		self.font_file_data.keys().for_each(|font| font.hash(state));
 	}
 }
+
+// TODO: Eventually remove this migration document upgrade code
+fn migrate_font_style<'de, D: serde::Deserializer<'de>>(deserializer: D) -> Result<String, D::Error> {
+	use serde::Deserialize;
+	String::deserialize(deserializer).map(|name| if name == "Normal (400)" { "Regular (400)".to_string() } else { name })
+}
diff --git a/website/content/volunteer/guide/student-projects/_index.md b/website/content/volunteer/guide/student-projects/_index.md
@@ -191,6 +191,7 @@ In addition to the detailed projects above, here are some loose ideas that may b
 - [Node equivalence rewriting](https://github.com/GraphiteEditor/Graphite/issues/2021)
 - Snapping system overhaul
 - Advanced vector editing tool modes (segment editing, mesh vector, and more)
+- Meticulous tooling polishing and gizmo additions
 
 ## Successful past projects
 

Original file line number	Diff line number	Diff line change
`@@ -146,11 +146,12 @@`
`146`	`146`	`}`
`147`	`147`
`148`	`148`	`&.flush {`
`149`		`- background: none;`
	`149`	`+ --button-background-color: none;`
	`150`	`+ --button-text-color: var(--color-e-nearwhite);`
`150`	`151`
`151`	`152`	`&:hover,`
`152`	`153`	`&.open {`
`153`		`- background: var(--color-5-dullgray);`
	`154`	`+ --button-background-color: var(--color-5-dullgray);`
`154`	`155`	`}`
`155`	`156`	`}`
`156`	`157`
Original file line number	Diff line number	Diff line change
`@@ -138,6 +138,7 @@`
`138`	`138`
`139`	`139`	`.dropdown-arrow {`
`140`	`140`	`margin: 4px;`
	`141`	`+ margin-right: 2px;`
`141`	`142`	`flex: 0 0 auto;`
`142`	`143`	`}`
`143`	`144`
Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,7 @@`
`72`	`72`	`dispatch("fontFamily", newName);`
`73`	`73`
`74`	`74`	`family = newName;`
`75`		`- style = "Normal (400)";`
	`75`	`+ style = "Regular (400)";`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`const fontFileUrl = await fonts.getFontFileUrl(family, style);`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`&.section {`
`28`		- // If changing this, update `--separator-height` in `Document.svelte`
	`28`	+ // If changing this, update `--height-of-separator` in `Document.svelte`
`29`	`29`	`margin: 12px 0;`
`30`	`30`	`width: 100%;`
`31`	`31`