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

feat: implement disabled state for header search on statistics page with appropriate styling and functionality adjustments

Browse Source
This commit is contained in:
Will Miao
2025-06-27 09:45:48 +08:00
parent 64dd2ed141
commit 5b4ec1b2a2
2 changed files with 61 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
static/css/components/header.css
View File

@@ -79,6 +79,50 @@
flex: 1; flex: 1;
max-width: 400px; max-width: 400px;
margin: 0 1rem; margin: 0 1rem;
transition: opacity 0.2s ease;
}
/* Disabled state for header search */
.header-search.disabled {
opacity: 0.5;
pointer-events: none;
}
.header-search.disabled input {
background-color: var(--input-disabled-bg, #f5f5f5);
color: var(--text-muted);
cursor: not-allowed;
}
.header-search.disabled button {
background-color: var(--button-disabled-bg, #e0e0e0);
color: var(--text-muted);
cursor: not-allowed;
}
.header-search.disabled .search-icon {
color: var(--text-muted);
}
/* Dark theme specific styles for disabled header search */
[data-theme="dark"] .header-search.disabled input {
background-color: #3a3a3a;
color: #888888;
border-color: #555555;
}
[data-theme="dark"] .header-search.disabled button {
background-color: #3a3a3a;
color: #888888;
border-color: #555555;
}
[data-theme="dark"] .header-search.disabled .search-icon {
color: #888888;
}
[data-theme="dark"] .header-search.disabled .fas {
color: #888888;
} }
/* Header controls (formerly corner controls) */ /* Header controls (formerly corner controls) */

19
static/js/components/Header.js
View File

@@ -130,9 +130,24 @@ export class HeaderManager {
const headerSearch = document.getElementById('headerSearch'); const headerSearch = document.getElementById('headerSearch');
if (this.currentPage === 'statistics' && headerSearch) { if (this.currentPage === 'statistics' && headerSearch) {
headerSearch.style.display = 'none'; headerSearch.classList.add('disabled');
// Disable search functionality
const searchInput = headerSearch.querySelector('#searchInput');
const searchButtons = headerSearch.querySelectorAll('button');
if (searchInput) {
searchInput.disabled = true;
searchInput.placeholder = 'Search not available on statistics page';
}
searchButtons.forEach(btn => btn.disabled = true);
} else if (headerSearch) { } else if (headerSearch) {
headerSearch.style.display = 'flex'; headerSearch.classList.remove('disabled');
// Re-enable search functionality
const searchInput = headerSearch.querySelector('#searchInput');
const searchButtons = headerSearch.querySelectorAll('button');
if (searchInput) {
searchInput.disabled = false;
}
searchButtons.forEach(btn => btn.disabled = false);
} }
} }
} }