fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-30 15: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/title-bar/TitleBar.svelte
+55 -64
View File
@@ -1,75 +1,66 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.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 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: ["portfolio"],
props: {
platform: { type: String as PropType<Platform>, required: true },
maximized: { type: Boolean as PropType<boolean>, required: true },
},
computed: {
windowTitle(): string {
const activeDocumentIndex = this.portfolio.state.activeDocumentIndex;
const activeDocumentDisplayName = this.portfolio.state.documents[activeDocumentIndex]?.displayName || "";
return `${activeDocumentDisplayName}${activeDocumentDisplayName && " - "}Graphite`;
},
},
components: {
LayoutRow,
MenuBarInput,
WindowButtonsMac,
WindowButtonsWeb,
WindowButtonsWindows,
WindowTitle,
},
});
<script lang="ts" context="module">
export type Platform = "Windows" | "Mac" | "Linux" | "Web";
</script>
<template>
<LayoutRow class="title-bar">
<LayoutRow class="header-part">
<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
<MenuBarInput v-if="platform !== 'Mac'" />
</LayoutRow>
<LayoutRow class="header-part">
<WindowTitle :text="windowTitle" />
</LayoutRow>
<LayoutRow class="header-part">
<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
</LayoutRow>
<script lang="ts">
import LayoutRow from "@/components/layout/LayoutRow.svelte";
import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.svelte";
import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.svelte";
import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.svelte";
import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.svelte";
import WindowTitle from "@/components/window/title-bar/WindowTitle.svelte";
import { type PortfolioState } from "@/state-providers/portfolio";
import { getContext } from "svelte";
export let platform: Platform;
export let maximized: boolean;
const portfolio = getContext<PortfolioState>("portfolio");
$: docIndex = $portfolio.activeDocumentIndex;
$: displayName = $portfolio.documents[docIndex]?.displayName || "";
$: windowTitle = `${displayName}${displayName && " - "}Graphite`;
</script>
<LayoutRow class="title-bar">
<LayoutRow class="header-part">
{#if platform === "Mac"}
<WindowButtonsMac {maximized} />
{:else}
<MenuBarInput />
{/if}
</LayoutRow>
</template>
<LayoutRow class="header-part">
<WindowTitle text={windowTitle} />
</LayoutRow>
<LayoutRow class="header-part">
{#if platform === "Windows" || platform === "Linux"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Web"}
<WindowButtonsWeb />
{/if}
</LayoutRow>
</LayoutRow>
<style lang="scss">
.title-bar {
height: 28px;
flex: 0 0 auto;
<style lang="scss" global>
.title-bar {
height: 28px;
flex: 0 0 auto;
.header-part {
flex: 1 1 100%;
.header-part {
flex: 1 1 100%;
&:nth-child(1) {
justify-content: flex-start;
}
&:nth-child(1) {
justify-content: flex-start;
}
&:nth-child(2) {
justify-content: center;
}
&:nth-child(2) {
justify-content: center;
}
&:nth-child(3) {
justify-content: flex-end;
&:nth-child(3) {
justify-content: flex-end;
}
}
}
}
</style>