diff --git a/src/components/task-list/task-list-table.module.css b/src/components/task-list/task-list-table.module.css index c80c60e9f..64ffdfdad 100644 --- a/src/components/task-list/task-list-table.module.css +++ b/src/components/task-list/task-list-table.module.css @@ -13,6 +13,10 @@ background-color: #f5f5f5; } +.taskListTableRow.taskListTableRowSelected { + background-color: #f8fafc; +} + .taskListCell { display: table-cell; vertical-align: middle; @@ -22,6 +26,16 @@ padding: 0 6px; } +.taskListCell:not(.taskListCellSelected):hover { + background-color: #eff6ff; + box-shadow: inset 0 0 0 1px #93c5fd; +} + +.taskListCellSelected { + background-color: #dbeafe; + box-shadow: inset 0 0 0 2px #3b82f6; +} + .overlayEditor { position: fixed; z-index: 9999; diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index 77e0a6adf..efcbdb0e8 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -68,6 +68,11 @@ export const TaskListTableDefault: React.FC<{ const columnIds = columns.map(column => typeof column === "string" ? column : column.id ); + const selectedColumnId = editingState?.columnId ?? null; + const hasValidSelection = + editingState?.mode !== "viewing" && + !!selectedColumnId && + columnIds.includes(selectedColumnId as VisibleField); const resolveColumnId = (column: (typeof columns)[number]) => (typeof column === "string" ? column : column.id) as VisibleField; @@ -244,6 +249,7 @@ export const TaskListTableDefault: React.FC<{ } else if (t.hideChildren === true) { expanderSymbol = "▶"; } + const isSelectedRow = hasValidSelection && editingState?.rowId === t.id; const renderCell = (field: VisibleField) => { switch (field) { @@ -304,16 +310,20 @@ export const TaskListTableDefault: React.FC<{ }; return (