add: loading screen, expandable list and card header icons

This commit will add new loading screen, expandable list and card header icons for improving UX/UI

module/build.gradle.kts

@@ -167,6 +167,7 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/js/main.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/kernelsu.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/theme.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/list.js").asFile, null))
 
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Regular.ttf").asFile, null))
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Italic.ttf").asFile, null))
@@ -180,6 +181,8 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/assets/light.svg").asFile, null))
                     set.add(Pair(root.file("webroot/assets/dark.svg").asFile, null))
                     set.add(Pair(root.file("webroot/assets/module.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets/expand.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets/settings.svg").asFile, null))
                     sig.initSign(privKey)
                     set.forEach { it.first.sha(it.second) }
                     val signFile = root.file(name).asFile

module/src/customize.sh

@@ -118,6 +118,7 @@ extract "$ZIPFILE" 'webroot/index.html' "$MODPATH/webroot" true
 extract "$ZIPFILE" 'webroot/js/main.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/kernelsu.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/theme.js' "$MODPATH/webroot/js" true
+extract "$ZIPFILE" 'webroot/js/list.js' "$MODPATH/webroot/js" true
 
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Regular.ttf' "$MODPATH/webroot/fonts" true
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Italic.ttf' "$MODPATH/webroot/fonts" true
@@ -131,6 +132,8 @@ extract "$ZIPFILE" 'webroot/assets/warn.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/light.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/dark.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/module.svg' "$MODPATH/webroot/assets" true
+extract "$ZIPFILE" 'webroot/assets/expand.svg' "$MODPATH/webroot/assets" true
+extract "$ZIPFILE" 'webroot/assets/settings.svg' "$MODPATH/webroot/assets" true
 
 if [ "$ARCH" = "x86" ] || [ "$ARCH" = "x64" ]; then
   ui_print "- Extracting x86 libraries"

webroot/assets/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

webroot/assets/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

webroot/css/index.css

@@ -6,7 +6,8 @@
   --bright: #8d1d19;
   --dim: #1d2327;
   --error: #8d1d19;
-  --icon: #283136;
+  --icon: #48565e;
+  --icon-bc: #313a3f;
   /* Locked Color */
   --lock-desc: #c9c9c9;
   --lock: #fff;
@@ -26,6 +27,33 @@ a {
   text-decoration: none !important;
 }
 
