1580158
/
automatic
mirror of https://github.com/vladmandic/automatic
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update inputaccordion

pull/3248/head
Vladimir Mandic 2024-06-17 20:37:40 -04:00
parent 906b9be121
commit 549f9ff761
5 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions-builtin/sdnext-modernui

@ -1 +1 @@
Subproject commit 8eaf18c491ae2a54bb4963cf332fab5303fe1a24 Subproject commit dae2c67d826b631dcc343c028c60f478b0437877

1
javascript/base.css
View File

@ -17,6 +17,7 @@
.tooltip-show { opacity: 0.9; } .tooltip-show { opacity: 0.9; }
.tooltip-left { right: unset; left: 1em; } .tooltip-left { right: unset; left: 1em; }
.toolbutton-selected { background: var(--background-fill-primary) !important; } .toolbutton-selected { background: var(--background-fill-primary) !important; }
.input-accordion-checkbox { display: none; }
/* live preview */ /* live preview */
.progressDiv { position: relative; height: 20px; background: #b4c0cc; margin-bottom: -3px; } .progressDiv { position: relative; height: 20px; background: #b4c0cc; margin-bottom: -3px; }

31
javascript/inputAccordion.js
View File

@ -10,13 +10,10 @@ function setupAccordion(accordion) {
const extra = gradioApp().querySelector(`#${accordion.id}-extra`); const extra = gradioApp().querySelector(`#${accordion.id}-extra`);
const span = labelWrap.querySelector('span'); const span = labelWrap.querySelector('span');
let linked = true; let linked = true;
const isOpen = () => labelWrap.classList.contains('open'); const isOpen = () => labelWrap.classList.contains('open');
const observerAccordionOpen = new MutationObserver((mutations) => { const observerAccordionOpen = new MutationObserver((mutations) => {
mutations.forEach((mutationRecord) => { mutations.forEach((mutationRecord) => {
accordion.classList.toggle('input-accordion-open', isOpen()); accordion.classList.toggle('input-accordion-open', isOpen());
if (linked) { if (linked) {
accordion.visibleCheckbox.checked = isOpen(); accordion.visibleCheckbox.checked = isOpen();
accordion.onVisibleCheckboxChange(); accordion.onVisibleCheckboxChange();
@ -24,15 +21,9 @@ function setupAccordion(accordion) {
}); });
}); });
observerAccordionOpen.observe(labelWrap, { attributes: true, attributeFilter: ['class'] }); observerAccordionOpen.observe(labelWrap, { attributes: true, attributeFilter: ['class'] });
if (extra) labelWrap.insertBefore(extra, labelWrap.lastElementChild);
if (extra) {
labelWrap.insertBefore(extra, labelWrap.lastElementChild);
}
accordion.onChecked = (checked) => { accordion.onChecked = (checked) => {
if (isOpen() !== checked) { if (isOpen() !== checked) labelWrap.click();
labelWrap.click();
}
}; };
const visibleCheckbox = document.createElement('INPUT'); const visibleCheckbox = document.createElement('INPUT');
@ -41,13 +32,9 @@ function setupAccordion(accordion) {
visibleCheckbox.id = `${accordion.id}-visible-checkbox`; visibleCheckbox.id = `${accordion.id}-visible-checkbox`;
visibleCheckbox.className = `${gradioCheckbox.className} input-accordion-checkbox`; visibleCheckbox.className = `${gradioCheckbox.className} input-accordion-checkbox`;
span.insertBefore(visibleCheckbox, span.firstChild); span.insertBefore(visibleCheckbox, span.firstChild);
accordion.visibleCheckbox = visibleCheckbox; accordion.visibleCheckbox = visibleCheckbox;
accordion.onVisibleCheckboxChange = () => { accordion.onVisibleCheckboxChange = () => {
if (linked && isOpen() !== visibleCheckbox.checked) { if (linked && isOpen() !== visibleCheckbox.checked) labelWrap.click();
labelWrap.click();
}
gradioCheckbox.checked = visibleCheckbox.checked; gradioCheckbox.checked = visibleCheckbox.checked;
updateInput(gradioCheckbox); updateInput(gradioCheckbox);
}; };
@ -59,8 +46,10 @@ function setupAccordion(accordion) {
visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange); visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange);
} }
onUiLoaded(() => { // onUiLoaded(() => {
for (const accordion of gradioApp().querySelectorAll('.input-accordion')) { // for (const accordion of gradioApp().querySelectorAll('.input-accordion')) setupAccordion(accordion);
setupAccordion(accordion); // });
}
}); function initAccordions() {
for (const accordion of gradioApp().querySelectorAll('.input-accordion')) setupAccordion(accordion);
}

2
javascript/sdnext.css
View File

@ -240,7 +240,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
.extra-details > div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; } .extra-details > div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; }
.extra-details td:first-child { font-weight: bold; vertical-align: top; } .extra-details td:first-child { font-weight: bold; vertical-align: top; }
.extra-details .gradio-image { max-height: 50vh; } .extra-details .gradio-image { max-height: 50vh; }
.input-accordion-checkbox { display: none !important; }
/* specific elements */ /* specific elements */
#modelmerger_interp_description { margin-top: 1em; margin-bottom: 1em; } #modelmerger_interp_description { margin-top: 1em; margin-bottom: 1em; }

1
javascript/startup.js
View File

@ -12,6 +12,7 @@ async function initStartup() {
initLogMonitor(); initLogMonitor();
initContextMenu(); initContextMenu();
initDragDrop(); initDragDrop();
initAccordions();
initSettings(); initSettings();
initImageViewer(); initImageViewer();
initGallery(); initGallery();