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

fix: align checkboxes, right-align end icons, fix weather overlap

Browse Source 
- borderLeft now always 4px (transparent when no project/kanban color)
  so all tasks have the same left padding (8px) and checkboxes align
- Rolling and provider icons moved from inline text flow to a right-
  aligned sibling span in the outer flex row (always at line end)
- paddingRight: 30px when weatherEnabled to prevent temperature overlay
  from overlapping task text

v1.111.3
This commit is contained in:
mARTin-B78 2026-05-11 15:36:57 +02:00
parent 10e7ba98f1
commit 4a5910779e
2 changed files with 24 additions and 33 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.2", "version": "1.111.3",
"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": {

51
src/components/GridTaskBlock.tsx
View File

@ -267,10 +267,10 @@ export function GridTaskBlock({
const stageColor = task.kanbanStage ? kanbanStages.find(s => s.id === task.kanbanStage)?.color : null; const stageColor = task.kanbanStage ? kanbanStages.find(s => s.id === task.kanbanStage)?.color : null;
if (stageColor) return `4px solid ${stageColor}`; if (stageColor) return `4px solid ${stageColor}`;
if (task.project?.color) return `4px solid ${task.project.color}`; if (task.project?.color) return `4px solid ${task.project.color}`;
return (isNotesOpen || isSubTasksOpen || isResizing) ? `1px solid ${darkMode ? "#404040" : "#e0e0e0"}` : "none"; return `4px solid transparent`;
})(), })(),
borderRadius: (isNotesOpen || isSubTasksOpen || isResizing) ? "4px" : "0", borderRadius: (isNotesOpen || isSubTasksOpen || isResizing) ? "4px" : "0",
padding: (task.kanbanStage && kanbanStages.some(s => s.id === task.kanbanStage)) || task.project?.color ? "2px 4px 2px 8px" : "2px 4px", padding: weatherEnabled ? "2px 30px 2px 8px" : "2px 4px 2px 8px",
boxShadow: (isNotesOpen || isSubTasksOpen || isResizing) ? "0 1px 3px rgba(0,0,0,0.05)" : "none", boxShadow: (isNotesOpen || isSubTasksOpen || isResizing) ? "0 1px 3px rgba(0,0,0,0.05)" : "none",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -496,50 +496,41 @@ export function GridTaskBlock({
</svg> </svg>
</button> </button>
)} )}
{/* Rolling indicator */} </span>
{task.isRolling && !task.completed && (
<span
title="Auto-rolling task"
style={{
display: "inline-flex",
alignItems: "center",
padding: "1px 3px",
color: "var(--weekly-teal, #009a9a)",
marginLeft: "3px",
flexShrink: 0,
}}
>
<svg viewBox="0 0 24 24" width="10" height="10" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<polyline points="23 4 23 10 17 10" />
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
</svg>
</span> </span>
)} )}
{(() => { {editingTaskId !== task.id && (() => {
const provider = task.externalProvider const rolling = task.isRolling && !task.completed;
|| (task.externalId?.startsWith("synology::") ? "synology" : null); const provider = task.externalProvider || (task.externalId?.startsWith("synology::") ? "synology" : null);
if (!provider) return null; if (!rolling && !provider) return null;
const iconMap: Record<string, { icon: any; color: string; label: string }> = { const iconMap: Record<string, { icon: any; color: string; label: string }> = {
google: { icon: faGoogle, color: "#4285F4", label: "Google" }, google: { icon: faGoogle, color: "#4285F4", label: "Google" },
outlook: { icon: faMicrosoft, color: "#0078D4", label: "Microsoft" }, outlook: { icon: faMicrosoft, color: "#0078D4", label: "Microsoft" },
apple: { icon: faApple, color: "#555", label: "Apple" }, apple: { icon: faApple, color: "#555", label: "Apple" },
synology: { icon: faServer, color: "#007AFF", label: "Synology" }, synology: { icon: faServer, color: "#007AFF", label: "Synology" },
}; };
return (
<span style={{ display: "flex", alignItems: "flex-start", gap: "3px", flexShrink: 0, paddingTop: "2px" }}>
{rolling && (
<span title="Auto-rolling task" style={{ display: "inline-flex", alignItems: "center", color: "var(--weekly-teal, #009a9a)" }}>
<svg viewBox="0 0 24 24" width="10" height="10" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<polyline points="23 4 23 10 17 10" />
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
</svg>
</span>
)}
{provider && (() => {
const info = iconMap[provider]; const info = iconMap[provider];
if (!info) return null; if (!info) return null;
return ( return (
<span <span className="flex-shrink-0" aria-label={`Synced with ${info.label}`} style={{ display: "inline-flex", alignItems: "center", opacity: 0.55 }}>
className="flex-shrink-0"
aria-label={`Synced with ${info.label}`}
style={{ display: "inline-flex", alignItems: "center", opacity: 0.55, marginLeft: "3px" }}
>
<FontAwesomeIcon icon={info.icon} aria-hidden="true" style={{ width: 10, height: 10, color: info.color }} /> <FontAwesomeIcon icon={info.icon} aria-hidden="true" style={{ width: 10, height: 10, color: info.color }} />
</span> </span>
); );
})()} })()}
</span> </span>
</span> );
)} })()}
</div> </div>
<div <div