1f8a46c9c6
* feat: enable windows control overlay on macOS * address review feedback * chore: address review feedback * Address review feedback * update doc per review * only enable WCO when titleBarStyle is overlay * Revert "only enable WCO when titleBarStyle is overlay" This reverts commit 1b58b5b1fcb8f091880a4e5d1f8855399c44afad. * Add new titleBarOverlay property to manage feature * spelling fix * Update docs/api/frameless-window.md Co-authored-by: Samuel Attard <sam@electronjs.org> * Update shell/browser/api/electron_api_browser_window.cc Co-authored-by: Samuel Attard <sam@electronjs.org> * update per review feedback Co-authored-by: Samuel Attard <sam@electronjs.org>
84 lines
2.6 KiB
HTML
84 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<style>
|
|
:root {
|
|
--fallback-title-bar-height: 40px;
|
|
}
|
|
|
|
.draggable {
|
|
app-region: drag;
|
|
/* Pre-fix app-region during standardization process */
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
.nonDraggable {
|
|
app-region: no-drag;
|
|
/* Pre-fix app-region during standardization process */
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
|
|
#titleBarContainer {
|
|
position: absolute;
|
|
top: env(titlebar-area-y, 0);
|
|
height: env(titlebar-area-height, var(--fallback-title-bar-height));
|
|
width: 100%;
|
|
}
|
|
|
|
#titleBar {
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
user-select: none;
|
|
height: 100%;
|
|
left: env(titlebar-area-x, 0);
|
|
width: env(titlebar-area-width, 100%);
|
|
}
|
|
|
|
#mainContent {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: env(titlebar-area-height, var(--fallback-title-bar-height));
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
const {ipcRenderer} = require('electron');
|
|
navigator.windowControlsOverlay.ongeometrychange = function() {
|
|
const {x, y, width, height} = navigator.windowControlsOverlay.getBoundingClientRect();
|
|
ipcRenderer.send('geometrychange', {x, y, width, height});
|
|
};
|
|
</script>
|
|
<div id="titleBarContainer">
|
|
<div id="titleBar" class=" draggable">
|
|
<span class="draggable">Title goes here</span>
|
|
<input class="nonDraggable" type="text" placeholder="Search"></input>
|
|
</div>
|
|
</div>
|
|
<div id="mainContent"><!-- The rest of the webpage --></div>
|
|
<script>
|
|
function getCssOverlayProperties() {
|
|
const cssOverlayProps = {};
|
|
const titleBarContainer = document.getElementById('titleBarContainer');
|
|
const titleBar = document.getElementById('titleBar');
|
|
cssOverlayProps.y = titleBarContainer.computedStyleMap().get('top').value;
|
|
cssOverlayProps.height = titleBarContainer.computedStyleMap().get('height').value;
|
|
cssOverlayProps.x = titleBar.computedStyleMap().get('left').value;
|
|
cssOverlayProps.width = titleBar.computedStyleMap().get('width').value;
|
|
return cssOverlayProps;
|
|
}
|
|
|
|
function getJSOverlayProperties() {
|
|
const {x, y, width, height} = navigator.windowControlsOverlay.getBoundingClientRect();
|
|
return {x, y, width, height};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|