Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-30 03:32:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tasks): start implementing expandable edit container

Browse Source
This commit is contained in:
Elian Doran 2025-02-25 17:43:28 +02:00
parent cd78955080
commit 06831ddc76
No known key found for this signature in database
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import froca from "../../services/froca.js";
import TypeWidget from "./type_widget.js"; import TypeWidget from "./type_widget.js";
import * as taskService from "../../services/tasks.js"; import * as taskService from "../../services/tasks.js";
import type { EventData } from "../../components/app_context.js"; import type { EventData } from "../../components/app_context.js";
import { html } from "cheerio";
const TPL = ` const TPL = `
<div class="note-detail-task-list note-detail-printable"> <div class="note-detail-task-list note-detail-printable">
@ -48,6 +49,12 @@ const TPL = `
background: var(--input-background-color); background: var(--input-background-color);
border-bottom: 1px solid var(--main-background-color); border-bottom: 1px solid var(--main-background-color);
padding: 0.5em 1em; padding: 0.5em 1em;
cursor: pointer;
}
.note-detail-task-list .task-container li:hover {
background: var(--input-hover-background);
transition: background 250ms ease-in-out;
} }
.note-detail-task-list .task-container li .check { .note-detail-task-list .task-container li .check {
@ -61,12 +68,21 @@ function buildTasks(tasks: FTask[]) {
let html = ''; let html = '';
for (const task of tasks) { for (const task of tasks) {
html += `<li class="task"><input type="checkbox" class="check" data-task-id="${task.taskId}" ${task.isDone ? "checked" : ""} />${task.title}</li>`; html += `<li class="task">`;
html += `<input type="checkbox" class="check" data-task-id="${task.taskId}" ${task.isDone ? "checked" : ""} />`;
html += task.title;
html += `<div class="edit-container"></div>`;
html += `</li>`;
} }
return html; return html;
} }
function buildEditContainer() {
const html = `Edit goes here.`;
return html;
}
export default class TaskListWidget extends TypeWidget { export default class TaskListWidget extends TypeWidget {
private $taskContainer!: JQuery<HTMLElement>; private $taskContainer!: JQuery<HTMLElement>;
@ -96,6 +112,12 @@ export default class TaskListWidget extends TypeWidget {
taskService.toggleTaskDone(taskId); taskService.toggleTaskDone(taskId);
}); });
this.$taskContainer.on("click", "li", (e) => {
const $target = $(e.target);
const $editContainer = $target.find(".edit-container");
$editContainer.html(buildEditContainer());
});
} }
async #createNewTask(title: string) { async #createNewTask(title: string) {