diff --git a/web/css/autocomplete-plus.css b/web/css/autocomplete-plus.css index 0176f28..deafdc0 100644 --- a/web/css/autocomplete-plus.css +++ b/web/css/autocomplete-plus.css @@ -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; } diff --git a/web/js/similar-tags.js b/web/js/similar-tags.js index e02f788..c9efb39 100644 --- a/web/js/similar-tags.js +++ b/web/js/similar-tags.js @@ -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)}%`;