fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-02 06:58: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/window/status-bar/StatusBar.svelte
+24 -45
View File
@@ -2,45 +2,25 @@
import { getContext, onMount } from "svelte";
import type { Editor } from "@graphite/editor";
import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages";
import { operatingSystem } from "@graphite/utility-functions/platform";
import { defaultWidgetLayout, patchWidgetLayout, UpdateStatusBarHintsLayout } from "@graphite/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import Separator from "@graphite/components/widgets/labels/Separator.svelte";
import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
const editor = getContext<Editor>("editor");
let hintData: HintData = [];
function inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
return operatingSystem() === "Mac" && hint.keyGroupsMac ? hint.keyGroupsMac : hint.keyGroups;
}
let statusBarHintsLayout = defaultWidgetLayout();
onMount(() => {
editor.subscriptions.subscribeJsMessage(UpdateInputHints, (data) => {
hintData = data.hintData;
editor.subscriptions.subscribeJsMessage(UpdateStatusBarHintsLayout, (updateStatusBarHintsLayout) => {
patchWidgetLayout(statusBarHintsLayout, updateStatusBarHintsLayout);
statusBarHintsLayout = statusBarHintsLayout;
});
});
</script>
<LayoutRow class="status-bar">
<LayoutRow class="hint-groups">
{#each hintData as hintGroup, index (hintGroup)}
{#if index !== 0}
<Separator type="Section" />
{/if}
{#each hintGroup as hint (hint)}
{#if hint.plus}
<LayoutRow class="plus">+</LayoutRow>
{/if}
{#if hint.slash}
<LayoutRow class="slash">/</LayoutRow>
{/if}
<UserInputLabel mouseMotion={hint.mouse} keysWithLabelsGroups={inputKeysForPlatform(hint)}>{hint.label}</UserInputLabel>
{/each}
{/each}
</LayoutRow>
<WidgetLayout class="hints" layout={statusBarHintsLayout} />
</LayoutRow>
<style lang="scss" global>
@@ -49,30 +29,29 @@
width: 100%;
flex: 0 0 auto;
.hint-groups {
flex: 0 0 auto;
max-width: 100%;
margin: 0 -4px;
.hints {
overflow: hidden;
--row-height: 24px;
margin: 0 4px;
max-width: calc(100% - 2 * 4px);
.separator.section {
// Width of section separator (12px) minus the margin of the surrounding user input labels (8px)
margin: 0 calc(12px - 8px);
}
.plus,
.slash {
flex: 0 0 auto;
.text-label,
.shortcut-label {
align-items: center;
font-weight: 700;
flex-shrink: 0;
+ .text-label,
+ .shortcut-label {
margin-left: 4px;
}
}
.user-input-label {
margin: 0 8px;
.text-label:not(.bold) + .shortcut-label {
margin-left: 12px;
}
& + .user-input-label {
margin-left: 0;
}
.text-label.bold {
padding: 0 4px;
}
}
}