UI improvements: move priority to bottom right, buttons inside card
- Move archive/delete buttons inside task card (top right, smaller) - Move priority dropdown to bottom right of card - Remove status dropdown (redundant with drag & drop) - Cleaner card layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
235fe7c11c
commit
5fdcd5a273
|
|
@ -160,30 +160,30 @@
|
||||||
.task-card { position: relative; }
|
.task-card { position: relative; }
|
||||||
.task-actions {
|
.task-actions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -8px;
|
top: 4px;
|
||||||
right: -8px;
|
right: 4px;
|
||||||
display: none;
|
display: none;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
.task-card:hover .task-actions { display: flex; }
|
.task-card:hover .task-actions { display: flex; }
|
||||||
.task-action-btn {
|
.task-action-btn {
|
||||||
width: 24px;
|
width: 20px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 4px;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.task-action-btn.archive { background: #3b82f6; font-size: 12px; }
|
.task-action-btn.archive { background: #3b82f6; }
|
||||||
.task-action-btn.delete { background: #ef4444; }
|
.task-action-btn.delete { background: #ef4444; }
|
||||||
.task-action-btn:hover { transform: scale(1.1); }
|
.task-action-btn:hover { opacity: 1; }
|
||||||
/* Inline editing styles */
|
/* Inline editing styles */
|
||||||
.edit-input {
|
.edit-input {
|
||||||
background: #1e293b;
|
background: #1e293b;
|
||||||
|
|
@ -216,6 +216,11 @@
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
.task-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Modal styles */
|
/* Modal styles */
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
|
|
@ -655,24 +660,9 @@
|
||||||
<div class="task-header">
|
<div class="task-header">
|
||||||
<div style="flex:1">
|
<div style="flex:1">
|
||||||
<div class="task-title editable" data-field="title">${escapeHtml(task.title)}</div>
|
<div class="task-title editable" data-field="title">${escapeHtml(task.title)}</div>
|
||||||
<div class="task-controls">
|
<div class="task-meta">${task.id} | ${task.projectName}</div>
|
||||||
<span class="task-meta">${task.id} | ${task.projectName}</span>
|
|
||||||
<select class="inline-select" data-field="status" title="Change status">
|
|
||||||
<option value="To Do" ${task.status === 'To Do' ? 'selected' : ''}>To Do</option>
|
|
||||||
<option value="In Progress" ${task.status === 'In Progress' ? 'selected' : ''}>In Progress</option>
|
|
||||||
<option value="Done" ${task.status === 'Done' ? 'selected' : ''}>Done</option>
|
|
||||||
<option value="Won't Do" ${task.status === "Won't Do" ? 'selected' : ''}>Won't Do</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<select class="inline-select" data-field="priority" title="Change priority"
|
|
||||||
style="background:${currentPriority ? priorityBgColors[currentPriority] : '#334155'};color:${currentPriority ? priorityTextColors[currentPriority] : '#94a3b8'};font-weight:500;text-transform:uppercase;">
|
|
||||||
<option value="" ${!task.priority ? 'selected' : ''}>-</option>
|
|
||||||
<option value="low" ${task.priority?.toLowerCase() === 'low' ? 'selected' : ''}>Low</option>
|
|
||||||
<option value="medium" ${task.priority?.toLowerCase() === 'medium' ? 'selected' : ''}>Med</option>
|
|
||||||
<option value="high" ${task.priority?.toLowerCase() === 'high' ? 'selected' : ''}>High</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
${task.labels && task.labels.length > 0 ? `
|
${task.labels && task.labels.length > 0 ? `
|
||||||
<div class="labels">
|
<div class="labels">
|
||||||
${task.labels.map(l => `<span class="label">${escapeHtml(l)}</span>`).join('')}
|
${task.labels.map(l => `<span class="label">${escapeHtml(l)}</span>`).join('')}
|
||||||
|
|
@ -682,6 +672,15 @@
|
||||||
<div class="assignees">${task.assignee.join(', ')}</div>
|
<div class="assignees">${task.assignee.join(', ')}</div>
|
||||||
` : ''}
|
` : ''}
|
||||||
<div class="task-description" data-field="description">${task.description ? escapeHtml(task.description.slice(0, 500)) + (task.description.length > 500 ? '...' : '') : '<em style="color:#64748b">Click to add description...</em>'}</div>
|
<div class="task-description" data-field="description">${task.description ? escapeHtml(task.description.slice(0, 500)) + (task.description.length > 500 ? '...' : '') : '<em style="color:#64748b">Click to add description...</em>'}</div>
|
||||||
|
<div class="task-footer">
|
||||||
|
<select class="inline-select" data-field="priority" title="Change priority"
|
||||||
|
style="background:${currentPriority ? priorityBgColors[currentPriority] : '#334155'};color:${currentPriority ? priorityTextColors[currentPriority] : '#94a3b8'};font-weight:500;text-transform:uppercase;">
|
||||||
|
<option value="" ${!task.priority ? 'selected' : ''}>-</option>
|
||||||
|
<option value="low" ${task.priority?.toLowerCase() === 'low' ? 'selected' : ''}>Low</option>
|
||||||
|
<option value="medium" ${task.priority?.toLowerCase() === 'medium' ? 'selected' : ''}>Med</option>
|
||||||
|
<option value="high" ${task.priority?.toLowerCase() === 'high' ? 'selected' : ''}>High</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Add event listeners for action buttons
|
// Add event listeners for action buttons
|
||||||
|
|
@ -694,13 +693,6 @@
|
||||||
deleteTask(task.projectPath, task.id, task.title);
|
deleteTask(task.projectPath, task.id, task.title);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Status dropdown
|
|
||||||
card.querySelector('[data-field="status"]').addEventListener('change', (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
updateTask(task.projectPath, task.id, { status: e.target.value });
|
|
||||||
});
|
|
||||||
card.querySelector('[data-field="status"]').addEventListener('click', (e) => e.stopPropagation());
|
|
||||||
|
|
||||||
// Priority dropdown
|
// Priority dropdown
|
||||||
card.querySelector('[data-field="priority"]').addEventListener('change', (e) => {
|
card.querySelector('[data-field="priority"]').addEventListener('change', (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue