ui: improve search result action buttons styling and behavior

- Remove transform transitions and animations from action buttons
- Restyle buttons with consistent sizing, colors, and hover states
- Convert anchor tags to buttons with proper type attributes
- Add click handlers for opening links in new tabs with security attributes
- Clear subfolder list when repopulating options
This commit is contained in:
Dariusz L
2026-05-26 18:15:11 +02:00
parent d974dce5d1
commit 20d4d3187b
2 changed files with 56 additions and 11 deletions
+36 -4
View File
@@ -229,7 +229,7 @@
border-radius: 0;
padding: var(--ml-spacing-10) var(--ml-spacing-12);
margin-bottom: var(--ml-spacing-4);
transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
transition: background 0.18s ease, box-shadow 0.18s ease;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018);
font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
}
@@ -237,7 +237,6 @@
background: var(--ml-card-bg-alt);
}
.ml-card:hover {
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.05),
0 10px 24px rgba(0,0,0,0.14);
@@ -853,20 +852,53 @@
}
.ml-search-result-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-height: 24px;
}
.ml-search-result-action-btn {
#model-linker-modal .ml-search-result-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
max-width: 24px;
flex: 0 0 24px;
margin: 0;
padding: 0;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 7px;
background: rgba(255,255,255,0.03);
color: var(--ml-text);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
box-sizing: border-box;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
line-height: 1;
font-family: inherit;
font-size: 0;
font-weight: 600;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ml-search-result-action-btn svg {
#model-linker-modal .ml-search-result-action-btn:hover:not(:disabled) {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.16);
transform: none;
}
#model-linker-modal .ml-search-result-action-btn svg {
width: 13px;
height: 13px;
display: block;
flex: 0 0 13px;
pointer-events: none;
}
.ml-search-progress-list {
display: grid;
+20 -7
View File
@@ -654,7 +654,7 @@ class LinkerManagerDialog extends ComfyDialog {
let actions = '';
if (downloadUrl) {
actions += `
<button class="search-download-btn ml-btn ml-btn-secondary ml-btn-sm ml-search-result-action-btn"
<button type="button" class="search-download-btn ml-search-result-action-btn"
title="Download"
aria-label="Download ${this.escapeHtml(downloadFilename)}"
data-url="${this.escapeHtml(downloadUrl)}"
@@ -664,12 +664,11 @@ class LinkerManagerDialog extends ComfyDialog {
}
if (openUrl) {
actions += `
<a href="${this.escapeHtml(openUrl)}"
target="_blank"
rel="noopener noreferrer"
class="ml-btn ml-btn-secondary ml-btn-sm ml-search-result-action-btn"
<button type="button"
class="search-open-page-btn ml-search-result-action-btn"
title="Open model page"
aria-label="Open model page">${getSvgIcon('externalLink')}</a>
aria-label="Open model page"
data-url="${this.escapeHtml(openUrl)}">${getSvgIcon('externalLink')}</button>
`;
}
if (!actions) {
@@ -2454,7 +2453,8 @@ class LinkerManagerDialog extends ComfyDialog {
renderOptions(categoryListEl, options, (value, label) => {
this.setDropdownValue(categoryEl, value, label);
subfolderEl.value = '';
populateSubfolderOptions('');
listEl.innerHTML = '';
listEl.style.display = 'none';
this.applySuggestedCivitaiSubfolder(missing, categoryEl, subfolderEl);
});
};
@@ -5234,6 +5234,19 @@ class LinkerManagerDialog extends ComfyDialog {
this.downloadFromSearch(missing, url, filename, category, btn);
});
});
const openPageBtns = container.querySelectorAll('.search-open-page-btn');
openPageBtns.forEach(btn => {
btn.addEventListener('click', () => {
const url = btn.dataset.url;
if (!url) return;
const opened = window.open(url, '_blank', 'noopener,noreferrer');
if (opened) {
opened.opener = null;
}
});
});
}
wireDownloadSearchPanel(container, missing) {