Settings btn working!

This commit is contained in:
punkfairie 2023-05-13 13:11:57 -07:00
parent 1769d18c6d
commit 881df3bca3
7 changed files with 47 additions and 64 deletions

View file

@ -6,8 +6,11 @@
</head> </head>
<body data-bs-theme="dark"> <body data-bs-theme="dark">
<div id="titlebar" class="draggable container-fluid mt-2"> <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"> <div class="col-auto">
<button type="button" class="btn-close btn-settings" id="settingsBtn"></button>
<button type="button" class="btn-close" id="closeBtn"></button> <button type="button" class="btn-close" id="closeBtn"></button>
</div> </div>
</div> </div>

View file

@ -1,7 +1,7 @@
{ {
"name": "ed-safari", "name": "ed-safari",
"productName": "ed-safari", "productName": "ed-safari",
"version": "1.0.0", "version": "0.1.0",
"description": "My Electron application description", "description": "My Electron application description",
"main": ".vite/build/main.js", "main": ".vite/build/main.js",
"scripts": { "scripts": {

View file

@ -19,6 +19,8 @@
--grey-text: #9f9f9f; --grey-text: #9f9f9f;
--grey-bg: #333333; --grey-bg: #333333;
--shadow: 0 0 3px;
} }
body { body {
@ -39,7 +41,7 @@ body {
margin-top: 1px; margin-top: 1px;
margin-bottom: 1px; margin-bottom: 1px;
padding-left: 10px; padding-left: 10px;
text-shadow: 0px 0px 3px; text-shadow: var(--shadow);
margin-left: 1px; margin-left: 1px;
margin-right: 1px; margin-right: 1px;
} }
@ -124,7 +126,7 @@ div b.active.landable {
color: var(--main); color: var(--main);
border-color: var(--main); border-color: var(--main);
border-width: 1px 0px 1px 0px; border-width: 1px 0px 1px 0px;
text-shadow: 0px 0px 3px; text-shadow: var(--shadow);
opacity: 100%; opacity: 100%;
} }
@ -184,9 +186,18 @@ div b.active.landable {
user-select: none; user-select: none;
} }
#titlebar .title {
color: var(--grey-text);
text-shadow: var(--shadow);
}
#titlebar .btn-close { #titlebar .btn-close {
-webkit-app-region: no-drag; -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; width: 0.4em;
height: 0.4em; height: 0.4em;
} }
#titlebar .btn-settings {
background: transparent url('./../icons/gear.svg') center/1em auto no-repeat;
}

4
src/icons/gear.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,4 @@
[ZoneTransfer]
ZoneId=3
ReferrerUrl=https://icons.getbootstrap.com/icons/gear/
HostUrl=https://icons.getbootstrap.com/assets/icons/gear.svg

View file

@ -44,11 +44,24 @@ const closeWindow = (event) => {
window?.close(); 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 // This method will be called when Electron has finished
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
app.on('ready', () => { app.on('ready', () => {
ipcMain.on('CLOSE_WINDOW', closeWindow); ipcMain.on('CLOSE_WINDOW', closeWindow);
ipcMain.on('LOAD_SETTINGS', loadSettings);
createWindow(); createWindow();
}); });
@ -71,61 +84,3 @@ app.on('activate', () => {
// In this file you can include the rest of your app's specific main process // 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. // 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)

View file

@ -66,6 +66,12 @@ $('#closeBtn').on('click', () => {
ipcRenderer.send('CLOSE_WINDOW') ipcRenderer.send('CLOSE_WINDOW')
}) })
/* ----------------------------------------------------------------- settings button handler ---- */
$('#settingsBtn').on('click', () => {
ipcRenderer.send('LOAD_SETTINGS')
})
/* ------------------------------------------------------------------------- build body list ---- */ /* ------------------------------------------------------------------------- build body list ---- */
journal.once('BUILD_BODY_LIST', () => { journal.once('BUILD_BODY_LIST', () => {