diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 5cd7ee6..fc7e819 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -3,7 +3,6 @@ import { CalendarMonth, Check, Checklist, - CloseFullscreen, Edit, History, HourglassEmpty, @@ -68,6 +67,7 @@ import { import Priorities from '../../utils/Priorities' import { getSafeBottomPadding } from '../../utils/SafeAreaUtils.js' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' +import NoteViewerModal from '../Modals/Inputs/NoteViewerModal' import LoadingComponent from '../components/Loading.jsx' import RichTextEditor from '../components/RichTextEditor.jsx' import SubTasks from '../components/SubTask.jsx' @@ -92,7 +92,7 @@ const ChoreView = () => { isOpen: false, }) const [chorePriority, setChorePriority] = useState(null) - const [isDescriptionOpen, setIsDescriptionOpen] = useState(false) + const [noteViewerConfig, setNoteViewerConfig] = useState({ isOpen: false }) const [timerActionConfig, setTimerActionConfig] = useState({ isOpen: false }) const { data: circleMembersData, isLoading: isCircleMembersLoading } = useCircleMembers() @@ -688,13 +688,19 @@ const ChoreView = () => { p: 2, borderRadius: 'lg', mb: 1, + cursor: 'pointer', + }} + onClick={() => { + setNoteViewerConfig({ + isOpen: true, + title: 'Description', + content: chore.description, + onClose: () => setNoteViewerConfig({ isOpen: false }), + }) }} > { - setIsDescriptionOpen(!isDescriptionOpen) - }} size='sm' sx={{ position: 'absolute', @@ -702,12 +708,12 @@ const ChoreView = () => { right: 5, }} > - {isDescriptionOpen ? : } + @@ -721,10 +727,42 @@ const ChoreView = () => { Previous note: - - - {chore.notes || '--'} - + { + setNoteViewerConfig({ + isOpen: true, + title: 'Previous Note', + content: chore.notes, + onClose: () => setNoteViewerConfig({ isOpen: false }), + }) + }} + > + + + + + + )} @@ -1041,6 +1079,7 @@ const ChoreView = () => { + ) diff --git a/src/views/Modals/Inputs/NoteViewerModal.jsx b/src/views/Modals/Inputs/NoteViewerModal.jsx new file mode 100644 index 0000000..345f406 --- /dev/null +++ b/src/views/Modals/Inputs/NoteViewerModal.jsx @@ -0,0 +1,24 @@ +import { Box } from '@mui/joy' +import { useResponsiveModal } from '../../../hooks/useResponsiveModal' +import RichTextEditor from '../../components/RichTextEditor' + +function NoteViewerModal({ config }) { + const { ResponsiveModal } = useResponsiveModal() + + return ( + + + + + + ) +} + +export default NoteViewerModal