fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 06:38:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Restyle and refactor shortcut labels to send hints bar and welcome screen layouts from Rust (#3447)

Browse Source 
* Restyle UserInputLabel and refactor its usages to have all input its data sent from Rust

* Replace the welcome screen quick buttons with ones sent by backend

* Add the ShortcutLabel widget to the backend

* Replace hints bar with a backend-controlled layout; show mouse icons in place of mouse labels
This commit is contained in:
Keavon Chambers
2025-12-04 01:04:14 -08:00
committed by GitHub
parent 6ed42d06bb
commit 810ce40e9b
78 changed files with 981 additions and 997 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/inputs/CheckboxInput.svelte
+3 -2
View File
@@ -2,6 +2,7 @@
import { createEventDispatcher } from "svelte";
import type { IconName } from "@graphite/icons";
import type { ActionShortcut } from "@graphite/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -13,7 +14,7 @@
export let icon: IconName = "Checkmark";
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
export let forLabel: bigint | undefined = undefined;
let inputElement: HTMLInputElement | undefined;
@@ -55,7 +56,7 @@
on:keydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)}
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
>
<LayoutRow class="checkbox-box">
<IconLabel icon={displayIcon} />
frontend/src/components/widgets/inputs/ColorInput.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { FillChoice, MenuDirection } from "@graphite/messages";
import type { FillChoice, MenuDirection, ActionShortcut } from "@graphite/messages";
import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
@@ -19,7 +19,7 @@
// export let allowTransparency = false; // TODO: Implement
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
$: outlined = outlineFactor > 0.0001;
frontend/src/components/widgets/inputs/CurveInput.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { Curve, CurveManipulatorGroup } from "@graphite/messages";
import type { Curve, CurveManipulatorGroup, ActionShortcut } from "@graphite/messages";
import { clamp } from "@graphite/utility-functions/math";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -18,7 +18,7 @@
export let disabled = false;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
const GRID_SIZE = 4;
frontend/src/components/widgets/inputs/DropdownInput.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { MenuListEntry } from "@graphite/messages";
import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -23,7 +23,7 @@
export let narrow = false;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
export let minWidth = 0;
export let maxWidth = 0;
frontend/src/components/widgets/inputs/FieldInput.svelte
+2 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { ActionShortcut } from "@graphite/messages";
import { operatingSystem } from "@graphite/utility-functions/platform";
import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
@@ -27,7 +28,7 @@
export let textarea = false;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
export let placeholder: string | undefined = undefined;
export let hideContextMenu = false;
frontend/src/components/widgets/inputs/FontInput.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher, getContext, onMount, tick } from "svelte";
import type { MenuListEntry } from "@graphite/messages";
import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
import type { FontsState } from "@graphite/state-providers/fonts";
import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
@@ -25,7 +25,7 @@
export let disabled = false;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
let open = false;
let entries: MenuListEntry[] = [];
frontend/src/components/widgets/inputs/NumberInput.svelte
+3 -3
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { createEventDispatcher, onMount, onDestroy } from "svelte";
import { evaluateMathExpression } from "@graphite/../wasm/pkg/graphite_wasm.js";
import { evaluateMathExpression } from "@graphite/../wasm/pkg/graphite_wasm";
import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages";
import type { NumberInputMode, NumberInputIncrementBehavior, ActionShortcut } from "@graphite/messages";
import { browserVersion, isDesktop } from "@graphite/utility-functions/platform";
import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
@@ -20,7 +20,7 @@
export let label: string | undefined = undefined;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
// Disabled
export let disabled = false;
frontend/src/components/widgets/inputs/RadioInput.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
on:click={() => handleEntryClick(entry)}
data-tooltip-label={entry.tooltipLabel}
data-tooltip-description={entry.tooltipDescription}
data-tooltip-shortcut={entry.tooltipShortcut}
data-tooltip-shortcut={entry.tooltipShortcut?.shortcut ? JSON.stringify(entry.tooltipShortcut.shortcut) : undefined}
tabindex={index === selectedIndex ? -1 : 0}
{disabled}
>
frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+9 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { ReferencePoint } from "@graphite/messages";
import type { ReferencePoint, ActionShortcut } from "@graphite/messages";
const dispatch = createEventDispatcher<{ value: ReferencePoint }>();
@@ -9,14 +9,20 @@
export let disabled = false;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
function setValue(newValue: ReferencePoint) {
dispatch("value", newValue);
}
</script>
<div class="reference-point-input" class:disabled data-tooltip-label={tooltipLabel} data-tooltip-description={tooltipDescription} data-tooltip-shortcut={tooltipShortcut}>
<div
class="reference-point-input"
class:disabled
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
>
<button on:click={() => setValue("TopLeft")} class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("TopCenter")} class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("TopRight")} class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div /></button>
frontend/src/components/widgets/inputs/SpectrumInput.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
// export let disabled = false;
// export let tooltipLabel: string | undefined = undefined;
// export let tooltipDescription: string | undefined = undefined;
// export let tooltipShortcut: string | undefined = undefined;
// export let tooltipShortcut: ActionShortcut | undefined = undefined;
let markerTrack: LayoutRow | undefined = undefined;
let positionRestore: number | undefined = undefined;
frontend/src/components/widgets/inputs/TextAreaInput.svelte
+3 -1
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { ActionShortcut } from "@graphite/messages";
import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
const dispatch = createEventDispatcher<{ commitText: string }>();
@@ -9,7 +11,7 @@
export let label: string | undefined = undefined;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
export let disabled = false;
let self: FieldInput | undefined;
frontend/src/components/widgets/inputs/TextInput.svelte
+3 -1
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { ActionShortcut } from "@graphite/messages";
import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
const dispatch = createEventDispatcher<{ commitText: string }>();
@@ -9,7 +11,7 @@
export let label: string | undefined = undefined;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
export let placeholder: string | undefined = undefined;
// Disabled
export let disabled = false;