Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 10:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tasks): improve layout

Browse Source
This commit is contained in:
Elian Doran 2025-02-26 21:37:40 +02:00
parent 2ea85dc238
commit 09f7645925
No known key found for this signature in database
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/public/app/widgets/type_widgets/task_list.ts
View File

@ -26,7 +26,7 @@ const TPL = `
padding: 10px;
}
.note-detail-task-list header {
.note-detail-task-list > header {
position: sticky;
top: 0;
z-index: 100;
@ -60,15 +60,23 @@ const TPL = `
transition: background 250ms ease-in-out;
}
.note-detail-task-list .task-container li > header {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.note-detail-task-list .task-container li .check {
margin-right: 0.5em;
}
.note-detail-task-list .task-container li .title {
flex-grow: 1;
}
.note-detail-task-list .task-container li .due-date {
float: right;
font-size: 0.9rem;
margin-top: 0.1rem;
vertical-align: middle;
}
.note-detail-task-list .task-container li.overdue .due-date {
@ -91,8 +99,9 @@ function buildTasks(tasks: FTask[]) {
}
html += `<li class="${classes.join(" ")}" data-task-id="${task.taskId}">`;
html += "<header>";
html += `<input type="checkbox" class="check" ${task.isDone ? "checked" : ""} />`;
html += task.title;
html += `<span class="title">${task.title}</span>`;
if (task.dueDate) {
html += `<span class="due-date">`;
html += `<span class="bx bx-calendar"></span> `;
@ -106,6 +115,7 @@ function buildTasks(tasks: FTask[]) {
});
html += "</span>";
}
html += "</header>";
html += `<div class="edit-container"></div>`;
html += `</li>`;
}
@ -151,20 +161,19 @@ export default class TaskListWidget extends TypeWidget {
});
this.$taskContainer.on("click", "li", (e) => {
const $target = $(e.target);
// Don't collapse when clicking on an inside element such as the due date dropdown.
if (e.currentTarget !== e.target) {
if ((e.target as HTMLElement).tagName === "INPUT") {
return;
}
const $target = $(e.target);
// Clear existing edit containers.
const $existingContainers = this.$taskContainer.find(".edit-container");
$existingContainers.html("");
// Add the new edit container.
const $editContainer = $target.find(".edit-container");
const $editContainer = $target.closest("li").find(".edit-container");
const task = this.#getCorrespondingTask($target);
if (task) {
$editContainer.html(buildEditContainer(task));
@ -192,7 +201,11 @@ export default class TaskListWidget extends TypeWidget {
}
#getCorrespondingTask($target: JQuery<HTMLElement>) {
const taskId = $target.closest("li")[0].dataset.taskId;
const $parentEl = $target.closest("li");
if (!$parentEl.length) {
return;
}
const taskId = $parentEl[0].dataset.taskId;
if (!taskId) {
return;
}