File size: 2,025 Bytes
2409829 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<script lang="ts">
import { getContext, onMount } from "svelte";
import type { Editor } from "@graphite/editor";
import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages";
import { platformIsMac } from "@graphite/utility-functions/platform";
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";
const editor = getContext<Editor>("editor");
let hintData: HintData = [];
function inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
return hint.keyGroups;
}
onMount(() => {
editor.subscriptions.subscribeJsMessage(UpdateInputHints, (data) => {
hintData = data.hintData;
});
});
</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>
</LayoutRow>
<style lang="scss" global>
.status-bar {
height: 24px;
width: 100%;
flex: 0 0 auto;
.hint-groups {
flex: 0 0 auto;
max-width: 100%;
margin: 0 -4px;
overflow: hidden;
.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;
align-items: center;
font-weight: 700;
}
.user-input-label {
margin: 0 8px;
& + .user-input-label {
margin-left: 0;
}
}
}
}
</style>
|