deathcat/tinyTask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalize three-state toggle feature

Browse Source
This commit is contained in:
deathcat
2026-02-11 12:27:52 -08:00
parent d48b934f5d
commit 6be1cfb6ab
3 changed files with 79 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
index.php
View File

@@ -46,19 +46,19 @@
font-size: 1.4rem;
}
.modal {
padding: 2rem; /* or try 3rem or a % like 5% */
}
.modal {
padding: 2rem; /* or try 3rem or a % like 5% */
}
.modal.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.modal-dialog {
margin: 0;
}
.modal-dialog {
margin: 0;
}
.modal-content {
font-size: 2.0rem; /* slightly larger than Bootstrap's default (~0.875rem) */
@@ -104,6 +104,11 @@
background-color: #transparent;
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}
.btn-icon {
width: 20px;
height: 20px;
@@ -154,9 +159,9 @@
.project-color-9 .project-header { background-color: #d0e4ff; }
.project-column {
width: 100%; /* 1 per row */
}
.project-column {
width: 100%; /* 1 per row */
}
/* Small devices (landscape phones, ≥576px) */
@@ -458,7 +463,8 @@
<div class="project-body">
${project.tasks.map(task => `
<div class="d-flex justify-content-between align-items-center small-text mb-1 task-text">
<span class="${task.highlighted ? 'highlighted' : ''}" data-task-id="${task.id}">${task.name}</span>
<span class="${task.highlighted == 1 ? 'highlighted' : ''} ${task.highlighted == 2 ? 'completed' : ''}".trim()
data-task-id="${task.id}">${task.name}</span>
<div class="d-flex">
<button class="btn-icon add-subtask-btn" data-task-id="${task.id}" title="Add Subtask">
<i class="bi bi-plus"></i>
@@ -471,7 +477,8 @@
<div class="ms-3">
${task.subtasks.map(sub => `
<div class="d-flex justify-content-between align-items-center small-text mb-1">
<span class="${sub.highlighted ? 'highlighted' : ''}" data-subtask-id="${sub.id}">${sub.name}</span>
<span class="${sub.highlighted == 1 ? 'highlighted' : ''} ${sub.highlighted == 2 ? 'completed' : ''}".trim()
data-subtask-id="${sub.id}">${sub.name}</span>
<button class="btn-icon text-danger delete-subtask-btn" data-subtask-id="${sub.id}" title="Delete Subtask">
<i class="bi bi-dash"></i>
</button>
@@ -615,31 +622,43 @@ document.querySelectorAll('.project-column').forEach(col => {
});
});
document.querySelectorAll('[data-task-id]').forEach(span => {
span.addEventListener('click', () => {
const taskId = span.dataset.taskId;
const isHighlighted = span.classList.toggle('highlighted');
document.querySelectorAll('[data-task-id]').forEach(span => {
span.addEventListener('click', () => {
const taskId = span.dataset.taskId;
fetch('toggle_highlight.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'task', id: taskId, highlighted: isHighlighted })
});
});
});
fetch('toggle_highlight.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'task', id: taskId })
})
.then(res => res.json())
.then(data => {
if (!data.success) return;
document.querySelectorAll('[data-subtask-id]').forEach(span => {
span.addEventListener('click', () => {
const subtaskId = span.dataset.subtaskId;
const isHighlighted = span.classList.toggle('highlighted');
span.classList.toggle('highlighted', data.highlighted === 1);
span.classList.toggle('completed', data.highlighted === 2);
});
});
});
fetch('toggle_highlight.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'subtask', id: subtaskId, highlighted: isHighlighted })
});
});
});
document.querySelectorAll('[data-subtask-id]').forEach(span => {
span.addEventListener('click', () => {
const subtaskId = span.dataset.subtaskId;
fetch('toggle_highlight.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'subtask', id: subtaskId })
})
.then(res => res.json())
.then(data => {
if (!data.success) return;
span.classList.toggle('highlighted', data.highlighted === 1);
span.classList.toggle('completed', data.highlighted === 2);
});
});
});
let itemToDelete = null;