fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-26 02:38:13 +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/inputs/FieldInput.svelte
+10 -5
View File
@@ -23,6 +23,7 @@
export let label: string | undefined = undefined;
export let spellcheck = false;
export let disabled = false;
export let narrow = false;
export let textarea = false;
export let tooltip: string | undefined = undefined;
export let placeholder: string | undefined = undefined;
@@ -73,7 +74,7 @@
</script>
<!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
<LayoutRow class={`field-input ${className}`} classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
<LayoutRow class={`field-input ${className}`} classes={{ disabled, narrow, ...classes }} style={styleName} {styles} {tooltip}>
{#if !textarea}
<input
type="text"
@@ -127,9 +128,13 @@
background: var(--color-1-nearblack);
flex-direction: row-reverse;
&.narrow.narrow {
--widget-height: 20px;
}
label {
flex: 0 0 auto;
line-height: 18px;
line-height: calc(var(--widget-height) - 6px);
padding: 3px 0;
padding-right: 4px;
margin-left: 8px;
@@ -147,8 +152,8 @@
flex: 1 1 100%;
width: 0;
min-width: 30px;
height: 18px;
line-height: 18px;
height: calc(var(--widget-height) - 6px);
line-height: calc(var(--widget-height) - 6px);
margin: 0 8px;
padding: 3px 0;
outline: none; // Ok for input/textarea element
@@ -189,7 +194,7 @@
}
textarea {
min-height: calc(18px * 3);
min-height: calc((var(--widget-height) - 6px) * 3);
margin: 3px;
padding: 0 5px;
box-sizing: border-box;