tod
/
odin-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Little icons changes for tasks

This commit is contained in:
NetMan 2024-02-09 02:38:03 +01:00
parent 45e4a28cc1
commit 7674902321
1 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/elements/task.js
View File

@ -1,9 +1,34 @@
import generateElement from "../modules/genElement";
import { createElement as createIcon, Trash, Pencil, Star, AlarmClock } from 'lucide';
import { createElement as createIcon, Trash, Pencil, Star, AlarmClock, Archive } from 'lucide';
import { format, isPast } from 'date-fns';
import { idValue } from "../modules/refreshDOM";
function generateTask(title, description, dueDate, priority, done) {
const css = {};
css.doneCheck = "peer-checked/done";
css.doneColor = `${css.doneCheck}:text-slate-300`;
css.doneStrike = `${css.doneCheck}:line-through`;
const icons = Object.create({
stroke(icon, stroke) {
icon.classList.add(`*:stroke-${stroke}`);
return icon;
},
get trash() {
const icon = createIcon(Trash);
return this.stroke(icon, 1);
},
get edit() {
const icon = createIcon(Pencil);
return this.stroke(icon, 1);
},
get archive() {
const icon = createIcon(Archive);
return this.stroke(icon, 1);
},
})
const task = generateElement({
element: "div",
className: "task flex gap-2 justify-between",
@ -12,7 +37,7 @@ function generateTask(title, description, dueDate, priority, done) {
const doneElement = generateElement({
element: "input",
type: "checkbox",
className: "done block",
className: "done block peer/done",
checked: done,
})
const priorityCheckbox = generateElement({
@ -24,42 +49,52 @@ function generateTask(title, description, dueDate, priority, done) {
const priorityElement = generateElement({
element: "label",
"_for": `priority-${idValue.val}`,
className: `priority peer-checked/priority:bg-yellow-500 block cursor-pointer"`,
className: `priority peer-checked/priority:*:fill-yellow-500
peer-checked/priority:*:stroke-yellow-500 block
cursor-pointer *:stroke-slate-300 *:stroke-1
peer-checked/priority:*:stroke-2
peer-checked/priority/done:*:bg-yellow-500`,
})
priorityElement.append(createIcon(Star));
const titleElement = generateElement({
element: "div",
className: "title block",
className: `title block ${css.doneStrike} ${css.doneColor}`,
innerHTML: `${title}`,
})
const descriptionElement = generateElement({
element: "div",
className: "description block flex-1",
className: `description block flex-1 ${css.doneColor} ${css.doneStrike}`,
innerHTML: `${description}`,
})
function bodge() {
let icon = createIcon(AlarmClock); icon.classList.add("inline-block"); return icon.outerHTML;
let icon = createIcon(AlarmClock); icon.classList.add("inline-block", "*:stroke-1"); return icon.outerHTML;
}
const dueDateElement = generateElement({
element: "div",
className: `due-date block${isPast(dueDate) ? ` text-red-300` : ""}`,
className: `due-date block${isPast(dueDate) ? ` text-red-300 ${css.doneColor} ${css.doneStrike}` : ""} flex gap-1`,
innerHTML: `${dueDate ? `${bodge()}` + format(dueDate, "dd.MM.yyyy hh:mm") : ""}`,
})
const changeDetailsButton = generateElement({
const changeDetailsBtn = generateElement({
element: "button",
className: "change-details block",
})
changeDetailsButton.append(createIcon(Pencil));
const removeButton = generateElement({
changeDetailsBtn.append(icons.edit);
const archiveBtn = generateElement({
element: "button",
className: "archive block",
})
archiveBtn.append(icons.archive);
const removeBtn = generateElement({
element: "button",
className: "remove block",
})
removeButton.append(createIcon(Trash));
removeBtn.append(icons.trash);
task.append(
doneElement, priorityCheckbox, priorityElement,
titleElement, descriptionElement, dueDateElement,
changeDetailsButton, removeButton
changeDetailsBtn, archiveBtn, removeBtn
);
idValue.val += 1;
return task;