adjust update menu UI

KOWX712 · Dec 31, 2024 · bb3b0ab · bb3b0ab
1 parent 502e6f6
commit bb3b0ab
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 22 deletions.
diff --git a/module/webui/index.html b/module/webui/index.html
@@ -243,7 +243,7 @@
             <button class="close-update">&#x2715;</button>
             <div class="update-content">
                 <h1 data-i18n="update.changelog"></h1>
-                <p class="changelog"></p>
+                <ul class="changelog"></ul>
                 <div class="update-button-container">
                     <button class="install" data-i18n="update.install"></button>
                     <button class="reboot" data-i18n="update.reboot"></button>

diff --git a/module/webui/scripts/update.js b/module/webui/scripts/update.js
@@ -46,26 +46,29 @@ function setupUpdateMenu() {
         }, 200);
     }
     updateCard.addEventListener('click', async () => {
-         try {
-             const module = await execCommand(`[ -f ${basePath}common/tmp/module.zip ] || echo "false"`);
-             if (module.trim() === "false") {
-                 showPrompt("prompt.downloading");
-                 await new Promise(resolve => setTimeout(resolve, 200));
-                 await execCommand(`sh ${basePath}common/get_extra.sh --get-update`);
-                 showPrompt("prompt.downloaded");
-             }
-             const changelog = await execCommand(`sh ${basePath}common/get_extra.sh --release-note`);
-             const lines = changelog.split('\n');
-             const formattedChangelog = `
-                 <span style="font-weight: bold; font-size: 18px;">${lines[0]}</span><br>
-                 ${lines.slice(1).join('<br>')}
-             `;
-             releaseNotes.innerHTML = formattedChangelog;
-             openUpdateMenu();
-         } catch (error) {
-             showPrompt("prompt.download_fail", false);
-             console.error('Error download module update:', error);
-         }
+        try {
+            const module = await execCommand(`[ -f ${basePath}common/tmp/module.zip ] || echo "false"`);
+            if (module.trim() === "false") {
+                showPrompt("prompt.downloading");
+                await new Promise(resolve => setTimeout(resolve, 200));
+                await execCommand(`sh ${basePath}common/get_extra.sh --get-update`);
+                showPrompt("prompt.downloaded");
+            }
+            const changelog = await execCommand(`sh ${basePath}common/get_extra.sh --release-note`);
+            const lines = changelog
+                .split('\n')
+                .filter(line => line.trim() !== '')
+                .map(line => line.startsWith('- ') ? line.slice(2) : line);
+            const formattedChangelog = `
+                    <li class="changelog-title">${lines[0]}</li>
+                    ${lines.slice(1).map(line => `<li>${line}</li>`).join('')}
+            `;
+            releaseNotes.innerHTML = formattedChangelog;
+            openUpdateMenu();
+        } catch (error) {
+            showPrompt("prompt.download_fail", false);
+            console.error('Error download module update:', error);
+        }
     });
     closeUpdate.addEventListener("click", closeUpdateMenu);
     UpdateMenu.addEventListener("click", (event) => {

diff --git a/module/webui/styles/applist.css b/module/webui/styles/applist.css
@@ -83,18 +83,40 @@
     max-height: 85vh;
     padding: 0 30px;
     overflow-y: auto;
-    user-select: none;
+}
+
+.update-content ul {
+    padding-left: 0;
+    margin: 0;
+}
+
+.changelog-title {
+    font-weight: bold;
+    font-size: 22px;
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.update-content ul li {
+    margin-bottom: 5px;
+}
+
+.update-content ul li:not(:first-child) {
+    list-style-type: disc;
+    margin-left: 15px;
 }
 
 .update-button-container {
     width: 100%;
+    padding: 0;
     display: flex;
     justify-content: flex-end;
 }
 
 .install,
 .reboot {
     margin-left: 0;
+    margin-top: 10px;
     margin-bottom: 15px;
     color: #3B3B3B;
     background-color: #fff;