From dd81c865408a6f4ad5ceca769eb8d8e46c23449b Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Thu, 13 Mar 2025 21:23:24 +0800
Subject: [PATCH] Enhance folder tag functionality and layout; update styles
for action buttons and toggle behavior
---
static/css/layout.css | 71 +++++++++++++++---------------
static/js/utils/uiHelpers.js | 27 +++++++++---
templates/components/controls.html | 48 +++++++++++---------
3 files changed, 82 insertions(+), 64 deletions(-)
diff --git a/static/css/layout.css b/static/css/layout.css
index 3b980cf7..4a2a5fbd 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -25,11 +25,19 @@
.actions {
display: flex;
align-items: center;
+ justify-content: space-between;
gap: var(--space-2);
flex-wrap: nowrap;
width: 100%;
}
+.action-buttons {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ flex-wrap: nowrap;
+}
+
/* Ensure hidden class works properly */
.hidden {
display: none !important;
@@ -42,11 +50,14 @@
}
.folder-tags {
+ display: flex;
+ gap: 4px;
+ padding: 2px 0;
+ flex-wrap: wrap;
transition: max-height 0.3s ease, opacity 0.2s ease;
max-height: 150px; /* Limit height to prevent overflow */
opacity: 1;
overflow-y: auto; /* Enable vertical scrolling */
- padding-right: 40px; /* Make space for the toggle button */
margin-bottom: 5px; /* Add margin below the tags */
}
@@ -55,13 +66,15 @@
opacity: 0;
margin: 0;
padding-bottom: 0;
+ overflow: hidden;
+}
+
+.toggle-folders-container {
+ margin-left: auto;
}
/* Toggle Folders Button */
.toggle-folders-btn {
- position: absolute;
- bottom: 0; /* 固定在容器底部 */
- right: 0; /* 固定在容器右侧 */
width: 36px;
height: 36px;
border-radius: 50%;
@@ -73,7 +86,6 @@
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
- z-index: 2;
}
.toggle-folders-btn:hover {
@@ -86,25 +98,18 @@
transition: transform 0.3s ease;
}
-/* 折叠状态样式 */
-.folder-tags.collapsed + .toggle-folders-btn {
- position: static;
- margin-right: auto; /* 确保按钮在左侧 */
- transform: translateY(0);
+/* Icon-only button style */
+.icon-only {
+ min-width: unset !important;
+ width: 36px !important;
+ padding: 0 !important;
}
-.folder-tags.collapsed + .toggle-folders-btn i {
+/* Rotate icon when folders are collapsed */
+.folder-tags.collapsed ~ .actions .toggle-folders-btn i {
transform: rotate(180deg);
}
-/* 文件夹标签样式 */
-.folder-tags {
- display: flex;
- gap: 4px;
- padding: 2px 0;
- flex-wrap: wrap;
-}
-
/* Add custom scrollbar for better visibility */
.folder-tags::-webkit-scrollbar {
width: 6px;
@@ -179,31 +184,27 @@
flex-wrap: wrap;
gap: var(--space-1);
}
-
- .controls {
- flex-direction: column;
- gap: 15px;
+
+ .action-buttons {
+ flex-wrap: wrap;
+ gap: var(--space-1);
+ width: 100%;
+ }
+
+ .toggle-folders-container {
+ margin-left: 0;
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
}
.folder-tags-container {
order: -1;
}
- .toggle-folders-btn {
- position: absolute;
- bottom: 0;
- right: 0;
- transform: none; /* 移除transform，防止hover时的位移 */
- }
-
.toggle-folders-btn:hover {
transform: none; /* 移动端下禁用hover效果 */
}
-
- .folder-tags.collapsed + .toggle-folders-btn {
- position: relative;
- transform: none;
- }
.back-to-top {
bottom: 60px; /* Give some extra space from bottom on mobile */
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index 50af65d5..cd8d1435 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -130,12 +130,14 @@ export function toggleFolderTags() {
folderTags.classList.toggle('collapsed');
if (folderTags.classList.contains('collapsed')) {
- toggleBtn.className = 'fas fa-chevron-down';
- toggleBtn.parentElement.title = 'Expand folder tags';
+ // Change icon to indicate folders are hidden
+ toggleBtn.className = 'fas fa-folder-plus';
+ toggleBtn.parentElement.title = 'Show folder tags';
localStorage.setItem('folderTagsCollapsed', 'true');
} else {
- toggleBtn.className = 'fas fa-chevron-up';
- toggleBtn.parentElement.title = 'Collapse folder tags';
+ // Change icon to indicate folders are visible
+ toggleBtn.className = 'fas fa-folder-minus';
+ toggleBtn.parentElement.title = 'Hide folder tags';
localStorage.setItem('folderTagsCollapsed', 'false');
}
@@ -156,9 +158,20 @@ export function initFolderTagsVisibility() {
const isCollapsed = localStorage.getItem('folderTagsCollapsed') === 'true';
if (isCollapsed) {
const folderTags = document.querySelector('.folder-tags');
- const btn = document.querySelector('.toggle-folders-btn');
- folderTags.classList.add('collapsed');
- btn.title = 'Expand folder tags';
+ const toggleBtn = document.querySelector('.toggle-folders-btn i');
+ if (folderTags) {
+ folderTags.classList.add('collapsed');
+ }
+ if (toggleBtn) {
+ toggleBtn.className = 'fas fa-folder-plus';
+ toggleBtn.parentElement.title = 'Show folder tags';
+ }
+ } else {
+ const toggleBtn = document.querySelector('.toggle-folders-btn i');
+ if (toggleBtn) {
+ toggleBtn.className = 'fas fa-folder-minus';
+ toggleBtn.parentElement.title = 'Hide folder tags';
+ }
}
}
diff --git a/templates/components/controls.html b/templates/components/controls.html
index 856b8108..be09280c 100644
--- a/templates/components/controls.html
+++ b/templates/components/controls.html
@@ -5,32 +5,36 @@
{{ folder }}
{% endfor %}
-
-
-
+
-
-
-
-
-
-
-
-
-
-