Commit graph

18 commits

Author SHA1 Message Date
Renato Mendonca
cef5dde600
fix(css): wrap inline task overlay title using white-space: break-spaces; (#517) 2025-08-31 10:41:15 +10:00
Callum Alpass
6c37bb5984 ui: improve task inline widget status and priority dot alignment (#410) 2025-08-17 12:45:59 +10:00
Callum Alpass
65486ef108 fix: Remove borders and movement from UI buttons
- Remove borders from saved view buttons in filter bar
- Remove border from save button (floppy disk icon) in filter builder
- Remove border from task instant convert icon
- Remove hover scale animation from instant convert button
- Add explicit border removal with \!important for better specificity
2025-07-20 19:02:01 +10:00
Callum Alpass
8fc6d39e9f Fix widget alignment 2025-06-29 12:26:57 +10:00
Callum Alpass
86644e22bc Change task-related icons and update CSS styling for improved UI clarity and interactivity.
• Update icon usage:
  - In TaskLinkWidget.ts and TaskCard.ts, replace the default "pencil" icon with Obsidian’s built-in "ellipsis-vertical" icon.  (#80)
  - This change clarifies that the icon now represents a menu/options action rather than a direct edit.

• Adjust task card styling:
  - In task-card-bem.css, modify the top position of the recurring-indicator from 6px to 8px for better vertical alignment.

• Refine task inline widget styles:
  - In task-inline-widget.css, set the opacity of the pencil icon from 0.4 to 0, effectively hiding it since it’s no longer used for editing.
  - Add a hover effect for completed task titles, enhancing visual feedback by changing the text color and opacity.
  - Enhance the hover style for task titles by adding a pointer cursor, transition effect, slight padding, and a border-radius to improve the interactive appearance.

These adjustments aim to streamline the UI elements and provide clearer interactive cues for users.
2025-06-29 12:26:57 +10:00
Callum Alpass
71d59889f4 Refactor task UI to support and update recurring tasks with context menus
• Update TaskLinkWidget.ts:
  - Import and use additional helper functions (getEffectiveTaskStatus, getDatePart, getTimePart) for better date and status handling.
  - For recurring tasks, determine an effective task status based on the target date and update the click handler to toggle completion using toggleRecurringTaskComplete.
  - Switch status dot styling and tooltip updates to reflect effective status changes.
  - Add click context menus for priority, due date, scheduled date, and recurrence. These context menus let users update the respective task properties inline, updating both the UI and the internal task data.
  - When a user interacts (clicks) on date or priority elements, the corresponding context menu (DateContextMenu, PriorityContextMenu or RecurrenceContextMenu) is displayed and selections update the task properties accordingly.
  - Improve the equality check by considering recurrence and complete_instances in the widget’s comparison.

• Update TaskCard.ts:
  - Import and integrate RecurrenceContextMenu.
  - For tasks with recurrence, adjust tooltip attributes on the recurring indicator to indicate clickable functionality.
  - Add a click event on the recurring indicator to show a RecurrenceContextMenu, allowing the user to update the recurrence pattern. If an error occurs, a Notice is shown to the user.

• Update CSS styles (task-card-bem.css and task-inline-widget.css):
  - Enhance styling for recurring indicators in both card and inline widget views.
  - Adjust positions, sizes, margins, and transitions for better visual feedback and interactivity (e.g., hover effects, cursor pointer).
  - Align and style the recurring icon (using Obsidian’s rotate-ccw icon) consistently in both TaskCard and TaskLinkWidget.

These changes ensure consistency with TaskCard interactions and improve the overall user experience for recurring tasks and inline task properties editing.
2025-06-29 12:26:57 +10:00
Callum Alpass
0b31cc744a Fix alignment 2025-06-22 20:58:30 +10:00
Callum Alpass
86be0eaa15 Improve inline task preview widget layout and spacing
• Switch layout from "display: inline" to "inline-flex" for .task-inline-preview to ensure proper element alignment, adding align-items: center and a gap for consistent spacing.
• Update padding and margin values across elements:
  – Add padding (2px 4px) to .task-inline-preview for improved clickable area.
  – Adjust spacing on status dot, date icon, and pencil icon by setting explicit margin and vertical-align values.
• Remove redundant task title styles and consolidate text overflow rules:
  – Reduce max-width from 300px to 250px and add flex-shrink/vertical-align settings for better cropping and responsiveness.
• Tweak responsive design in media query and reading mode context:
  – Modify padding and gap in media query for max-width adjustments.
  – Ensure reading mode styling uses consistent gap and increased padding.

These CSS updates enhance both the visual consistency and usability of the inline task preview widget.
2025-06-22 20:20:42 +10:00
Callum Alpass
543b7fa73e Add clickable date fields with modals and UI enhancements in TaskLinkWidget
This commit introduces several improvements to the inline task preview by making the due and scheduled date fields interactive. The main changes include:

• In TaskLinkWidget.ts:
  - Enhanced the due date span element by appending an extra CSS class ("task-inline-preview__date--clickable") and updating its tooltip to indicate that the date is clickable.
  - Added an event listener on the due date span so that clicking it asynchronously imports and opens the DueDateModal. This makes it easier for users to modify the due date directly from the inline preview.
  - Similarly, updated the scheduled date span element with the clickable class and updated tooltip, and attached an event listener to asynchronously import and display the ScheduledDateModal when clicked.
  - Both click handlers prevent event propagation and default actions, ensuring a smooth user experience.

• In task-inline-widget.css:
  - Introduced new styles for clickable date elements, including a pointer cursor, padding, border-radius, and smooth transitions.
  - Added hover effects for clickable date elements, such as increased opacity, background color change, and a slight upward translation, providing visual feedback when users interact with the dates.
  - Applied similar transition effects to icons and pencil elements for consistency across the widget UI.

These changes improve the overall interactivity and user experience of task editing, allowing quick modifications to dates without leaving the current context.
2025-06-22 19:47:25 +10:00
Callum Alpass
d249a926e7 Refactor Task Link/UI Updates and Enhance Status Handling
• Refactored TaskLinkOverlay widget caching:
 – In createTaskLinkField, now checks for a specific task update payload in transaction.effects.
 – If a task update provides a taskPath, only active widgets whose key includes that path are removed; otherwise, all widgets are cleared.
 – Updated widget creation logic to always build a new widget instance and update the cache only when the existing widget differs.

• Improved dispatchTaskUpdate safety:
 – Added validation to ensure the provided EditorView has a valid dispatch function before dispatching.
 – Wrapped view.dispatch in a try-catch block to log errors if dispatching fails.

• Enhanced TaskLinkWidget visual updates:
 – Modified the status dot rendering: if the task is completed (using the plugin’s statusManager), the status dot is filled with the status color.
 – Updated the widget’s click handler: ensured safe dispatch of task update events by checking the validity of the EditorView.
 – Removed redundant inline checkmark and simplified visual design.

• Updated main.ts task dispatch logic:
 – Now extracts the task path from either data?.path or data?.updatedTask?.path to ensure the correct widget refresh is triggered.

• Improved TaskService recurring task toggling:
 – Retrieves fresh task data from the cache before toggling to reflect the latest completion state.
 – Uses the fresh task info for checking recurrence, updating the cached task data, and triggering the EVENT_TASK_UPDATED notification.

• Refined TaskCard UI updates:
 – On toggling a recurring task’s completion, fetches the updated task info and computes the new effective status.
 – Immediately updates the status dot’s border color and fills the task card with appropriate classes (e.g., completed, archived, active, recurring, priority, status).
 – Adjusts the title element styling for a completed task.

• Updated CSS for improved theming and interactivity:
 – In task-action-palette-modal.css, updated category colors to be theme aware (using var(--color-blue), etc.), adjusted selected item opacity/colors.
 – In task-card-bem.css, revised completed status styles:
  * Now fills the status dot using the current status color instead of a transparent background with a checkmark.
  * Increased the priority dot size from 6px to 8px.
 – In task-inline-widget.css, added hover effects (box-shadow & scaling) to the inline status dot for better visual feedback.

These changes enhance the efficiency of widget updates, improve error handling, provide clearer visual feedback on task status changes, and ensure consistency between task data and UI updates.
2025-06-22 19:33:03 +10:00
Callum Alpass
3889e5a224 feat(ui): update inline and card task widgets with enhanced status cycling and Todoist-inspired styling
• In TaskLinkWidget.ts:
  - Added an import for dispatchTaskUpdate from TaskLinkOverlay.
  - Moved the status indicator dot before the task title and updated its styling to use a border color instead of text color.
  - Introduced a click handler on the status dot to:
     • Retrieve the latest task information.
     • Cycle the task status using the plugin’s statusManager.
     • Update the UI immediately (status dot color and container’s completed state).
     • Dispatch a system-wide task update event after a short delay.
  - Reordered the priority indicator dot so it appears before the title.

• In TaskCard.ts:
  - Updated the status and priority dot styling from using backgroundColor to setting borderColor to better match the new theme.
  - Added a click handler on the status dot to:
     • Distinguish between recurring tasks (toggle completion) and standard tasks (cycle status).
     • Refresh task data before updating status.
     • Provide error feedback via a Notice on failure.
  - Adjusted the logic for dynamically adding/removing/updating the priority dot on task cards.

• In task-card-bem.css:
  - Revamped task card styling to reflect a Todoist minimal/compact design:
     • Adjusted padding, margins, background, and interactive states.
     • Styled focus states, drag-and-drop feedback (ghosts, drop zones, and dragging pulsing animation), and media queries for responsive/touch devices.
     • Updated status dots, priority indicators, and added improvements for accessibility and reduced motion.
  - Replaced older animations and shadows with simplified transitions and color mixes.

• In task-inline-widget.css:
  - Revised inline widget styling to align status dot appearance with the task card (matching border, size, and hover effects).
  - Updated task title styling to improve spacing.
  - Amended the completed status styling to show a filled circle checkmark.

This commit refines both the task inline widget and task card components for consistent interactions and modern visual design while improving accessibility and responsive behavior.
2025-06-22 18:12:10 +10:00
Amith KK
096ea302ab Add task previews to reading mode 2025-06-21 17:46:21 +05:30
Callum Alpass
471be7cd56 Refactor event listeners, modals, and styles to improve consistency and maintainability
• 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.
2025-06-21 08:48:50 +10:00
Callum Alpass
76d19eaf1c Refactor and clean up modal/dialog and UI components
• Introduced two new modal classes (ConfirmationModal and StorageLocationConfirmationModal) in the “src/modals” folder that use Obsidian’s Modal API. These generic confirmation dialogs replace previously inline-created DOM modals for actions such as deleting statuses and priorities, and for confirming storage location changes.

• Updated the settings code (src/settings/settings.ts) to use the new modal utilities. The inline modal creation and event handling logic was removed and replaced with calls to showConfirmationModal and showStorageLocationConfirmationModal. This simplifies the confirmation workflow, improves consistency, and reduces duplicate code.

• Removed the old native implementation of a confirmation dialog for switching storage locations and also cleaned up legacy modal code.

• Deleted the NativeMetadataCacheManager file from “src/utils”, as its functionality is no longer needed or has been replaced by more up-to-date implementations.

• Revised the AdvancedCalendarView context menu logic in “src/views/AdvancedCalendarView.ts” to leverage Obsidian’s Menu API instead of manually constructing and managing DOM elements. This change results in a cleaner, more reliable context menu for ICS events.

• Removed the entire components.css stylesheet, simplifying the style assets and reducing unused styles.

• Made minor tweaks to task inline widget CSS for better specificity and consistency in hover and interactive states.

Overall, this commit refactors modal/dialog management, removes legacy code, and refines UI component behavior for a cleaner and more maintainable code base.
2025-06-20 20:58:08 +10:00
Callum Alpass
98b6f6ed86 Refactor Task Template Processing & Improve Link Generation & CSS Priority Styling (#37)
• Removed body template processing from TaskCreationModal:
  - The applyBodyTemplate() call and its associated logic were removed
from the modal.
  - The modal now simply pre-populates the textarea with any provided
details, ensuring the user’s input is maintained without automatic
template injection.

• Moved template logic to TaskService:
  - Introduced a new private async method applyBodyTemplate() in
TaskService.
  - This method now handles reading the template file (if enabled),
processing it with task data (including the new “details” field), and
returning the final content.
  - When creating a task file, the processed template content is
appended to the file content instead of using raw user details.

• Enhanced Template Variable Support:
  - Updated the helpers helper function processTaskTemplateVariables()
to include a new replacement for {{details}}, allowing user-provided
details to be inserted into templates.
  - Modified the settings help text to include an explanation for the
new {{details}} variable and clarify that the template is applied using
all final form values.

• Improved Instant Task Link Generation:
  - Added checks in InstantTaskConvertService to detect if the sanitized
title includes nested Obsidian links or problematic characters (|, #,
^).
  - If such characters are found, the generated link defaults to a
simple link format (without an alias) to avoid nested link structures.

• Updated CSS Styling for Task Cards & Inline Widgets:
  - In task-card-bem.css, updated comment to reflect that CSS variables
for priority are now set dynamically by TaskCard.ts.
  - In task-inline-widget.css, adjusted status and priority dot styles:
     • Changed the status dot color variable fallback to a fixed color
(#666).
     • Replaced the priority dot style with a priority border style
using left border colors, using distinct widths for high (4px), medium
(3px), and low priority tasks.

Overall, these changes reposition the template functionality to be
applied at task creation (rather than during modal pre-population), add
better handling for nested links in instant task conversion, extend
template variable support, and update styling for better visual cues.
2025-06-15 13:28:39 +10:00
Callum Alpass
8ed849b357 Refactor task widget styling and remove deprecated YAML update helpers
• Transition task status/priority styling from inline JavaScript to CSS variables:
  - In TaskLinkWidget.ts, removed the code that set the --status-color and --priority-color inline. With this change, the widget now relies on CSS to manage status and priority colors.
  - In TaskCard.ts, eliminated the explicit assignment of borderLeftColor in both createTaskCard and updateTaskCard. The card elements now use the CSS variable (--priority-color) to drive priority-based styling.

• Update CSS to support variable-based theming:
  - In task-card-bem.css, added a new rule for .task-card to set border-left-color from --priority-color (with a transparent fallback) and provided fallback colors for common priorities.
  - In task-inline-widget.css, adjusted the status and priority dot selectors:
      • Changed the status dot to use --current-status-color (with a muted text fallback).
      • Updated the priority dot to rely on --priority-color (with a muted fallback).
      • Reworked the priority-specific styles (high, normal/medium, low) to set the color property on the dot using dedicated CSS variables with appropriate fallbacks.

• Remove unused YAML update helper methods:
  - In helpers.ts, removed updateYamlFrontmatter and updateTaskProperty functions which are no longer used. This cleanup reduces code complexity and avoids maintaining legacy frontmatter manipulation logic.

These changes streamline the UI theming by centralizing color management in CSS and remove legacy code that was responsible for updating YAML frontmatter. This refactor makes future styling adjustments easier and promotes separation between presentation and business logic.
2025-06-14 07:32:15 +10:00
Callum Alpass
d5376276fc Enhance Drag & Drop Functionality
Drag and Drop Enhancements:
   • New CodeMirror Extension for Task Drops:
     - Added src/editor/TaskDropExtension.ts to capture dragover/drop
events in the editor.
     - Implements logic to intercept dropped task data, retrieve task
info via cacheManager, insert a formatted task link into the editor, and
provide user feedback (using Obsidian’s Notice API).

   • Centralized Drag & Drop Manager:
     - Introduced src/utils/DragDropManager.ts to encapsulate the logic
for making task cards draggable.
     - Exposes methods to attach and remove draggable behavior using
FullCalendar’s Draggable interface.
     - Registers proper HTML5 drag data transfer for compatibility
between the Obsidian editor and calendar views.

   • Main Plugin Updates:
     - In src/main.ts: Initialized DragDropManager and registered the
TaskDropExtension, ensuring the drag & drop infrastructure is integrated
in the plugin lifecycle (creation and cleanup).

   • View Updates:
     - Updated src/views/AdvancedCalendarView.ts to handle external
drops and eventReceive events, scheduling tasks accordingly.
     - Enhanced src/views/AgendaView.ts and src/views/TaskListView.ts to
add drag handlers to task cards using the centralized DragDropManager.
     - Modified src/views/MiniCalendarView.ts to add drop handlers on
calendar day elements, allowing users to set task due dates via drop
interactions.

   • Style Improvements:
     - Updated styles in styles/calendar-view.css,
styles/task-card-bem.css, and styles/task-inline-widget.css to visually
support new drag-and-drop states (e.g., drag-over highlights, dragging
state opacity, cursor changes).

This commit lays the groundwork not only for a robust testing strategy
that will help safeguard future refactors and feature additions, but
also for a more integrated and intuitive drag and drop user experience
across the calendar and task views.

-----------------
Reviewed-by: [Your Name]
Issue: [Link to Issue or Task]
2025-06-13 19:33:26 +10:00
Callum Alpass
f82f491a39 Refactor task update handling & cleanup inline widget styles
• Introduce a new CodeMirror state effect for task updates in TaskLinkOverlay.ts:
  - Added the taskUpdateEffect to signal task updates.
  - Updated decoration rebuild logic to check for the new state effect instead of relying on a refreshController.
  - Modified the widget cache logic to clear active widgets when a task update effect is detected.
  - Removed the now-unused refreshController from the createTaskLinkField function.

• Enhance global task update dispatching in main.ts:
  - Updated the import to include the new dispatchTaskUpdate helper.
  - Modified the task update listener to dispatch a proper state effect via dispatchTaskUpdate, passing along the task path received from the event.
  - This change ensures that the CodeMirror view correctly rebuilds decorations when a task update event occurs.

• Clean up inline widget styles:
  - Removed outdated inline task preview and instant convert button styles from task-card-bem.css.
  - Created a new stylesheet (task-inline-widget.css) with BEM-named, scoped styles for inline task widgets.
  - The new stylesheet provides a clearer structure, improved responsiveness, and appropriate separation of concerns for inline widgets.

This refactor modernizes the task link overlay update mechanism using CodeMirror’s state effects, simplifies the update flow in main.ts, and cleans up style management by migrating inline widget CSS to a dedicated file.
2025-06-10 21:16:39 +10:00