fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-28 09:28:11 +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/floating-menus/MenuList.svelte
+5 -5
View File
@@ -12,8 +12,8 @@
import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import Separator from "@graphite/components/widgets/labels/Separator.svelte";
import ShortcutLabel from "@graphite/components/widgets/labels/ShortcutLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
let self: FloatingMenu | undefined;
let scroller: LayoutCol | undefined;
@@ -447,8 +447,8 @@
<TextLabel class="entry-label" styles={{ "font-family": `${!entry.font ? "inherit" : entry.value}` }}>{entry.label}</TextLabel>
{#if entry.shortcutKeys?.keys.length}
<UserInputLabel keysWithLabelsGroups={[entry.shortcutKeys.keys]} requiresLock={entry.shortcutRequiresLock} textOnly={true} />
{#if entry.tooltipShortcut?.shortcut.length}
<ShortcutLabel shortcut={entry.tooltipShortcut} />
{/if}
{#if entry.children?.length}
@@ -499,7 +499,7 @@
margin: 4px 0;
div {
background: var(--color-4-dimgray);
background: var(--color-3-darkgray);
}
}
@@ -535,7 +535,7 @@
margin: 0 4px;
}
.user-input-label {
.shortcut-label {
margin-left: 12px;
}
frontend/src/components/floating-menus/Tooltip.svelte
+17 -14
View File
@@ -2,10 +2,12 @@
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import type { LabeledShortcut } from "@graphite/messages";
import type { TooltipState } from "@graphite/state-providers/tooltip";
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import ShortcutLabel from "@graphite/components/widgets/labels/ShortcutLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
const tooltip = getContext<TooltipState>("tooltip");
@@ -15,7 +17,15 @@
$: label = filterTodo($tooltip.element?.getAttribute("data-tooltip-label")?.trim());
$: description = filterTodo($tooltip.element?.getAttribute("data-tooltip-description")?.trim());
$: shortcut = filterTodo($tooltip.element?.getAttribute("data-tooltip-shortcut")?.trim());
$: shortcutJSON = $tooltip.element?.getAttribute("data-tooltip-shortcut")?.trim();
$: shortcut = ((shortcutJSON) => {
if (!shortcutJSON) return undefined;
try {
return JSON.parse(shortcutJSON) as LabeledShortcut;
} catch {
return undefined;
}
})(shortcutJSON);
// TODO: Once all TODOs are replaced with real text, remove this function
function filterTodo(text: string | undefined): string | undefined {
@@ -24,8 +34,8 @@
}
</script>
<div class="tooltip" style:top={`${$tooltip.position.y}px`} style:left={`${$tooltip.position.x}px`}>
{#if label || description}
{#if label || description}
<div class="tooltip" style:top={`${$tooltip.position.y}px`} style:left={`${$tooltip.position.x}px`}>
<FloatingMenu open={true} type="Tooltip" direction="Bottom" bind:this={self}>
{#if label || shortcut}
<LayoutRow class="tooltip-header">
@@ -33,7 +43,7 @@
<TextLabel class="tooltip-label">{label}</TextLabel>
{/if}
{#if shortcut}
<TextLabel class="tooltip-shortcut">{shortcut}</TextLabel>
<ShortcutLabel shortcut={{ shortcut }} />
{/if}
</LayoutRow>
{/if}
@@ -41,8 +51,8 @@
<TextLabel class="tooltip-description">{description}</TextLabel>
{/if}
</FloatingMenu>
{/if}
</div>
</div>
{/if}
<style lang="scss" global>
.tooltip {
@@ -62,17 +72,10 @@
white-space: pre-wrap;
}
.text-label + .tooltip-shortcut {
.text-label + .shortcut-label {
margin-left: 8px;
}
.tooltip-shortcut {
color: var(--color-b-lightgray);
background: var(--color-3-darkgray);
padding: 0 4px;
border-radius: 4px;
}
.tooltip-description {
color: var(--color-b-lightgray);
}