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:
+36
-4
@@ -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
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user