Skip to content

Commit

Permalink
touchup: highlight only edge cell on hover
Browse files Browse the repository at this point in the history
previously highlighted the whole row, which wasn't super helpful.

also lightened the highlight color to contrast better with indicators.
  • Loading branch information
keyserj committed Dec 12, 2024
1 parent 4df6f95 commit 914b0c8
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 5 deletions.
7 changes: 4 additions & 3 deletions src/web/topic/components/CriteriaTable/CriteriaTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -286,12 +286,13 @@ export const CriteriaTable = () => {
enableStickyHeader={true}
// not very well documented in the library, but this drop zone takes up space for unknown reasons.
positionToolbarDropZone="none"
muiTablePaperProps={{
className: "criteria-table-paper",
}}
muiTableProps={{
className: tableZoomClasses,
}}
muiTablePaperProps={{
className: "criteria-table-paper",
}}
muiTableBodyRowProps={{ hover: false }}
state={{
// have to set columnOrder because otherwise new columns are appended to the end, instead of before the last cell in the case of Solution Totals when table is transposed
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- all columns should have an id or accessorKey set
Expand Down
10 changes: 8 additions & 2 deletions src/web/topic/components/CriteriaTable/EdgeCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@ import { openContextMenu } from "@/web/common/store/contextMenuActions";
import { CommonIndicators } from "@/web/topic/components/Indicator/CommonIndicators";
import { ContentIndicators } from "@/web/topic/components/Indicator/ContentIndicators";
import { Edge } from "@/web/topic/utils/graph";
import { setSelected } from "@/web/view/currentViewStore/store";
import { setSelected, useIsGraphPartSelected } from "@/web/view/currentViewStore/store";

export const EdgeCell = ({ edge }: { edge: Edge }) => {
const selected = useIsGraphPartSelected(edge.id);

return (
<div
className="flex h-full flex-col items-center justify-center"
className={
"flex h-full flex-col items-center justify-center" +
// bg-neutral-50 instead of bg-neutral-main because we specifically want to contrast with indicator backgrounds
` hover:bg-neutral-50${selected ? " bg-neutral-50" : ""}`
}
onClick={() => setSelected(edge.id)}
onContextMenu={(event) => openContextMenu(event, { edge })}
role="button"
Expand Down

0 comments on commit 914b0c8

Please sign in to comment.