diff --git a/hunts/src/NameCell.tsx b/hunts/src/NameCell.tsx index 4599675d..ccddfdb1 100644 --- a/hunts/src/NameCell.tsx +++ b/hunts/src/NameCell.tsx @@ -1,9 +1,7 @@ import React from "react"; import { Badge, Popover, OverlayTrigger } from "react-bootstrap"; import { useSelector, useDispatch } from "react-redux"; -import { faWrench } from "@fortawesome/free-solid-svg-icons"; import { showModal } from "./modalSlice"; -import ClickableIcon from "./ClickableIcon"; import { toggleCollapsed } from "./collapsedPuzzlesSlice"; import { IconChevronDown, IconChevronRight } from "@tabler/icons"; import { faCircle } from "@fortawesome/free-solid-svg-icons"; @@ -84,6 +82,7 @@ const useToggleRowExpandedProps = (row: Row) => { ...originalProps, onClick: (e: MouseEvent) => { dispatch(toggleCollapsed({ rowId: row.id, huntId: CURRENT_HUNT_ID })); + e.stopPropagation(); return originalProps.onClick(e); }, }; @@ -109,8 +108,32 @@ export default function NameCell({ return (
{ + setUiHovered(true); + }} + onMouseLeave={() => { + setUiHovered(false); + }} + onClick={() => { + dispatch( + showModal({ + type: "EDIT_PUZZLE", + props: { + huntId, + puzzleId: row.values.id, + name: row.values.name, + url: row.values.url, + isMeta: row.values.is_meta, + hasChannels: !!row.original.chat_room?.text_channel_url, + }, + }) + ); + }} style={{ + // TODO: abstract these properties out into their own CSS class paddingLeft: `${row.depth * 2}rem`, + minHeight: '1.4rem', cursor: 'pointer', + backgroundColor: uiHovered ? '#ffe579' : undefined }} >
META{" "} ) : null} -
- - dispatch( - showModal({ - type: "EDIT_PUZZLE", - props: { - huntId, - puzzleId: row.values.id, - name: row.values.name, - url: row.values.url, - isMeta: row.values.is_meta, - hasChannels: !!row.original.chat_room?.text_channel_url, - }, - }) - ) - } - /> -
); diff --git a/hunts/src/NotesCell.tsx b/hunts/src/NotesCell.tsx index 103440eb..0ef8059d 100644 --- a/hunts/src/NotesCell.tsx +++ b/hunts/src/NotesCell.tsx @@ -1,57 +1,76 @@ -import React from "react"; -import { showModal } from "./modalSlice"; +import React, { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; -import { faWrench, faTag } from "@fortawesome/free-solid-svg-icons"; -import ClickableIcon from "./ClickableIcon"; +import { editNotes } from "./puzzlesSlice"; -import huntReducer from "./huntSlice"; - -import type { RootState } from "./store"; +import type { Dispatch, RootState } from "./store"; import type { Hunt, Row } from "./types"; export default function NotesCell({ row, value }: { row: Row; value: string }) { const { id: huntId } = useSelector((state) => state.hunt); - const [uiHovered, setUiHovered] = React.useState(false); - const dispatch = useDispatch(); + const [uiHovered, setUiHovered] = useState(false); + const [ editing, setEditing ] = useState(false); + const [ editedNotesValue, setEditedNotesValue ] = useState(value); + const dispatch = useDispatch(); return (
{ - setUiHovered(true); - }} - onMouseLeave={() => { - setUiHovered(false); - }} + onMouseEnter={() => { + setUiHovered(true); + }} + onMouseLeave={() => { + setUiHovered(false); + }} + onClick={() => { + if (!editing) { + setEditing(true); + setEditedNotesValue(value); + } + }} + // TODO: abstract these properties out into their own CSS class + style={{width: "100%", minHeight: '1.4rem', cursor: !editing ? 'pointer' : undefined, backgroundColor: uiHovered && !editing ? '#ffe579' : undefined}} > - {value} -
{ - setUiHovered(true); - }} - onMouseLeave={() => { - setUiHovered(false); - }} - > - - dispatch( - showModal({ - type: "EDIT_NOTES", - props: { - huntId, + {editing ? +
+