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

Implement window-controls-overlay PWA window frameless mode (#3986) 

* Implement window-controls-overlay PWA window frameless mode

* Avoid warning
This commit is contained in:
Keavon Chambers 2026-04-02 18:17:36 -07:00 committed by GitHub
parent 1a06d3ea80
commit ab822afae4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.branding
View File

@ -1,2 +1,2 @@
https://github.com/Keavon/graphite-branded-assets/archive/8ae15dc9c51a3855475d8cab1d0f29d9d9bc622c.tar.gz https://github.com/Keavon/graphite-branded-assets/archive/1509880500e32cb21235343ba865adcf0579133f.tar.gz
c19abe4ac848f3c835e43dc065c59e20e60233ae023ea0a064c5fed442be2d3d 89b4c58aee186b0c1610a8778bd199c9bdaf1191b4006e6b007dc40a402f4aa7

5
frontend/index.html
View File

@ -12,9 +12,12 @@
<meta name="apple-mobile-web-app-title" content="Graphite" /> <meta name="apple-mobile-web-app-title" content="Graphite" />
<meta name="application-name" content="Graphite" /> <meta name="application-name" content="Graphite" />
<meta name="msapplication-TileColor" content="#ffffff" /> <meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#222222" />
<meta name="color-scheme" content="dark only" /> <meta name="color-scheme" content="dark only" />
<meta name="darkreader-lock" /> <meta name="darkreader-lock" />
<meta name="description" content="Graphite is an open source vector graphics editor and procedural design engine. Create and animate with a nondestructive editing workflow that combines layer-based compositing with node-based generative design." />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- INDEX_HTML_HEAD_REPLACEMENT --> <!-- INDEX_HTML_HEAD_REPLACEMENT -->
</head> </head>
<body> <body>

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

@ -39,7 +39,7 @@
}); });
</script> </script>
<LayoutRow class="title-bar" styles={{ height: height + "px" }}> <LayoutRow class="title-bar" styles={{ "--title-bar-height": height + "px" }}>
<!-- Menu bar --> <!-- Menu bar -->
<LayoutRow class="menu-bar"> <LayoutRow class="menu-bar">
{#if $appWindow.platform !== "Mac"} {#if $appWindow.platform !== "Mac"}
@ -83,15 +83,38 @@
<style lang="scss" global> <style lang="scss" global>
.title-bar { .title-bar {
flex: 0 0 auto; flex: 0 0 auto;
height: var(--height);
--height: var(--title-bar-height);
// Frameless PWA drag regions and left/right offsets for window controls, see:
// https://web.dev/articles/window-controls-overlay
@media not (display-mode: fullscreen) {
--height: env(titlebar-area-height, var(--title-bar-height));
> .layout-row {
&.window-frame {
-webkit-app-region: drag;
// app-region: drag; // TODO: Uncomment this when SCSS doesn't consider it an unknown property, which produces a warning that CI treats as a failure
}
&:first-child {
margin-left: env(titlebar-area-x, 0);
}
&:last-child {
margin-right: calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0px));
}
}
}
> .layout-row { > .layout-row {
flex: 0 0 auto; flex: 0 0 auto;
> .widget-span { > .widget-span {
--row-height: 28px; --row-height: var(--height);
> * { > * {
--widget-height: 28px; --widget-height: var(--height);
} }
} }