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

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

Browse Source 
* 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
3 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/index.html
View File

@@ -12,9 +12,12 @@
<meta name="apple-mobile-web-app-title" content="Graphite" />
<meta name="application-name" content="Graphite" />
<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="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 -->
</head>
<body>

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

@@ -39,7 +39,7 @@
});
</script>
<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
<LayoutRow class="title-bar" styles={{ "--title-bar-height": height + "px" }}>
<!-- Menu bar -->
<LayoutRow class="menu-bar">
{#if $appWindow.platform !== "Mac"}
@@ -83,15 +83,38 @@
<style lang="scss" global>
.title-bar {
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 {
flex: 0 0 auto;
> .widget-span {
--row-height: 28px;
--row-height: var(--height);
> * {
--widget-height: 28px;
--widget-height: var(--height);
}
}