mirror of
https://github.com/bunkerity/bunkerized-nginx
synced 2023-12-13 21:30:18 +01:00
fix checkbox + style issues + script duplicate
*form.js classes now only instanciate on global.js *fix checkbox behavior (force checked to always send data + change script logic around this) *fix flash float btn hover effect *fix dropdown issue with text-white *set new checkbox logic to services *
This commit is contained in:
parent
01d8c65c96
commit
64a9fe4dba
11 changed files with 1871 additions and 1468 deletions
928
src/ui/package-lock.json
generated
928
src/ui/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.1.8"
|
||||
"tailwindcss": "^3.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ace-builds": "^1.12.5",
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,4 +1,4 @@
|
|||
import { Checkbox } from "./utils/form.js";
|
||||
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
|
||||
|
||||
class Menu {
|
||||
constructor() {
|
||||
|
@ -211,7 +211,9 @@ class FlashMsg {
|
|||
//stop animate if clicked once
|
||||
this.openBtn.addEventListener("click", (e) => {
|
||||
try {
|
||||
if (e.target.closest("button").hasAttribute("data-flash-sidebar-open")) {
|
||||
if (
|
||||
e.target.closest("button").hasAttribute("data-flash-sidebar-open")
|
||||
) {
|
||||
this.isMsgCheck = true;
|
||||
}
|
||||
} catch (err) {}
|
||||
|
@ -219,14 +221,17 @@ class FlashMsg {
|
|||
//remove flash message and change count
|
||||
window.addEventListener("click", (e) => {
|
||||
try {
|
||||
if (e.target.closest("button").hasAttribute("data-close-flash-message")) {
|
||||
if (
|
||||
e.target.closest("button").hasAttribute("data-close-flash-message")
|
||||
) {
|
||||
//remove logic
|
||||
const closeBtn = e.target.closest("button");
|
||||
const flashEl = closeBtn.closest("[data-flash-message]");
|
||||
flashEl.remove();
|
||||
//update count
|
||||
this.flashCount.textContent =
|
||||
document.querySelectorAll("[data-flash-message]").length;
|
||||
this.flashCount.textContent = document.querySelectorAll(
|
||||
"[data-flash-message]"
|
||||
).length;
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
|
@ -296,6 +301,12 @@ const setNewsSidebar = new Sidebar(
|
|||
"[data-sidebar-info-open]",
|
||||
"[data-sidebar-info-close]"
|
||||
);
|
||||
|
||||
const setCheckbox = new Checkbox();
|
||||
const setSelect = new Select();
|
||||
const setPassword = new Password();
|
||||
const setDisabledPop = new DisabledPop();
|
||||
|
||||
const setFlashSidebar = new Sidebar(
|
||||
"[data-flash-sidebar]",
|
||||
"[data-flash-sidebar-open]",
|
||||
|
@ -303,5 +314,4 @@ const setFlashSidebar = new Sidebar(
|
|||
);
|
||||
const setNews = new News();
|
||||
const setDarkM = new darkMode();
|
||||
const setCheckbox = new Checkbox();
|
||||
const setFlash = new FlashMsg();
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
|
||||
import {
|
||||
Popover,
|
||||
Tabs,
|
||||
|
@ -26,11 +25,6 @@ class Multiple {
|
|||
}
|
||||
}
|
||||
|
||||
const setCheckbox = new Checkbox();
|
||||
const setSelect = new Select();
|
||||
const setPassword = new Password();
|
||||
const setDisabledPop = new DisabledPop();
|
||||
|
||||
const setPopover = new Popover("main", "global-config");
|
||||
const setTabs = new Tabs("[global-config-tabs]", "global-config");
|
||||
const format = new FormatValue();
|
||||
|
|
|
@ -496,8 +496,6 @@ class Filter {
|
|||
}
|
||||
}
|
||||
|
||||
const setCheckbox = new Checkbox();
|
||||
const setSelect = new Select();
|
||||
const dropdown = new Dropdown("logs");
|
||||
const setLogs = new FetchLogs();
|
||||
const setFilter = new Filter("logs");
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import { Checkbox, Select, Password, DisabledPop } from "./utils/form.js";
|
||||
import {
|
||||
Popover,
|
||||
Tabs,
|
||||
|
@ -22,6 +21,9 @@ class ServiceModal {
|
|||
this.formDelete = this.modal.querySelector(
|
||||
"[data-services-modal-form-delete]"
|
||||
);
|
||||
this.submitBtn = document.querySelector(
|
||||
"button[data-services-modal-submit]"
|
||||
);
|
||||
//container
|
||||
this.container = document.querySelector("main");
|
||||
this.init();
|
||||
|
@ -123,10 +125,7 @@ class ServiceModal {
|
|||
}
|
||||
|
||||
changeSubmitBtnName(text) {
|
||||
const submitBtn = document.querySelector(
|
||||
"button[data-services-modal-submit]"
|
||||
);
|
||||
submitBtn.textContent = text;
|
||||
this.submitBtn.textContent = text;
|
||||
}
|
||||
|
||||
setSettingsDefault() {
|
||||
|
@ -148,9 +147,12 @@ class ServiceModal {
|
|||
|
||||
//SET VALUE
|
||||
if (inp.getAttribute("type") === "checkbox") {
|
||||
inp.checked = defaultVal === "yes" ? true : false;
|
||||
defaultVal === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
inp.setAttribute("value", defaultVal);
|
||||
inp.setAttribute("data-method", defaultMethod);
|
||||
inp.checked = true;
|
||||
}
|
||||
|
||||
if (inp.getAttribute("type") !== "checkbox") {
|
||||
|
@ -197,9 +199,9 @@ class ServiceModal {
|
|||
setForm(action, serviceName, formEl) {
|
||||
this.modalTitle.textContent = `${action} ${serviceName}`;
|
||||
formEl.setAttribute("id", `form-${action}-${serviceName}`);
|
||||
formEl
|
||||
.querySelector(`input[name="operation"]`)
|
||||
.setAttribute("value", action);
|
||||
const opeInp = formEl.querySelector(`input[name="operation"]`);
|
||||
opeInp.setAttribute("value", action);
|
||||
opeInp.value = action;
|
||||
|
||||
if (action === "edit" || action === "new") {
|
||||
this.showNewEditForm();
|
||||
|
@ -299,9 +301,12 @@ class ServiceModal {
|
|||
inp.tagName === "INPUT" &&
|
||||
inp.getAttribute("type") === "checkbox"
|
||||
) {
|
||||
inp.checked = value === "yes" ? true : false;
|
||||
value === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
inp.setAttribute("value", value);
|
||||
inp.setAttribute("data-method", method);
|
||||
inp.checked = true;
|
||||
}
|
||||
//for select
|
||||
if (inp.tagName === "SELECT") {
|
||||
|
@ -682,9 +687,12 @@ class Multiple {
|
|||
|
||||
//for settings input
|
||||
if (inp.getAttribute("type") === "checkbox") {
|
||||
inp.checked = value === "yes" ? true : false;
|
||||
value === "yes"
|
||||
? inp.setAttribute("aria-checked", "true")
|
||||
: inp.setAttribute("aria-checked", "false");
|
||||
inp.setAttribute("value", value);
|
||||
inp.setAttribute("data-method", method);
|
||||
inp.checked = true;
|
||||
}
|
||||
|
||||
if (inp.getAttribute("type") !== "checkbox") {
|
||||
|
@ -820,11 +828,6 @@ class Multiple {
|
|||
}
|
||||
}
|
||||
|
||||
const setCheckbox = new Checkbox();
|
||||
const setSelect = new Select();
|
||||
const setPassword = new Password();
|
||||
const setDisabledPop = new DisabledPop();
|
||||
|
||||
const setPopover = new Popover();
|
||||
const setTabs = new Tabs();
|
||||
const setModal = new ServiceModal();
|
||||
|
|
|
@ -20,10 +20,21 @@ class Checkbox {
|
|||
.closest("div")
|
||||
.querySelector('input[type="checkbox"]');
|
||||
|
||||
const prevValue = checkboxEl.getAttribute("value");
|
||||
|
||||
//set attribute value for new state
|
||||
checkboxEl.checked
|
||||
prevValue === "no"
|
||||
? checkboxEl.setAttribute("value", "yes")
|
||||
: checkboxEl.setAttribute("value", "no");
|
||||
|
||||
//set custom input hidden value
|
||||
const newValue = checkboxEl.getAttribute("value");
|
||||
newValue === "yes"
|
||||
? checkboxEl.setAttribute("aria-checked", "true")
|
||||
: checkboxEl.setAttribute("aria-checked", "false");
|
||||
|
||||
//force checked for submit
|
||||
checkboxEl.checked = true;
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
|
|
|
@ -10,6 +10,11 @@ module.exports = {
|
|||
presets: [],
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
aria: {
|
||||
checked: 'checked="true"',
|
||||
},
|
||||
},
|
||||
screens: {
|
||||
sm: "576px",
|
||||
"sm-max": { max: "576px" },
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
<!-- float button-->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
<div class="fixed top-2 sm:top-3 right-19 sm:right-24 xl:right-24 z-990">
|
||||
<div
|
||||
class="group group-hover hover:brightness-75 dark:hover:brightness-105 fixed top-2 sm:top-3 right-19 sm:right-24 xl:right-24 z-990"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
data-flash-sidebar-open
|
||||
class="transition scale-90 sm:scale-100 dark:brightness-95 dark:hover:brightness-105 hover:brightness-75 p-3 text-xl bg-white shadow-sm cursor-pointer rounded-circle text-slate-700"
|
||||
class="transition scale-90 sm:scale-100 dark:brightness-95 p-3 text-xl bg-white shadow-sm cursor-pointer rounded-circle text-slate-700"
|
||||
>
|
||||
<svg
|
||||
class="fill-yellow-500 -translate-y-0.4 h-6 w-6"
|
||||
|
@ -28,12 +30,12 @@
|
|||
|
||||
<!-- right sidebar -->
|
||||
<aside
|
||||
data-flash-sidebar
|
||||
data-flash-sidebar
|
||||
class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
|
||||
>
|
||||
<!-- close btn-->
|
||||
<svg
|
||||
data-flash-sidebar-close
|
||||
data-flash-sidebar-close
|
||||
class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
|
@ -53,7 +55,7 @@ data-flash-sidebar
|
|||
<!-- close button -->
|
||||
<div class="float-right mt-6">
|
||||
<button
|
||||
data-flash-sidebar-close
|
||||
data-flash-sidebar-close
|
||||
class="inline-block p-0 mb-4 text-sm font-bold leading-normal text-center uppercase align-middle transition-all ease-in bg-transparent border-0 rounded-lg shadow-none cursor-pointer hover:-translate-y-px tracking-tight-rem bg-150 bg-x-25 active:opacity-85 dark:text-white text-slate-700"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
|
@ -71,7 +73,7 @@ data-flash-sidebar
|
|||
<!-- flash message-->
|
||||
{% for category, message in messages %}
|
||||
<div
|
||||
data-flash-message
|
||||
data-flash-message
|
||||
class="{% if category == 'error' %}bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
|
||||
>
|
||||
<div class="flex justify-between align-top items-start">
|
||||
|
@ -81,7 +83,7 @@ data-flash-sidebar
|
|||
<h5 class="text-lg mb-0 text-white">Success</h5>
|
||||
{%endif%}
|
||||
<button
|
||||
data-close-flash-message
|
||||
data-close-flash-message
|
||||
type="button"
|
||||
class="absolute right-8 top-2"
|
||||
>
|
||||
|
|
|
@ -146,7 +146,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
value="{{item}}"
|
||||
data-setting-select-dropdown-btn="{{value['id']}}"
|
||||
type="button"
|
||||
class="min-h-[38px] {% 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 hover:brightness-90 bg-primary text-white 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"
|
||||
class="min-h-[38px] {% 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 hover:brightness-90 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:bg-slate-700 dark:text-gray-300"
|
||||
>
|
||||
{{item}}
|
||||
</button>
|
||||
|
@ -169,12 +169,13 @@ data-plugin-item="{{plugin['id']}}"
|
|||
|
||||
<!-- checkbox -->
|
||||
{% if value["type"] == "check" %}
|
||||
<div data-checkbox-handler="{{value['id']}}" class="relative mb-7 md:mb-0 z-10">
|
||||
<input id="{{setting}}" name="{{setting}}"
|
||||
<div data-checkbox-handler="{{value['id']}}" class="relative mb-7 md:mb-0 z-10 ">
|
||||
<input id="{{setting}}" name="{{setting}}"
|
||||
data-default-method="{% if setting in ["AUTOCONF_MODE", "SWARM_MODE", "KUBERNETES_MODE"] %}mode{% else %}{{global_config[setting]['method']}}{% endif %}"
|
||||
data-default-value="{{global_config[setting]['value']}}" {% if
|
||||
setting in ["AUTOCONF_MODE", "SWARM_MODE", "KUBERNETES_MODE"] or global_config[setting]['method'] != 'ui' and global_config[setting]['method']
|
||||
!= 'default' %} disabled {% endif %}
|
||||
<<<<<<< Updated upstream
|
||||
|
||||
|
||||
{% if
|
||||
|
@ -187,11 +188,25 @@ data-plugin-item="{{plugin['id']}}"
|
|||
relative dark:border-slate-600 dark:bg-slate-700 z-10 checked:z-0 w-5 h-5 ease
|
||||
text-base rounded-1.4 checked:bg-primary checked:border-primary
|
||||
dark:checked:bg-primary dark:checked:border-primary duration-250 float-left
|
||||
=======
|
||||
aria-checked="{% if global_config[setting]['value'] == "yes" %}true{% else %}false{% endif %}"
|
||||
checked
|
||||
id="checkbox-{{value['id']}}"
|
||||
class="cursor-pointer disabled:cursor-default
|
||||
relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5 ease
|
||||
text-base rounded-1.4 aria-checked:bg-primary aria-checked:border-primary
|
||||
dark:aria-checked:bg-primary dark:aria-checked:border-primary duration-250 float-left
|
||||
>>>>>>> Stashed changes
|
||||
mt-1 appearance-none border border-gray-300 bg-white bg-contain bg-center
|
||||
bg-no-repeat align-top transition-all disabled:bg-gray-400
|
||||
disabled:border-gray-400 dark:disabled:bg-gray-800
|
||||
dark:disabled:border-gray-800 disabled:text-gray-700
|
||||
dark:disabled:text-gray-300" type="checkbox" data-pattern="{{value['regex']|safe}}"
|
||||
dark:disabled:text-gray-300
|
||||
aria-checked:disabled:bg-gray-400
|
||||
aria-checked:disabled:border-gray-400 dark:aria-checked:disabled:bg-gray-800
|
||||
dark:aria-checked:disabled:border-gray-800 aria-checked:disabled:text-gray-700
|
||||
dark:aria-checked:disabled:text-gray-300
|
||||
" type="checkbox" data-pattern="{{value['regex']|safe}}"
|
||||
|
||||
value="{% if
|
||||
setting in ["AUTOCONF_MODE", "SWARM_MODE", "KUBERNETES_MODE"] or global_config[setting]['method'] != 'ui' and global_config[setting]['method']
|
||||
|
@ -203,7 +218,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
<path class="pointer-events-none"
|
||||
d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
|
||||
></path>
|
||||
</svg>
|
||||
|
@ -362,7 +377,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
value="{{item}}"
|
||||
data-setting-select-dropdown-btn="{{value['id']}}"
|
||||
type="button"
|
||||
class="min-h-[38px] {% 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 hover:brightness-90 bg-primary text-white 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"
|
||||
class="min-h-[38px] {% 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 hover:brightness-90 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:bg-slate-700 dark:text-gray-300"
|
||||
>
|
||||
{{item}}
|
||||
</button>
|
||||
|
|
Loading…
Reference in a new issue