mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-23 06:18:11 +08:00
Keavon Chambers
810ce40e9b
* 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
59 lines
1.3 KiB
Svelte
59 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { getContext, onMount } from "svelte";
|
|
|
|
import type { Editor } from "@graphite/editor";
|
|
import { defaultWidgetLayout, patchWidgetLayout, UpdateStatusBarHintsLayout } from "@graphite/messages";
|
|
|
|
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
|
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
|
|
|
|
const editor = getContext<Editor>("editor");
|
|
|
|
let statusBarHintsLayout = defaultWidgetLayout();
|
|
|
|
onMount(() => {
|
|
editor.subscriptions.subscribeJsMessage(UpdateStatusBarHintsLayout, (updateStatusBarHintsLayout) => {
|
|
patchWidgetLayout(statusBarHintsLayout, updateStatusBarHintsLayout);
|
|
statusBarHintsLayout = statusBarHintsLayout;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<LayoutRow class="status-bar">
|
|
<WidgetLayout class="hints" layout={statusBarHintsLayout} />
|
|
</LayoutRow>
|
|
|
|
<style lang="scss" global>
|
|
.status-bar {
|
|
height: 24px;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
|
|
.hints {
|
|
overflow: hidden;
|
|
--row-height: 24px;
|
|
margin: 0 4px;
|
|
max-width: calc(100% - 2 * 4px);
|
|
|
|
.text-label,
|
|
.shortcut-label {
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
|
|
+ .text-label,
|
|
+ .shortcut-label {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
.text-label:not(.bold) + .shortcut-label {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.text-label.bold {
|
|
padding: 0 4px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|