jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Desktop: Add window control buttons for Linux (#3081) 

* Add window buttons for linux

* Code and design review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Timon 2025-08-28 03:53:43 +00:00 committed by GitHub
parent 82784b46a0
commit ad59e1c622
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/window/title-bar/TitleBar.svelte
View File

@ -8,6 +8,7 @@
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
import WindowButtonsLinux from "@graphite/components/window/title-bar/WindowButtonsLinux.svelte";
import WindowButtonsMac from "@graphite/components/window/title-bar/WindowButtonsMac.svelte";
import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
@ -82,8 +83,10 @@
</LayoutRow>
<!-- Window buttons (except on Mac) -->
<LayoutRow class="right">
{#if platform === "Windows" || platform === "Linux"}
{#if platform === "Windows"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Linux"}
<WindowButtonsLinux {maximized} />
{:else if platform === "Web"}
<WindowButtonsWeb />
{/if}

43
frontend/src/components/window/title-bar/WindowButtonsLinux.svelte Normal file
View File

@ -0,0 +1,43 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let maximized;
const editor = getContext<Editor>("editor");
</script>
<LayoutRow class="window-button linux" tooltip="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
<IconLabel icon={"WindowButtonWinMinimize"} />
</LayoutRow>
<LayoutRow class="window-button linux" tooltip={maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
<IconLabel icon={maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
</LayoutRow>
<LayoutRow class="window-button linux" tooltip="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>

11
frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
View File

@ -1,26 +1,17 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import type { FullscreenState } from "@graphite/state-providers/fullscreen";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
const editor = getContext<Editor>("editor");
const fullscreen = getContext<FullscreenState>("fullscreen");
$: requestFullscreenHotkeys = fullscreen.keyboardLockApiSupported && !$fullscreen.keyboardLocked;
async function handleClick(e: MouseEvent) {
// TODO: Remove this debugging option to switch from web to desktop window buttons
if (e.ctrlKey && e.shiftKey && e.altKey) {
editor.handle.appWindowMinimize();
editor.handle.appWindowMinimize();
return;
}
async function handleClick() {
if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
else fullscreen.enterFullscreen();
}