mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: always reserve icon column width for checkbox/text alignment

Browse Source 
Icon column (14px fixed width) is now always rendered when priority or
project icon settings are enabled, even when a task has no icons.
Each icon slot is a 12×12px centered container so icons are the same
size and horizontally aligned. Increased gap to 2px for breathing room.

v1.111.2
This commit is contained in:
mARTin-B78 2026-05-11 15:15:40 +02:00
parent cb17c91ca6
commit 10e7ba98f1
2 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.111.1", "version": "1.111.2",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

56
src/components/GridTaskBlock.tsx
View File

@ -341,31 +341,37 @@ export function GridTaskBlock({
setEditingTaskId(task.id); setEditingTaskId(task.id);
}} }}
> >
{(() => { {(showPriorityIcons || showProjectIcons) && (
const pb = showPriorityIcons ? getPriorityBadge(task, priorityStyle, 11) : null; <span style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", width: "14px", minWidth: "14px", flexShrink: 0, gap: "2px", paddingTop: "1px", opacity: task.completed && showTaskCheckboxes ? 0.5 : 1 }}>
const hasProject = !!(showProjectIcons && task.project); {showPriorityIcons && (() => {
if (!pb && !hasProject) return null; const pb = getPriorityBadge(task, priorityStyle, 11);
return ( return pb ? (
<span style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", flexShrink: 0, gap: "1px", paddingTop: "2px", opacity: task.completed && showTaskCheckboxes ? 0.5 : 1 }}> <span title={pb.label} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "12px", height: "12px" }}>
{pb && <span title={pb.label} style={{ display: "inline-flex", alignItems: "center" }}>{pb.node}</span>} {pb.node}
{hasProject && (() => { </span>
const rawIcon = task.project!.icon || ""; ) : null;
const normalised = rawIcon.startsWith("fa") && rawIcon.length > 2 && rawIcon[2] === rawIcon[2].toUpperCase() })()}
? rawIcon.slice(2, 3).toLowerCase() + rawIcon.slice(3) {showProjectIcons && task.project && (() => {
: rawIcon; const rawIcon = task.project!.icon || "";
const found = allIcons.find(i => i.name === normalised || i.name === rawIcon); const normalised = rawIcon.startsWith("fa") && rawIcon.length > 2 && rawIcon[2] === rawIcon[2].toUpperCase()
if (found) { ? rawIcon.slice(2, 3).toLowerCase() + rawIcon.slice(3)
return found.type === "fa" : rawIcon;
? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", color: task.project!.color || "#888" }} /> const found = allIcons.find(i => i.name === normalised || i.name === rawIcon);
: <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ display: "inline-block" }} />; return (
} <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "12px", height: "12px" }}>
return task.project!.icon {found
? <span style={{ fontSize: "11px" }}>{task.project!.icon}</span> ? (found.type === "fa"
: <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />; ? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />
})()} : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ display: "inline-block" }} />)
</span> : (task.project!.icon
); ? <span style={{ fontSize: "11px" }}>{task.project!.icon}</span>
})()} : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />)
}
</span>
);
})()}
</span>
)}
{showTaskCheckboxes && ( {showTaskCheckboxes && (
<input <input
type="checkbox" type="checkbox"