en details

This commit is contained in:
Vladimir Mandic
2023-09-24 12:21:34 -04:00
parent d9418ecf1d
commit aabad68872
6 changed files with 153 additions and 129 deletions
+4 -62
View File
@@ -33,37 +33,12 @@ const setENState = (state) => {
updateInput(el);
};
// popup
let globalPopup = null;
let globalPopupInner = null;
function popup(contents) {
if (!globalPopup) {
globalPopup = document.createElement('div');
globalPopup.onclick = () => { globalPopup.style.display = 'none'; };
globalPopup.classList.add('global-popup');
const close = document.createElement('div');
close.classList.add('global-popup-close');
close.onclick = () => { globalPopup.style.display = 'none'; };
close.title = 'Close';
globalPopup.appendChild(close);
globalPopupInner = document.createElement('div');
globalPopupInner.onclick = (event) => { event.stopPropagation(); return false; };
globalPopupInner.classList.add('global-popup-inner');
globalPopup.appendChild(globalPopupInner);
gradioApp().appendChild(globalPopup);
}
globalPopupInner.innerHTML = '';
globalPopupInner.appendChild(contents);
globalPopup.style.display = 'flex';
}
// methods
function showCardDetails(event) {
console.log('HERE1', event);
const tabname = getENActiveTab();
setENState({ op: 'showCardDetails' });
// setENState({ op: 'showCardDetails' });
const btn = gradioApp().getElementById(`${tabname}_extra_details_btn`);
btn.click();
event.stopPropagation();
@@ -71,47 +46,14 @@ function showCardDetails(event) {
}
function getCardDetails(...args) {
const el = event?.target?.parentElement?.parentElement?.parentElement;
console.log('HERE2', event);
const el = event?.target?.parentElement?.parentElement;
if (!el?.classList?.contains('card')) return [...args];
const tabname = getENActiveTab();
setENState({ op: 'getCardDetails', item: el.dataset.name });
return [...args];
}
function saveCardDescription(event) {
const el = event?.target?.parentElement?.parentElement?.parentElement;
if (!el?.classList?.contains('card')) return;
const tabname = getENActiveTab();
const description = gradioApp().getElementById(`${tabname}_description`)?.children[0].children[1].value;
el.dataset.description = description;
setENState({ op: 'saveCardDescription', item: el.dataset.name, description });
event.stopPropagation();
event.preventDefault();
}
function saveCardPreview(event) {
const el = event?.target?.parentElement?.parentElement?.parentElement;
if (!el?.classList?.contains('card')) return;
const index = selected_gallery_index();
setENState({ op: 'saveCardPreview', item: el.dataset.name, index });
event.stopPropagation();
event.preventDefault();
}
function readCardMetadata(event, extraPage, cardName) {
requestGet('./sd_extra_networks/metadata', { page: extraPage, item: cardName }, (data) => {
if (data?.metadata) {
if (typeof (data?.metadata) !== 'string') data.metadata = JSON.stringify(data.metadata, null, 2);
const elem = document.createElement('pre');
elem.classList.add('popup-metadata');
elem.textContent = data.metadata;
popup(elem);
}
});
event.stopPropagation();
event.preventDefault();
}
function readCardTags(el, tags) {
const clickTag = (e, tag) => {
e.preventDefault();
+16 -8
View File
@@ -252,14 +252,22 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.40); }
.extra-network-cards .card .overlay .tags { margin: 4px; display: none; overflow-wrap: break-word; }
.extra-network-cards .card .overlay .tag { padding: 2px; margin: 2px; background: var(--neutral-700); cursor: pointer; display: inline-block; }
.extra-network-cards .card .overlay .actions { font-size: 2.2em; display: none; text-align-last: center; cursor: pointer; font-variant: unicase; height: 0.8em }
.extra-network-cards .card .overlay .actions > span { padding: 4px; }
.extra-network-cards .card .overlay .description { line-break: anywhere; display: none; color: white; }
.extra-network-cards .card:hover .overlay .actions { display: block; }
.extra-network-cards .card .actions > span { padding: 4px; }
.extra-network-cards .card:hover .actions { display: block; }
.extra-network-cards .card:hover .overlay .tags { display: block; }
.extra-network-cards .card:hover .overlay .description { display: block; }
.extra-network-cards .card .actions {
font-size: 3em;
display: none;
text-align-last: right;
cursor: pointer;
font-variant: unicase;
position: absolute;
z-index: 100;
right: 0;
height: 0.7em;
width: 100%;
background: rgba(0, 0, 0, 0.40);
}
#txt2img_description, #img2img_description { max-height: 63px; overflow-y: auto !important; }
#txt2img_description > label > textarea, #img2img_description > label > textarea { font-size: 0.9em }
#txt2img_extra_details, #img2img_extra_details {
@@ -273,7 +281,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
box-shadow: var(--button-shadow);
}
#txt2img_extra_details > div, #img2img_extra_details > div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; }
#txt2img_extra_details td:first-child, #img2img_extra_details td:first-child { font-weight: bold; }
#txt2img_extra_details td:first-child, #img2img_extra_details td:first-child { font-weight: bold; vertical-align: top; }
/* controlnet
.controlnet_control_type .controlnet_control_type_filter_group .wrap:last-of-type { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }