Settings btn working!

2023-05-13 13:11:57 -07:00 · 2023-05-13 13:11:57 -07:00 · 881df3bca3
commit 881df3bca3
parent 1769d18c6d
7 changed files with 47 additions and 64 deletions
--- a/index.html
+++ b/index.html
@ -6,8 +6,11 @@
 </head>
 <body data-bs-theme="dark">
    <div id="titlebar" class="draggable container-fluid mt-2">
-        <div class="row justify-content-end">
+        <div class="row justify-content-between">
+            <div class="col-auto title">ED Safari v0.1.0</div>
+
            <div class="col-auto">
+                <button type="button" class="btn-close btn-settings" id="settingsBtn"></button>
                <button type="button" class="btn-close" id="closeBtn"></button>
            </div>
        </div>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ed-safari",
  "productName": "ed-safari",
-  "version": "1.0.0",
+  "version": "0.1.0",
  "description": "My Electron application description",
  "main": ".vite/build/main.js",
  "scripts": {
--- a/src/assets/index.css
+++ b/src/assets/index.css
@ -19,6 +19,8 @@

    --grey-text: #9f9f9f;
    --grey-bg: #333333;
+
+    --shadow: 0 0 3px;
 }

 body {
@ -39,7 +41,7 @@ body {
    margin-top: 1px;
    margin-bottom: 1px;
    padding-left: 10px;
-    text-shadow: 0px 0px 3px;
+    text-shadow: var(--shadow);
    margin-left: 1px;
    margin-right: 1px;
 }
@ -124,7 +126,7 @@ div b.active.landable {
    color: var(--main);
    border-color: var(--main);
    border-width: 1px 0px 1px 0px;
-    text-shadow: 0px 0px 3px;
+    text-shadow: var(--shadow);
    opacity: 100%;
 }

@ -184,9 +186,18 @@ div b.active.landable {
    user-select: none;
 }

+#titlebar .title {
+    color: var(--grey-text);
+    text-shadow: var(--shadow);
+}
+
 #titlebar .btn-close {
    -webkit-app-region: no-drag;
-    filter: drop-shadow(0 0px 3px var(--grey-text)) var(--bs-btn-close-white-filter);
+    filter: drop-shadow(var(--shadow) var(--grey-text)) var(--bs-btn-close-white-filter);
    width: 0.4em;
    height: 0.4em;
+}
+
+#titlebar .btn-settings {
+    background: transparent url('./../icons/gear.svg') center/1em auto no-repeat;
 }
--- a/src/icons/gear.svg
+++ b/src/icons/gear.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
+  <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
+  <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
+</svg>
--- a/src/icons/gear.svg:Zone.Identifier
+++ b/src/icons/gear.svg:Zone.Identifier
@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://icons.getbootstrap.com/icons/gear/
+HostUrl=https://icons.getbootstrap.com/assets/icons/gear.svg
--- a/src/main.js
+++ b/src/main.js
@ -44,11 +44,24 @@ const closeWindow = (event) => {
    window?.close();
 }

+// Set up settings page handler.
+const loadSettings = (event) => {
+    const webContents = event.sender;
+    const window = BrowserWindow.fromWebContents(webContents);
+
+    if (SETTINGS_WINDOW_VITE_DEV_SERVER_URL) {
+        window.loadURL(`${SETTINGS_WINDOW_VITE_DEV_SERVER_URL}/settings.html`);
+    } else {
+        window.loadFile(path.join(__dirname, `../renderer/${SETTINGS_WINDOW_VITE_NAME}/settings.html`));
+    }
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
    ipcMain.on('CLOSE_WINDOW', closeWindow);
+    ipcMain.on('LOAD_SETTINGS', loadSettings);
    createWindow();
 });

@ -70,62 +83,4 @@ app.on('activate', () => {
 });

 // In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and import them here.
-
-// const openSettings = async () => {
-//     settingsWindow = new BrowserWindow({
-//         width: 800,
-//         height: 600,
-//         parent: mainWindow,
-//         modal: true,
-//         show: false,
-//         webPreferences: {
-//             nodeIntegration: true,
-//             contextIsolation: false,
-//             additionalArguments: [`EDS-ENV=${app.isPackaged}`],
-//         },
-//     });
-
-//     if (SETTINGS_WINDOW_VITE_DEV_SERVER_URL) {
-//         settingsWindow.loadURL(`${SETTINGS_WINDOW_VITE_DEV_SERVER_URL}/settings.html`);
-//     } else {
-//         settingsWindow.loadFile(path.join(__dirname, `../renderer/${SETTINGS_WINDOW_VITE_NAME}/settings.html`));
-//     }
-
-//     // Open the DevTools.
-//     if (!app.isPackaged) {
-//         settingsWindow.webContents.openDevTools();
-//     }
-
-//     settingsWindow.show();
-
-//     // Make sure window is destroyed on close, or else it won't open again.
-//     settingsWindow.on('closed', () => {
-//         settingsWindow = undefined;
-//     });
-// }
-
-// const menuTemplate = [
-//     {
-//         label: 'File',
-//         submenu: [
-//             { label: 'Settings', click: async () => { openSettings(); } },
-//             { role: 'quit' }
-//         ]
-//     },
-//     {
-//         role: 'help',
-//         submenu: [
-//             {
-//                 label: 'Github',
-//                 click: async () => {
-//                     const { shell } = require('electron');
-//                     await shell.openExternal('https://github.com/punkfairie/ed-safari');
-//                 }
-//             }
-//         ]
-//     }
-// ]
-
-// const menu = Menu.buildFromTemplate(menuTemplate)
-// Menu.setApplicationMenu(menu)
+// code. You can also put them in separate files and import them here.
--- a/src/renderer.js
+++ b/src/renderer.js
@ -66,6 +66,12 @@ $('#closeBtn').on('click', () => {
    ipcRenderer.send('CLOSE_WINDOW')
 })

+/* ----------------------------------------------------------------- settings button handler ---- */
+
+$('#settingsBtn').on('click', () => {
+    ipcRenderer.send('LOAD_SETTINGS')
+})
+
 /* ------------------------------------------------------------------------- build body list ---- */

 journal.once('BUILD_BODY_LIST', () => {