fix and enhance

*fix popover z-index
*fix mobile plugin style and duplicate
*auto close dropdown select settings + auto close file manager action btn
*remove font awesome pro

src/ui/static/js/plugins.js

@@ -372,7 +372,9 @@ class Upload {
       <svg class="fill-sky-500 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM385 215c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V392c0 13.3-10.7 24-24 24s-24-10.7-24-24V177.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 103c9.4-9.4 24.6-9.4 33.9 0L385 215z"/></svg>  
       <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
         <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
-        <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/></svg>
+        <svg class=" fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 "  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+        </svg>
       </div>
     </div>
     </div>`;

src/ui/static/js/utils/file.manager.js

@@ -181,6 +181,14 @@ class FolderDropdown {
   init() {
     let prevActionBtn = ""; //compare with curr to hide or not prev
     this.container.addEventListener("click", (e) => {
+      //remove when none click
+      try {
+        if (
+          !e.target.closest("div").hasAttribute(`${this.prefix}-action-button`)
+        ) {
+          this.hideDropEls();
+        }
+      } catch (err) {}
       //show dropdown actions for folders
       try {
         if (

src/ui/static/js/utils/form.js

@@ -37,6 +37,23 @@ class Select {
 
   init() {
     window.addEventListener("click", (e) => {
+      //CASE NO BTN SELECT CLICKED
+      try {
+        if (!e.target.closest("button")) {
+          const selectEls = document.querySelectorAll(
+            "div[setting-select-dropdown]"
+          );
+          selectEls.forEach((select) => {
+            select.classList.add("hidden");
+            select.classList.remove("flex");
+          });
+          const btnEls = document.querySelectorAll("button[setting-select]");
+          btnEls.forEach((btn) => {
+            const dropdownChevron = btn.querySelector(`svg[setting-select]`);
+            dropdownChevron.classList.remove("rotate-180");
+          });
+        }
+      } catch (err) {}
       //SELECT BTN LOGIC
       try {
         if (

src/ui/static/js/utils/settings.js

@@ -82,12 +82,18 @@ class Tabs {
     //reset desktop style
     const tabsDesktop = container.querySelectorAll("button[tab-handler]");
     tabsDesktop.forEach((tab) => {
-      tab.classList.remove("brightness-90", "z-10");
+      tab.classList.remove("brightness-90", "z-[1001]");
+      tab.classList.add("z-1000");
     });
     //reset mobile style
     const tabsMobile = container.querySelectorAll("button[tab-handler-mobile]");
     tabsMobile.forEach((tab) => {
-      tab.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
+      tab.classList.add(
+        "bg-white",
+        "dark:bg-slate-700",
+        "text-gray-700",
+        "z-1000"
+      );
       tab.classList.remove(
         "dark:bg-primary",
         "bg-primary",
@@ -103,7 +109,7 @@ class Tabs {
     const tabDesktop = container.querySelector(
       `button[tab-handler='${tabAtt}']`
     );
-    tabDesktop.classList.add("brightness-90", "z-10");
+    tabDesktop.classList.add("brightness-90", "z-[1001]");
 
     //mobile case
     const tabMobile = container.querySelector(
@@ -158,10 +164,7 @@ class FormatValue {
       try {
         inp.setAttribute("value", inp.getAttribute("value").trim());
         inp.value = inp.value.trim();
-
+      } catch (err) {}
-      }catch(err) {
-
-      }
     });
   }
 }

src/ui/templates/loading.html

@@ -24,7 +24,7 @@
         {%if message %}
         <div class="w-full flex justify-center">
           <p
-            class="lowercase text-center absolute mt-6 font-normal text-white text-xl"
+            class="uppercase text-center absolute mt-6 font-normal text-white text-xl"
           >
             {{ message }}
           </p>

src/ui/templates/settings_tabs.html

@@ -12,14 +12,14 @@
     <button
     tab-handler="{{ plugin['id'] }}"
     type="button"
-    class="z-1000 {% if loop.first %} brightness-90 {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700  border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
+    class="{% if loop.first %} brightness-90 z-[1001]{%else %} {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700  border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
   >
     <div class="w-full flex justify-between items-center">
       <!-- text and icon -->
       <span class="text-primary transition duration-300 ease-in-out dark:opacity-90 pl-3 pr-2 dark:text-gray-300"> {{ plugin["name"] }} </span>
       <svg
         popover-btn="{{ plugin["name"] }}"
-        class=" z-20 fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
+        class=" fill-blue-500 h-5 w-5 mr-2 hover:brightness-95"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 512 512"
       >
@@ -68,32 +68,31 @@
   tab-dropdown
     class="hidden z-100 absolute flex-col w-full overflow-hidden overflow-y-auto  max-h-90"
   >
-  {% if current_endpoint != "services" %}
+  {% set first_el = "True" %}
-
-  <!-- general button-->
-  <button
-  tab-handler-mobile="general"
-    type="button"
-    data-select="false"
-    class="flex justify-between border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-primary dark:bg-primary my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600  dark:text-gray-300 text-gray-300"    >
-      General
-
-  </button>
-  <!-- end general button-->
-  {% endif %}
-
   {% for plugin in plugins %}  {% if current_endpoint == "services" and plugin["settings"]
   and check_settings(plugin["settings"], "multisite") or current_endpoint == "global-config" and plugin["settings"]
   and check_settings(plugin["settings"], "global") %}
-    <button
+
-    tab-handler-mobile="{{ plugin['id'] }}"
+  {% if loop.first %}
-      type="button"
+  <button
-      data-select="false"
+  tab-handler-mobile="{{ plugin['id'] }}"
-      id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
+    type="button"
-      class="flex justify-between {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90  bg-white text-gray-700 my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
+    data-select="false"
-      {{ plugin["name"] }}
+    id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
-   
+    class="flex justify-between border-t rounded-t border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300 z-1000 dark:bg-primary bg-primary text-gray-300">
-    </button>
+    {{ plugin["name"] }}
+  </button>
+  {% else %}
+  <button
+  tab-handler-mobile="{{ plugin['id'] }}"
+    type="button"
+    data-select="false"
+    id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
+    class="flex justify-between {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90  bg-white text-gray-700 my-0 relative px-6 py-2  text-center  align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
+    {{ plugin["name"] }}
+ 
+  </button>
+  {%endif%}
     {% endif %} {% endfor %}
   </div>
   <!-- end dropdown-->