fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-26 08:48: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/buttons/BreadcrumbTrailButtons.svelte
+3 -1
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import type { ActionShortcut } from "@graphite/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
@@ -6,7 +8,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;
// Callbacks
export let action: (index: number) => void;
</script>
frontend/src/components/widgets/buttons/IconButton.svelte
+3 -2
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { type IconName, type IconSize } from "@graphite/icons";
import type { ActionShortcut } from "@graphite/messages";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -10,7 +11,7 @@
export let active = 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;
// Callbacks
export let action: (e?: MouseEvent) => void;
@@ -32,7 +33,7 @@
{disabled}
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
tabindex={active ? -1 : 0}
{...$$restProps}
>
frontend/src/components/widgets/buttons/ImageButton.svelte
+3 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import type { ActionShortcut } from "@graphite/messages";
import { IMAGE_BASE64_STRINGS } from "@graphite/utility-functions/images";
let className = "";
@@ -10,7 +11,7 @@
export let height: string | 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;
// Callbacks
export let action: (e?: MouseEvent) => void;
@@ -26,7 +27,7 @@
class={`image-button ${className} ${extraClasses}`.trim()}
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
alt=""
on:click={action}
/>
frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+3 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import type { FrontendGraphDataType } from "@graphite/messages";
import type { FrontendGraphDataType, ActionShortcut } from "@graphite/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -7,7 +7,7 @@
export let dataType: FrontendGraphDataType;
export let tooltipLabel: string | undefined = undefined;
export let tooltipDescription: string | undefined = undefined;
export let tooltipShortcut: string | undefined = undefined;
export let tooltipShortcut: ActionShortcut | undefined = undefined;
// Callbacks
export let action: (e?: MouseEvent) => void;
</script>
@@ -20,7 +20,7 @@
on:click={action}
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
tabindex="-1"
>
{#if !exposed}
frontend/src/components/widgets/buttons/PopoverButton.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { type IconName, type PopoverButtonStyle } from "@graphite/icons";
import type { MenuDirection } from "@graphite/messages";
import type { MenuDirection, ActionShortcut } from "@graphite/messages";
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -13,7 +13,7 @@
export let icon: IconName | 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;
export let popoverMinWidth = 1;
frontend/src/components/widgets/buttons/TextButton.svelte
+3 -3
View File
@@ -2,7 +2,7 @@
import { createEventDispatcher } from "svelte";
import type { IconName } from "@graphite/icons";
import type { MenuListEntry } from "@graphite/messages";
import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
@@ -25,7 +25,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 menuListChildren: MenuListEntry[][] | undefined = undefined;
// Callbacks
@@ -66,7 +66,7 @@
style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
data-emphasized={emphasized || undefined}
data-disabled={disabled || undefined}
data-text-button