nodes/Azornes-Comfyui-Model-Resolver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: support multi-line search button labels

Browse Source
This commit is contained in:
Dariusz L
2026-06-21 03:16:20 +02:00
parent bb927b3cc4
commit 24fed2302f
4 changed files with 75 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
metadata/huggingface-author-index.json
+1 -1
View File
File diff suppressed because one or more lines are too long
web/css/resolver-main.css
+38 -13
View File
@@ -1858,21 +1858,43 @@
gap: 10px;
margin-bottom: 0;
}
.mr-download-section .mr-search-source-bar > .mr-btn {
.mr-search-button-picker {
width: 82px;
min-width: 82px;
}
.mr-download-section .mr-search-button-picker > .mr-btn {
height: var(--mr-download-control-height);
min-height: var(--mr-download-control-height);
padding: 0 12px;
width: 100%;
padding: 0 10px;
border-radius: 9px;
font-size: 12px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: normal;
}
.mr-missing-browser .mr-download-section .mr-search-source-bar > .mr-btn {
.mr-search-btn-text {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
line-height: 1.05;
text-align: center;
}
.mr-search-btn-line {
display: block;
}
.mr-missing-browser .mr-download-section .mr-search-button-picker > .mr-btn {
background: var(--mr-missing-control-bg, rgba(255,255,255,0.035));
border-color: var(--mr-missing-control-border, rgba(255,255,255,0.105));
border-radius: var(--mr-missing-control-radius, 7px);
box-shadow: var(--mr-missing-control-shadow, none);
}
.mr-missing-browser .mr-download-section .mr-search-source-bar > .mr-btn:hover:not(:disabled) {
.mr-missing-browser .mr-download-section .mr-search-button-picker > .mr-btn:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255,255,255,0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255,255,255,0.17));
transform: none;
@@ -5545,7 +5567,7 @@
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar > .mr-btn {
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker > .mr-btn {
background: var(--mr-missing-control-bg, rgba(255,255,255,0.035));
border: 1px solid var(--mr-missing-control-border, rgba(255,255,255,0.105));
border-radius: var(--mr-missing-control-radius, 7px);
@@ -5556,7 +5578,7 @@
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar > .mr-btn:hover:not(:disabled) {
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker > .mr-btn:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255,255,255,0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255,255,255,0.17));
color: var(--mr-text);
@@ -5565,7 +5587,7 @@
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn:focus-visible,
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-btn:focus-visible,
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn:focus-visible,
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar > .mr-btn:focus-visible {
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker > .mr-btn:focus-visible {
outline: none;
border-color: var(--mr-missing-control-focus-border, rgba(114,211,138,0.30));
box-shadow: 0 0 0 2px var(--mr-missing-control-focus-ring, rgba(114,211,138,0.08)) !important;
@@ -5655,19 +5677,22 @@
border-color: transparent;
border-radius: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar > .mr-btn {
min-height: var(--mr-missing-search-button-height, 34px);
height: var(--mr-missing-search-button-height, 34px);
padding: 0 12px;
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker > .mr-btn {
--mr-missing-search-button-height: var(--mr-missing-field-height, 38px);
width: 82px;
min-width: 82px;
min-height: var(--mr-missing-search-button-height);
height: var(--mr-missing-search-button-height);
padding: 0 10px;
font-size: 12px;
font-weight: 700;
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar > .mr-btn .mr-btn-icon {
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker > .mr-btn .mr-btn-icon {
width: var(--mr-missing-icon-size, 13px);
height: var(--mr-missing-icon-size, 13px);
font-size: var(--mr-missing-icon-size, 13px);
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar > .mr-btn .mr-btn-icon svg {
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker > .mr-btn .mr-btn-icon svg {
width: var(--mr-missing-icon-size, 13px);
height: var(--mr-missing-icon-size, 13px);
display: block;
web/resolver/actions/resolve_download_methods.js
+2 -2
View File
@@ -1516,7 +1516,7 @@ export const resolveDownloadMethods = {
if (searchBtn) {
searchBtn.disabled = true;
searchBtn.innerHTML = `${this.getSearchIconHtml()} Searching ${selectedSourceLabel}...`;
searchBtn.innerHTML = this.renderSearchButtonContent(`Searching ${selectedSourceLabel}...`);
}
if (resultsDiv) {
resultsDiv.classList.remove('mr-is-hidden');
@@ -1737,7 +1737,7 @@ export const resolveDownloadMethods = {
}
if (searchBtn) {
searchBtn.disabled = false;
searchBtn.innerHTML = `${this.getSearchIconHtml()} Search Again`;
searchBtn.innerHTML = this.renderSearchButtonContent('Search Again');
}
this.persistSearchStateForWorkflow(workflowKey, missing, state);
this.refreshSearchUiForMissing(missing, state, { workflowKey });
web/resolver/search/search_panel.js
+34 -5
View File
@@ -435,6 +435,30 @@ export const searchPanelMethods = {
return selected;
},
getSearchButtonLabelLines(text = '') {
const label = String(text || '').replace(/\s+/g, ' ').trim() || 'Search Online';
const normalized = label.toLowerCase();
if (normalized === 'search' || normalized === 'search online') {
return ['Online'];
}
if (normalized === 'search again') {
return ['Again'];
}
const searchingMatch = label.match(/^Searching(?:\s+(.+?))?\.{0,3}$/i);
if (searchingMatch) {
return ['Searching'];
}
return label.split(' ');
},
renderSearchButtonContent(text = '') {
const lines = this.getSearchButtonLabelLines(text);
const labelHtml = lines
.map(line => `<span class="mr-search-btn-line">${this.escapeHtml(line)}</span>`)
.join('');
return `${this.getSearchIconHtml()} <span class="mr-search-btn-text">${labelHtml}</span>`;
},
getBackgroundSearchJobKey(workflowKey, missingSearchKey) {
return `${workflowKey || 'workflow'}\n${missingSearchKey || 'missing'}`;
},
@@ -527,8 +551,8 @@ export const searchPanelMethods = {
const isRunning = Boolean(currentState.activeSearchRunId);
searchBtn.disabled = isRunning;
searchBtn.innerHTML = isRunning
? `${this.getSearchIconHtml()} Searching...`
: `${this.getSearchIconHtml()} Search Again`;
? this.renderSearchButtonContent('Searching...')
: this.renderSearchButtonContent('Search Again');
}
},
@@ -1158,7 +1182,9 @@ export const searchPanelMethods = {
const searchBtn = container?.querySelector?.(`#search-${missing.node_id}-${missing.widget_index}`);
if (searchBtn) {
searchBtn.disabled = false;
searchBtn.innerHTML = `${this.getSearchIconHtml()} ${this.hasSearchResultsForMissing(missing) ? 'Search Again' : 'Search'}`;
searchBtn.innerHTML = this.renderSearchButtonContent(
this.hasSearchResultsForMissing(missing) ? 'Search Again' : 'Search Online'
);
}
}
state.selectedBaseModel = nextBaseModel;
@@ -1608,12 +1634,15 @@ export const searchPanelMethods = {
const selectedBaseModel = state.selectedBaseModel || this.getDefaultSearchBaseModel();
const baseModelTooltip = this.getSearchBaseModelTooltip(missing);
const buttonText = options.buttonText
|| (this.hasSearchResultsForMissing(missing) ? 'Search Again' : 'Search');
|| (this.hasSearchResultsForMissing(missing) ? 'Search Again' : 'Search Online');
let html = `<div id="${searchSourcesId}" class="mr-search-source-bar">`;
html += `<div class="mr-search-source-picker mr-search-button-picker">`;
html += `<label class="mr-search-source-picker-label" for="search-${missing.node_id}-${missing.widget_index}">Search</label>`;
html += `<button id="search-${missing.node_id}-${missing.widget_index}" class="mr-btn mr-btn-link">`;
html += `${this.getSearchIconHtml()} ${buttonText}`;
html += this.renderSearchButtonContent(buttonText);
html += `</button>`;
html += `</div>`;
html += `<div class="mr-search-source-picker">`;
html += `<label class="mr-search-source-picker-label" for="${searchSourceSelectId}">Source</label>`;
html += `<div class="mr-download-target-wrap">`;