From 2d386362ca94221edef0fd46e25c3b442f347d13 Mon Sep 17 00:00:00 2001 From: mARTin Date: Tue, 17 Mar 2026 10:47:55 +0100 Subject: [PATCH] style: redesign subtask and notes inline UI - Subtasks: slide-in animation, left border accent, hover highlights, mini progress bar in indicator badge, scale effect on checkbox hover - Notes: slide-in animation, cleaner toolbar with SVG icons instead of emoji, proper dark mode support, focus ring on editor, max-height cap - Both use CSS variables for consistent theming v1.40.1 Co-Authored-By: Claude Opus 4.6 --- package.json | 2 +- src/app/globals.css | 122 ++++++++++++++++++++++------------ src/components/WeeklyView.tsx | 103 +++++++++++++--------------- 3 files changed, 128 insertions(+), 99 deletions(-) diff --git a/package.json b/package.json index 7ca9ec1..b6574aa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.40.0", + "version": "1.40.1", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "main": "index.js", "scripts": { diff --git a/src/app/globals.css b/src/app/globals.css index d08370a..fd56506 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -772,24 +772,34 @@ h3 { /* Inline Notes */ .weekly-notes-inline { width: 100%; - margin-top: 0.5rem; - padding-left: 0; - padding-right: 0.5rem; + margin-top: 6px; + padding: 0; + animation: notesSlideIn 0.2s ease-out; +} +@keyframes notesSlideIn { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: translateY(0); } } .weekly-notes-editor-inline { width: 100%; - min-height: 80px; - padding: 0.5rem; - border: 1px solid #ddd; /* Light border for editor */ - border-radius: 4px; + min-height: 60px; + max-height: 200px; + padding: 8px 10px; + border: 1px solid var(--weekly-border, #e5e7eb); + border-radius: 6px; font-family: inherit; - font-size: 0.875rem; + font-size: 0.8rem; line-height: 1.5; color: var(--weekly-text); - background: #fdfdfd; + background: var(--weekly-bg, #fff); resize: vertical; outline: none; + transition: border-color 0.15s, box-shadow 0.15s; +} +.dark-mode .weekly-notes-editor-inline { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.1); } /* Floating Notes Popup */ @@ -868,7 +878,10 @@ h3 { .weekly-notes-editor-inline:focus { border-color: var(--weekly-teal); - background: #fff; + box-shadow: 0 0 0 2px rgba(0, 154, 154, 0.1); +} +.dark-mode .weekly-notes-editor-inline:focus { + box-shadow: 0 0 0 2px rgba(0, 154, 154, 0.15); } /* Rolling Indicator */ @@ -931,12 +944,14 @@ h3 { .notes-toolbar { display: flex; align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; - padding: 0.25rem 0.5rem; - background: #f8f8f8; - border-radius: 4px; - border: 1px solid #eee; + gap: 2px; + margin-bottom: 4px; + padding: 3px 4px; + background: var(--weekly-settings-toggle-bg, #f3f4f6); + border-radius: 6px; +} +.dark-mode .notes-toolbar { + background: rgba(255, 255, 255, 0.06); } .notes-toolbar-btn { @@ -944,19 +959,23 @@ h3 { border: none; cursor: pointer; color: var(--weekly-text-light); - font-size: 0.85rem; - padding: 2px 4px; - border-radius: 3px; - min-width: 20px; + font-size: 0.75rem; + padding: 3px 7px; + border-radius: 4px; + min-width: 24px; display: flex; align-items: center; justify-content: center; font-weight: 600; + transition: background 0.1s, color 0.1s; } - .notes-toolbar-btn:hover { - background: rgba(0,0,0,0.05); + background: var(--weekly-bg, #fff); color: var(--weekly-text); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); +} +.dark-mode .notes-toolbar-btn:hover { + background: rgba(255, 255, 255, 0.1); } /* Action Buttons Styling - Float above task on hover */ @@ -1051,21 +1070,37 @@ h3 { } /* Sub-tasks */ +/* Subtask list — animated expand/collapse */ .subtask-list { list-style: none; - padding: 0.125rem 0 0.125rem 1.25rem; - margin: 0; + padding: 4px 0 4px 12px; + margin: 2px 0 0 0; + border-left: 2px solid var(--weekly-border, #e5e7eb); + margin-left: 6px; + animation: subtaskSlideIn 0.2s ease-out; +} +@keyframes subtaskSlideIn { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: translateY(0); } } .subtask-item { display: flex; align-items: center; - gap: 0.375rem; - padding: 0.125rem 0; - font-size: 0.8125rem; + gap: 6px; + padding: 3px 6px 3px 4px; + font-size: 0.8rem; color: var(--weekly-text); position: relative; cursor: grab; + border-radius: 4px; + transition: background 0.1s; +} +.subtask-item:hover { + background: rgba(0, 0, 0, 0.03); +} +.dark-mode .subtask-item:hover { + background: rgba(255, 255, 255, 0.04); } .subtask-item:active { cursor: grabbing; @@ -1073,7 +1108,7 @@ h3 { .subtask-item.completed .subtask-title { text-decoration: line-through; - opacity: 0.5; + opacity: 0.4; } .subtask-checkbox { @@ -1085,12 +1120,12 @@ h3 { display: flex; align-items: center; flex-shrink: 0; + transition: color 0.15s, transform 0.15s; } - .subtask-checkbox:hover { color: var(--weekly-teal); + transform: scale(1.15); } - .subtask-item.completed .subtask-checkbox { color: var(--weekly-teal); } @@ -1102,8 +1137,8 @@ h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + transition: color 0.1s; } - .subtask-title:hover { color: var(--weekly-teal); } @@ -1113,7 +1148,7 @@ h3 { border: none; background: transparent; outline: none; - font-size: 0.8125rem; + font-size: 0.8rem; font-family: inherit; color: var(--weekly-text); padding: 0; @@ -1122,25 +1157,28 @@ h3 { .subtask-delete-btn { background: none; border: none; - padding: 0.125rem; + padding: 2px; cursor: pointer; color: var(--weekly-text-muted, #999); opacity: 0; - transition: opacity 0.15s; + transition: opacity 0.15s, color 0.15s; display: flex; align-items: center; + border-radius: 3px; } - .subtask-item:hover .subtask-delete-btn { - opacity: 1; + opacity: 0.6; } - .subtask-delete-btn:hover { - color: #e53e3e; + color: #ef4444; + opacity: 1 !important; + background: rgba(239, 68, 68, 0.08); } .subtask-add-row { - padding: 0.125rem 0 0.25rem 1.25rem; + padding: 2px 0 4px 12px; + margin-left: 6px; + border-left: 2px solid var(--weekly-border, #e5e7eb); } .subtask-add-input { @@ -1148,15 +1186,15 @@ h3 { border: none; background: transparent; outline: none; - font-size: 0.8125rem; + font-size: 0.8rem; font-family: inherit; color: var(--weekly-text); - padding: 0.125rem 0; + padding: 2px 0; } - .subtask-add-input::placeholder { color: var(--weekly-text-muted, #999); font-style: italic; + opacity: 0.7; } /* Task Input */ diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index 0d403a8..5d660e5 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -8943,6 +8943,7 @@ function TaskItem({ const total = task.subTasks!.length; const allDone = completed === total; const expanded = isSubTasksOpen || isSubTaskInputOpen; + const pct = total > 0 ? (completed / total) * 100 : 0; return ( ); })()} @@ -8989,14 +9011,15 @@ function TaskItem({ style={{ display: "inline-flex", alignItems: "center", - padding: "2px 4px", - borderRadius: "3px", - background: isNotesOpen ? "rgba(245, 158, 11, 0.12)" : "rgba(0,0,0,0.05)", - color: isNotesOpen ? "#f59e0b" : "#888", + gap: "2px", + padding: "2px 5px", + borderRadius: "4px", + background: isNotesOpen ? "rgba(245, 158, 11, 0.1)" : "transparent", + color: isNotesOpen ? "#f59e0b" : "var(--weekly-text-muted, #999)", border: "none", cursor: "pointer", lineHeight: 1, - marginTop: "2px", + transition: "background 0.15s, color 0.15s", }} > @@ -9005,6 +9028,9 @@ function TaskItem({ + + + )} @@ -9253,50 +9279,15 @@ function TaskItem({ onClick={(e) => e.stopPropagation()} >
- + + - - - - - - Markdown supported - + md