Skip to content

Commit 3f43f6a

Browse files
RogersPykeRogersPyke
committed
feat: Refine filter UI with enhanced selected state visibility, adjust layout widths, and improve video grid positioning
1 parent 6e70781 commit 3f43f6a

7 files changed

Lines changed: 78 additions & 19 deletions

File tree

‎docs/css/filter.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,13 @@
525525
border-color: var(--color-primary-dark);
526526
}
527527

528+
/* Hover state for selected options - enhanced visibility */
529+
.filter-dropdown-content .filter-option.selected:hover {
530+
background: var(--item-gradient-dark);
531+
border-color: var(--color-primary-dark);
532+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
533+
}
534+
528535
.filter-dropdown-content .filter-option.selected .filter-option-label {
529536
color: var(--color-primary);
530537
font-weight: 600;

‎docs/css/layout.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
/* ==================== Video Panel ==================== */
1919
.video-panel {
20-
width: var(--video-panel-width);
20+
/* width: var(--video-panel-width); */
2121
display: flex;
2222
flex-direction: column;
2323
background: #ffffff;
@@ -54,6 +54,7 @@
5454
border-left: 1px solid #d0d7de;
5555
display: flex;
5656
flex-direction: column;
57+
flex-shrink: 0;
5758
overflow: hidden;
5859
}
5960

‎docs/css/variables.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99

1010
/* ==================== Layout Width Parameters ==================== */
1111
--filter-panel-width: 0%;
12-
--video-panel-width: 65%;
13-
--selection-panel-width: 35%;
12+
--video-panel-width: 70%;
13+
--selection-panel-width: 30%;
1414
--selection-panel-max-width: 480px;
1515

1616
/* ==================== Layout Spacing Parameters ==================== */

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<title>RoboCOIN DataManage</title>
6+
<title>RoboCOIN-DataManage</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
99
<!--

‎docs/js/modules/event-handlers.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ export class EventHandlers {
108108
this.addClickAnimation(resetFiltersBtn);
109109
document.getElementById('searchBox').value = '';
110110
this.managers.filter.resetFilters();
111-
document.dispatchEvent(new CustomEvent('filtersChanged'));
112111
});
113112
}
114113

‎docs/js/modules/filter-manager.js‎

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,10 @@ export class FilterManager {
265265
const children = wrapper.querySelector('.filter-children');
266266
if (children) {
267267
children.classList.toggle('collapsed');
268+
// After expanding, apply selected states to newly visible options
269+
if (!children.classList.contains('collapsed')) {
270+
this.applySelectedStylesToContainer(children);
271+
}
268272
}
269273
});
270274
return;
@@ -287,6 +291,9 @@ export class FilterManager {
287291
});
288292
}
289293
});
294+
295+
// Apply selected states to already selected filters in this category
296+
this.applySelectedStylesToCategory(categoryKey);
290297
});
291298
}
292299

@@ -496,6 +503,41 @@ export class FilterManager {
496503
});
497504
}
498505

