Merge branch 'ui' into dev
This commit is contained in:
commit
2ea726c222
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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>`;
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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) {}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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" %}
|
||||
|
||||
<!-- 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 %}
|
||||
|
||||
{% set first_el = "True" %}
|
||||
{% 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'] }}"
|
||||
type="button"
|
||||
data-select="false"
|
||||
id="edit-{{current_endpoint}}-{{ plugin['id'] }}-tab"
|
||||
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">
|
||||
{{ plugin["name"] }}
|
||||
|
||||
</button>
|
||||
|
||||
{% if loop.first %}
|
||||
<button
|
||||
tab-handler-mobile="{{ plugin['id'] }}"
|
||||
type="button"
|
||||
data-select="false"
|
||||
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">
|
||||
{{ 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-->
|
||||
|
|
Loading…
Reference in New Issue