webui: minor ui optimize

Author: KOWX712

webui/index.js

@@ -87,7 +87,7 @@ async function reboot(reason = "") {
 document.addEventListener('DOMContentLoaded', async () => {
     document.querySelectorAll('[unresolved]').forEach(el => el.removeAttribute('unresolved'));
     const splash = document.getElementById('splash');
-    if (splash) setTimeout(() => splash.classList.add('show'), 50);
+    if (splash) setTimeout(() => splash.classList.add('show'), 20);
 
     setupRoute();
 
@@ -179,8 +179,8 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // splash screen
     if (splash) {
-        setTimeout(() => splash.classList.add('exit'), 100);
-        setTimeout(() => splash.remove(), 700);
+        setTimeout(() => splash.classList.add('exit'), 50);
+        setTimeout(() => splash.remove(), 400);
     }
 });
 

webui/page/kpm.js

@@ -250,7 +250,9 @@ async function handleFileUpload(accept, containerId, onSelected) {
 }
 
 async function uploadAndLoadModule() {
+    const loadBtn = document.getElementById('load');
     handleFileUpload('.kpm', 'kpm-list', async (file, onProgress, signal) => {
+        loadBtn.classList.add('hide');
         const tmpPath = `${modDir}/tmp/${file.name}`;
         try {
             await exec(`mkdir -p ${modDir}/tmp && rm -rf ${modDir}/tmp/*`);
@@ -294,6 +296,8 @@ async function uploadAndLoadModule() {
         } catch (e) {
             exec(`rm -rf ${modDir}/tmp`);
             throw e;
+        } finally {
+            loadBtn.classList.remove('hide');
         }
     });
 }

webui/page/patch.js

@@ -267,7 +267,12 @@ function openOptionDialog(item) {
 }
 
 async function embedKPM() {
+    const embedBtn = document.getElementById('embed');
+    const startBtn = document.getElementById('start');
     handleFileUpload('.kpm', 'kpm-embed-list', async (file, onProgress, signal) => {
+        embedBtn.disabled = true;
+        startBtn.disabled = true;
+
         // Generate random filename
         const randName = Math.random().toString(36).substring(7) + '.kpm';
         const tmpPath = `${modDir}/tmp/${randName}`;
@@ -277,6 +282,9 @@ async function embedKPM() {
         } catch (e) {
             exec(`rm -f ${tmpPath}`);
             throw e;
+        } finally {
+            embedBtn.disabled = false;
+            startBtn.disabled = false;
         }
 
         const result = await exec(`kptools -l -M "${randName}"`, {

webui/styles.css

@@ -21,14 +21,14 @@ body {
     background-color: var(--md-sys-color-surface);
     z-index: 99;
     opacity: 1;
-    transition: opacity 0.6s ease;
+    transition: opacity 0.3s ease;
 
     svg {
         width: min(50vw, 360px);
         height: auto;
         fill: var(--md-sys-color-on-surface);
         opacity: 0;
-        transition: opacity 0.1s ease;
+        transition: opacity 0.05s ease;
     }
 }
 
@@ -38,7 +38,7 @@ body {
 
 .splash.exit {
     opacity: 0;
-    pointer-events: none;        
+    pointer-events: none;
 }
 
 .root_layout {
@@ -180,7 +180,7 @@ body {
 .card {
     width: 100%;
     border-radius: 20px;
-    background-color: var(--md-sys-color-surface-container);
+    background-color: var(--md-sys-color-tonal-surface);
     padding: 20px;
     box-sizing: border-box;
     user-select: none;
@@ -248,6 +248,7 @@ body {
 }
 
 .info [slot="detail"] {
+    font-size: 0.95em;
     color: var(--md-sys-color-outline);
 }
 
@@ -297,7 +298,7 @@ body {
 }
 
 .module-card-actions {
-    padding-top: 16px;
+    padding-top: 8px;
     display: flex;
     gap: 12px;
     justify-content: flex-end;
@@ -338,9 +339,12 @@ md-fab {
     transition: all 0.2s ease;
 }
 
-md-fab.hide {
+md-fab.hide,
+md-filled-button.hide,
+md-outlined-button.hide {
     transform: scale(0);
     opacity: 0;
+    pointer-events: none;
 }
 
 md-outlined-select,

webui/theme.css

@@ -37,6 +37,7 @@
     --md-sys-color-inverse-primary: var(--inversePrimary, #D0BCFF);
     --md-sys-color-surface-bright: var(--surfaceBright, #FEF7FF);
     --md-sys-color-surface-dim: var(--surfaceDim, #DED8E1);
+    --md-sys-color-tonal-surface: var(--tonalSurface, #F3EDF7);
     --md-sys-color-surface-container: var(--surfaceContainer, #F3EDF7);
     --md-sys-color-surface-container-lowest: var(--surfaceContainerLowest, #FFFFFF);
     --md-sys-color-surface-container-low: var(--surfaceContainerLow, #F7F2FA);
@@ -76,6 +77,7 @@
         --md-sys-color-inverse-primary: var(--inversePrimary, #6750A4);
         --md-sys-color-surface-bright: var(--surfaceBright, #3B383E);
         --md-sys-color-surface-dim: var(--surfaceDim, #141218);
+        --md-sys-color-tonal-surface: var(--tonalSurface, #211F26);
         --md-sys-color-surface-container: var(--surfaceContainer, #211F26);
         --md-sys-color-surface-container-lowest: var(--surfaceContainerLowest, #0F0D13);
         --md-sys-color-surface-container-low: var(--surfaceContainerLow, #1D1B20);