lazy load configuration button

This commit is contained in:
Tiger Ren 2025-01-07 12:01:48 +08:00
parent c78f56e2f5
commit 5ae99d4b74
2 changed files with 15 additions and 10 deletions

View File

@ -5,11 +5,6 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<button id="config-button">
<i class="fas fa-cog"></i>
Configuration
</button>
<webview id="main-content" src="https://photos.onedrive.com"></webview> <webview id="main-content" src="https://photos.onedrive.com"></webview>
<div id="config-panel"> <div id="config-panel">
@ -48,9 +43,19 @@
<script> <script>
const { ipcRenderer } = require('electron'); const { ipcRenderer } = require('electron');
// Configuration button handler // Wait for webview to load
document.getElementById('config-button').addEventListener('click', () => { const webview = document.getElementById('main-content');
ipcRenderer.send('toggle-config'); webview.addEventListener('did-finish-load', () => {
// Create and add the configuration button
const button = document.createElement('button');
button.id = 'config-button';
button.innerHTML = '<i class="fas fa-cog"></i> Configuration';
document.body.appendChild(button);
// Add click handler to the dynamically created button
button.addEventListener('click', () => {
ipcRenderer.send('toggle-config');
});
}); });
// Configuration panel toggle // Configuration panel toggle

View File

@ -14,7 +14,7 @@ body {
position: fixed; position: fixed;
top: 10px; top: 10px;
right: 180px; right: 180px;
z-index: 1000; z-index: 999;
padding: 8px 16px; padding: 8px 16px;
background: transparent; background: transparent;
color: #0078d4; color: #0078d4;
@ -50,7 +50,7 @@ body {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
transition: right 0.3s ease-in-out; transition: right 0.3s ease-in-out;
z-index: 1000; z-index: 1001;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
} }