en add sort and other updates

javascript/black-teal.css

@@ -88,7 +88,8 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .tab-nav { zoom: 120%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 .label-wrap { margin: 8px 0px 4px 0px; }
 .gradio-button.tool { border: none; background: none; box-shadow: none; filter: hue-rotate(340deg) saturate(0.5); }
-#tab_extensions table td, #tab_extensions table th, #tab_config table td, #tab_config table th { border: none; padding: 0.5em; }
+#tab_extensions table td, #tab_extensions table th, #tab_config table td, #tab_config table th { border: none; }
+#tab_extensions table tr:hover, #tab_config table tr:hover { background-color: var(--neutral-500) !important; }
 #tab_extensions table, #tab_config table { width: 96vw }
 #tab_extensions table thead, #tab_config table thead { background-color: var(--neutral-700); }
 #tab_extensions table, #tab_config table { background-color: #222222; }

javascript/extraNetworks.js

@@ -58,7 +58,8 @@ function readCardTags(el, tags) {
     e.preventDefault();
     e.stopPropagation();
     const textarea = activePromptTextarea[getENActiveTab()];
-    if (textarea.value.indexOf(tag) !== -1) textarea.value = textarea.value.replace(tag, '');
+    if (textarea.value.indexOf(` ${tag}`) !== -1) textarea.value = textarea.value.replace(` ${tag}`, '');
+    else if (textarea.value.indexOf(`${tag} `) !== -1) textarea.value = textarea.value.replace(` ${tag} `, '');
     else textarea.value += ` ${tag}`;
     updateInput(textarea);
   };
@@ -144,6 +145,34 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
   return false;
 }
 
+let sortVal = 0;
+
+function sortExtraNetworks() {
+  const sortDesc = ['Name [A-Z]', 'Name [Z-A]', 'Date [Newest]', 'Date [Oldest]', 'Size [Largest]', 'Size [Smallest]'];
+  const tabname = getENActiveTab();
+  const pagename = getENActivePage();
+  if (!tabname || !pagename) return 'sort error: unknown page';
+  const pg = gradioApp().getElementById(`${tabname.toLowerCase()}_${pagename.toLowerCase()}_cards`);
+  const cards = Array.from(pg.querySelectorAll('.card') || []);
+  if (cards.length === 0) return 'sort: no cards';
+  cards.sort((a, b) => {
+    switch (sortVal) {
+      case 0: return a.dataset.name ? a.dataset.name.localeCompare(b.dataset.name) : 0;
+      case 1: return b.dataset.name ? b.dataset.name.localeCompare(a.dataset.name) : 0;
+      case 2: return a.dataset.mtime && !isNaN(a.dataset.mtime) ? parseFloat(b.dataset.mtime) - parseFloat(a.dataset.mtime) : 0;
+      case 3: return b.dataset.mtime && !isNaN(b.dataset.mtime) ? parseFloat(a.dataset.mtime) - parseFloat(b.dataset.mtime) : 0;
+      case 4: return a.dataset.size && !isNaN(a.dataset.size) ? parseFloat(b.dataset.size) - parseFloat(a.dataset.size) : 0;
+      case 5: return b.dataset.size && !isNaN(b.dataset.size) ? parseFloat(a.dataset.size) - parseFloat(b.dataset.size) : 0;
+    }
+    return 0;
+  });
+  for (const card of cards) pg.appendChild(card);
+  const desc = sortDesc[sortVal];
+  sortVal = (sortVal + 1) % 6;
+  log('sortExtraNetworks', tabname, pagename, desc);
+  return `sort page ${pagename} cards ${cards.length} by ${desc}`;
+}
+
 function refreshExtraNetworks(tabname) {
   log('refreshExtraNetworks', tabname, gradioApp().querySelector(`#${tabname}_extra_networks textarea`)?.value);
   gradioApp().querySelector(`#${tabname}_extra_networks textarea`)?.dispatchEvent(new Event('input'));
@@ -195,6 +224,7 @@ function setupExtraNetworksForTab(tabname) {
   const btnScan = gradioApp().getElementById(`${tabname}_extra_scan`);
   const btnSave = gradioApp().getElementById(`${tabname}_extra_save`);
   const btnClose = gradioApp().getElementById(`${tabname}_extra_close`);
+  const btnSort = gradioApp().getElementById(`${tabname}_extra_sort`);
   const btnModel = gradioApp().getElementById(`${tabname}_extra_model`);
   const btnApply = gradioApp().getElementById(`${tabname}_extra_apply`);
   const buttons = document.createElement('span');
@@ -204,6 +234,7 @@ function setupExtraNetworksForTab(tabname) {
   if (btnApply) buttons.appendChild(btnApply);
   if (btnScan) buttons.appendChild(btnScan);
   if (btnSave) buttons.appendChild(btnSave);
+  if (btnSort) buttons.appendChild(btnSort);
   if (btnClose) buttons.appendChild(btnClose);
   btnModel.onclick = () => btnModel.classList.toggle('toolbutton-selected');
   tabs.appendChild(buttons);

javascript/sdnext.css

@@ -163,6 +163,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
 /* extensions */
 #tab_extensions table, #tab_config table{ border-collapse: collapse; }
 #tab_extensions table td, #tab_extensions table th, #tab_config table td, #tab_config table th { border: 1px solid #ccc; padding: 0.25em 0.5em; }
+#tab_extensions table tr:hover, #tab_config table tr:hover { background-color: var(--neutral-500) !important; }
 #tab_extensions table input[type="checkbox"] { margin-right: 0.5em; appearance: checkbox; }
 #tab_extensions button{ max-width: 16em; }
 #tab_extensions input[disabled="disabled"]{ opacity: 0.5; }
@@ -195,9 +196,10 @@ 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:hover .preview { box-shadow: none; filter: grayscale(100%); }
 .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 .tags { display: none; overflow-wrap: break-word; }
+.extra-network-cards .card .overlay .tag { padding: 3px; background: rgba(70, 70, 70, 0.60); font-size: var(--text-lg); cursor: pointer; display: inline-block; margin-bottom: 4px; }
 .extra-network-cards .card .actions > span { padding: 4px; }
+.extra-network-cards .card .actions > span:hover { color: var(--highlight-color); }
 .extra-network-cards .card:hover .actions { display: block; }
 .extra-network-cards .card:hover .overlay .tags { 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); }