mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-09-28 12:31:14 +02:00
refactor(update): add an UI indicator in frontend
disable OS native pop up menu and fix autoupdate crash on rpm and snap #50
This commit is contained in:
MasterAcnolo
@@ -12,7 +12,8 @@
|
||||
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
<link rel="stylesheet" href="styles/layout/topbar.css">
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
@@ -304,6 +305,31 @@
|
||||
|
||||
<h2 id="reference"> Because Why Not ? </h2>
|
||||
|
||||
<div id="updateAvailable" style="display:none">
|
||||
<div class="update-banner">
|
||||
<div class="banner-row">
|
||||
<div class="banner-left">
|
||||
<div class="icon-wrap">
|
||||
<span class="material-symbols-outlined" id="update-icon">download</span>
|
||||
</div>
|
||||
<div class="text-block">
|
||||
<span class="update-title" id="update-title">Update available</span>
|
||||
<span class="update-sub" id="update-sub">A new version is ready</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-update" id="btn-update">Download</button>
|
||||
</div>
|
||||
<div class="progress-wrap" id="progress-wrap" style="display:none">
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill" id="progress-fill"></div>
|
||||
</div>
|
||||
<div class="progress-meta">
|
||||
<span id="progress-pct">0%</span>
|
||||
<span id="progress-eta"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="script/toast.js"></script>
|
||||
@@ -316,6 +342,7 @@
|
||||
<script src="script/progressBar.js"></script>
|
||||
<script src="script/customthemes.js"></script>
|
||||
<script src="script/reportBug.js"></script>
|
||||
<script src="script/autoUpdate.js"></script>
|
||||
<script type="module" src="script/topbar.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
81
public/script/autoUpdate.js
Normal file
81
public/script/autoUpdate.js
Normal file
@@ -0,0 +1,81 @@
|
||||
async function initUpdateUI() {
|
||||
const container = document.getElementById("updateAvailable");
|
||||
|
||||
const hasUpdate = await window.electronAPI.isUpdateAvailable();
|
||||
if (hasUpdate) {
|
||||
setupAndShowUpdateUI();
|
||||
}
|
||||
|
||||
window.electronAPI.onUpdateAvailable((info) => {
|
||||
setupAndShowUpdateUI(info);
|
||||
});
|
||||
|
||||
function setupAndShowUpdateUI(info) {
|
||||
container.style.display = "block";
|
||||
|
||||
const btn = document.getElementById("btn-update");
|
||||
const icon = document.getElementById("update-icon");
|
||||
const title = document.getElementById("update-title");
|
||||
const sub = document.getElementById("update-sub");
|
||||
const progressWrap = document.getElementById("progress-wrap");
|
||||
const progressFill = document.getElementById("progress-fill");
|
||||
const progressPct = document.getElementById("progress-pct");
|
||||
const progressEta = document.getElementById("progress-eta");
|
||||
|
||||
if (info && info.version) {
|
||||
sub.textContent = `A new version (${info.version}) is ready`;
|
||||
}
|
||||
|
||||
if (info && info.environment && info.environment !== "auto") {
|
||||
icon.textContent = "open_in_new";
|
||||
|
||||
if (info.environment === "snap") {
|
||||
sub.textContent = `Version ${info.version} is out. Use the Snap Store or run "snap refresh".`;
|
||||
btn.textContent = "View Release";
|
||||
} else {
|
||||
sub.textContent = `Version ${info.version} is out. Update via your package manager or download it manually.`;
|
||||
btn.textContent = "Download manually";
|
||||
}
|
||||
|
||||
btn.onclick = () => {
|
||||
window.electronAPI.openReleasePage();
|
||||
container.style.display = "none";
|
||||
};
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
btn.onclick = () => {
|
||||
window.electronAPI.downloadUpdate();
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Downloading...";
|
||||
icon.textContent = "download";
|
||||
title.textContent = "Downloading update";
|
||||
progressWrap.style.display = "flex";
|
||||
};
|
||||
|
||||
window.electronAPI.onDownloadProgress((progress) => {
|
||||
const pct = Math.round(progress.percent);
|
||||
progressFill.style.width = pct + "%";
|
||||
progressPct.textContent = pct + "%";
|
||||
|
||||
const remaining = (progress.total - progress.transferred) / progress.bytesPerSecond;
|
||||
progressEta.textContent =
|
||||
remaining > 0 ? `~${Math.ceil(remaining)}s left` : "almost done";
|
||||
});
|
||||
|
||||
window.electronAPI.onUpdateDownloaded(() => {
|
||||
progressFill.style.width = "100%";
|
||||
progressPct.textContent = "100%";
|
||||
progressEta.textContent = "Done";
|
||||
icon.textContent = "check";
|
||||
title.textContent = "Ready to install";
|
||||
sub.textContent = "Restart to apply the update";
|
||||
btn.textContent = "Restart";
|
||||
btn.disabled = false;
|
||||
btn.onclick = () => window.electronAPI.installUpdate();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
initUpdateUI();
|
||||
128
public/styles/components/autoUpdate.css
Normal file
128
public/styles/components/autoUpdate.css
Normal file
@@ -0,0 +1,128 @@
|
||||
:root {
|
||||
--border-accent: #0ea5e966;
|
||||
--bg-accent: #0ea5e915;
|
||||
--fill-accent: #0ea5e9;
|
||||
--text-accent: #0369a1;
|
||||
--text-secondary: #64748b;
|
||||
}
|
||||
|
||||
#updateAvailable {
|
||||
display: none;
|
||||
width: fit-content;
|
||||
max-width: 420px;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 5%;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.update-banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
border: 0.5px solid var(--border-accent);
|
||||
background: var(--bg-accent);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.banner-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.banner-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: var(--fill-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-wrap i {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.text-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.update-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
.update-sub {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.btn-update {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
background: var(--fill-accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn-update:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-update:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
height: 4px;
|
||||
border-radius: 99px;
|
||||
background: var(--border-accent);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
background: var(--fill-accent);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -12,6 +12,7 @@
|
||||
@import url("components/editpathbutton.css");
|
||||
@import url("components/progressBar.css");
|
||||
@import url("components/toast.css");
|
||||
@import url("components/autoUpdate.css");
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user