mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-25 15:15:44 -03:00
feat: Add keyboard shortcuts for bulk operations and enhance shortcut key styling
This commit is contained in:
@@ -70,6 +70,11 @@ html, body {
|
|||||||
--border-radius-xs: 4px;
|
--border-radius-xs: 4px;
|
||||||
|
|
||||||
--scrollbar-width: 8px; /* 添加滚动条宽度变量 */
|
--scrollbar-width: 8px; /* 添加滚动条宽度变量 */
|
||||||
|
|
||||||
|
/* Shortcut styles */
|
||||||
|
--shortcut-bg: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.12);
|
||||||
|
--shortcut-border: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.25);
|
||||||
|
--shortcut-text: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] {
|
html[data-theme="dark"] {
|
||||||
|
|||||||
@@ -124,6 +124,43 @@
|
|||||||
border-color: var(--lora-accent);
|
border-color: var(--lora-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Keyboard shortcut indicator styling */
|
||||||
|
.shortcut-key {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 6px;
|
||||||
|
min-width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
padding: 0 3px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1;
|
||||||
|
border-radius: var(--border-radius-xs);
|
||||||
|
background-color: var(--shortcut-bg);
|
||||||
|
border: 1px solid var(--shortcut-border);
|
||||||
|
color: var(--shortcut-text);
|
||||||
|
vertical-align: middle;
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group button:hover .shortcut-key {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .shortcut-key {
|
||||||
|
--shortcut-bg: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.15);
|
||||||
|
--shortcut-border: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure correct vertical alignment for text+shortcut */
|
||||||
|
.control-group button span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* Select dropdown styling */
|
/* Select dropdown styling */
|
||||||
.control-group select {
|
.control-group select {
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
|
|||||||
@@ -34,8 +34,6 @@ export class BulkManager {
|
|||||||
|
|
||||||
// Add global keyboard event listener for Ctrl+A
|
// Add global keyboard event listener for Ctrl+A
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
// Check if it's Ctrl+A (or Cmd+A on Mac)
|
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
|
||||||
// First check if any modal is currently open - if so, don't handle Ctrl+A
|
// First check if any modal is currently open - if so, don't handle Ctrl+A
|
||||||
if (modalManager.isAnyModalOpen()) {
|
if (modalManager.isAnyModalOpen()) {
|
||||||
return; // Exit early - let the browser handle Ctrl+A within the modal
|
return; // Exit early - let the browser handle Ctrl+A within the modal
|
||||||
@@ -47,6 +45,9 @@ export class BulkManager {
|
|||||||
return; // Exit early - let the browser handle Ctrl+A within the search input
|
return; // Exit early - let the browser handle Ctrl+A within the search input
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if it's Ctrl+A (or Cmd+A on Mac)
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
|
||||||
|
|
||||||
// Prevent default browser "Select All" behavior
|
// Prevent default browser "Select All" behavior
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
@@ -58,6 +59,12 @@ export class BulkManager {
|
|||||||
} else {
|
} else {
|
||||||
this.selectAllVisibleLoras();
|
this.selectAllVisibleLoras();
|
||||||
}
|
}
|
||||||
|
} else if (e.key === 'Escape' && state.bulkMode) {
|
||||||
|
// If in bulk mode, exit it on Escape
|
||||||
|
this.toggleBulkMode();
|
||||||
|
} else if (e.key.toLowerCase() === 'b') {
|
||||||
|
// If 'b' is pressed, toggle bulk mode
|
||||||
|
this.toggleBulkMode();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,8 +41,8 @@
|
|||||||
<!-- Conditional buttons based on page -->
|
<!-- Conditional buttons based on page -->
|
||||||
{% if request.path == '/loras' %}
|
{% if request.path == '/loras' %}
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<button id="bulkOperationsBtn" data-action="bulk" title="Bulk Operations">
|
<button id="bulkOperationsBtn" data-action="bulk" title="Bulk Operations (Press B)">
|
||||||
<i class="fas fa-th-large"></i> Bulk
|
<i class="fas fa-th-large"></i> <span>Bulk <div class="shortcut-key">B</div></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
Reference in New Issue
Block a user