Minor UI change

change icon, enhanced UI experience
2025-09-06 06:37:09 +00:00 · 2024-11-08 01:30:05 +08:00
parent 6bab7df285
commit 5591a3ed14
3 changed files with 72 additions and 50 deletions
--- a/module/webroot/index.html
+++ b/module/webroot/index.html
@@ -4,33 +4,37 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/styles.css" type="text/css">
    <script type="module" crossorigin src="/index.js"></script>
 </head>
 <body>
    <div id="title">Tricky Addon - Update Target List</div>
-    <div class="search-card">
-        <input type="text" class="search-input" id="search" placeholder="Search">
-        <button class="clear-btn" id="clear-btn">&#x2715;</button>
-    </div>
-    <div class="menu">
-        <input type="checkbox" id="menu-toggle" class="menu-toggle" style="display: none;">
-        <label for="menu-toggle" id="menu-button">
-            <span class="menu-icon">&#9776;</span>
-        </label>
-        <div id="menu-options" class="menu-options">
-            <ul>
-                <li id="refresh">Refresh</li>
-                <li id="select-all">Select All</li>
-                <li id="deselect-all">Deselect All</li>
-                <li id="deselect-xposed">Deselect Xposed</li>
-            </ul>
+    <div class="search-menu-container">
+        <div class="search-card">
+            <span class="search-icon"><i class="fa fa-search"></i></span>
+            <input type="text" class="search-input" id="search" placeholder="Search">
+            <button class="clear-btn" id="clear-btn"><i class="fa fa-close"></i></button>
+        </div>
+        <div class="menu">
+            <input type="checkbox" id="menu-toggle" class="menu-toggle">
+            <label for="menu-toggle" id="menu-button">
+                <span class="menu-icon"><i class="fa fa-bars"></i></span>
+            </label>
+            <div id="menu-options" class="menu-options">
+                <ul>
+                    <li id="refresh">Refresh</li>
+                    <li id="select-all">Select All</li>
+                    <li id="deselect-all">Deselect All</li>
+                    <li id="deselect-xposed">Deselect Xposed</li>
+                </ul>
+            </div>
        </div>
    </div>
    <div id="apps-list"></div>
    <div class="floating-card">
        <button class="floating-btn" id="save">Save and Update</button>
-    </div> 
+    </div>
    <template id="app-template">
        <div class="card" onclick="toggleCheckbox(event)">
            <div class="content">
@@ -38,7 +42,7 @@
                <input type="checkbox" class="checkbox" checked>
            </div>
        </div>
-    </template>
+    </template>    
    <div class="loading">Loading...</div>
    <div class="acknowledgment">Credit to j-hc/zygisk-detach WebUI</div>
    <div id="prompt" class="prompt"></div>
--- a/module/webroot/index.js
+++ b/module/webroot/index.js
@@ -156,14 +156,15 @@ function showPrompt(message, isSuccess = true) {
    }, 500);
 }

