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

Change task-related icons and update CSS styling for improved UI clarity and interactivity.

Browse source 
• 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.
This commit is contained in:
Callum Alpass 2025-06-29 10:52:37 +10:00
parent 71d59889f4
commit 86644e22bc
4 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/editor/TaskLinkWidget.ts
View file

@ -348,7 +348,7 @@ export class TaskLinkWidget extends WidgetType {
attr: { 'title': 'Task options' },
text: ''
});
setIcon(pencilIcon, 'pencil');
setIcon(pencilIcon, 'ellipsis-vertical');
// Store data for interactions
container.dataset.taskPath = this.taskInfo.path;

4
src/ui/TaskCard.ts
View file

@ -253,8 +253,8 @@ export function createTaskCard(task: TaskInfo, plugin: TaskNotesPlugin, options:
}
});
// Use Obsidian's built-in pencil icon
setIcon(contextIcon, 'pencil');
// Use Obsidian's built-in ellipsis-vertical icon
setIcon(contextIcon, 'ellipsis-vertical');
contextIcon.addEventListener('click', async (e) => {
e.stopPropagation();

2
styles/task-card-bem.css
View file

@ -217,7 +217,7 @@
.tasknotes-plugin .task-card__recurring-indicator {
position: absolute;
top: 6px;
top: 8px;
right: 26px;
width: 16px;
height: 16px;

19
styles/task-inline-widget.css
View file

@ -157,7 +157,7 @@
/* Pencil icon styling */
.tasknotes-plugin .task-inline-preview__pencil {
opacity: 0.4;
opacity: 0;
cursor: pointer;
display: inline-block;
width: 12px;
@ -200,6 +200,12 @@
color: var(--text-muted);
}
/* Completed task title hover effect */
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title:hover {
color: var(--interactive-accent);
opacity: 0.9;
}
.tasknotes-plugin span.task-inline-preview.task-inline-preview--completed,
.tasknotes-plugin.task-inline-preview.task-inline-preview--completed,
.tasknotes-plugin .task-inline-preview--completed {
@ -303,6 +309,17 @@
max-width: 250px; /* Give more room for task titles */
flex-shrink: 1; /* Allow shrinking if needed */
vertical-align: middle;
cursor: pointer;
transition: color 0.15s ease;
border-radius: 2px;
padding: 1px 2px;
margin: -1px -2px;
}
/* Task title hover effect */
.tasknotes-plugin .task-inline-preview__title:hover {
color: var(--interactive-accent);
background-color: var(--background-modifier-hover);
}
/* Priority indicator */