Replaced default quit confirmation dialog with custom window modal

DeadCodeGames · Mar 7, 2024 · 02b90c3 · 02b90c3
1 parent ad06c80
commit 02b90c3
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 6 deletions.
diff --git a/askToQuit.css b/askToQuit.css
@@ -0,0 +1,109 @@
+@import url("./fonts/fonts.css");
+
+:root {
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+div#window {
+    height: 40px;
+    width: -webkit-fill-available;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    -webkit-app-region: drag;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+
+div#window>div#title>div#windowlogo {
+    font-family: 'Montserrat';
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    width: 30px;
+    user-select: none;
+    -webkit-user-select: none;
+    padding-right: 10px;
+}
+
+div#window>div#title>div#windowtitle {
+    font-family: 'Uni Sans CAPS', 'Montserrat';
+    font-size: 14px;
+    font-weight: 700;
+    user-select: none;
+    -webkit-user-select: none;
+    text-transform: uppercase;
+}
+
+body {
+    margin: 0;
+}
+
+div#title {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+    width: -webkit-fill-available;
+}
+
+html {
+    color: white;
+    animation: updateBackground 5s both infinite alternate;
+}
+
+@keyframes updateBackground {
+    0% {
+        background-color: #6495ed;
+    }
+    100% {
+        background-color: #404;
+    }
+}
+
+div#quitConfirm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: space-around;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    height: calc(100% - 40px);
+    font-family: 'Montserrat';
+    font-weight: 700;
+}
+
+div#choices {
+    height: 50px;
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+div.choice {
+    height: calc(100% - 5px);
+    width: 45%;
+    border: 2.5px white solid;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.125s ease-in-out;
+}
+
+div.choice:hover {
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.404);
+}
+
+div#quitmessage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    white-space: pre;
+}
diff --git a/askToQuit.html b/askToQuit.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="askToQuit.css">
+        <title>are you sure you want to quit?</title>
+    </head>
+    <body>
+        <div id="window">
+            <div id="title">
+                <div id="windowlogo">××</div><div id="windowtitle">deadforge</div></div>
+            </div>
+        </div>
+        <div id="quitConfirm">
+            <div id="quitmessage">Are you sure you want to quit? </div>
+            <div id="choices">
+                <div class="choice" id="choiceyes" onclick="quitConfirm()">Yes</div>
+                <div class="choice" id="choiceno" onclick="quitCancel()">No</div>
+            </div>
+        </div>
+    </body>
+    <script src="askToQuit.js"></script>
+</html>
diff --git a/askToQuit.js b/askToQuit.js
@@ -0,0 +1,15 @@
+const { BrowserWindow } = require('@electron/remote');
+const { ipcRenderer } = require('electron');
+
+ipcRenderer.on('askToQuit', (event, downloads) => {
+    let questionString = '\nThere '; questionString += Object.keys(downloads).length == 1 ? 'is ' : 'are currently '; questionString += Object.keys(downloads).length; questionString += Object.keys(downloads).length == 1 ? ' item being downloaded:\n\n' : ' downloads being downloaded:\n\n'; questionString += downloads.map(item => { const key = Object.keys(item)[0]; const value = item[key]; return `${value.string} ${value.version}`; }).join('\n');
+    document.querySelector('div#quitmessage').textContent += questionString;
+})
+
+function quitConfirm() {
+  ipcRenderer.send('quitConfirmation', true);
+}
+
+function quitCancel() {
+    ipcRenderer.send('quitConfirmation', false);
+}
diff --git a/main.js b/main.js
@@ -7,14 +7,17 @@ const fs = require('fs');
 const downloadsFolder = require('downloads-folder');
 const isOnline = require('on-line');
 
-let mainWindow, updateModal, updateStatus = (statusobject) => { mainWindow.webContents.send('updateStatus', statusobject); }, changeColorMode = (color) => { mainWindow.webContents.send('changeColorMode', color); }, preferences, tray, contextMenuHidden, contextMenuVisible, currentDownloads = [], onlineState, currentlydownloadedupdate;
+let mainWindow, updateModal, quitConfirm, updateStatus = (statusobject) => { mainWindow.webContents.send('updateStatus', statusobject); }, changeColorMode = (color) => { mainWindow.webContents.send('changeColorMode', color); }, preferences, tray, contextMenuHidden, contextMenuVisible, currentDownloads = [], onlineState, currentlydownloadedupdate;
 function askToQuit() {
-  let questionString = 'There '; questionString += Object.keys(currentDownloads).length == 1 ? 'is ' : 'are currently '; questionString += Object.keys(currentDownloads).length; questionString += Object.keys(currentDownloads).length == 1 ? ' item being downloaded:\n' : ' downloads being downloaded:\n'; questionString += currentDownloads.map(item => { const key = Object.keys(item)[0]; const value = item[key]; return `${value.string} ${value.version}`; }).join('\n'); questionString += '\n\nAre you sure you want to quit?'
+  /*let questionString = 'There '; questionString += Object.keys(currentDownloads).length == 1 ? 'is ' : 'are currently '; questionString += Object.keys(currentDownloads).length; questionString += Object.keys(currentDownloads).length == 1 ? ' item being downloaded:\n' : ' downloads being downloaded:\n'; questionString += currentDownloads.map(item => { const key = Object.keys(item)[0]; const value = item[key]; return `${value.string} ${value.version}`; }).join('\n'); questionString += '\n\nAre you sure you want to quit?'
   dialog.showMessageBox({
     type: 'question',
     message: questionString,
     buttons: ['Yes', 'No']
-  }).then((response) => { if (response.response == 0) { forceQuitAllowed = true; app.exit(); } })
+  }).then((response) => { if (response.response == 0) { forceQuitAllowed = true; app.exit(); } })*/
+  createQuitQuestion();
+  quitConfirm.on('ready-to-show', () => { quitConfirm.webContents.send('askToQuit', currentDownloads); quitConfirm.show(); });
+  ipcMain.on('quitConfirmation', (event, arg) => { if (arg == true) { forceQuitAllowed = true; app.exit(); } else { quitConfirm.destroy(); } });
 };
 
 const singleInstanceLock = app.requestSingleInstanceLock();
@@ -91,6 +94,39 @@ const createUpdateModal = () => {
   updateModal.on('close', (e) => { e.preventDefault(); });
 }
 
+const createQuitQuestion = () => {
+  if (quitConfirm != undefined) { quitConfirm.destroy() }
+  quitConfirm = new BrowserWindow({
+    width: 450,
+    height: 400,
+    resizable: false,
+    closable: false,
+    maximizable: false,
+    minimizable: false,
+    frame: false,
+    contextisolation: false,
+    nodeIntegration: true,
+    titleBarStyle: 'hidden',
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      devTools: false
+    },
+    parent: mainWindow,
+    modal: true,
+    show: false
+  });
+
+  require("@electron/remote/main").enable(quitConfirm.webContents);
+
+  quitConfirm.setBackgroundMaterial("acrylic");
+  quitConfirm.setBackgroundColor("#161616");
+
+  quitConfirm.loadFile('askToQuit.html');
+
+  quitConfirm.on('close', (e) => { e.preventDefault(); });
+}
+
 if (!singleInstanceLock) {
   app.quit();
 } else {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "deadforge",
-  "version": "v1.2.0Delta",
+  "version": "v1.2.0Epsilon",
   "description": "An Electron Launcher for DeadCode Projects.",
   "main": "main.js",
   "scripts": {