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

Remove the application title from the header bar

Browse Source
This commit is contained in:
Keavon Chambers
2025-11-06 09:20:51 -08:00
parent 0d76ffd66d
commit 96d73a8570
6 changed files with 33 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/window/title-bar/TitleBar.svelte
+22 -44
View File
@@ -3,22 +3,18 @@
import type { Editor } from "@graphite/editor";
import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, type AppWindowPlatform, UpdateMenuBarLayout } from "@graphite/messages";
import type { PortfolioState } from "@graphite/state-providers/portfolio";
import { platformIsMac } from "@graphite/utility-functions/platform";
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";
import WindowTitle from "@graphite/components/window/title-bar/WindowTitle.svelte";
export let platform: AppWindowPlatform;
export let maximized: boolean;
const editor = getContext<Editor>("editor");
const portfolio = getContext<PortfolioState>("portfolio");
// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
const ACCEL_KEY = platformIsMac() ? "Command" : "Control";
@@ -32,10 +28,6 @@
let entries: MenuListEntry[] = [];
$: docIndex = $portfolio.activeDocumentIndex;
$: displayName = $portfolio.documents[docIndex]?.displayName || "";
$: windowTitle = `${displayName}${displayName && " - "}Graphite`;
onMount(() => {
const arraysEqual = (a: KeyRaw[], b: KeyRaw[]): boolean => a.length === b.length && a.every((aValue, i) => aValue === b[i]);
const shortcutRequiresLock = (shortcut: LayoutKeysGroup): boolean => {
@@ -67,32 +59,26 @@
</script>
<LayoutRow class="title-bar">
<!-- Menu bar (or on Mac: window buttons) -->
<LayoutRow class="left">
{#if platform === "Mac"}
<WindowButtonsMac />
{:else}
{#if platform !== "Mac"}
<!-- Menu bar -->
<LayoutRow>
{#each entries as entry}
<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} flush={true} />
{/each}
{/if}
<LayoutRow on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
</LayoutRow>
<!-- Document title -->
<LayoutRow class="center" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()}>
<WindowTitle text={windowTitle} />
</LayoutRow>
<!-- Window buttons (except on Mac) -->
<LayoutRow class="right">
<LayoutRow on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
{#if platform === "Windows"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Linux"}
<WindowButtonsLinux {maximized} />
{:else if platform === "Web"}
<WindowButtonsWeb />
{/if}
</LayoutRow>
</LayoutRow>
<!-- Spacer -->
<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
<!-- Window buttons -->
<LayoutRow>
{#if platform === "Web"}
<WindowButtonsWeb />
{:else if platform === "Windows"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Linux"}
<WindowButtonsLinux {maximized} />
{/if}
</LayoutRow>
{/if}
</LayoutRow>
<style lang="scss" global>
@@ -101,23 +87,15 @@
flex: 0 0 auto;
> .layout-row {
flex: 1 1 100%;
flex: 0 0 auto;
&.left {
justify-content: flex-start;
&.spacer {
flex: 1 1 100%;
}
&.center {
justify-content: center;
.text-button {
height: 100%;
}
&.right {
justify-content: flex-end;
}
}
.text-button {
height: 28px;
}
}
</style>