Refactor Similar Tags UI to use div and list structure for improved layout and accessibility
This commit is contained in:
newtextdoc1111
@@ -1,25 +1,25 @@
|
||||
/* Basic styles for autocomplete - will be refined later */
|
||||
|
||||
#autocomplete-plus-list {
|
||||
background-color: var(--comfy-input-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
min-width: 200px; /* Increased min width */
|
||||
overflow-y: auto;
|
||||
position: absolute; /* Ensure position is absolute */
|
||||
z-index: 10000; /* High z-index */
|
||||
min-width: 200px; /* Increased min width */
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: var(--comfy-input-bg);
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
|
||||
color: var(--input-text);
|
||||
font-size: 0.9em; /* Slightly smaller font */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.autocomplete-plus-item {
|
||||
padding: 5px 10px; /* Adjusted padding */
|
||||
cursor: pointer;
|
||||
white-space: nowrap; /* Prevent wrapping */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* Show ellipsis if too long */
|
||||
padding: 5px 10px; /* Adjusted padding */
|
||||
border-bottom: 1px solid var(--border-color); /* Separator line */
|
||||
cursor: pointer;
|
||||
text-overflow: ellipsis; /* Show ellipsis if too long */
|
||||
white-space: nowrap; /* Prevent wrapping */
|
||||
}
|
||||
|
||||
.autocomplete-plus-item:last-child {
|
||||
@@ -42,6 +42,7 @@
|
||||
background-color: var(
|
||||
--comfy-hover-bg
|
||||
); /* Use a hover variable if available, or adjust */
|
||||
|
||||
color: var(--desc-text); /* Adjust text color on hover if needed */
|
||||
}
|
||||
|
||||
@@ -51,61 +52,58 @@
|
||||
--comfy-menu-bg-selected,
|
||||
var(--comfy-button-bg)
|
||||
); /* Use selection color, fallback to button */
|
||||
|
||||
color: var(
|
||||
--comfy-menu-text-selected,
|
||||
var(--button-text)
|
||||
); /* Use selected text color, fallback */
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Similar Tags UI Styles */
|
||||
#similar-tags-container {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--comfy-input-bg);
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 10000;
|
||||
color: var(--input-text);
|
||||
width: 800px;
|
||||
background-color: var(--comfy-input-bg);
|
||||
color: var(--input-text);
|
||||
}
|
||||
|
||||
#similar-tags-container table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#similar-tags-container thead {
|
||||
background-color: var(--comfy-menu-bg);
|
||||
color: var(--desc-text);
|
||||
#similar-tags-header {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: var(--comfy-menu-bg);
|
||||
color: var(--desc-text);
|
||||
}
|
||||
|
||||
.similar-tags-header-tag-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#similar-tags-container tbody {
|
||||
#similar-tags-list {
|
||||
display: grid;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
|
||||
grid-auto-rows: auto;
|
||||
grid-template-columns: max-content 1fr auto;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.similar-tag-item {
|
||||
display: contents;
|
||||
padding: 5px 10px; /* Adjusted padding */
|
||||
border-bottom: 1px solid var(--border-color); /* Separator line */
|
||||
cursor: pointer;
|
||||
white-space: nowrap; /* Prevent wrapping */
|
||||
border-bottom: 1px solid var(--border-color); /* Separator line */
|
||||
}
|
||||
|
||||
.similar-tag-item:last-child {
|
||||
@@ -127,22 +125,22 @@
|
||||
}
|
||||
|
||||
.similar-tag-similarity {
|
||||
color: var(--desc-text);
|
||||
background-color: var(--comfy-menu-bg);
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
background-color: var(--comfy-menu-bg);
|
||||
color: var(--desc-text);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.similar-tags-loading-message {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.similar-tags-empty {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: var(--error-text);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
+25
-45
@@ -18,24 +18,16 @@ class SimilarTagsUI {
|
||||
this.root = document.createElement('div');
|
||||
this.root.id = 'similar-tags-container';
|
||||
|
||||
// Create the table element
|
||||
this.table = document.createElement('table');
|
||||
this.table.id = 'similar-tags-table';
|
||||
this.root.appendChild(this.table);
|
||||
|
||||
// Create header row
|
||||
this.thead = document.createElement('thead');
|
||||
const headerRow = document.createElement('tr');
|
||||
const headerCell = document.createElement('th');
|
||||
// headerCell.colSpan = 3; // Span across all columns
|
||||
headerCell.textContent = 'Similar Tags';
|
||||
headerRow.appendChild(headerCell);
|
||||
this.thead.appendChild(headerRow);
|
||||
this.table.appendChild(this.thead);
|
||||
this.header = document.createElement('div');
|
||||
this.header.id = 'similar-tags-header';
|
||||
this.header.textContent = 'Similar Tags';
|
||||
this.root.appendChild(this.header);
|
||||
|
||||
// Create a tbody for the tags
|
||||
this.tbody = document.createElement('tbody');
|
||||
this.table.appendChild(this.tbody);
|
||||
this.tagsContainer = document.createElement('ul');
|
||||
this.tagsContainer.id = 'similar-tags-list';
|
||||
this.root.appendChild(this.tagsContainer);
|
||||
|
||||
// Add to DOM
|
||||
document.body.appendChild(this.root);
|
||||
@@ -45,8 +37,8 @@ class SimilarTagsUI {
|
||||
this.currentTag = null;
|
||||
|
||||
// Add click handler for tag selection
|
||||
this.tbody.addEventListener('mousedown', (e) => {
|
||||
const row = e.target.closest('tr');
|
||||
this.tagsContainer.addEventListener('mousedown', (e) => {
|
||||
const row = e.target.closest('.similar-tag-item');
|
||||
if (row && row.dataset.tag) {
|
||||
this.selectTag(row.dataset.tag);
|
||||
e.preventDefault();
|
||||
@@ -87,7 +79,7 @@ class SimilarTagsUI {
|
||||
this.root.style.display = 'none';
|
||||
this.activeInput = null;
|
||||
this.currentTag = null;
|
||||
this.tbody.innerHTML = '';
|
||||
this.tagsContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -95,47 +87,35 @@ class SimilarTagsUI {
|
||||
* @param {Array<{tag: string, similarity: number, count: number, alias?: string[]}>} similarTags
|
||||
*/
|
||||
updateContent(similarTags) {
|
||||
this.tbody.innerHTML = '';
|
||||
this.tagsContainer.innerHTML = '';
|
||||
|
||||
// Update header with current tag
|
||||
this.thead.innerHTML = ''; // Clear previous content
|
||||
const headerRow = document.createElement('tr');
|
||||
const headerCell = document.createElement('th');
|
||||
// headerCell.colSpan = 3;
|
||||
headerCell.textContent = 'Similar Tags: ';
|
||||
this.header.innerHTML = ''; // Clear previous content
|
||||
this.header.textContent = 'Similar Tags: ';
|
||||
const tagNameSpan = document.createElement('span');
|
||||
tagNameSpan.className = 'similar-tags-header-tag-name';
|
||||
tagNameSpan.textContent = this.currentTag;
|
||||
headerCell.appendChild(tagNameSpan);
|
||||
headerRow.appendChild(headerCell);
|
||||
this.thead.appendChild(headerRow);
|
||||
this.table.appendChild(this.thead);
|
||||
this.header.appendChild(tagNameSpan);
|
||||
|
||||
if (!autoCompleteData.cooccurrenceLoaded) {
|
||||
const emptyRow = document.createElement('tr');
|
||||
const messageCell = document.createElement('td');
|
||||
messageCell.className = 'similar-tags-loading-message';
|
||||
// messageCell.colSpan = 3; // Span across all columns
|
||||
messageCell.textContent = 'Initializing cooccurrence data...';
|
||||
emptyRow.appendChild(messageCell);
|
||||
this.tbody.appendChild(emptyRow);
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = 'similar-tags-loading-message';
|
||||
messageDiv.textContent = 'Initializing cooccurrence data...';
|
||||
this.tagsContainer.appendChild(messageDiv);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!similarTags || similarTags.length === 0) {
|
||||
const emptyRow = document.createElement('tr');
|
||||
const messageCell = document.createElement('td');
|
||||
// messageCell.colSpan = 3; // Span across all columns
|
||||
const messageCell = document.createElement('div');
|
||||
messageCell.textContent = 'No similar tags found';
|
||||
emptyRow.appendChild(messageCell);
|
||||
this.tbody.appendChild(emptyRow);
|
||||
this.tagsContainer.appendChild(messageCell);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create tag rows
|
||||
similarTags.forEach(tagData => {
|
||||
const tagRow = this.createTagElement(tagData);
|
||||
this.tbody.appendChild(tagRow);
|
||||
this.tagsContainer.appendChild(tagRow);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -145,18 +125,18 @@ class SimilarTagsUI {
|
||||
* @returns {HTMLTableRowElement} The tag row element
|
||||
*/
|
||||
createTagElement(tagData) {
|
||||
const tagRow = document.createElement('tr');
|
||||
const tagRow = document.createElement('li');
|
||||
tagRow.className = 'similar-tag-item';
|
||||
tagRow.dataset.tag = tagData.tag;
|
||||
tagRow.style.cursor = 'pointer';
|
||||
|
||||
// Tag name cell
|
||||
const tagNameCell = document.createElement('td');
|
||||
const tagNameCell = document.createElement('span');
|
||||
tagNameCell.className = 'similar-tag-name';
|
||||
tagNameCell.textContent = tagData.tag;
|
||||
|
||||
// Alias cell (middle column)
|
||||
const aliasCell = document.createElement('td');
|
||||
const aliasCell = document.createElement('span');
|
||||
aliasCell.className = 'similar-tag-alias';
|
||||
|
||||
// Display alias if available
|
||||
@@ -167,7 +147,7 @@ class SimilarTagsUI {
|
||||
}
|
||||
|
||||
// Similarity cell
|
||||
const similarityCell = document.createElement('td');
|
||||
const similarityCell = document.createElement('span');
|
||||
similarityCell.className = 'similar-tag-similarity';
|
||||
similarityCell.textContent = `${(tagData.similarity * 100).toFixed(2)}%`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user