extra networks fixes

This commit is contained in:
Vladimir Mandic
2023-07-07 20:20:45 -04:00
parent 4459cc581a
commit 0f4f8c6015
7 changed files with 56 additions and 47 deletions
+26 -30
View File
@@ -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;
+6 -6
View File
@@ -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 = '❮';
+3 -2
View File
@@ -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); }