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

Simplify Svelte component structure in the window subfolder

Browse Source
This commit is contained in:
Keavon Chambers
2026-01-14 19:06:22 -08:00
parent aadc989134
commit 39849c9c02
9 changed files with 143 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/window/MainWindow.svelte
+3 -3
View File
@@ -10,9 +10,9 @@
import Tooltip from "@graphite/components/floating-menus/Tooltip.svelte"; import Tooltip from "@graphite/components/floating-menus/Tooltip.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte"; import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte"; import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import StatusBar from "@graphite/components/window/status-bar/StatusBar.svelte"; import StatusBar from "@graphite/components/window/StatusBar.svelte";
import TitleBar from "@graphite/components/window/title-bar/TitleBar.svelte"; import TitleBar from "@graphite/components/window/TitleBar.svelte";
import Workspace from "@graphite/components/window/workspace/Workspace.svelte"; import Workspace from "@graphite/components/window/Workspace.svelte";
const dialog = getContext<DialogState>("dialog"); const dialog = getContext<DialogState>("dialog");
const tooltip = getContext<TooltipState>("tooltip"); const tooltip = getContext<TooltipState>("tooltip");
frontend/src/components/window/workspace/Panel.svelte → frontend/src/components/window/Panel.svelte
View File
frontend/src/components/window/status-bar/StatusBar.svelte → frontend/src/components/window/StatusBar.svelte
View File
frontend/src/components/window/TitleBar.svelte
+139
View File
@@ -0,0 +1,139 @@
<script lang="ts">
import { getContext, onMount } from "svelte";
import type { Editor } from "@graphite/editor";
import type { Layout } from "@graphite/messages";
import { patchLayout, UpdateMenuBarLayout } from "@graphite/messages";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import type { FullscreenState } from "@graphite/state-providers/fullscreen";
import type { TooltipState } from "@graphite/state-providers/tooltip";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
const fullscreen = getContext<FullscreenState>("fullscreen");
const tooltip = getContext<TooltipState>("tooltip");
let menuBarLayout: Layout = [];
$: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen;
// On Mac, the menu bar height needs to be scaled by the inverse of the UI scale to fit its native window buttons
$: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28;
onMount(() => {
editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (data) => {
patchLayout(menuBarLayout, data);
menuBarLayout = menuBarLayout;
});
});
</script>
<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
<!-- Menu bar -->
<LayoutRow class="menu-bar">
{#if $appWindow.platform !== "Mac"}
<WidgetLayout layout={menuBarLayout} layoutTarget="MenuBar" />
{/if}
</LayoutRow>
<!-- Window frame -->
<LayoutRow class="window-frame" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
<!-- Window buttons -->
<LayoutRow class="window-buttons" classes={{ fullscreen: showFullscreenButton, windows: $appWindow.platform === "Windows", linux: $appWindow.platform === "Linux" }}>
{#if $appWindow.platform !== "Mac"}
{#if showFullscreenButton}
<LayoutRow
tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
tooltipDescription={$appWindow.platform === "Web" && $fullscreen.keyboardLockApiSupported
? "While fullscreen, keyboard shortcuts normally reserved by the browser become available."
: undefined}
tooltipShortcut={$tooltip.f11Shortcut}
on:click={() => ($fullscreen.windowFullscreen ? fullscreen.exitFullscreen : fullscreen.enterFullscreen)()}
>
<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
</LayoutRow>
{:else}
<LayoutRow tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon="WindowButtonWinMinimize" />
</LayoutRow>
<LayoutRow tooltipLabel={$appWindow.maximized ? ($appWindow.platform === "Windows" ? "Restore Down" : "Unmaximize") : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
<IconLabel icon="WindowButtonWinClose" />
</LayoutRow>
{/if}
{/if}
</LayoutRow>
</LayoutRow>
<style lang="scss" global>
.title-bar {
flex: 0 0 auto;
> .layout-row {
flex: 0 0 auto;
> .widget-span {
--row-height: 28px;
> * {
--widget-height: 28px;
}
}
&.window-frame {
flex: 1 1 100%;
}
.text-button {
height: 100%;
}
}
.window-buttons {
> .layout-row {
flex: 0 0 auto;
align-items: center;
svg {
fill: var(--color-e-nearwhite);
}
&:hover {
background: var(--color-6-lowergray);
svg {
fill: var(--color-f-white);
}
}
}
&.fullscreen > .layout-row {
padding: 0 8px;
}
&.windows > .layout-row {
padding: 0 17px;
&:hover {
background: #2d2d2d;
}
&:last-of-type:hover {
background: #c42b1c;
}
}
&.linux > .layout-row {
padding: 0 12px;
&:hover {
border-radius: 2px;
}
}
}
}
</style>
frontend/src/components/window/workspace/Workspace.svelte → frontend/src/components/window/Workspace.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte"; import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte"; import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import Panel from "@graphite/components/window/workspace/Panel.svelte"; import Panel from "@graphite/components/window/Panel.svelte";
const MIN_PANEL_SIZE = 100; const MIN_PANEL_SIZE = 100;
const PANEL_SIZES = { const PANEL_SIZES = {
frontend/src/components/window/title-bar/TitleBar.svelte
-76
View File
@@ -1,76 +0,0 @@
<script lang="ts">
import { getContext, onMount } from "svelte";
import type { Editor } from "@graphite/editor";
import type { Layout } from "@graphite/messages";
import { patchLayout, UpdateMenuBarLayout } from "@graphite/messages";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
import WindowButtonsLinux from "@graphite/components/window/title-bar/WindowButtonsLinux.svelte";
import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
let menuBarLayout: Layout = [];
// On mac menu bar needs to be scaled with inverse of UI scale to match native menu buttons.
$: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28;
onMount(() => {
editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (data) => {
patchLayout(menuBarLayout, data);
menuBarLayout = menuBarLayout;
});
});
</script>
<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
<!-- Menu bar -->
<LayoutRow>
{#if $appWindow.platform !== "Mac"}
<WidgetLayout layout={menuBarLayout} layoutTarget="MenuBar" />
{/if}
</LayoutRow>
<!-- Spacer -->
<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
<!-- Window buttons -->
<LayoutRow>
{#if $appWindow.platform === "Web"}
<WindowButtonsWeb />
{:else if $appWindow.platform === "Windows"}
<WindowButtonsWindows />
{:else if $appWindow.platform === "Linux"}
<WindowButtonsLinux />
{/if}
</LayoutRow>
</LayoutRow>
<style lang="scss" global>
.title-bar {
flex: 0 0 auto;
> .layout-row {
flex: 0 0 auto;
> .widget-span {
--row-height: 28px;
> * {
--widget-height: 28px;
}
}
&.spacer {
flex: 1 1 100%;
}
.text-button {
height: 100%;
}
}
}
</style>
frontend/src/components/window/title-bar/WindowButtonsLinux.svelte
-43
View File
@@ -1,43 +0,0 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
</script>
<LayoutRow class="window-button linux" tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon="WindowButtonWinMinimize" />
</LayoutRow>
<LayoutRow class="window-button linux" tooltipLabel={$appWindow.maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow class="window-button linux" tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
<IconLabel icon="WindowButtonWinClose" />
</LayoutRow>
<style lang="scss" global>
.window-button.linux {
flex: 0 0 auto;
align-items: center;
padding: 0 12px;
svg {
fill: var(--color-e-nearwhite);
}
&:hover {
background: var(--color-6-lowergray);
border-radius: 2px;
svg {
fill: var(--color-f-white);
}
}
}
</style>
frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
-48
View File
@@ -1,48 +0,0 @@
<script lang="ts">
import { getContext } from "svelte";
import type { FullscreenState } from "@graphite/state-providers/fullscreen";
import type { TooltipState } from "@graphite/state-providers/tooltip";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
const fullscreen = getContext<FullscreenState>("fullscreen");
const tooltip = getContext<TooltipState>("tooltip");
async function handleClick() {
if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
else fullscreen.enterFullscreen();
}
</script>
<LayoutRow
class="window-buttons-web"
on:click={handleClick}
tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
tooltipDescription={$fullscreen.keyboardLockApiSupported ? "While fullscreen, keyboard shortcuts normally reserved by the browser become available." : ""}
tooltipShortcut={$tooltip.f11Shortcut}
>
<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
</LayoutRow>
<style lang="scss" global>
.window-buttons-web {
flex: 0 0 auto;
align-items: center;
padding: 0 8px;
svg {
fill: var(--color-e-nearwhite);
}
&:hover {
background: var(--color-6-lowergray);
svg {
fill: var(--color-f-white);
}
}
}
</style>
frontend/src/components/window/title-bar/WindowButtonsWindows.svelte
-46
View File
@@ -1,46 +0,0 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import type { AppWindowState } from "@graphite/state-providers/app-window";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
</script>
<LayoutRow class="window-button windows" tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon="WindowButtonWinMinimize" />
</LayoutRow>
<LayoutRow class="window-button windows" tooltipLabel={$appWindow.maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow class="window-button windows" tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
<IconLabel icon="WindowButtonWinClose" />
</LayoutRow>
<style lang="scss" global>
.window-button.windows {
flex: 0 0 auto;
align-items: center;
padding: 0 17px;
svg {
fill: var(--color-e-nearwhite);
}
&:hover {
background: #2d2d2d;
svg {
fill: var(--color-f-white);
}
}
&:last-of-type:hover {
background: #c42b1c;
}
}
</style>