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

Remove the application title from the header bar

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/components/window/title-bar/TitleBar.svelte
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>

47
frontend/src/components/window/title-bar/WindowButtonsMac.svelte
View File

@ -1,47 +0,0 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
const editor = getContext<Editor>("editor");
</script>
<LayoutRow class="window-buttons-mac">
<div class="close" on:click={() => editor.handle.appWindowClose()} />
<div class="minimize" on:click={() => editor.handle.appWindowMinimize()} />
<div class="zoom" on:click={() => editor.handle.appWindowMaximize()} />
</LayoutRow>
<style lang="scss" global>
.window-buttons-mac {
flex: 0 0 auto;
align-items: center;
margin: 0 8px;
div {
flex: 0 0 auto;
align-items: center;
width: 11px;
height: 11px;
border-radius: 50%;
& + div {
margin-left: 8px;
}
&.close {
background: #ff5a52;
}
&.minimize {
background: #e6c029;
}
&.zoom {
background: #54c22b;
}
}
}
</style>

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

@ -5,7 +5,6 @@
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 fullscreen = getContext<FullscreenState>("fullscreen");
@ -17,10 +16,12 @@
}
</script>
<LayoutRow class="window-buttons-web" on:click={handleClick} tooltip={$fullscreen.windowFullscreen ? "Exit Fullscreen (F11)" : "Enter Fullscreen (F11)"}>
{#if requestFullscreenHotkeys}
<TextLabel italic={true}>Go fullscreen to access all hotkeys</TextLabel>
{/if}
<LayoutRow
class="window-buttons-web"
on:click={handleClick}
tooltip={($fullscreen.windowFullscreen ? "Exit Fullscreen (F11)" : "Enter Fullscreen (F11)") +
(requestFullscreenHotkeys ? "\n\nThis provides access to hotkeys normally reserved by the browser" : "")}
>
<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
</LayoutRow>
@ -34,13 +35,8 @@
fill: var(--color-e-nearwhite);
}
.text-label {
margin-right: 8px;
}
&:hover {
background: var(--color-6-lowergray);
color: var(--color-f-white);
svg {
fill: var(--color-f-white);

19
frontend/src/components/window/title-bar/WindowTitle.svelte
View File

@ -1,19 +0,0 @@
<script lang="ts">
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
export let text: string;
</script>
<LayoutRow class="window-title">
<TextLabel>{text}</TextLabel>
</LayoutRow>
<style lang="scss" global>
.window-title {
flex: 0 0 auto;
align-items: center;
white-space: nowrap;
padding: 0 8px;
}
</style>

9
frontend/src/messages.ts
View File

@ -139,12 +139,9 @@ export class UpdateWirePathInProgress extends JsMessage {
export class OpenDocument {
readonly id!: bigint;
@Type(() => DocumentDetails)
readonly details!: DocumentDetails;
get displayName(): string {
return this.details.displayName;
}
}
export class DocumentDetails {
@ -153,10 +150,6 @@ export class DocumentDetails {
readonly isAutoSaved!: boolean;
readonly isSaved!: boolean;
get displayName(): string {
return `${this.name}${this.isSaved ? "" : "*"}`;
}
}
export class Box {

8
node-graph/gmath-nodes/src/lib.rs
View File

@ -579,10 +579,10 @@ fn binary_gcd<T: num_traits::int::PrimInt + std::ops::ShrAssign<i32> + std::ops:
fn equals<T: std::cmp::PartialEq<T>>(
_: impl Ctx,
/// One of the two numbers to compare for equality.
#[implementations(f64, f32, u32, DVec2, &str, String)]
#[implementations(f64, f32, u32, DVec2, bool, &str, String)]
value: T,
/// The other of the two numbers to compare for equality.
#[implementations(f64, f32, u32, DVec2, &str, String)]
#[implementations(f64, f32, u32, DVec2, bool, &str, String)]
other_value: T,
) -> bool {
other_value == value
@ -593,10 +593,10 @@ fn equals<T: std::cmp::PartialEq<T>>(
fn not_equals<T: std::cmp::PartialEq<T>>(
_: impl Ctx,
/// One of the two numbers to compare for inequality.
#[implementations(f64, f32, u32, DVec2, &str)]
#[implementations(f64, f32, u32, DVec2, bool, &str)]
value: T,
/// The other of the two numbers to compare for inequality.
#[implementations(f64, f32, u32, DVec2, &str)]
#[implementations(f64, f32, u32, DVec2, bool, &str)]
other_value: T,
) -> bool {
other_value != value