Based on feedback from kepano to reduce custom styling and use
Obsidian's native styles where possible:
- Replace all `cursor: pointer` with `cursor: var(--cursor)` across
all CSS files (100+ instances). Following Obsidian's convention where
`cursor: pointer` is only for links.
- Remove forced `border: none; box-shadow: none` rules that were
fighting against Obsidian's native button styling.
- Scope custom `.tn-btn` button system to `.mod-settings` only,
allowing Obsidian's native button styles to work elsewhere.
- Add `background: transparent` to mini-calendar buttons to match
Obsidian's native `.text-icon-button` styling.
This makes the plugin more cohesive with Obsidian's UI and reduces
unnecessary style overrides.
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
- Remove unnecessary borders and box shadows from multiple components
- Standardize button heights and spacing for consistency
- Clean up hover states and transitions for better UX
- Update calendar, filter bar, modal, note card, pomodoro, and task card styling
- Maintain functionality while achieving cleaner visual appearance
This completes the minimalist design system implementation across
all major UI components in the plugin.
Modal Improvements:
- Add note and task creation actions from calendar events
- Display related content linked to events
- Type-safe file operations with proper error handling
- In-place content refresh (no modal recreation)
- Task type detection based on user-configured tag
Features:
- Create Note: Opens customizable note creation dialog
- Create Task: Direct task creation with event scheduling
- Link Note: Connect existing notes to calendar events
- Refresh: Update related content list dynamically
API Improvements:
- Replace modal refresh anti-pattern with content updates
- Add error boundaries for all async operations
- Use TFile type checking for safe file operations
- Proper event listener cleanup with this.register()
User Experience:
- Related content automatically categorized as Task/Note
- Action buttons with consistent error handling
- Real-time content relationship tracking
• Remove the legacy “MinimalistTaskModal” base class and its derivatives (MinimalistTaskCreationModal and MinimalistTaskEditModal) by renaming and consolidating them into new classes:
– Rename MinimalistTaskModal to TaskModal
– Rename MinimalistTaskCreationModal → TaskCreationModal
– Rename MinimalistTaskEditModal → TaskEditModal
• Update all references and imports across the project (including AdvancedCalendarView) to use the new TaskModal, TaskCreationModal, and TaskEditModal classes instead of the old minimalist versions.
• Extract and expose a new TaskConversionOptions type (in src/types/taskConversion.ts) to provide a consistent interface for passing conversion-related options.
• Adjust the modal logic:
– In TaskCreationModal, update natural language parsing, pre-populated values, and form handling using the new base TaskModal APIs.
– In TaskEditModal, change the constructor signature to accept an options object (including “task” and an optional “onTaskUpdated” callback) and update recurrence handling to convert legacy recurrence objects into display strings.
• Update CSS:
– Rename styles/minimalist-modal.css to styles/task-modal.css and update class comments (e.g. “MINIMALIST TASK MODAL” → “TASK MODAL – Google Keep/Todoist Inspired”).
– Modify selectors in modal-bem.css by removing references to “.task-creation-modal” and “.task-edit-modal” in some cases, as these are now included under the unified “tasknotes-plugin” context.
• Remove the tests for BaseTaskModal (tests/unit/modals/BaseTaskModal.test.ts) since that base class is no longer used, and update test references for the new TaskCreationModal class.
• Overall, this commit streamlines the modal codebase and unifies the naming and styling of task-related modals while updating the type definitions and downstream usage in views and tests.
These changes are backward‐compatible with previous plugin settings (aside from renamed classes/interfaces) but may require updates in any custom integrations relying on the old MinimalistTask* modals.
This commit introduces multiple improvements across task recurrence logic, modal UI components, and calendar/task list views. The changes are summarized as follows:
1. BaseTaskModal Updates:
• Added help text for the "due date" field clarifying its role as a task deadline, separate from recurrence end dates.
• Revised help text for "scheduled date" to be more succinct.
• Updated recurrence help text to emphasize that recurring tasks appear in calendar views only when a scheduled date is set.
• Modified the frequency dropdown event handler to:
– Query for interval and end condition containers within the same container rather than the parent.
– Immediately update the interval input value and its unit when the frequency changes.
• Refactored the creation of the interval input so that its elements are always created and then conditionally hidden if frequency is not set.
• Changed the access level of updateIntervalUnit and updateRRuleFrequencyOptions methods from private to protected for easier inheritance.
2. MigrationModal Styling:
• Adjusted the layout of the migration prompt by switching to a column-based flex layout.
• Increased gap and padding between elements for better visual spacing.
• Applied updated line-height and margin to the migration message for improved readability.
• Updated button container styling to justify content to the flex-end and align items centrally.
3. TaskCreationModal UI Improvements:
• Moved the Recurrence section to be created in the detailedFormContainer for consistency with other fields.
• Inserted additional white space and improved grouping of UI controls during creation and toggling of detailed form elements.
4. Recurrence Logic Enhancements in FilterService and Helpers:
• Replaced the usage of isRecurringTaskDueOn with the new isDueByRRule function to compute task recurrence based on the full rrule string.
• Updated recurrence date checks in FilterService so that tasks are properly grouped/displayed based on scheduled and due dates, including avoiding duplicate events.
• Simplified the generation of recurring instances in helper methods by removing reliance on the task’s due date for the UNTIL condition, with the expectation that the rrule string contains complete recurrence info.
5. View Updates (AdvancedCalendarView, AgendaView, MiniCalendarView, TaskListView):
• Updated import references to use the new recurrence helper functions (isDueByRRule, generateRecurringInstances, and shouldShowRecurringTaskOnDate) replacing legacy ones.
• In AdvancedCalendarView, changed recurring task handling to require a scheduled date for display and adjusted rules for non-recurring tasks to check for either due or scheduled dates.
• Removed obsolete action buttons from TaskListView header.
• Ensured consistency in recurring task computation throughout all views.
6. CSS Improvements (modal-bem.css):
• Added new styles to support the interval input components with labels, input fields, and unit spans.
• Introduced styles for the rrule options container, monthly/yearly options, and end condition options.
• Updated styling for the detailed form container specific to TaskCreationModal, providing better spacing, padding, and transitions.
• Refined button, grid, and modal element spacing for a more visually appealing modal layout.
These changes enhance the recurrence system’s clarity and reliability while improving the overall user interface and experience in both modals and calendar views.
• In TaskCreationModal.ts:
- Replaced the labeled “Quick input” form group with a minimalist input field.
- Updated the textarea’s placeholder text and reduced its row count to 3.
- Styled the button container inline for a more compact layout.
- Changed button labels: “Quick create” is now “Create”, “Parse & fill form” becomes “Fill form”, and the detailed toggle now uses “+”/“−” symbols with tooltips to indicate its state.
- Added event listeners for input, click, and keyboard shortcuts to update natural language preview, quick create tasks, and fill the form. The keyboard handler still supports Ctrl/Cmd + Enter for quick create and Shift + Enter for parsing.
- Updated the detailed view toggle to set both text content and title attribute based on current state.
• In CSS files:
- calendar-view.css: Removed unnecessary box-shadow from the “selected and today” calendar day.
- filter-bar-bem.css: Replaced the accent variable from var(--tn-interactive-accent) to var(--interactive-accent) and removed box-shadow styling on focused inputs and selects.
- kanban-view.css: Removed a custom box-shadow on the drag-over column, keeping only the standard shadow and scale transform.
- modal-bem.css: Added a new section for “Natural Language Input – Minimalist Styles” to style the new input, button container, and preview components. Removed duplicate focus style rules to avoid conflicts.
- notes-view.css: Removed the box-shadow from focused note items.
- settings-view.css: Updated focus styles to use var(--interactive-accent) and removed box-shadow and extra outlines for cleaner style.
- task-list-view.css: Removed box-shadow on focused task items.
These consolidated changes both streamline the TaskCreationModal’s UI experience and provide a consistent, minimal visual style across calendar, filter, kanban, notes, settings, and task-list views.
• Remove workspace layout check in the EVENT_TASK_UPDATED handler (src/main.ts) so that editor decorations refresh regardless of app.workspace.layoutReady.
• Introduce two new modal components:
– ICSEventInfoModal (src/modals/ICSEventInfoModal.ts): Displays detailed calendar event information including title, date/time, description, location, URL, and optional source.
– TimeblockInfoModal (src/modals/TimeblockInfoModal.ts): Displays detailed timeblock information with title, time range, description, and attachments.
• Update TimeblockCreationModal (src/modals/TimeblockCreationModal.ts):
– Adjust UI labels and placeholders (e.g., “Create timeblock”, “Deep work session”, “Start time”, “End time”) for consistent casing.
• Modify AdvancedCalendarView (src/views/AdvancedCalendarView.ts):
– Replace manual DOM construction for modals with instantiation of the new ICSEventInfoModal and TimeblockInfoModal classes.
• Revise styling in base.css and task-inline-widget.css:
– Rename keyframes from “task-flash”, “task-pulse”, and “task-fade-in” to “tn-task-flash”, “tn-task-pulse”, and “tn-task-fade-in” to namespace animations under the plugin.
– Update CSS selectors to scope styles properly under .tasknotes-plugin.
• Remove legacy BEM compatibility classes from modal-bem.css to phase out temporary support for old form-group and related classes.
These changes enhance code readability, promote reuse of modal components, and align the UI styling with the plugin’s namespace for a cleaner, more maintainable codebase.
- In BaseTaskModal, add help text for scheduled date and recurrence fields:
• Introduced a new protected method createHelpText that appends descriptive, styled text to a given container.
• Updated the scheduled date and recurrence dropdown sections to call createHelpText and display contextual information for users.
- In AdvancedCalendarView, implement recurring task handling:
• Extended the CalendarEvent interface to include new properties (isRecurring, isRecurringInstance, instanceDate, recurringTemplateTime) for recurring tasks.
• Added a new toggle ("Recurring tasks") to filter the display of recurring task events on the calendar.
• Implemented generateRecurringInstances to iterate over the visible date range and create calendar events for each applicable recurring instance based on recurrence logic.
• Created helper methods getRecurringTime and createRecurringEvent to determine the recurring task's start time and generate styled event objects.
• Modified event handlers (e.g., handleEventClick, handleEventDrop, and event rendering) to account for recurring instances:
- Enforced that date updates for recurring instances only affect time (with a notice to the user) while non-recurring tasks handle full date/time changes.
- Applied special styling (dashed borders, dimmed appearance for completed instances) for visual distinction.
- In modal-bem.css, add styling for the new help text:
• Defined styling rules for .modal-form__help-text to ensure consistent appearance and spacing for helper descriptions.
These changes enhance the user experience by clearly explaining scheduling options and supporting recurring tasks with dynamic instance generation and distinct visual feedback in the calendar view.
• Remove explicit time-enabled flags: Eliminated the dueTimeEnabled and scheduledTimeEnabled properties from BaseTaskModal. Instead of tracking whether the time component is enabled, the scheduled time input now always appears (optionally populated) based on its value.
• Simplify scheduled date/time UI: Removed the toggle container, label, and event listener that allowed users to show/hide the scheduled time input. The date input now includes a "YYYY‑MM‑DD" placeholder and the time input shows a "HH:MM" placeholder, making the inputs more self-explanatory. The change event on the date and time inputs now directly updates the scheduled date value without conditional checks on a separate flag.
• Update TaskCreation and TaskEdit modals: Removed initialization code that set time-enabled flags (using hasTimeComponent) in favor of relying on the input fields to manage their own state. This streamlines the modal preparation logic for both creating and editing tasks.
• Adjust styling: Removed the transform scale styling on modal date inputs in modal-bem.css for a more consistent appearance.
Overall, these changes simplify the UI logic by removing unnecessary toggle controls and state variables, allowing the input fields’ values to dictate the inclusion or omission of time details.
• Updated DueDateModal.ts and ScheduledDateModal.ts:
- Removed redundant “Include time” toggle and associated logic.
- Combined date and time inputs into a single container where the time input is always visible (but optional).
- Added keyboard event listeners on both inputs (listening for Enter to save and Escape to cancel) and set appropriate aria-labels to improve accessibility.
- In ScheduledDateModal, added ARIA attributes to the modal elements (role, aria-labelledby, aria-modal) and error messaging for improved screen reader support.
- Updated quick action buttons (Today, Tomorrow, Next Week, Now, Clear) to correctly update both date and time fields without relying on the removed toggle.
• Updated dateUtils.ts:
- In formatDateTimeForDisplay, improved handling when dateFormat is empty by returning only the time format or an empty string for date-only scenarios.
• Updated CSS in modal-bem.css:
- Simplified the DateTime container styles by removing unused style blocks (e.g., date container, time toggle container/checkbox).
- Adjusted flex-wrap and input sizing to ensure a consistent layout for the date and time inputs.
- Added a monospace font to the time input for better clarity.
These changes improve the user experience by streamlining the UI for setting dates and times in modals, reducing complexity and enhancing accessibility in both modals.
• Update TaskLinkWidget to use new date/time formatting:
- Import and use formatDateTimeForDisplay to show due and scheduled dates with optional time.
- Replace static formatting with tooltip and display text that adapts if time info is available.
• Revamp BaseTaskModal date inputs:
- Split date and time inputs into separate containers with a toggle for including time.
- Add helper methods (updateDueDateValue, updateScheduledDateValue) to combine date and time using combineDateAndTime.
- Import several new utilities from dateUtils (hasTimeComponent, getDatePart, getTimePart, etc.) to correctly extract and set input values.
• Improve DueDateModal and ScheduledDateModal:
- Add “Include time” toggles and separate time inputs with appropriate labels and placeholders.
- Provide “Now” buttons that set both date and time simultaneously.
- Validate combined datetime values using validateDateTimeInput.
- Set input types to “date” and “time” for better UX.
- Update event handling, error messaging, and aria attributes for accessibility.
• Enhance TaskCreationModal and TaskEditModal:
- Initialize and update time-enabled flags when pre-populating due/scheduled dates.
- Ensure that the input values use extracted date parts (via getDatePart) when setting date inputs in modals.
- Preserve fully combined datetime values when tasks are edited.
• Update FilterService to be time-aware:
- Use new functions (isBeforeDateTimeAware, isOverdueTimeAware, getDatePart) to handle both date-only and datetime strings.
- Update date comparisons, grouping, and overdue logic to properly support time component information.
• Refine TaskCard UI:
- Enhance task card metadata display to conditionally show time information if available.
- Use formatDateTimeForDisplay in both due and scheduled date renderings so that “Today” tasks can optionally display the time.
• Adjust CacheManager indexing:
- Utilize getDatePart for consistent indexing of tasks by date, ensuring that datetime strings (with time) are properly mapped.
• Revise dateUtils:
- Add new utilities: hasTimeComponent, getDatePart, getTimePart, combineDateAndTime.
- Implement formatDateTimeForDisplay to support customizable date and time formats.
- Create isBeforeDateTimeAware, isOverdueTimeAware, and isTodayTimeAware to offer correct comparisons considering time information.
- Include validateDateTimeInput and addDaysToDateTime for better datetime input validation and manipulation.
- Provide getCurrentDateTimeString to return “YYYY-MM-DDTHH:mm” formatted strings.
• Update CSS in modal-bem.css:
- Define new styles for date/time input components (container, toggle, input modifiers) to improve layout and consistency in the modal interfaces.
Overall, these changes enable support for tasks with both date and time information, improving the UX and ensuring that filtering, sorting, and display logic correctly handle datetime values.
This commit addresses a UI issue where dropdown options in modal select elements were getting clipped. To resolve this, a new CSS rule has been added for the .modal-form__select class within the .tasknotes-plugin scope.
Changes include:
• Adding extra padding using var(--tn-spacing-lg) on both sides for improved spacing.
• Setting a minimum height of 44px to ensure sufficient vertical space for options.
• Adjusting line-height to 1.6 for better readability and spacing.
These adjustments enhance user interaction with select inputs within modal forms, ensuring that the dropdown options are fully visible and improving the overall usability of the modal interface.
• Updated multiple CSS files (filter-bar-bem.css, kanban-view.css, modal-bem.css, pomodoro-view.css, task-card-bem.css, task-list-view.css) to adjust the font sizes across various UI components. This effort standardizes the sizing by replacing small/medium font variables with larger ones where appropriate.
• In filter-bar-bem.css:
– Increased button font sizes from var(--tn-font-size-md) to var(--tn-font-size-lg) and from var(--tn-font-size-sm) to var(--tn-font-size-md), ensuring filter buttons are easier to read.
• In kanban-view.css:
– Upgraded several font size values (e.g., replacing var(--tn-font-size-sm) with var(--tn-font-size-md) and var(--tn-font-size-md) with var(--tn-font-size-lg)) for column titles and button texts, resulting in improved legibility in the kanban interface.
• In modal-bem.css:
– Enhanced form labels and buttons by switching from var(--tn-font-size-md) to var(--tn-font-size-lg), contributing to a clearer modal dialog experience.
• In pomodoro-view.css:
– Changed multiple font size values from small to medium or large (e.g., var(--tn-font-size-sm) → var(--tn-font-size-md) and var(--tn-font-size-md) → var(--tn-font-size-lg)) across task labels, selectors, section labels, and stats. Also, increased a button’s font size from var(--tn-font-size-xs) to var(--tn-font-size-sm).
• In task-card-bem.css:
– Increased the task title font size from var(--tn-font-size-md) to var(--tn-font-size-lg) for better emphasis.
– For inline preview text, increased max-width from 120px to 300px to accommodate longer task names.
• In task-list-view.css:
– Updated button and empty description font sizes from var(--tn-font-size-sm/--tn-font-size-md) to var(--tn-font-size-md/--tn-font-size-lg) to maintain consistency with other UI elements.
Overall, these updates help align the design with improved accessibility guidelines and ensure consistency across the app’s various views.
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
