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

feat: Update sidebar breadcrumb styles and enhance dropdown functionality

Browse Source
This commit is contained in:
Will Miao
2025-08-26 17:13:04 +08:00
parent d7949fbc30
commit 522a3ea88b
3 changed files with 69 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/base.css
View File

@@ -46,7 +46,7 @@ html, body {
/* Composed Colors */ /* Composed Colors */
--lora-accent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h)); --lora-accent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h));
--lora-surface: oklch(100% 0 0 / 0.98); --lora-surface: oklch(97% 0 0 / 0.95);
--lora-border: oklch(90% 0.02 256 / 0.15); --lora-border: oklch(90% 0.02 256 / 0.15);
--lora-text: oklch(95% 0.02 256); --lora-text: oklch(95% 0.02 256);
--lora-error: oklch(75% 0.32 29); --lora-error: oklch(75% 0.32 29);

36
static/css/components/sidebar.css
View File

@@ -238,19 +238,32 @@
align-items: center; align-items: center;
} }
.breadcrumb-dropdown-toggle { .breadcrumb-dropdown-indicator {
margin-left: 4px; margin-left: 6px;
color: inherit; color: inherit;
opacity: 0.7; opacity: 0.6;
transition: transform 0.2s ease; transition: all 0.2s ease;
pointer-events: none;
font-size: 0.9em;
} }
.breadcrumb-dropdown:hover .breadcrumb-dropdown-toggle { .sidebar-breadcrumb-item:hover .breadcrumb-dropdown-indicator {
opacity: 1; opacity: 0.9;
} }
.breadcrumb-dropdown.open .breadcrumb-dropdown-toggle { .sidebar-breadcrumb-item.placeholder {
color: var(--text-muted);
font-style: italic;
}
.sidebar-breadcrumb-item.placeholder:hover {
background: var(--lora-surface);
color: var(--text-color);
}
.breadcrumb-dropdown.open .breadcrumb-dropdown-indicator {
transform: rotate(180deg); transform: rotate(180deg);
opacity: 1;
} }
.breadcrumb-dropdown-menu { .breadcrumb-dropdown-menu {
@@ -265,7 +278,7 @@
box-shadow: 0 3px 8px rgba(0,0,0,0.15); box-shadow: 0 3px 8px rgba(0,0,0,0.15);
z-index: calc(var(--z-overlay) + 20); z-index: calc(var(--z-overlay) + 20);
overflow-y: auto; overflow-y: auto;
max-height: 260px; max-height: 450px;
display: none; display: none;
margin-top: 4px; margin-top: 4px;
} }
@@ -290,12 +303,7 @@
.breadcrumb-dropdown-item.active { .breadcrumb-dropdown-item.active {
background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1); background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
color: var(--lora-accent); color: var(--lora-accent);
} font-weight: 500;
.breadcrumb-dropdown-placeholder {
color: var(--text-muted);
font-style: italic;
padding: 6px 12px;
} }
/* Responsive Design */ /* Responsive Design */

98
static/js/components/SidebarManager.js
View File

