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]
93 lines
No EOL
3.6 KiB
CSS
93 lines
No EOL
3.6 KiB
CSS
/*
|
|
TaskNotes Plugin Styles - Source Index
|
|
|
|
This file serves as documentation for the CSS build system.
|
|
The actual styles.css file is generated by concatenating these files in order:
|
|
|
|
=== CORE SYSTEM ===
|
|
1. variables.css - CSS custom properties and design system variables
|
|
2. utilities.css - Utility classes for layout, spacing, typography, and states
|
|
3. base.css - Basic styles, animations, card components, and layout
|
|
|
|
=== BEM COMPONENT FILES ===
|
|
4. task-card-bem.css - BEM TaskCard component with proper scoping
|
|
5. note-card-bem.css - BEM NoteCard component with proper scoping
|
|
6. filter-bar-bem.css - BEM FilterBar component with proper scoping
|
|
7. filter-heading.css - BEM FilterHeading component with proper scoping
|
|
8. modal-bem.css - BEM Modal components with proper scoping
|
|
|
|
=== BEM VIEW FILES ===
|
|
9. task-list-view.css - BEM TaskListView component
|
|
10. calendar-view.css - BEM CalendarView component
|
|
11. kanban-view.css - BEM KanbanView component
|
|
12. agenda-view.css - BEM AgendaView component
|
|
13. notes-view.css - BEM NotesView component
|
|
14. pomodoro-view.css - BEM PomodoroView component
|
|
15. pomodoro-stats-view.css - BEM PomodoroStatsView component
|
|
16. settings-view.css - BEM SettingsView component
|
|
|
|
=== LEGACY SUPPORT ===
|
|
17. components.css - Reusable UI components, utilities, and modals
|
|
|
|
To build the final styles.css file, run:
|
|
npm run build-css
|
|
|
|
During development, both 'npm run dev' and 'npm run build' will automatically
|
|
build the CSS before running the main build process.
|
|
|
|
=== File Descriptions ===
|
|
|
|
variables.css:
|
|
- CSS custom properties for spacing, colors, typography
|
|
- Design system tokens
|
|
- Global CSS variables used throughout the application
|
|
|
|
base.css:
|
|
- Foundational styles and animations
|
|
- Base card component classes using BEM methodology
|
|
- Accessibility styles and reduced motion support
|
|
- Loading states and transitions
|
|
|
|
task-card-bem.css:
|
|
- NEW BEM TaskCard component implementation
|
|
- Properly scoped under .tasknotes-plugin
|
|
- Uses --tn- CSS variables for consistency
|
|
- Replaces legacy tasknotes-card and task-card styles
|
|
|
|
note-card-bem.css:
|
|
- NEW BEM NoteCard component implementation
|
|
- Properly scoped under .tasknotes-plugin
|
|
- Uses --tn- CSS variables for consistency
|
|
- Follows same BEM patterns as TaskCard
|
|
- Replaces legacy note-item and note-card styles
|
|
|
|
filter-bar-bem.css:
|
|
- NEW BEM FilterBar component implementation
|
|
- Properly scoped under .tasknotes-plugin
|
|
- Uses --tn- CSS variables for consistency
|
|
- Follows same BEM patterns as TaskCard and NoteCard
|
|
- Includes advanced filter panel sub-component
|
|
- Replaces legacy filter-bar and filter styles
|
|
|
|
components.css:
|
|
- Reusable UI components (buttons, modals, forms)
|
|
- Utility classes (.is-hidden, .is-loading, etc.)
|
|
- General component styles used across views
|
|
- Tab system and main content area
|
|
- Minimal legacy support for compatibility
|
|
|
|
=== Development Workflow ===
|
|
|
|
1. Edit the appropriate CSS file in the styles/ directory
|
|
2. Run 'npm run build-css' to regenerate styles.css
|
|
3. Test your changes in the application
|
|
4. Commit both the source files and the generated styles.css
|
|
|
|
The build process ensures that:
|
|
- Variables are loaded first for use in all other files
|
|
- Base styles are applied before component-specific styles
|
|
- View-specific styles don't conflict with each other
|
|
- The final CSS is properly ordered and documented
|
|
*/
|
|
|
|
/* This file is for documentation only - it is not included in the build */ |