mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

docs: update the macos Dock Instructions (#29197)

Browse source 
* Update the macos Dock Instructions

* Remove preload and ;'s

* Mixed ;s

* Update dock doc

* Add informational text to index.html
This commit is contained in:
Tony Ferrell 2021-05-18 18:03:13 -07:00 committed by GitHub
parent 5656493676
commit 071fa2ab8f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/fiddles/features/macos-dock-menu/index.html
View file

@ -7,10 +7,6 @@
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p> <p>Right click the dock icon to see the custom menu options.</p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body> </body>
</html> </html>

7
docs/fiddles/features/macos-dock-menu/main.js
View file

@ -4,9 +4,6 @@ function createWindow () {
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
webPreferences: {
nodeIntegration: true
}
}) })
win.loadFile('index.html') win.loadFile('index.html')
@ -27,7 +24,9 @@ const dockMenu = Menu.buildFromTemplate([
]) ])
app.whenReady().then(() => { app.whenReady().then(() => {
app.dock.setMenu(dockMenu) if (process.platform === 'darwin') {
app.dock.setMenu(dockMenu)
}
}).then(createWindow) }).then(createWindow)
app.on('window-all-closed', () => { app.on('window-all-closed', () => {

32
docs/tutorial/macos-dock.md
View file

@ -1,6 +1,4 @@
# macOS Dock # Configuring the macOS Dock
## Overview
Electron has APIs to configure the app's icon in the macOS Dock. A macOS-only Electron has APIs to configure the app's icon in the macOS Dock. A macOS-only
API exists to create a custom dock menu, but Electron also uses the app dock API exists to create a custom dock menu, but Electron also uses the app dock
@ -25,7 +23,16 @@ Starting with a working application from the
following lines: following lines:
```javascript fiddle='docs/fiddles/features/macos-dock-menu' ```javascript fiddle='docs/fiddles/features/macos-dock-menu'
const { app, Menu } = require('electron') const { app, BrowserWindow, Menu } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile('index.html')
}
const dockMenu = Menu.buildFromTemplate([ const dockMenu = Menu.buildFromTemplate([
{ {
@ -42,8 +49,23 @@ const dockMenu = Menu.buildFromTemplate([
]) ])
app.whenReady().then(() => { app.whenReady().then(() => {
app.dock.setMenu(dockMenu) if (process.platform === 'darwin') {
app.dock.setMenu(dockMenu)
}
}).then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
}) })
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
``` ```
After launching the Electron application, right click the application icon. After launching the Electron application, right click the application icon.