-// Menu toggle functionality
 function setupMenuToggle() {
    const menuButton = document.getElementById('menu-button');
    const menuIcon = menuButton.querySelector('.menu-icon');
    const menuOptions = document.getElementById('menu-options');
    let menuOpen = false;
+    let menuAnimating = false;

    menuButton.addEventListener('click', (event) => {
+        if (menuAnimating) return;
        event.stopPropagation();
        if (menuOptions.classList.contains('visible')) {
            closeMenu();
@@ -196,6 +197,7 @@ function setupMenuToggle() {
    });

    function openMenu() {
+        menuAnimating = true;
        menuOptions.style.display = 'block';
        setTimeout(() => {
            menuOptions.classList.remove('hidden');
@@ -203,19 +205,22 @@ function setupMenuToggle() {
            menuIcon.classList.add('menu-open');
            menuIcon.classList.remove('menu-closed');
            menuOpen = true;
+            menuAnimating = false;
        }, 10);
    }

    function closeMenu() {
        if (menuOptions.classList.contains('visible')) {
+            menuAnimating = true;
            menuOptions.classList.remove('visible');
            menuOptions.classList.add('hidden');
            menuIcon.classList.remove('menu-open');
            menuIcon.classList.add('menu-closed');
            setTimeout(() => {
                menuOptions.style.display = 'none';
-            }, 400);
-            menuOpen = false;
+                menuOpen = false;
+                menuAnimating = false;
+            }, 200);
        }
    }
 }
@@ -227,6 +232,7 @@ searchInput.addEventListener("input", (e) => {
    apps.forEach(app => {
        const name = app.querySelector(".name").textContent.toLowerCase();
        app.style.display = name.includes(searchQuery) ? "block" : "none";
+        window.scrollTo(0, 0);
    });
    if (searchQuery !== "") {
        clearBtn.style.display = "block";
@@ -239,6 +245,7 @@ searchInput.addEventListener("input", (e) => {
 clearBtn.addEventListener("click", () => {
    searchInput.value = "";
    clearBtn.style.display = "none";
+    window.scrollTo(0, 0);
    const apps = appListContainer.querySelectorAll(".card");
    apps.forEach(app => {
        app.style.display = "block";
@@ -305,17 +312,16 @@ document.addEventListener('DOMContentLoaded', async () => {

 // Scroll event
 let lastScrollY = window.scrollY;
+const searchMenuContainer = document.querySelector('.search-menu-container');
 window.addEventListener('scroll', () => {
    if (isRefreshing) return;
    if (window.scrollY > lastScrollY) {
        title.style.transform = 'translateY(-100%)';
-        searchCard.style.transform = 'translateY(-35px)';
-        menu.style.transform = 'translateY(-35px)';
+        searchMenuContainer.style.transform = 'translateY(-35px)';
        floatingBtn.style.transform = 'translateY(0)';
    } else {
        title.style.transform = 'translateY(0)';
-        searchCard.style.transform = 'translateY(0)';
-        menu.style.transform = 'translateY(0)';
+        searchMenuContainer.style.transform = 'translateY(0)';
        floatingBtn.style.transform = 'translateY(-100px)';
    }
    lastScrollY = window.scrollY;
--- a/module/webroot/styles.css
+++ b/module/webroot/styles.css
@@ -21,29 +21,40 @@ body {
    margin-top: 100px;
 }

+.search-menu-container {
+    display: flex;
+    position: fixed;
+    top: 40px;
+    width: calc(100% - 15px);
+    z-index: 1000;
+    transition: transform 0.3s ease;
+}
+
 .search-card {
    background-color: white;
    border: 1px solid #ccc;
-    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    padding: 10px;
-    position: fixed;
-    top: 40px;
-    transition: transform 0.3s ease;
-    width: calc(100% - 100px);
-    z-index: 1000;
+    border-radius: 50px;
+    left: 0;
+    width: calc(100% - 80px);
+    position: absolute;
 }

+.search-icon {
+    position: absolute;
+    left: 18px;
+}
+
+
 .search-input {
    background-color: #fff;
    border: none;
-    box-sizing: border-box;
    font-size: 14px;
    outline: none;
-    padding: 5px 15px;
-    text-align: left;
+    padding: 5px 30px;
    width: 100%;
 }

@@ -52,7 +63,6 @@ body {
    right: 10px;
    border: none;
    background: none;
-    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    display: none;
@@ -61,11 +71,8 @@ body {

 .menu {
    display: flex;
-    position: fixed;
-    top: 40px;
-    right: 10px;
-    z-index: 1000;
-    transition: transform 0.3s ease;
+    right: 0;
+    position: absolute;
 }

 .menu-toggle {
@@ -75,17 +82,18 @@ body {
 #menu-button {
    background-color: white;
    border: 1px solid #ccc;
-    border-radius: 25px;
+    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    padding: 13px 17px;
-    text-align: center;
-    position: relative;
-    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

 .menu-icon {
    display: inline-block;
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease;
 }

 .menu-icon.menu-open {
@@ -106,7 +114,7 @@ body {
    top: 110%;
    right: 0;
    transform: translateX(120%);
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease;
    width: auto;
    white-space: nowrap;
 }
@@ -224,15 +232,18 @@ body {
 .floating-btn {
    background-color: #007bff;
    border: none;
-    border-radius: 24px;
    box-shadow: 0 4px 8px #0003;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
-    padding: 10px 20px;
-    font-size: 16px;
+    padding: 12px 17px;
+    font-size: 17px;
    transition: transform 0.3s ease-in-out;
+    border-top-left-radius: 50px;
+    border-top-right-radius: 50px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
 }

 .loading {
@@ -271,6 +282,7 @@ body {
        border: 1px solid #6E6E6E;
    }

+    .clear-btn,
    .search-input{
        color: white;
    }