alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-25 23:25:43 -03:00
Code Issues Packages Projects Releases Wiki Activity

Add styles for empty tags and update tag rendering logic to always display container

Browse Source
This commit is contained in:
Will Miao
2025-06-13 07:11:07 +08:00
parent a7207084ef
commit 6395836fbb
2 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/css/components/lora-modal.css
View File

@@ -1144,12 +1144,31 @@
white-space: nowrap; white-space: nowrap;
} }
/* Style for empty tags placeholder */
.model-tag-empty {
background: rgba(0, 0, 0, 0.02);
border: 1px dashed rgba(0, 0, 0, 0.1);
border-radius: var(--border-radius-xs);
padding: 2px 8px;
font-size: 0.75em;
color: var(--text-color);
white-space: nowrap;
opacity: 0.7;
font-style: italic;
}
/* Adjust dark theme tag styles */ /* Adjust dark theme tag styles */
[data-theme="dark"] .model-tag-compact { [data-theme="dark"] .model-tag-compact {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--lora-border); border: 1px solid var(--lora-border);
} }
/* Dark theme for empty tags */
[data-theme="dark"] .model-tag-empty {
background: rgba(255, 255, 255, 0.02);
border: 1px dashed var(--lora-border);
}
.model-tag-more { .model-tag-more {
background: var(--lora-accent); background: var(--lora-accent);
color: var(--lora-text); color: var(--lora-text);

12
static/js/components/loraModal/utils.js
View File

@@ -30,11 +30,12 @@ export function formatFileSize(bytes) {
* @returns {string} HTML内容 * @returns {string} HTML内容
*/ */
export function renderCompactTags(tags, filePath = '') { export function renderCompactTags(tags, filePath = '') {
if (!tags || tags.length === 0) return ''; // Remove the early return and always render the container
const tagsList = tags || [];
// Display up to 5 tags, with a tooltip indicator if there are more // Display up to 5 tags, with a tooltip indicator if there are more
const visibleTags = tags.slice(0, 5); const visibleTags = tagsList.slice(0, 5);
const remainingCount = Math.max(0, tags.length - 5); const remainingCount = Math.max(0, tagsList.length - 5);
return ` return `
<div class="model-tags-container"> <div class="model-tags-container">
@@ -44,15 +45,16 @@ export function renderCompactTags(tags, filePath = '') {
${remainingCount > 0 ? ${remainingCount > 0 ?
`<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` :
''} ''}
${tagsList.length === 0 ? `<span class="model-tag-empty">No tags</span>` : ''}
</div> </div>
<button class="edit-tags-btn" data-file-path="${filePath}" title="Edit tags"> <button class="edit-tags-btn" data-file-path="${filePath}" title="Edit tags">
<i class="fas fa-pencil-alt"></i> <i class="fas fa-pencil-alt"></i>
</button> </button>
</div> </div>
${tags.length > 0 ? ${tagsList.length > 0 ?
`<div class="model-tags-tooltip"> `<div class="model-tags-tooltip">
<div class="tooltip-content"> <div class="tooltip-content">
${tags.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')} ${tagsList.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
</div> </div>
</div>` : </div>` :
''} ''}