From 522a3ea88b3e1ff1728a5a7335960a6350fe1a36 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 26 Aug 2025 17:13:04 +0800
Subject: [PATCH] feat: Update sidebar breadcrumb styles and enhance dropdown
functionality
---
static/css/base.css | 2 +-
static/css/components/sidebar.css | 36 ++++++----
static/js/components/SidebarManager.js | 98 ++++++++++++--------------
3 files changed, 69 insertions(+), 67 deletions(-)
diff --git a/static/css/base.css b/static/css/base.css
index 99aedbb7..cbf89c9b 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -46,7 +46,7 @@ html, body {
/* Composed Colors */
--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-text: oklch(95% 0.02 256);
--lora-error: oklch(75% 0.32 29);
diff --git a/static/css/components/sidebar.css b/static/css/components/sidebar.css
index d4b3d9f7..ba1bdd17 100644
--- a/static/css/components/sidebar.css
+++ b/static/css/components/sidebar.css
@@ -238,19 +238,32 @@
align-items: center;
}
-.breadcrumb-dropdown-toggle {
- margin-left: 4px;
+.breadcrumb-dropdown-indicator {
+ margin-left: 6px;
color: inherit;
- opacity: 0.7;
- transition: transform 0.2s ease;
+ opacity: 0.6;
+ transition: all 0.2s ease;
+ pointer-events: none;
+ font-size: 0.9em;
}
-.breadcrumb-dropdown:hover .breadcrumb-dropdown-toggle {
- opacity: 1;
+.sidebar-breadcrumb-item:hover .breadcrumb-dropdown-indicator {
+ 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);
+ opacity: 1;
}
.breadcrumb-dropdown-menu {
@@ -265,7 +278,7 @@
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
z-index: calc(var(--z-overlay) + 20);
overflow-y: auto;
- max-height: 260px;
+ max-height: 450px;
display: none;
margin-top: 4px;
}
@@ -290,12 +303,7 @@
.breadcrumb-dropdown-item.active {
background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
color: var(--lora-accent);
-}
-
-.breadcrumb-dropdown-placeholder {
- color: var(--text-muted);
- font-style: italic;
- padding: 6px 12px;
+ font-weight: 500;
}
/* Responsive Design */
diff --git a/static/js/components/SidebarManager.js b/static/js/components/SidebarManager.js
index 71910983..dd5b74da 100644
--- a/static/js/components/SidebarManager.js
+++ b/static/js/components/SidebarManager.js
@@ -209,34 +209,36 @@ export class SidebarManager {
handleBreadcrumbClick(event) {
const breadcrumbItem = event.target.closest('.sidebar-breadcrumb-item');
- const dropdownToggle = event.target.closest('.breadcrumb-dropdown-toggle');
const dropdownItem = event.target.closest('.breadcrumb-dropdown-item');
- if (dropdownToggle) {
- // 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) {
+ if (dropdownItem) {
// Handle dropdown item selection
const path = dropdownItem.dataset.path || '';
this.selectFolder(path);
this.closeDropdown();
} else if (breadcrumbItem) {
- // Handle direct breadcrumb click
+ // Handle breadcrumb item click
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('/') : [];
let currentPath = '';
- // Start with root breadcrumb with dropdown
+ // Start with root breadcrumb
const rootSiblings = Object.keys(this.treeData);
const breadcrumbs = [`
-
-
-
-
`];
@@ -374,11 +364,11 @@ export class SidebarManager {
breadcrumbs.push(``);
breadcrumbs.push(`
-