506+
/**
507+
* Apply selected styles to all options in a specific category
508+
* @param {string} categoryKey - The category key
509+
*/
510+
applySelectedStylesToCategory(categoryKey) {
511+
this.selectedFilters.forEach(filterId => {
512+
if (filterId.startsWith(`${categoryKey}:`)) {
513+
const option = this.filterOptionCache.get(filterId);
514+
if (option) {
515+
option.classList.add('selected');
516+
}
517+
}
518+
});
519+
}
520+
521+
/**
522+
* Apply selected styles to all options within a container (including nested)
523+
* @param {HTMLElement} container - The container element
524+
*/
525+
applySelectedStylesToContainer(container) {
526+
if (!container) return;
527+
528+
const options = container.querySelectorAll('.filter-option[data-filter][data-value]');
529+
options.forEach(option => {
530+
const filterKey = option.dataset.filter;
531+
const filterValue = option.dataset.value;
532+
if (filterKey && filterValue) {
533+
const filterId = `${filterKey}:${filterValue}`;
534+
if (this.selectedFilters.has(filterId)) {
535+
option.classList.add('selected');
536+
}
537+
}
538+
});
539+
}
540+
499541
/**
500542
* Get human-readable filter label
501543
* @param {string} filterKey - Filter key
@@ -595,6 +637,9 @@ export class FilterManager {
595637
}
596638

597639
this.updateTriggerCount();
640+
this.scheduleFilterUpdate();
641+
// Reset should also trigger re-render because it changed the video-grid height
642+
598643
}
599644

600645
/**
@@ -794,10 +839,6 @@ export class FilterManager {
794839
const filterId = `${groupKey}:${value}`;
795840
if (!this.selectedFilters.has(filterId)) {
796841
this.selectedFilters.add(filterId);
797-
const option = this.filterOptionCache.get(filterId);
798-
if (option) {
799-
option.classList.add('selected');
800-
}
801842
this.addFilterTag(filterId, this.getFilterLabel(groupKey, value));
802843
}
803844
});
@@ -806,6 +847,9 @@ export class FilterManager {
806847
this.selectAllInHierarchy(groupKey, group.values);
807848
}
808849

850+
// Apply styles to currently visible (cached and rendered) options
851+
this.applySelectedStylesToCategory(groupKey);
852+
809853
this.updateTriggerCount();
810854
this.scheduleFilterUpdate();
811855
}
@@ -824,10 +868,6 @@ export class FilterManager {
824868
const filterId = `${groupKey}:${value}`;
825869
if (!this.selectedFilters.has(filterId)) {
826870
this.selectedFilters.add(filterId);
827-
const option = this.filterOptionCache.get(filterId);
828-
if (option) {
829-
option.classList.add('selected');
830-
}
831871
this.addFilterTag(filterId, this.getFilterLabel(groupKey, value));
832872
}
833873
}
@@ -881,6 +921,19 @@ export class FilterManager {
881921
// Select all leaf nodes under this path
882922
this.selectLeafNodesRecursive(groupKey, node.children, path);
883923

924+
// Apply styles to currently visible options under this path
925+
const container = document.getElementById('filterGroups');
926+
if (container) {
927+
const pathOption = container.querySelector(`.filter-option[data-path="${path}"]`);
928+
if (pathOption) {
929+
const wrapper = pathOption.closest('.filter-option-wrapper');
930+
const childrenContainer = wrapper?.querySelector('.filter-children');
931+
if (childrenContainer) {
932+
this.applySelectedStylesToContainer(childrenContainer);
933+
}
934+
}
935+
}
936+
884937
this.updateTriggerCount();
885938
this.scheduleFilterUpdate();
886939
}
@@ -942,10 +995,6 @@ export class FilterManager {
942995
const filterId = `${groupKey}:${value}`;
943996
if (!this.selectedFilters.has(filterId)) {
944997
this.selectedFilters.add(filterId);
945-
const option = this.filterOptionCache.get(filterId);
946-
if (option) {
947-
option.classList.add('selected');
948-
}
949998
this.addFilterTag(filterId, this.getFilterLabel(groupKey, value));
950999
}
9511000
}

‎docs/js/modules/video-grid.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export class VideoGridManager {
6565
const container = grid.parentElement;
6666
if (!container) return;
6767

68-
// Calculate layout parameters
68+
// 直接使用 grid 的实际宽度，因为卡片是相对于 grid 定位的
69+
// 这样可以确保计算的宽度与实际的 grid 宽度一致
6970
const gridWidth = grid.clientWidth;
7071

7172
// Get actual pixel values from computed styles
@@ -155,7 +156,9 @@ export class VideoGridManager {
155156

156157
// Set absolute positioning and size
157158
card.style.position = 'absolute';
158-
card.style.left = `${col * (cardWidth + gapPx)}px`;
159+
// 确保最后一列的位置计算正确
160+
const leftPosition = col * (cardWidth + gapPx);
161+
card.style.left = `${leftPosition}px`;
159162
card.style.top = `${row * itemHeight}px`;
160163
card.style.width = 'var(--grid-card-width)';
161164
card.style.height = 'var(--grid-card-height)';

0 commit comments

Comments
 (0)