mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
7480d68bcf
- Add FilterHeading component to show current saved view name and completion count - Display 'All' when no saved view is applied, or saved view name when applied - Include completion count in 'X / Y' format with proper spacing - Add horizontal divider line below heading for visual separation - Integrate with TaskListView between FilterBar and task content - Auto-detect active saved view from persisted state on view load - Update heading when tasks are refreshed or filters change - Add proper cleanup on view close The heading provides immediate visual feedback about: - What filter/view is currently active - Task completion progress (completed/total count) Layout: [FilterBar] -> [Heading + Count] -> [Divider] -> [Task Content]
41 lines
1.1 KiB
CSS
41 lines
1.1 KiB
CSS
/* =================================================================
|
|
FILTER HEADING COMPONENT
|
|
================================================================= */
|
|
|
|
/* All FilterHeading styles are scoped under .tasknotes-plugin for proper isolation */
|
|
|
|
/* Main Container */
|
|
.tasknotes-plugin .filter-heading {
|
|
margin-top: var(--tn-spacing-lg);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
/* Content wrapper with heading and count */
|
|
.tasknotes-plugin .filter-heading__content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
/* Heading title */
|
|
.tasknotes-plugin .filter-heading__title {
|
|
margin: 0;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Count display */
|
|
.tasknotes-plugin .filter-heading__count {
|
|
font-weight: 600;
|
|
font-size: var(--font-ui-small);
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Divider line */
|
|
.tasknotes-plugin .filter-heading__divider {
|
|
height: 1px;
|
|
background-color: var(--background-modifier-border);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|