@@ -209,34 +209,36 @@ export class SidebarManager {
handleBreadcrumbClick(event) { handleBreadcrumbClick(event) {
const breadcrumbItem = event.target.closest('.sidebar-breadcrumb-item'); const breadcrumbItem = event.target.closest('.sidebar-breadcrumb-item');
const dropdownToggle = event.target.closest('.breadcrumb-dropdown-toggle');
const dropdownItem = event.target.closest('.breadcrumb-dropdown-item'); const dropdownItem = event.target.closest('.breadcrumb-dropdown-item');
if (dropdownToggle) { if (dropdownItem) {
// Handle dropdown toggle
const dropdown = dropdownToggle.closest('.breadcrumb-dropdown');
// Close any open dropdown first
if (this.openDropdown && this.openDropdown !== dropdown) {
this.openDropdown.classList.remove('open');
}
// Toggle current dropdown
dropdown.classList.toggle('open');
// Update open dropdown reference
this.openDropdown = dropdown.classList.contains('open') ? dropdown : null;
event.stopPropagation();
} else if (dropdownItem) {
// Handle dropdown item selection // Handle dropdown item selection
const path = dropdownItem.dataset.path || ''; const path = dropdownItem.dataset.path || '';
this.selectFolder(path); this.selectFolder(path);
this.closeDropdown(); this.closeDropdown();
} else if (breadcrumbItem) { } else if (breadcrumbItem) {
// Handle direct breadcrumb click // Handle breadcrumb item click
const path = breadcrumbItem.dataset.path || ''; const path = breadcrumbItem.dataset.path || '';
this.selectFolder(path); const isPlaceholder = breadcrumbItem.classList.contains('placeholder');
const isActive = breadcrumbItem.classList.contains('active');
const dropdown = breadcrumbItem.closest('.breadcrumb-dropdown');
if (isPlaceholder || (isActive && path === this.selectedPath)) {
// Open dropdown for placeholders or active items
// Close any open dropdown first
if (this.openDropdown && this.openDropdown !== dropdown) {
this.openDropdown.classList.remove('open');
}
// Toggle current dropdown
dropdown.classList.toggle('open');
// Update open dropdown reference
this.openDropdown = dropdown.classList.contains('open') ? dropdown : null;
} else {
// Navigate to the selected path
this.selectFolder(path);
}
} }
} }
@@ -345,25 +347,13 @@ export class SidebarManager {
const parts = this.selectedPath ? this.selectedPath.split('/') : []; const parts = this.selectedPath ? this.selectedPath.split('/') : [];
let currentPath = ''; let currentPath = '';
// Start with root breadcrumb with dropdown // Start with root breadcrumb
const rootSiblings = Object.keys(this.treeData); const rootSiblings = Object.keys(this.treeData);
const breadcrumbs = [` const breadcrumbs = [`
<div class="breadcrumb-dropdown"> <div class="breadcrumb-dropdown">
<span class="sidebar-breadcrumb-item ${!this.selectedPath ? 'active' : ''}" data-path=""> <span class="sidebar-breadcrumb-item ${!this.selectedPath ? 'active' : ''}" data-path="">
<i class="fas fa-home"></i> ${this.apiClient.apiConfig.config.displayName} root <i class="fas fa-home"></i> ${this.apiClient.apiConfig.config.displayName} root
</span> </span>
<span class="breadcrumb-dropdown-toggle">
<i class="fas fa-caret-down"></i>
</span>
<div class="breadcrumb-dropdown-menu">
${rootSiblings.length > 0
? rootSiblings.map(folder => `
<div class="breadcrumb-dropdown-item" data-path="${folder}">
${folder}
</div>`).join('')
: '<div class="breadcrumb-dropdown-placeholder">No folders available</div>'
}
</div>
</div> </div>
`]; `];
@@ -374,11 +364,11 @@ export class SidebarManager {
breadcrumbs.push(`<span class="sidebar-breadcrumb-separator">/</span>`); breadcrumbs.push(`<span class="sidebar-breadcrumb-separator">/</span>`);
breadcrumbs.push(` breadcrumbs.push(`
<div class="breadcrumb-dropdown"> <div class="breadcrumb-dropdown">
<span class="sidebar-breadcrumb-item"> <span class="sidebar-breadcrumb-item placeholder">
-- --
</span> <span class="breadcrumb-dropdown-indicator">
<span class="breadcrumb-dropdown-toggle"> <i class="fas fa-caret-down"></i>
<i class="fas fa-caret-down"></i> </span>
</span> </span>
<div class="breadcrumb-dropdown-menu"> <div class="breadcrumb-dropdown-menu">
${nextLevelFolders.map(folder => ` ${nextLevelFolders.map(folder => `
@@ -405,18 +395,22 @@ export class SidebarManager {
<div class="breadcrumb-dropdown"> <div class="breadcrumb-dropdown">
<span class="sidebar-breadcrumb-item ${isLast ? 'active' : ''}" data-path="${currentPath}"> <span class="sidebar-breadcrumb-item ${isLast ? 'active' : ''}" data-path="${currentPath}">
${part} ${part}
${siblings.length > 1 ? `
<span class="breadcrumb-dropdown-indicator">
<i class="fas fa-caret-down"></i>
</span>
` : ''}
</span> </span>
<span class="breadcrumb-dropdown-toggle"> ${siblings.length > 1 ? `
<i class="fas fa-caret-down"></i> <div class="breadcrumb-dropdown-menu">
</span> ${siblings.map(folder => `
<div class="breadcrumb-dropdown-menu"> <div class="breadcrumb-dropdown-item ${folder === part ? 'active' : ''}"
${siblings.map(folder => ` data-path="${currentPath.replace(part, folder)}">
<div class="breadcrumb-dropdown-item ${folder === part ? 'active' : ''}" ${folder}
data-path="${currentPath.replace(part, folder)}"> </div>`).join('')
${folder} }
</div>`).join('') </div>
} ` : ''}
</div>
</div> </div>
`); `);
@@ -427,11 +421,11 @@ export class SidebarManager {
breadcrumbs.push(`<span class="sidebar-breadcrumb-separator">/</span>`); breadcrumbs.push(`<span class="sidebar-breadcrumb-separator">/</span>`);
breadcrumbs.push(` breadcrumbs.push(`
<div class="breadcrumb-dropdown"> <div class="breadcrumb-dropdown">
<span class="sidebar-breadcrumb-item"> <span class="sidebar-breadcrumb-item placeholder">
-- --
</span> <span class="breadcrumb-dropdown-indicator">
<span class="breadcrumb-dropdown-toggle"> <i class="fas fa-caret-down"></i>
<i class="fas fa-caret-down"></i> </span>
</span> </span>
<div class="breadcrumb-dropdown-menu"> <div class="breadcrumb-dropdown-menu">
${childFolders.map(folder => ` ${childFolders.map(folder => `