fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-28 16:48:13 +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/layout/FloatingMenu.svelte
+5 -5
View File
@@ -519,7 +519,7 @@
.floating-menu-content {
background: var(--color-2-mildblack);
box-shadow: rgba(var(--color-0-black-rgb), 0.5) 0 2px 4px;
border: 1px solid var(--color-4-dimgray);
border: 1px solid var(--color-3-darkgray);
border-radius: 4px;
color: var(--color-e-nearwhite);
font-size: inherit;
@@ -615,7 +615,7 @@
&.top .tail,
&.topleft .tail,
&.topright .tail {
border-color: var(--color-4-dimgray) transparent transparent transparent;
border-color: var(--color-3-darkgray) transparent transparent transparent;
&::before {
border-color: var(--color-2-mildblack) transparent transparent transparent;
@@ -633,7 +633,7 @@
&.bottom .tail,
&.bottomleft .tail,
&.bottomright .tail {
border-color: transparent transparent var(--color-4-dimgray) transparent;
border-color: transparent transparent var(--color-3-darkgray) transparent;
&::before {
border-color: transparent transparent var(--color-2-mildblack) transparent;
@@ -649,7 +649,7 @@
}
&.left .tail {
border-color: transparent transparent transparent var(--color-4-dimgray);
border-color: transparent transparent transparent var(--color-3-darkgray);
&::before {
border-color: transparent transparent transparent var(--color-2-mildblack);
@@ -665,7 +665,7 @@
}
&.right .tail {
border-color: transparent var(--color-4-dimgray) transparent transparent;
border-color: transparent var(--color-3-darkgray) transparent transparent;
&::before {
border-color: transparent var(--color-2-mildblack) transparent transparent;
frontend/src/components/layout/LayoutCol.svelte
+4 -2
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import type { ActionShortcut } from "@graphite/messages";
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
@@ -7,7 +9,7 @@
export let styles: Record<string, string | number | 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;
// TODO: Add middle-click drag scrolling
export let scrollableX = false;
export let scrollableY = false;
@@ -30,7 +32,7 @@
<div
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
data-scrollable-x={scrollableX ? "" : undefined}
data-scrollable-y={scrollableY ? "" : undefined}
class={`layout-col ${className} ${extraClasses}`.trim()}
frontend/src/components/layout/LayoutRow.svelte
+4 -2
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import type { ActionShortcut } from "@graphite/messages";
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
@@ -7,7 +9,7 @@
export let styles: Record<string, string | number | 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;
// TODO: Add middle-click drag scrolling
export let scrollableX = false;
export let scrollableY = false;
@@ -30,7 +32,7 @@
<div
data-tooltip-label={tooltipLabel}
data-tooltip-description={tooltipDescription}
data-tooltip-shortcut={tooltipShortcut}
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
data-scrollable-x={scrollableX ? "" : undefined}
data-scrollable-y={scrollableY ? "" : undefined}
class={`layout-row ${className} ${extraClasses}`.trim()}