From eaa8c6ca01270670b45ae8500e71cf6589696bc4 Mon Sep 17 00:00:00 2001 From: Callum Alpass Date: Fri, 15 Aug 2025 23:44:52 +1000 Subject: [PATCH] feat: add custom TaskNotes icons - Add custom TaskNotes simple and gradient SVG icons - Register tasknotes-simple icon using addIcon() with SVG masking for transparent cutouts - Replace ribbon "Create new task" icon from 'plus' to custom TaskNotes icon - Add TaskNotes icon to modal headers (task creation/edit modals) - Enhance README with centered gradient TaskNotes logo - Add comprehensive CSS styling for modal header icons - Icons use currentColor/accent color theming for consistency --- README.md | 2 +- src/main.ts | 16 ++- src/modals/TaskModal.ts | 13 +- styles/task-modal.css | 40 ++++++ tasknotes-gradient.svg | 275 ++++++++++++++++++++++++++++++++++++++++ tasknotes-simple.svg | 220 ++++++++++++++++++++++++++++++++ 6 files changed, 562 insertions(+), 4 deletions(-) create mode 100644 tasknotes-gradient.svg create mode 100644 tasknotes-simple.svg diff --git a/README.md b/README.md index 783f6e8a..4ae20b7e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# TaskNotes for Obsidian +# TaskNotes for Obsidian A task management plugin where each task is stored as an individual note using YAML frontmatter with calendar, kanban and pomodoro integration. diff --git a/src/main.ts b/src/main.ts index 3e3674a4..cbef641d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import { Notice, Plugin, WorkspaceLeaf, Editor, MarkdownView, TFile, Platform } from 'obsidian'; +import { Notice, Plugin, WorkspaceLeaf, Editor, MarkdownView, TFile, Platform, addIcon } from 'obsidian'; import { EditorView } from '@codemirror/view'; import { format } from 'date-fns'; import { @@ -166,6 +166,18 @@ export default class TaskNotesPlugin extends Plugin { await this.loadSettings(); + // Register TaskNotes icon with transparent cutouts + addIcon('tasknotes-simple', ` + + + + + + + + + `); + // Initialize only essential services that are needed for app registration this.fieldMapper = new FieldMapper(this.settings.fieldMapping); this.statusManager = new StatusManager(this.settings.customStatuses); @@ -238,7 +250,7 @@ export default class TaskNotesPlugin extends Plugin { await this.activatePomodoroStatsView(); }); - this.addRibbonIcon('plus', 'Create new task', () => { + this.addRibbonIcon('tasknotes-simple', 'Create new task', () => { this.openTaskCreationModal(); }); diff --git a/src/modals/TaskModal.ts b/src/modals/TaskModal.ts index e8db7719..9a97ed00 100644 --- a/src/modals/TaskModal.ts +++ b/src/modals/TaskModal.ts @@ -51,7 +51,18 @@ export abstract class TaskModal extends Modal { onOpen() { this.containerEl.addClass('tasknotes-plugin', 'minimalist-task-modal'); - this.titleEl.textContent = this.getModalTitle(); + + // Create header with TaskNotes icon and title + this.titleEl.empty(); + const headerContainer = this.titleEl.createDiv('modal-header-container'); + + // Add TaskNotes icon + const iconContainer = headerContainer.createDiv('modal-header-icon'); + setIcon(iconContainer, 'tasknotes-simple'); + + // Add title text + const titleText = headerContainer.createSpan('modal-header-title'); + titleText.textContent = this.getModalTitle(); this.initializeFormData().then(() => { this.createModalContent(); diff --git a/styles/task-modal.css b/styles/task-modal.css index 048d5e61..e06fb510 100644 --- a/styles/task-modal.css +++ b/styles/task-modal.css @@ -6,6 +6,46 @@ /* Modal container adjustments */ } +/* Modal header with TaskNotes icon */ +.modal-header-container { + display: flex; + align-items: center; + gap: var(--size-4-2); + margin-bottom: var(--size-4-3); +} + +.modal-header-icon { + display: flex; + align-items: center; + justify-content: center; + color: var(--color-accent); + width: 24px; + height: 24px; +} + +.modal-header-icon svg { + width: 24px !important; + height: 24px !important; + color: var(--color-accent); +} + +.modal-header-icon .svg-icon { + width: 24px !important; + height: 24px !important; +} + +.modal-header-icon .tasknotes-simple { + width: 24px !important; + height: 24px !important; + color: var(--color-accent) !important; +} + +.modal-header-title { + font-size: var(--font-ui-larger); + font-weight: var(--font-weight-bold); + color: var(--text-normal); +} + .tasknotes-plugin .minimalist-task-modal .modal-content { padding: 0; border-radius: var(--radius-l); diff --git a/tasknotes-gradient.svg b/tasknotes-gradient.svg new file mode 100644 index 00000000..aa91809e --- /dev/null +++ b/tasknotes-gradient.svg @@ -0,0 +1,275 @@ + + + + diff --git a/tasknotes-simple.svg b/tasknotes-simple.svg new file mode 100644 index 00000000..43e1b058 --- /dev/null +++ b/tasknotes-simple.svg @@ -0,0 +1,220 @@ + + + +