jeffemmett
/
backlog-md
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Jeff Emmett 2025-12-04 02:49:49 -08:00
parent 235fe7c11c
commit 5fdcd5a273
1 changed files with 24 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/aggregator/web/index.html
View File

@ -160,30 +160,30 @@
.task-card { position: relative; }
.task-actions {
position: absolute;
top: -8px;
right: -8px;
top: 4px;
right: 4px;
display: none;
gap: 4px;
z-index: 10;
}
.task-card:hover .task-actions { display: flex; }
.task-action-btn {
width: 24px;
height: 24px;
border-radius: 50%;
width: 20px;
height: 20px;
border-radius: 4px;
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-size: 12px;
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:hover { transform: scale(1.1); }
.task-action-btn:hover { opacity: 1; }
/* Inline editing styles */
.edit-input {
background: #1e293b;
@ -216,6 +216,11 @@
gap: 0.5rem;
margin-top: 0.25rem;
}
.task-footer {
display: flex;
justify-content: flex-end;
margin-top: 0.5rem;
}
/* Modal styles */
.modal-overlay {
@ -655,23 +660,8 @@
<div class="task-header">
<div style="flex:1">
<div class="task-title editable" data-field="title">${escapeHtml(task.title)}</div>
<div class="task-controls">
<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 class="task-meta">${task.id} | ${task.projectName}</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 ? `
<div class="labels">
@ -682,6 +672,15 @@
<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-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
@ -694,13 +693,6 @@
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
card.querySelector('[data-field="priority"]').addEventListener('change', (e) => {
e.stopPropagation();