obsidian-plugin/callumalpass_tasknotes
1
0
Fork 0
mirror of https://github.com/callumalpass/tasknotes.git synced 2026-07-22 12:50:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
callumalpass_tasknotes/styles
History
Callum Alpass c83cf83871 feat: Add expandable subtasks to project task cards 
Add chevron icon to project task cards that allows users to expand and view
subtasks inline with proper indentation and visual hierarchy.

Key features:
- Chevron icon positioned next to folder icon on project tasks
- Click to expand/collapse shows subtasks below with 20px indentation
- Smooth rotation animation and hover effects
- Configurable via new "Show expandable subtasks" setting (default: enabled)
- Session-persistent expanded state via ExpandedProjectsService
- Proper DOM structure with main-row wrapper for correct layout
- Subtasks render with lighter background and visual separation
- Lazy loading - subtasks only fetch when expanded
- Graceful error handling and loading states

Technical implementation:
- New ExpandedProjectsService for state management
- Enhanced TaskCard component with main-row/subtasks layout
- Comprehensive BEM CSS styling for chevron and subtask containers
- Updated settings interface with new showExpandableSubtasks option
- Integrated with existing ProjectSubtasksService for data fetching
2025-08-03 16:01:24 +10:00
..
advanced-calendar-view.css fix: Adjust calendar header toolbar spacing 2025-08-03 12:40:29 +10:00
agenda-view.css refactor: Implement consistent button styling system throughout plugin 2025-07-27 09:30:59 +10:00
base.css Refactor event listeners, modals, and styles to improve consistency and maintainability 2025-06-21 08:48:50 +10:00
calendar-view.css style: Implement borderless button design system across all components 2025-07-27 09:30:59 +10:00
date-picker.css Implement enhanced date picker modal and update task modals with refined UI and functionality 2025-06-27 07:29:14 +10:00
filter-bar-bem.css feat: Add visual state indicators for active saved views in FilterBar 2025-07-28 22:20:29 +10:00
index.css Complete build system cleanup by removing legacy CSS files 2025-06-09 12:54:58 +10:00
kanban-view.css refactor: Implement consistent button styling system throughout plugin 2025-07-27 09:30:59 +10:00
modal-bem.css refactor: Implement consistent button styling system throughout plugin 2025-07-27 09:30:59 +10:00
note-card-bem.css style: Apply consistent minimalist styling across UI components 2025-07-26 20:35:18 +10:00
notes-view.css refactor: Implement consistent button styling system throughout plugin 2025-07-27 09:30:59 +10:00
pomodoro-stats-view.css refactor: Implement consistent button styling system throughout plugin 2025-07-27 09:30:59 +10:00
pomodoro-view.css style: Add pointer cursor to every button in pomodoro view 2025-07-27 12:23:14 +02:00
project-note-subtasks.css style: Complete borderless button system implementation 2025-07-27 09:30:59 +10:00
README.md feat: Remove legacy class names, cleanup legacy styles, and update code for BEM consistency 2025-06-09 13:01:19 +10:00
settings-view.css feat: Add drag and drop reordering for status configurations (#291) 2025-07-27 10:31:44 +10:00
status-bar.css feat: status bar to display currently tracked tasks (#114) 2025-06-30 21:58:35 +10:00
task-action-palette-modal.css Refactor Task Link/UI Updates and Enhance Status Handling 2025-06-22 19:33:03 +10:00
task-card-bem.css feat: Add expandable subtasks to project task cards 2025-08-03 16:01:24 +10:00
task-inline-widget.css fix: Remove borders and movement from UI buttons 2025-07-20 19:02:01 +10:00
task-list-view.css refactor: Implement consistent button styling system throughout plugin 2025-07-27 09:30:59 +10:00
task-modal.css fix: Stabilize Open note button hover behavior 2025-07-27 13:39:46 +10:00
task-selector-modal.css feat: implement comprehensive projects system with note-based linking 2025-07-05 18:54:39 +10:00
unscheduled-tasks-selector-modal.css feat: implement comprehensive projects system with note-based linking 2025-07-05 18:54:39 +10:00
utilities.css style: Improve advanced calendar view borders and styling 2025-07-28 22:20:29 +10:00
UTILITIES.md Refactor and add complete BEM‐based, scoped CSS for TaskNotes 2025-06-09 12:20:19 +10:00
UTILITY-USAGE-GUIDE.md Refactor and add complete BEM‐based, scoped CSS for TaskNotes 2025-06-09 12:20:19 +10:00
variables.css style: Implement borderless button design system across all components 2025-07-27 09:30:59 +10:00

README.md

CSS Build System

This directory contains the modular CSS source files for the TaskNotes plugin. The main styles.css file is generated from these source files during the build process.

File Structure

Core System Files

  • variables.css - CSS custom properties and design system variables
  • utilities.css - Utility classes for layout, spacing, typography, and states
  • base.css - Basic styles, animations, card components, and layout
  • components.css - Reusable UI components, utilities, and modals

BEM Component Files (NEW)

  • task-card-bem.css - BEM TaskCard component with proper scoping
  • note-card-bem.css - BEM NoteCard component with proper scoping
  • filter-bar-bem.css - BEM FilterBar component with proper scoping
  • modal-bem.css - BEM Modal components with proper scoping

View-Specific Files (NEW)

  • task-list-view.css - BEM TaskListView component
  • calendar-view.css - BEM CalendarView component
  • kanban-view.css - BEM KanbanView component
  • agenda-view.css - BEM AgendaView component
  • notes-view.css - BEM NotesView component
  • pomodoro-view.css - BEM PomodoroView component
  • pomodoro-stats-view.css - BEM PomodoroStatsView component
  • settings-view.css - BEM SettingsView component

Legacy Files (Remaining)

  • pomodoro.css - Pomodoro view specific styles (to be deprecated)
  • settings.css - Settings page styles (to be deprecated)
  • tasks-legacy.css - Legacy task styles for backwards compatibility

Documentation Files

  • index.css - Documentation file (not included in build)
  • README.md - This documentation file
  • UTILITIES.md - Utility class documentation
  • UTILITY-USAGE-GUIDE.md - Guide for using utility classes

Development Workflow

Making Changes

  1. Edit the appropriate CSS file in this directory
  2. Run npm run build-css to regenerate the main styles.css file
  3. Test your changes in the application
  4. Commit your changes to the source files (the generated styles.css is ignored by git)

Build Commands

  • npm run build-css - Build CSS only
  • npm run dev - Build CSS + start development server
  • npm run build - Build CSS + full production build

File Loading Order

The CSS files are concatenated in dependency order:

  1. variables.css (CSS custom properties - loaded first)
  2. utilities.css (utility classes)
  3. base.css (foundational styles)
  4. task-card-bem.css (BEM TaskCard component)
  5. note-card-bem.css (BEM NoteCard component)
  6. filter-bar-bem.css (BEM FilterBar component)
  7. modal-bem.css (BEM Modal components)
  8. View-specific BEM files (task-list-view, calendar-view, kanban-view, etc.)
  9. components.css (general components)
  10. Legacy files (pomodoro.css, settings.css)

CI/CD Process

The GitHub Actions workflow automatically:

  1. Builds the CSS from source files during release
  2. Includes the generated styles.css in the release artifacts
  3. Ensures the plugin has all necessary files for distribution

Important Notes

  • Never edit styles.css directly - it will be overwritten during builds
  • The styles.css file is not tracked in git - only source files are committed
  • All CSS variables should be defined in variables.css
  • Follow the existing patterns and naming conventions
  • Use CSS custom properties (variables) instead of hardcoded values
  • Test changes across different views (Calendar, Tasks, Kanban, etc.)

Troubleshooting

If styles aren't updating:

  1. Run npm run build-css to regenerate the CSS
  2. Check that your changes are in the correct source file
  3. Verify the build completed without errors
  4. Clear browser cache if testing in development

If the build fails:

  1. Check the console output for specific error messages
  2. Verify all CSS files exist and are readable
  3. Check for syntax errors in your CSS
  4. Ensure file paths in build-css.mjs are correct