fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 21:48:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace the Vue frontend with Svelte

Browse Source
This commit is contained in:
Keavon Chambers
2023-03-10 03:54:39 -08:00
parent e539e43483
commit 6e20ea538b
83 changed files with 10013 additions and 19687 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/window/status-bar/StatusBar.svelte
+57 -64
View File
@@ -1,82 +1,75 @@
<script lang="ts">
import { defineComponent } from "vue";
import { getContext, onMount } from "svelte";
import { platformIsMac } from "@/utility-functions/platform";
import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
import { platformIsMac } from "@/utility-functions/platform";
import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import Separator from "@/components/widgets/labels/Separator.vue";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
import LayoutRow from "@/components/layout/LayoutRow.svelte";
import Separator from "@/components/widgets/labels/Separator.svelte";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
import { type Editor } from "@/wasm-communication/editor";
export default defineComponent({
inject: ["editor"],
data() {
return {
hintData: [] as HintData,
};
},
methods: {
inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
return hint.keyGroups;
},
},
mounted() {
this.editor.subscriptions.subscribeJsMessage(UpdateInputHints, (updateInputHints) => {
this.hintData = updateInputHints.hintData;
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;
});
},
components: {
LayoutRow,
Separator,
UserInputLabel,
},
});
});
</script>
<template>
<LayoutRow class="status-bar">
<LayoutRow class="hint-groups">
<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
<Separator :type="'Section'" v-if="index !== 0" />
<template v-for="hint in hintGroup" :key="hint">
<LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
<UserInputLabel :mouseMotion="hint.mouse" :keysWithLabelsGroups="inputKeysForPlatform(hint)">{{ hint.label }}</UserInputLabel>
</template>
</template>
</LayoutRow>
<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}
<UserInputLabel mouseMotion={hint.mouse} keysWithLabelsGroups={inputKeysForPlatform(hint)}>{hint.label}</UserInputLabel>
{/each}
{/each}
</LayoutRow>
</template>
</LayoutRow>
<style lang="scss">
.status-bar {
height: 24px;
width: 100%;
flex: 0 0 auto;
.hint-groups {
<style lang="scss" global>
.status-bar {
height: 24px;
width: 100%;
flex: 0 0 auto;
max-width: 100%;
margin: 0 -4px;
overflow: hidden;
.separator.section {
margin: 0;
}
.plus {
.hint-groups {
flex: 0 0 auto;
align-items: center;
font-weight: 700;
}
max-width: 100%;
margin: 0 -4px;
overflow: hidden;
.user-input-label {
margin: 0 8px;
.separator.section {
margin: 0;
}
& + .user-input-label {
margin-left: 0;
.plus {
flex: 0 0 auto;
align-items: center;
font-weight: 700;
}
.user-input-label {
margin: 0 8px;
& + .user-input-label {
margin-left: 0;
}
}
}
}
}
</style>