mirror of
https://github.com/vladmandic/automatic
synced 2026-09-10 06:48:43 +02:00
extra networks fixes
This commit is contained in:
+26
-30
@@ -26,37 +26,33 @@ function setupExtraNetworksForTab(tabname) {
|
||||
});
|
||||
|
||||
intersectionObserver = new IntersectionObserver((entries) => {
|
||||
if (!en) return
|
||||
for (el of Array.from(gradioApp().querySelectorAll('.extra-network-cards'))) el.style.height = window.opts.extra_networks_height + 'vh';
|
||||
if (entries[0].intersectionRatio > 0) {
|
||||
for (el of Array.from(gradioApp().querySelectorAll('.extra-network-cards'))) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.top > 0) {
|
||||
if (!en) return
|
||||
if (window.opts.extra_networks_card_cover == 'cover') {
|
||||
en.style.transition = '';
|
||||
en.style.zIndex = 9999;
|
||||
en.style.position = 'absolute';
|
||||
en.style.right = 'unset';
|
||||
en.style.width = 'unset';
|
||||
el.style.height = document.body.offsetHeight - el.getBoundingClientRect().top + 'px';
|
||||
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
|
||||
} if (window.opts.extra_networks_card_cover == 'sidebar') {
|
||||
en.style.transition = 'width 0.2s ease';
|
||||
en.style.zIndex = 0;
|
||||
en.style.position = 'absolute';
|
||||
en.style.right = '0';
|
||||
en.style.width = window.opts.extra_networks_sidebar_width + 'vw';
|
||||
el.style.height = gradioApp().getElementById(`${tabname}_settings`).offsetHeight - 90 + 'px';
|
||||
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 100 - 2 - window.opts.extra_networks_sidebar_width + 'vw';
|
||||
} else {
|
||||
en.style.transition = '';
|
||||
en.style.zIndex = 0;
|
||||
en.style.position = 'relative';
|
||||
en.style.right = 'unset';
|
||||
en.style.width = 'unset';
|
||||
el.style.height = window.innerHeight - el.getBoundingClientRect().top + 'px';
|
||||
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
|
||||
}
|
||||
}
|
||||
if (window.opts.extra_networks_card_cover === 'cover') {
|
||||
en.style.transition = '';
|
||||
en.style.zIndex = 9999;
|
||||
en.style.position = 'absolute';
|
||||
en.style.right = 'unset';
|
||||
en.style.width = 'unset';
|
||||
en.style.height = 'unset';
|
||||
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
|
||||
} else if (window.opts.extra_networks_card_cover === 'sidebar') {
|
||||
en.style.transition = 'width 0.2s ease';
|
||||
en.style.zIndex = 0;
|
||||
en.style.position = 'absolute';
|
||||
en.style.right = '0';
|
||||
en.style.width = window.opts.extra_networks_sidebar_width + 'vw';
|
||||
en.style.height = '-webkit-fill-available'
|
||||
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 100 - 2 - window.opts.extra_networks_sidebar_width + 'vw';
|
||||
} else {
|
||||
en.style.transition = '';
|
||||
en.style.zIndex = 0;
|
||||
en.style.position = 'relative';
|
||||
en.style.right = 'unset';
|
||||
en.style.width = 'unset';
|
||||
en.style.height = 'unset';
|
||||
gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
|
||||
}
|
||||
} else {
|
||||
en.style.width = 0;
|
||||
|
||||
@@ -150,7 +150,6 @@ onAfterUiUpdate(() => {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.createElement('div');
|
||||
// modal.onclick = closeModal;
|
||||
modal.id = 'lightboxModal';
|
||||
modal.tabIndex = 0;
|
||||
modal.addEventListener('keydown', modalKeyHandler, true);
|
||||
@@ -187,12 +186,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
modalImage.addEventListener('keydown', modalKeyHandler, true);
|
||||
modal.appendChild(modalImage);
|
||||
modalImage.onload = () => panzoom(modalImage, { zoomSpeed: 0.025, minZoom: 0.25, maxZoom: 4.0 });
|
||||
let drag = false;
|
||||
modalImage.addEventListener('mousedown', () => drag = false);
|
||||
modalImage.addEventListener('mousemove', () => drag = true);
|
||||
modalImage.addEventListener('mouseup', () => { if (!drag) closeModal(); });
|
||||
// modalImage.onclick = closeModal;
|
||||
|
||||
let drag = false;
|
||||
modal.addEventListener('mousedown', () => drag = false);
|
||||
modal.addEventListener('mousemove', () => drag = true);
|
||||
modal.addEventListener('scroll', () => drag = true);
|
||||
modal.addEventListener('mouseup', () => { if (!drag) closeModal(); });
|
||||
|
||||
const modalPrev = document.createElement('a');
|
||||
modalPrev.className = 'modalPrev';
|
||||
modalPrev.innerHTML = '❮';
|
||||
|
||||
@@ -432,6 +432,7 @@ div#extras_scale_to_tab div.form{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
table.settings-value-table{
|
||||
@@ -533,11 +534,11 @@ table.settings-value-table td{
|
||||
.extra-networks .description { margin-top: 8px; }
|
||||
.extra-networks .tab-nav > button { margin-right: 0; height: auto; padding: 2px 4px 2px 4px; }
|
||||
.extra-networks-tab { padding: 0 !important; }
|
||||
.extra-network-subdirs { background: var(--input-background-fill); overflow-x: hidden; overflow-y: auto; max-height: 50vh; min-width: 80px; max-width: 120px; }
|
||||
.extra-network-subdirs { background: var(--input-background-fill); overflow-x: hidden; overflow-y: auto; min-width: 80px; max-width: 120px; }
|
||||
.extra-networks-page { display: flex }
|
||||
.extra-networks .custom-button { min-width: 80px; max-width: 120px; width: 100%; background: none; justify-content: left; text-align: left; padding: 2px 8px 2px 8px; box-shadow: none; line-break: auto; }
|
||||
.extra-networks .custom-button:hover { background: var(--button-primary-background-fill) }
|
||||
.extra-network-cards { display: flex; flex-wrap: wrap; height: 50vh; max-height: 50vh; overflow-y: scroll; overflow-x: hidden; width: -webkit-fill-available; }
|
||||
.extra-network-cards { display: flex; flex-wrap: wrap; overflow-y: scroll; overflow-x: hidden; width: -webkit-fill-available; }
|
||||
.extra-network-cards .card { height: fit-content; margin: 0.5em; position: relative; scroll-snap-align: start; scroll-margin-top: 0; }
|
||||
.extra-network-cards .card .overlay { position: absolute; bottom: 0; padding: 0.2em; z-index: 10; width: 100%; background: none; }
|
||||
.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.40); }
|
||||
|
||||
Reference in New Issue
Block a user