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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user