CODEWITHSUNDEEP
electron
mafortis
mafortis

Reputation: 7138

How to make about popup in electron

I want to know how can I add about button in my electron app that opens popup with software details? something like this:

one

Code

This is how currently my index.js looks like:

const { app, BrowserWindow, Menu } = require('electron');
const isDevMode = require('electron-is-dev');
const { CapacitorSplashScreen, configCapacitor } = require('@capacitor/electron');

const path = require('path');

// Place holders for our windows so they don't get garbage collected.
let mainWindow = null;

// Placeholder for SplashScreen ref
let splashScreen = null;

//Change this if you do not wish to have a splash screen
let useSplashScreen = true;

// Create simple menu for easy devtools access, and for demo
const menuTemplateDev = [
  {
    label: 'Options',
    submenu: [
      {
        label: 'Open Dev Tools',
        accelerator: "CmdOrCtrl+D",
        click() {
          mainWindow.openDevTools();
        },
      },
    ],
  },
  {
    label: 'Help',
    submenu: [
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron');
          await shell.openExternal('https://example.com/contact-us');
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

const menuTemplateProd = [
  {
    label: 'Help',
    submenu: [
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('https://example.com/contact-us')
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

async function createWindow () {
  // Define our main window size
  mainWindow = new BrowserWindow({
    height: 920,
    width: 1600,
    show: false,
    // icon: __dirname + '/Icon/Icon.icns',
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'node_modules', '@capacitor', 'electron', 'dist', 'electron-bridge.js')
    }
  });
  mainWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));

  configCapacitor(mainWindow);

  if (isDevMode) {
    // Set our above template to the Menu Object if we are in development mode, dont want users having the devtools.
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateDev));
    // If we are developers we might as well open the devtools by default.
    mainWindow.webContents.openDevTools();
  } else {
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateProd));
  }

  if(useSplashScreen) {
    splashScreen = new CapacitorSplashScreen(mainWindow);
    splashScreen.init();
  } else {
    mainWindow.loadURL(`file://${__dirname}/app/index.html`);
    mainWindow.webContents.on('dom-ready', () => {
      mainWindow.show();
    });
  }

}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some Electron APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// Define any IPC or other custom functionality below here

Any suggestions?

Upvotes: 4

Views: 4866

Answers (1)

mafortis
mafortis

Reputation: 7138

SOLVED

I've added new window function and new index file. And changed my index.js to the following code:

const { app, BrowserWindow, Menu } = require('electron');
const isDevMode = require('electron-is-dev');
const { CapacitorSplashScreen, configCapacitor } = require('@capacitor/electron');

const path = require('path');

// Place holders for our windows so they don't get garbage collected.
let mainWindow = null;
let childWindow = null;  // <---- ADDED

// Placeholder for SplashScreen ref
let splashScreen = null;

//Change this if you do not wish to have a splash screen
let useSplashScreen = true;

// Create simple menu for easy devtools access, and for demo
const menuTemplateDev = [
  {
    label: 'Options',
    submenu: [
      {
        label: 'Open Dev Tools',
        accelerator: "CmdOrCtrl+D",
        click() {
          mainWindow.openDevTools();
        },
      },
    ],
  },
  {
    label: 'Help',
    submenu: [
      {  // <---- ADDED
        label: 'About',  // <---- ADDED
        accelerator: "F1",  // <---- ADDED
        click: async () => {  // <---- ADDED
          createAboutWindow();  // <---- ADDED
        }  // <---- ADDED
      },  // <---- ADDED
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron');
          await shell.openExternal('https://example.com/contact-us');
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

const menuTemplateProd = [
  {
    label: 'Help',
    submenu: [
      {  // <---- ADDED
        label: 'About',  // <---- ADDED
        accelerator: "F1",  // <---- ADDED
        click: async () => {  // <---- ADDED
          createAboutWindow();  // <---- ADDED
        }  // <---- ADDED
      },  // <---- ADDED
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('https://example.com/contact-us')
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

async function createWindow () {
  // Define our main window size
  mainWindow = new BrowserWindow({
    height: 920,
    width: 1600,
    show: false,
    // icon: __dirname + '/Icon/Icon.icns',
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'node_modules', '@capacitor', 'electron', 'dist', 'electron-bridge.js')
    }
  });
  mainWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));

  configCapacitor(mainWindow);

  if (isDevMode) {
    // Set our above template to the Menu Object if we are in development mode, dont want users having the devtools.
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateDev));
    // If we are developers we might as well open the devtools by default.
    mainWindow.webContents.openDevTools();
  } else {
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateProd));
  }

  if(useSplashScreen) {
    splashScreen = new CapacitorSplashScreen(mainWindow);
    splashScreen.init();
  } else {
    mainWindow.loadURL(`file://${__dirname}/app/index.html`);
    mainWindow.webContents.on('dom-ready', () => {
      mainWindow.show();
    });
  }

}

async function createAboutWindow () {  // <---- ADDED
  // Define our main window size
  childWindow = new BrowserWindow({  // <---- ADDED
    height: 400,  // <---- ADDED
    width: 600,  // <---- ADDED
    show: false,  // <---- ADDED
    minimizable: false,  // <---- ADDED
    maximizable: false,  // <---- ADDED
    parent: mainWindow,  // <---- ADDED
    // icon: __dirname + '/Icon/Icon.icns',  // <---- ADDED
    webPreferences: {  // <---- ADDED
      nodeIntegration: true,  // <---- ADDED
      preload: path.join(__dirname, 'node_modules', '@capacitor', 'electron', 'dist', 'electron-bridge.js')  // <---- ADDED
    }  // <---- ADDED
  });  // <---- ADDED
  childWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));  // <---- ADDED

  configCapacitor(childWindow);  // <---- ADDED

  childWindow.removeMenu();  // <---- ADDED

  childWindow.loadURL(`file://${__dirname}/index_child.html`);  // <---- ADDED
  childWindow.webContents.on('dom-ready', () => {  // <---- ADDED
    childWindow.show();  // <---- ADDED
  });  // <---- ADDED
}  // <---- ADDED

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some Electron APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
  if (childWindow === null) {  // <---- ADDED
    createAboutWindow();  // <---- ADDED
  }  // <---- ADDED
});

// Define any IPC or other custom functionality below here

Final result

one

Hope it can help those in need :) .

Upvotes: 4

Related Questions