alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-24 22:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add keyboard navigation hints and a breadcrumb container to the recipes page, and refactor control layout.

Browse Source
This commit is contained in:
Will Miao
2025-12-24 20:46:14 +08:00
parent 7b139b9b1d
commit e5869648fb
1 changed files with 86 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
templates/recipes.html
View File

@@ -48,57 +48,94 @@
{% block content %} {% block content %}
<!-- Recipe controls --> <!-- Recipe controls -->
<div class="controls"> <div class="controls">
<div class="action-buttons"> <div class="actions">
<div class="control-group"> <div class="action-buttons">
<select id="sortSelect" title="{{ t('recipes.controls.sort.title') }}"> <div class="control-group">
<optgroup label="{{ t('recipes.controls.sort.name') }}"> <select id="sortSelect" title="{{ t('recipes.controls.sort.title') }}">
<option value="name:asc">{{ t('recipes.controls.sort.nameAsc') }}</option> <optgroup label="{{ t('recipes.controls.sort.name') }}">
<option value="name:desc">{{ t('recipes.controls.sort.nameDesc') }}</option> <option value="name:asc">{{ t('recipes.controls.sort.nameAsc') }}</option>
</optgroup> <option value="name:desc">{{ t('recipes.controls.sort.nameDesc') }}</option>
<optgroup label="{{ t('recipes.controls.sort.date') }}"> </optgroup>
<option value="date:desc">{{ t('recipes.controls.sort.dateDesc') }}</option> <optgroup label="{{ t('recipes.controls.sort.date') }}">
<option value="date:asc">{{ t('recipes.controls.sort.dateAsc') }}</option> <option value="date:desc">{{ t('recipes.controls.sort.dateDesc') }}</option>
</optgroup> <option value="date:asc">{{ t('recipes.controls.sort.dateAsc') }}</option>
<optgroup label="{{ t('recipes.controls.sort.lorasCount') }}"> </optgroup>
<option value="loras_count:desc">{{ t('recipes.controls.sort.lorasCountDesc') }}</option> <optgroup label="{{ t('recipes.controls.sort.lorasCount') }}">
<option value="loras_count:asc">{{ t('recipes.controls.sort.lorasCountAsc') }}</option> <option value="loras_count:desc">{{ t('recipes.controls.sort.lorasCountDesc') }}</option>
</optgroup> <option value="loras_count:asc">{{ t('recipes.controls.sort.lorasCountAsc') }}</option>
</select> </optgroup>
</div> </select>
<div title="{{ t('recipes.controls.refresh.title') }}" class="control-group"> </div>
<button onclick="recipeManager.refreshRecipes()"><i class="fas fa-sync"></i> {{ t('common.actions.refresh') <div title="{{ t('recipes.controls.refresh.title') }}" class="control-group">
}}</button> <button onclick="recipeManager.refreshRecipes()"><i class="fas fa-sync"></i> {{
</div> t('common.actions.refresh')
<div title="{{ t('recipes.controls.import.title') }}" class="control-group"> }}</button>
<button onclick="importManager.showImportModal()"><i class="fas fa-file-import"></i> {{ </div>
t('recipes.controls.import.action') }}</button> <div title="{{ t('recipes.controls.import.title') }}" class="control-group">
</div> <button onclick="importManager.showImportModal()"><i class="fas fa-file-import"></i> {{
<div class="control-group" title="{{ t('loras.controls.bulk.title') }}"> t('recipes.controls.import.action') }}</button>
<button id="bulkOperationsBtn" data-action="bulk" title="{{ t('loras.controls.bulk.title') }}"> </div>
<i class="fas fa-th-large"></i> <span><span>{{ t('loras.controls.bulk.action') }}</span> <div class="control-group" title="{{ t('loras.controls.bulk.title') }}">
<div class="shortcut-key">B</div> <button id="bulkOperationsBtn" data-action="bulk" title="{{ t('loras.controls.bulk.title') }}">
</span> <i class="fas fa-th-large"></i> <span><span>{{ t('loras.controls.bulk.action') }}</span>
</button> <div class="shortcut-key">B</div>
</div> </span>
<!-- Add duplicate detection button --> </button>
<div title="{{ t('loras.controls.duplicates.title') }}" class="control-group"> </div>
<button onclick="recipeManager.findDuplicateRecipes()"><i class="fas fa-clone"></i> {{ <!-- Add duplicate detection button -->
t('loras.controls.duplicates.action') }}</button> <div title="{{ t('loras.controls.duplicates.title') }}" class="control-group">
</div> <button onclick="recipeManager.findDuplicateRecipes()"><i class="fas fa-clone"></i> {{
<div class="control-group"> t('loras.controls.duplicates.action') }}</button>
<button id="favoriteFilterBtn" data-action="toggle-favorites" class="favorite-filter" </div>
title="{{ t('recipes.controls.favorites.title') }}"> <div class="control-group">
<i class="fas fa-star"></i> <span>{{ t('recipes.controls.favorites.action') }}</span> <button id="favoriteFilterBtn" data-action="toggle-favorites" class="favorite-filter"
</button> title="{{ t('recipes.controls.favorites.title') }}">
</div> <i class="fas fa-star"></i> <span>{{ t('recipes.controls.favorites.action') }}</span>
<!-- Custom filter indicator button (hidden by default) --> </button>
<div id="customFilterIndicator" class="control-group hidden"> </div>
<div class="filter-active"> <!-- Custom filter indicator button (hidden by default) -->
<i class="fas fa-filter"></i> <span id="customFilterText">{{ t('recipes.controls.filteredByLora') <div id="customFilterIndicator" class="control-group hidden">
}}</span> <div class="filter-active">
<i class="fas fa-times-circle clear-filter"></i> <i class="fas fa-filter"></i> <span id="customFilterText">{{ t('recipes.controls.filteredByLora')
}}</span>
<i class="fas fa-times-circle clear-filter"></i>
</div>
</div> </div>
</div> </div>
<div class="controls-right">
<div class="keyboard-nav-hint tooltip">
<i class="fas fa-keyboard"></i>
<span class="tooltiptext">
<span>{{ t('keyboard.navigation') }}</span>
<table class="keyboard-shortcuts">
<tr>
<td><span class="key">Page Up</span></td>
<td>{{ t('keyboard.shortcuts.pageUp') }}</td>
</tr>
<tr>
<td><span class="key">Page Down</span></td>
<td>{{ t('keyboard.shortcuts.pageDown') }}</td>
</tr>
<tr>
<td><span class="key">Home</span></td>
<td>{{ t('keyboard.shortcuts.home') }}</td>
</tr>
<tr>
<td><span class="key">End</span></td>
<td>{{ t('keyboard.shortcuts.end') }}</td>
</tr>
</table>
</span>
</div>
</div>
</div>
<!-- Breadcrumb Navigation -->
<div id="breadcrumbContainer" class="sidebar-breadcrumb-container">
<nav class="sidebar-breadcrumb-nav" id="sidebarBreadcrumbNav">
<!-- Breadcrumbs will be populated by JavaScript -->
</nav>
</div> </div>
</div> </div>