Created
September 16, 2024 13:07
-
-
Save RushingAlien/251199d0bd7c648bba104251bbe38726 to your computer and use it in GitHub Desktop.
Electron app with custom window frame
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="Content-Security-Policy" content="default-src 'self';"> | |
| <link href="./styles.css" rel="stylesheet"> | |
| <title>Custom Title Bar</title> | |
| </head> | |
| <body> | |
| <div id="title-bar"> | |
| <div id="title">My Electron App</div> | |
| <div id="window-controls"> | |
| <button id="minimize-btn">_</button> | |
| <button id="maximize-btn">[ ]</button> | |
| <button id="close-btn">X</button> | |
| </div> | |
| </div> | |
| <div id="content"> | |
| <h1>Hello Electron Developers!</h1> | |
| <p>Please run this fiddle with --ozone-platform-hint=auto under GNOME Wayland<br/><br/> Electron <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>.</p> | |
| </div> | |
| <script src="./renderer.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { app, BrowserWindow } = require('electron'); | |
| const path = require('path'); | |
| function createWindow() { | |
| const mainWindow = new BrowserWindow({ | |
| width: 800, | |
| height: 600, | |
| frame: false, // Disable the default frame | |
| webPreferences: { | |
| preload: path.join(__dirname, 'preload.js') | |
| } | |
| }); | |
| mainWindow.loadFile('index.html'); | |
| } | |
| app.whenReady().then(() => { | |
| createWindow(); | |
| app.on('activate', () => { | |
| if (BrowserWindow.getAllWindows().length === 0) { | |
| createWindow(); | |
| } | |
| }); | |
| }); | |
| app.on('window-all-closed', () => { | |
| if (process.platform !== 'darwin') { | |
| app.quit(); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "damaging-scissors-balance-kf0c0", | |
| "productName": "damaging-scissors-balance-kf0c0", | |
| "description": "My Electron application description", | |
| "keywords": [], | |
| "main": "./main.js", | |
| "version": "1.0.0", | |
| "author": "raambm", | |
| "scripts": { | |
| "start": "electron ." | |
| }, | |
| "dependencies": {}, | |
| "devDependencies": { | |
| "electron": "27.0.4" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * The preload script runs before. It has access to web APIs | |
| * as well as Electron's renderer process modules and some | |
| * polyfilled Node.js functions. | |
| * | |
| * https://www.electronjs.org/docs/latest/tutorial/sandbox | |
| */ | |
| window.addEventListener('DOMContentLoaded', () => { | |
| const replaceText = (selector, text) => { | |
| const element = document.getElementById(selector) | |
| if (element) element.innerText = text | |
| } | |
| for (const type of ['chrome', 'node', 'electron']) { | |
| replaceText(`${type}-version`, process.versions[type]) | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { remote } = require('electron'); | |
| document.getElementById('minimize-btn').addEventListener('click', () => { | |
| remote.getCurrentWindow().minimize(); | |
| }); | |
| document.getElementById('maximize-btn').addEventListener('click', () => { | |
| const window = remote.getCurrentWindow(); | |
| if (window.isMaximized()) { | |
| window.unmaximize(); | |
| } else { | |
| window.maximize(); | |
| } | |
| }); | |
| document.getElementById('close-btn').addEventListener('click', () => { | |
| remote.getCurrentWindow().close(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| } | |
| #title-bar { | |
| background-color: #333; | |
| color: white; | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px; | |
| -webkit-user-select: none; | |
| -webkit-app-region: drag; | |
| } | |
| #title { | |
| font-size: 16px; | |
| } | |
| #window-controls button { | |
| background-color: #555; | |
| color: white; | |
| border: none; | |
| width: 30px; | |
| height: 30px; | |
| margin-left: 10px; | |
| -webkit-app-region: no-drag; | |
| cursor: pointer; | |
| } | |
| #window-controls button:hover { | |
| background-color: #777; | |
| } | |
| #content { | |
| padding: 20px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello! There are a few steps to reproduce the issue
Reproductions steps:
--ozone-platform-hint=auto