mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-25 15:15:44 -03:00
Add search and filter functionality to header; adjust styles for responsiveness
This commit is contained in:
Will Miao
@@ -33,73 +33,6 @@
|
||||
<i class="fas fa-th-large"></i> Bulk
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" placeholder="Search models..." />
|
||||
<!-- 清空按钮将由JavaScript动态添加到这里 -->
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<button class="search-options-toggle" id="searchOptionsToggle" title="Search Options">
|
||||
<i class="fas fa-sliders-h"></i>
|
||||
</button>
|
||||
<button class="search-filter-toggle" id="filterButton" onclick="filterManager.toggleFilterPanel()" title="Filter models">
|
||||
<i class="fas fa-filter"></i>
|
||||
<span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add search options panel -->
|
||||
<div id="searchOptionsPanel" class="search-options-panel hidden">
|
||||
<div class="options-header">
|
||||
<h3>Search Options</h3>
|
||||
<button class="close-options-btn" id="closeSearchOptions">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="options-section">
|
||||
<h4>Search In:</h4>
|
||||
<div class="search-option-tags">
|
||||
<div class="search-option-tag active" data-option="filename">Filename</div>
|
||||
<div class="search-option-tag active" data-option="tags">Tags</div>
|
||||
<div class="search-option-tag active" data-option="modelname">Model Name</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options-section">
|
||||
<div class="search-option-switch">
|
||||
<span>Include Subfolders</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="recursiveSearchToggle">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add filter panel -->
|
||||
<div id="filterPanel" class="filter-panel hidden">
|
||||
<div class="filter-header">
|
||||
<h3>Filter Models</h3>
|
||||
<button class="close-filter-btn" onclick="filterManager.closeFilterPanel()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<h4>Base Model</h4>
|
||||
<div class="filter-tags" id="baseModelTags">
|
||||
<!-- Tags will be dynamically inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<h4>Tags (Top 20)</h4>
|
||||
<div class="filter-tags" id="modelTagsFilter">
|
||||
<!-- Top tags will be dynamically inserted here -->
|
||||
<div class="tags-loading">Loading tags...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button class="clear-filters-btn" onclick="filterManager.clearFilters()">
|
||||
Clear All Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -17,6 +17,22 @@
|
||||
<i class="fas fa-check-circle"></i> Checkpoints
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Add search container to header -->
|
||||
<div class="header-search">
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" placeholder="Search models..." />
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<button class="search-options-toggle" id="searchOptionsToggle" title="Search Options">
|
||||
<i class="fas fa-sliders-h"></i>
|
||||
</button>
|
||||
<button class="search-filter-toggle" id="filterButton" onclick="filterManager.toggleFilterPanel()" title="Filter models">
|
||||
<i class="fas fa-filter"></i>
|
||||
<span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<!-- Integrated corner controls -->
|
||||
<div class="header-controls">
|
||||
@@ -37,4 +53,59 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<!-- Add search options panel -->
|
||||
<div id="searchOptionsPanel" class="search-options-panel hidden">
|
||||
<div class="options-header">
|
||||
<h3>Search Options</h3>
|
||||
<button class="close-options-btn" id="closeSearchOptions">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="options-section">
|
||||
<h4>Search In:</h4>
|
||||
<div class="search-option-tags">
|
||||
<div class="search-option-tag active" data-option="filename">Filename</div>
|
||||
<div class="search-option-tag active" data-option="tags">Tags</div>
|
||||
<div class="search-option-tag active" data-option="modelname">Model Name</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options-section">
|
||||
<div class="search-option-switch">
|
||||
<span>Include Subfolders</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="recursiveSearchToggle">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add filter panel -->
|
||||
<div id="filterPanel" class="filter-panel hidden">
|
||||
<div class="filter-header">
|
||||
<h3>Filter Models</h3>
|
||||
<button class="close-filter-btn" onclick="filterManager.closeFilterPanel()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<h4>Base Model</h4>
|
||||
<div class="filter-tags" id="baseModelTags">
|
||||
<!-- Tags will be dynamically inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<h4>Tags (Top 20)</h4>
|
||||
<div class="filter-tags" id="modelTagsFilter">
|
||||
<!-- Top tags will be dynamically inserted here -->
|
||||
<div class="tags-loading">Loading tags...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button class="clear-filters-btn" onclick="filterManager.clearFilters()">
|
||||
Clear All Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user