TODO:
- Create About Page.
- From Tray window we should open another separate window (About Page).
To create a new page we need add into Main Process ( index.js ) the same initialization as we have for About Window.
electron-app/js/index.js
...
const AboutWindow = require('../windows/AboutWindow');
const TrayWindow = require('../windows/TrayWindow');
const TrayIcon = require('./TrayIcon');
...
let tray = null;
let trayIcon = null;
let about = null;
...
app.on('ready', function () {
tray = new TrayWindow();
about = new AboutWindow();
trayIcon = new TrayIcon(tray.window);
})
ipcMain.on('quit-app', function() {
...
about.window.close();
})
...
// Also we should add new Event that will opens new window.
ipcMain.on('show-about-window-event', function() {
about.window.show();
});
Lets create BrowserWindow. Initialization the same as we already do for Tray Window. Except few small details:
electron-app/windows/AboutWindow.js
const path = require('path');
const { BrowserWindow } = require('electron');
// Next module we will use for apropriate positioning. We should display about page in the center of the screen.
const Positioner = require('electron-positioner');
class AboutWindow {
constructor() {
let htmlPath = 'file://' + path.join(__dirname, '..') + '/pages/about_page.html'
this.window = new BrowserWindow({
show: false,
width: 300,
height: 336,
frame: false,
backgroundColor: '#E4ECEF',
// resizable: false
})
this.window.loadURL(htmlPath);
// На blur у нас исчезает окно About.
this.window.on('blur', () => {
this.window.hide();
});
// On show - we should display about window in center of the screen.
this.window.on('show', () => {
let positioner = new Positioner(this.window);
positioner.move('center');
});
}
}
module.exports = AboutWindow;
Lets create HTML page for about page:
electron-app/pages/about_page.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>ABOUT PAGE</h1>
</body>
</html>
Now we just need to add some button into Tray window that will opens About window:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body style='-webkit-app-region: no-drag'>
...
<button id='about'>Open About</button>
<script type='text/javascript'>
...
document.getElementById("about").addEventListener("click", function (e) {
ipcRenderer.send('show-about-window-event');
});
</script>
</body>
</html>
Lets launch: npm run electron