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

Major frontend code cleanup (#452)

Browse Source 
Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed
This commit is contained in:
Keavon Chambers
2022-01-02 06:00:02 -08:00
parent 1954aceb0e
commit 7e0cbb60b4
53 changed files with 842 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/window/MainWindow.vue
+5 -10
View File
@@ -39,18 +39,13 @@
<script lang="ts">
import { defineComponent } from "vue";
import TitleBar from "@/components/window/title-bar/TitleBar.vue";
import StatusBar from "@/components/window/status-bar/StatusBar.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import StatusBar from "@/components/window/status-bar/StatusBar.vue";
import TitleBar from "@/components/window/title-bar/TitleBar.vue";
import Workspace from "@/components/workspace/Workspace.vue";
export enum ApplicationPlatform {
"Windows" = "Windows",
"Mac" = "Mac",
"Linux" = "Linux",
"Web" = "Web",
}
export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
export default defineComponent({
components: {
@@ -62,7 +57,7 @@ export default defineComponent({
},
data() {
return {
platform: ApplicationPlatform.Web,
platform: "Web" as ApplicationPlatform,
maximized: true,
};
},
frontend/src/components/window/status-bar/StatusBar.vue
+2 -4
View File
@@ -1,7 +1,7 @@
<template>
<div class="status-bar">
<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
<Separator :type="SeparatorType.Section" v-if="index !== 0" />
<Separator :type="'Section'" v-if="index !== 0" />
<template v-for="hint in hintGroup" :key="hint">
<span v-if="hint.plus" class="plus">+</span>
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
@@ -35,11 +35,10 @@
<script lang="ts">
import { defineComponent } from "vue";
import { SeparatorType } from "@/components/widgets/widgets";
import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
import Separator from "@/components/widgets/separators/Separator.vue";
import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
export default defineComponent({
inject: ["editor"],
@@ -49,7 +48,6 @@ export default defineComponent({
},
data() {
return {
SeparatorType,
hintData: [] as HintData,
};
},
frontend/src/components/window/title-bar/TitleBar.vue
+12 -16
View File
@@ -1,14 +1,14 @@
<template>
<div class="header-third">
<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
<MenuBarInput v-if="platform !== 'Mac'" />
</div>
<div class="header-third">
<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
</div>
<div class="header-third">
<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
<WindowButtonsWeb :maximized="maximized" v-if="platform === ApplicationPlatform.Web" />
<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
</div>
</template>
@@ -32,25 +32,21 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
export type Platform = "Windows" | "Mac" | "Linux" | "Web";
export default defineComponent({
inject: ["documents"],
props: {
platform: { type: String, required: true },
maximized: { type: Boolean, required: true },
},
data() {
return {
ApplicationPlatform,
};
platform: { type: String as PropType<Platform>, required: true },
maximized: { type: Boolean as PropType<boolean>, required: true },
},
computed: {
activeDocumentDisplayName() {
frontend/src/components/window/title-bar/WindowButtonsMac.vue
+2 -2
View File
@@ -35,11 +35,11 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
export default defineComponent({
props: {
maximized: { type: Boolean, default: false },
maximized: { type: Boolean as PropType<boolean>, default: false },
},
});
</script>
frontend/src/components/window/title-bar/WindowButtonsWeb.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="window-buttons-web" @click="handleClick" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
<div class="window-buttons-web" @click="(e) => handleClick(e)" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
</div>
frontend/src/components/window/title-bar/WindowButtonsWindows.vue
+2 -2
View File
@@ -38,14 +38,14 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
components: { IconLabel },
props: {
maximized: { type: Boolean, default: false },
maximized: { type: Boolean as PropType<boolean>, default: false },
},
});
</script>
frontend/src/components/window/title-bar/WindowTitle.vue
+2 -2
View File
@@ -14,11 +14,11 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
export default defineComponent({
props: {
title: { type: String, required: true },
title: { type: String as PropType<string>, required: true },
},
});
</script>