feat: replace status dropdown with one-click toggle buttons

Replace <select> in side panel with 4 toggle buttons (To Do / Doing /
Pending / Done). Clicking a button immediately sends the PATCH status
API call. Active button is highlighted with status-specific colors and
shadow. saveTask now only handles title/description changes.
This commit is contained in:
Yuyao Huang
2026-05-09 16:16:58 +08:00
parent 43ca6b8462
commit 9c1d45506a
3 changed files with 93 additions and 13 deletions
+66
View File
@@ -97,6 +97,72 @@
border-color: #28a745;
}
.status-toggle {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.status-btn {
padding: 0.5rem 1rem;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.15s ease;
background: #f8f9fa;
color: #666;
}
.status-btn.todo:hover {
border-color: #667eea;
color: #667eea;
}
.status-btn.todo.active {
background: #f8f9fa;
border-color: #667eea;
color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.status-btn.doing:hover {
border-color: #ffc107;
color: #b8860b;
}
.status-btn.doing.active {
background: #fff3cd;
border-color: #ffc107;
color: #856404;
box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}
.status-btn.pending:hover {
border-color: #2196F3;
color: #2196F3;
}
.status-btn.pending.active {
background: #e7f3ff;
border-color: #2196F3;
color: #0d6efd;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.status-btn.done:hover {
border-color: #28a745;
color: #28a745;
}
.status-btn.done.active {
background: #d4edda;
border-color: #28a745;
color: #155724;
box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}
.task-item:hover {
background: #e9ecef;
}