UI: Add local alternatives toggle and improve link button styling
- Add CSS for .ml-local-alternatives-toggle component with hover/focus states - Update missing browser button styles to use compact link button - Adjust disabled footer button opacity for better visibility - Replace alternatives div with toggle button in linker.js - Enhance MLToggleHidden to support aria-expanded and dynamic label/state updates
This commit is contained in:
Dariusz L
@@ -894,6 +894,57 @@
|
||||
.ml-missing-browser .ml-match-filename {
|
||||
color: var(--ml-text-soft);
|
||||
}
|
||||
.ml-local-alternatives-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
margin: 5px 0;
|
||||
padding: 0 4px;
|
||||
gap: 8px;
|
||||
color: var(--ml-text-muted);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.045);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.035);
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.ml-local-alternatives-toggle:hover {
|
||||
color: var(--ml-text-soft);
|
||||
background: rgba(255,255,255,0.018);
|
||||
border-color: rgba(255,255,255,0.06);
|
||||
}
|
||||
.ml-local-alternatives-toggle:focus-visible {
|
||||
background: rgba(255,255,255,0.022);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
|
||||
}
|
||||
.ml-local-alternatives-label {
|
||||
color: var(--ml-text-muted);
|
||||
font-weight: 650;
|
||||
}
|
||||
.ml-local-alternatives-state {
|
||||
margin-left: auto;
|
||||
color: var(--ml-text-dim);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
.ml-local-alternatives-chevron {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-right: 1px solid currentColor;
|
||||
border-bottom: 1px solid currentColor;
|
||||
transform: rotate(45deg) translateY(-1px);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.ml-local-alternatives-toggle[aria-expanded="true"] .ml-local-alternatives-chevron {
|
||||
transform: rotate(225deg) translateY(-1px);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.ml-btn {
|
||||
@@ -1008,6 +1059,43 @@
|
||||
padding-inline: 5px;
|
||||
font-size: 8.75px;
|
||||
}
|
||||
.ml-missing-browser .ml-local-link-btn,
|
||||
.ml-missing-browser .ml-btn-link-compact {
|
||||
position: relative;
|
||||
flex: 0 0 46px;
|
||||
width: 46px;
|
||||
min-width: 46px;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0 9px;
|
||||
overflow: hidden;
|
||||
gap: 0;
|
||||
color: var(--ml-text-muted);
|
||||
font-size: 0;
|
||||
font-weight: 650;
|
||||
background: rgba(255,255,255,0.026);
|
||||
border-color: rgba(255,255,255,0.09);
|
||||
}
|
||||
.ml-missing-browser .ml-local-link-btn::before,
|
||||
.ml-missing-browser .ml-btn-link-compact::before {
|
||||
content: "Link";
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.ml-missing-browser .ml-local-link-btn > *,
|
||||
.ml-missing-browser .ml-btn-link-compact > * {
|
||||
display: none;
|
||||
}
|
||||
.ml-missing-browser .ml-local-link-btn:hover:not(:disabled),
|
||||
.ml-missing-browser .ml-btn-link-compact:hover:not(:disabled) {
|
||||
color: var(--ml-text);
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: rgba(255,255,255,0.16);
|
||||
}
|
||||
.ml-btn-icon-only {
|
||||
width: var(--ml-spacing-24);
|
||||
min-width: var(--ml-spacing-24);
|
||||
@@ -1674,6 +1762,16 @@
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
.ml-btn.ml-footer-btn:disabled,
|
||||
.ml-btn.ml-btn-primary.ml-footer-btn:disabled,
|
||||
.ml-btn.ml-btn-download.ml-footer-btn:disabled {
|
||||
opacity: 1;
|
||||
color: rgba(255,255,255,0.34);
|
||||
background: rgba(255,255,255,0.016);
|
||||
border-color: rgba(255,255,255,0.055);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.ml-tabs {
|
||||
|
||||
+16
-3
@@ -815,7 +815,7 @@ class LinkerManagerDialog extends ComfyDialog {
|
||||
html += `<div class="ml-match-row ${isBestMatch ? 'ml-best-match' : ''}" data-model="${modelData}" oncontextmenu="window.MLOpenContextMenu(event, this)">`;
|
||||
html += this.getConfidenceBadge(match.confidence);
|
||||
html += `<span class="ml-match-filename" title="${formattedPath.full}">${formattedPath.display}</span>`;
|
||||
html += `<button id="${buttonId}" class="ml-btn ml-btn-secondary ml-btn-sm ml-btn-utility ml-btn-link-compact">`;
|
||||
html += `<button id="${buttonId}" class="ml-btn ml-btn-secondary ml-btn-sm ml-btn-icon-only ml-local-link-btn" title="Link this local match" aria-label="Link this local match">`;
|
||||
html += `<span class="ml-btn-icon">🔗</span> Link`;
|
||||
html += `</button>`;
|
||||
html += `</div>`;
|
||||
@@ -823,7 +823,12 @@ class LinkerManagerDialog extends ComfyDialog {
|
||||
|
||||
if (perfectMatches.length > 0 && otherMatches.length > 0) {
|
||||
const matchId = `more-matches-${missing.node_id}-${missing.widget_index}`;
|
||||
html += `<div class="ml-no-matches ml-inline-note-action ml-inline-note-link" onclick="window.MLToggleHidden('${matchId}', this, '${otherMatches.length} other matches below 100%', 'Hide alternatives')">${otherMatches.length} other match${otherMatches.length > 1 ? 'es' : ''} below 100%</div>`;
|
||||
const altLabel = `Alternatives (${otherMatches.length})`;
|
||||
html += `<button type="button" class="ml-local-alternatives-toggle" aria-expanded="false" onclick="window.MLToggleHidden('${matchId}', this, '${altLabel}', '${altLabel}')">`;
|
||||
html += `<span class="ml-local-alternatives-label">${altLabel}</span>`;
|
||||
html += `<span class="ml-local-alternatives-state">Show</span>`;
|
||||
html += `<span class="ml-local-alternatives-chevron" aria-hidden="true"></span>`;
|
||||
html += `</button>`;
|
||||
html += `<div id="${matchId}" class="ml-stack-sm ml-hidden">`;
|
||||
for (let mIdx = 0; mIdx < otherMatches.length; mIdx++) {
|
||||
const match = otherMatches[mIdx];
|
||||
@@ -6398,7 +6403,15 @@ window.MLToggleHidden = function(id, trigger, collapsedText, expandedText) {
|
||||
|
||||
const isHidden = element.classList.toggle('ml-hidden');
|
||||
if (trigger) {
|
||||
trigger.textContent = isHidden ? collapsedText : expandedText;
|
||||
trigger.setAttribute('aria-expanded', String(!isHidden));
|
||||
const label = trigger.querySelector?.('.ml-local-alternatives-label');
|
||||
const state = trigger.querySelector?.('.ml-local-alternatives-state');
|
||||
if (label || state) {
|
||||
if (label) label.textContent = isHidden ? collapsedText : expandedText;
|
||||
if (state) state.textContent = isHidden ? 'Show' : 'Hide';
|
||||
} else {
|
||||
trigger.textContent = isHidden ? collapsedText : expandedText;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user