+.loading_screen {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: var(--background);
+  z-index: 10;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.loader {
+  border: 6px solid var(--icon-bc);
+  border-top: 6px solid var(--icon);
+  border-radius: 50%;
+  width: 3em;
+  height: 3em;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 /* Components */
 .header {
   display: flex;
@@ -65,6 +93,21 @@ a {
   display: flex;
 }
 
+.list {
+  max-height: 25px;
+  overflow-y: hidden; 
+  transition: max-height 0.25s ease-out;
+}
+
+.full {
+  max-height: 100%;
+}
+
+.expander {
+  transform: rotate(0deg);
+  transition: 0.2s ease-out;
+}
+
 /* Card type */
 .bright {
   border: 5px solid var(--bright);
@@ -73,6 +116,7 @@ a {
 
 .brightc {
   background: var(--bright);
+  word-break: break-word;
 }
 
 .dim {
@@ -82,6 +126,7 @@ a {
 
 .dimc {
   background: var(--dim);
+  word-break: break-word;
 }
 
 /* Locked */

webroot/index.html

@@ -6,11 +6,15 @@
     <meta name="viewport" content="viewport-fit=cover" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="js/theme.js" type="module"></script>
+    <script src="js/list.js" type="module"></script>
     <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/index.css">
     <script src="js/main.js" type="module"></script>
   </head>
   <body>
+    <div class="loading_screen">
+      <div class="loader"></div>
+    </div>
     <div class="header">
       <div>ReZygisk</div>
       <div id="theme-switcher" style="color: black;">
@@ -45,13 +49,35 @@
       </div>
     </div>
 
-    <div id="modules_list" class="dim card" style="display: none;">
-      <!-- N/A -->
+    <div id="module_card" class="dim card list" style="display: none;">
+      <div class="dimc liste">
+        <div class="dimc" style="font-size: 1.2em; display: flex; align-items: center;">
+          <div id="modules_list_icon" class="dimc">
+            <img class="dimc" src="assets/module.svg">
+          </div>
+          <div class="dimc" style="padding-bottom: 4px; padding-left: 5px;">Modules</div>
+        </div>
+
+        <div id="expand_clicker" class="dimc">
+          <div id="expand_clicker_icon" class="dimc expander" style="max-height: 24px;">
+            <img class="dimc" src="assets/expand.svg">
+          </div>
+        </div>
+      </div>
+
+      <div id="modules_list" class="dimc" style="width: 100%;">
+        <!-- N/A -->
+      </div>
     </div>
 
     <div id="rezygisk_settings" class="dim card" style="display: none;">
-      <div class="dimc content" style="font-size: 1.2em;">
-        Settings
+      <div class="dimc" style="align-items: center; display: flex;">
+        <div class="dimc" id="setting_icon">
+          <img class="dimc" src="assets/settings.svg">
+        </div>
+        <div class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
+          Settings
+        </div>
       </div>
     </div>
   </body>

webroot/js/list.js

@@ -0,0 +1,23 @@
+const button = document.getElementById('expand_clicker')
+const icon = document.getElementById('expand_clicker_icon')
+const card = document.getElementById('module_card')
+let sys_module_mode = localStorage.getItem('system-module-mode')
+if (!sys_module_mode) sys_module_mode = setData('closed')
+
+button.addEventListener("click", () => {
+  if (sys_module_mode == "closed") {
+    sys_module_mode = setData('opend')
+    icon.style.transform = "rotate(180deg)"
+    card.style.maxHeight = card.scrollHeight + "px";
+    return
+  }
+  sys_module_mode = setData('closed')
+  icon.style.transform = "rotate(0deg)"
+  card.style.maxHeight = null;
+  return
+})
+
+function setData(mode) {
+  localStorage.setItem('system-module-mode', mode)
+  return localStorage.getItem('system-module-mode')
+}

webroot/js/main.js

@@ -1,8 +1,17 @@
 import { fullScreen, exec, toast } from './kernelsu.js';
 
 (async () => {
+  const loading_screen = document.getElementsByClassName('loading_screen')[0]
+  // Testing enviroment
+  // setTimeout(() => {
+  //   loading_screen.style.display = 'none';
+  // }, 3000)
+
   fullScreen(true)
 
+  // Code below is for hiding loading screen
+  loading_screen.style.display = 'none';
+
   const rootCss = document.querySelector(':root')
   const rezygisk_state = document.getElementById('rezygisk_state')
   const rezygisk_settings = document.getElementById('rezygisk_settings')
@@ -65,15 +74,6 @@ import { fullScreen, exec, toast } from './kernelsu.js';
 
     modules_list.removeAttribute('style')
 
-    modules_list.innerHTML += 
-     `<div class="dimc" style="font-size: 1.2em; display: flex; align-items: center;">
-        <div id="modules_list_icon" class="dimc">
-          <img class="dimc" src="assets/module.svg">
-        </div>
-        <div class="dimc" style="padding-bottom: 4px; padding-left: 5px;">Modules (${modules.length})</div>
-      </div>
-      `
-
     let index = 0
     for (const module of modules) {
       index += 1
@@ -96,16 +96,14 @@ import { fullScreen, exec, toast } from './kernelsu.js';
         const name = lines.find(line => line.includes('name=')).split('=')[1]
 
         modules_list.innerHTML += 
-        `<div class="dimc content ${index !== modules.length ? "spliter" : ""}" style="padding-top: 10px; padding-bottom: 13px;">
-          <div class="dimc">${name}</div>
+        `<div class="dimc ${index !== modules.length ? "spliter" : ""}" style="padding-top: 13px; padding-bottom: 13px;">
+          <div class="dimc" style="font-size: 1.1em;">${name}</div>
           <div class="dimc" style="font-size: 0.9em;">Arch: ${bitsUsed.join(' / ')}</div>
         </div>`
       } else {
         toast(`cat ${module} error (${catCmd.errno}): ${catCmd.stderr}`)
       }
     }
-
-    modules_list.innerHTML += '</div>'
   } else {
     toast(`find error (${findModulesCmd.errno}): ${findModulesCmd.stderr}`)
   }

webroot/js/theme.js

@@ -8,9 +8,23 @@ const light_module_icon = `
     <path d="M627-520h133v-160H627v160Zm-214 0h133v-160H413v160Zm-213 0h133v-160H200v160Zm0 240h133v-160H200v160Zm213 0h133v-160H413v160Zm214 0h133v-160H627v160Zm-507 0v-400q0-33 23.5-56.5T200-760h560q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H200q-33 0-56.5-23.5T120-280Z"/>
   </svg>
 `
+const light_expand_icon = `
+  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+  </svg>
+`
+const light_settings_icon = `
+  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
+  </svg>
+`
 const rootCss = document.querySelector(':root')
 const button = document.getElementById('theme-switcher')
+// Icon have to change color
 const module_list_icon = document.getElementById('modules_list_icon')
+const expand_clicker = document.getElementById('expand_clicker_icon')
+const settings_icon = document.getElementById('setting_icon')
+
 let sys_theme = localStorage.getItem('system-theme')
 if (!sys_theme) sys_theme = setData('dark')
 
@@ -30,6 +44,8 @@ function setDark() {
   rootCss.style.setProperty('--spliter', '#283136')
   rootCss.style.setProperty('--dim', '#1d2327')
   sys_theme = setData('dark')
+  settings_icon.innerHTML = '<img class="dimc" src="assets/settings.svg">'
+  expand_clicker.innerHTML = '<img class="dimc" src="assets/expand.svg">'
   button.innerHTML = '<img src="assets/dark.svg">'
   module_list_icon.innerHTML = '<img class="dimc" src="assets/module.svg">'
   return
@@ -42,6 +58,8 @@ function setLight() {
   rootCss.style.setProperty('--spliter', '#4f6069')
   rootCss.style.setProperty('--dim', '#e0e0e0')
   sys_theme = setData('light')
+  settings_icon.innerHTML = light_settings_icon
+  expand_clicker.innerHTML = light_expand_icon
   button.innerHTML = light_icon
   module_list_icon.innerHTML = light_module_icon
   return