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

Desktop: Add fullscreen window mode (#3625)

Browse Source
This commit is contained in:
Timon
2026-01-19 17:32:03 +01:00
committed by GitHub
parent fd0addf61c
commit 07fbcd489c
20 changed files with 195 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/window/TitleBar.svelte
View File

@@ -11,6 +11,7 @@
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";
import { isDesktop } from "/src/utility-functions/platform";
const appWindow = getContext<AppWindowState>("appWindow");
const editor = getContext<Editor>("editor");
@@ -19,7 +20,8 @@
let menuBarLayout: Layout = [];
$: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen;
$: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen || (isDesktop() && $appWindow.fullscreen);
$: isFullscreen = isDesktop() ? $appWindow.fullscreen : $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;
@@ -39,20 +41,23 @@
{/if}
</LayoutRow>
<!-- Window frame -->
<LayoutRow class="window-frame" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
<LayoutRow class="window-frame" on:mousedown={() => !isFullscreen && editor.handle.appWindowDrag()} on:dblclick={() => !isFullscreen && 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"}
tooltipLabel={isFullscreen ? "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)()}
tooltipShortcut={$tooltip.fullscreenShortcut}
on:click={() => {
if (isDesktop()) editor.handle.appWindowFullscreen();
else ($fullscreen.windowFullscreen ? fullscreen.exitFullscreen : fullscreen.enterFullscreen)();
}}
>
<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
<IconLabel icon={isFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
</LayoutRow>
{:else}
<LayoutRow tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
@@ -115,7 +120,7 @@
padding: 0 8px;
}
&.windows > .layout-row {
&.windows:not(.fullscreen) > .layout-row {
padding: 0 17px;
&:hover {
@@ -127,7 +132,7 @@
}
}
&.linux > .layout-row {
&.linux:not(.fullscreen) > .layout-row {
padding: 0 12px;
&:hover {
@@ -136,4 +141,6 @@
}
}
}
// paddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpadding
</style>