From 1a9ee125332686f441b78b0bfaf63bab6c7eea64 Mon Sep 17 00:00:00 2001 From: Carter Date: Wed, 4 Dec 2024 10:41:46 -0600 Subject: [PATCH] added chat drawer --- src/app/App.css | 13 ++++ src/app/HeaderButtons.tsx | 41 +++++++----- src/chat/Chat.tsx | 5 +- src/chat/ChatDrawer.tsx | 61 ++++++++++++++++++ src/chat/ChatInput.tsx | 46 +++++++++----- src/chat/ChatMessage.tsx | 130 ++++++++++++++++---------------------- src/theme/theme.ts | 10 +++ 7 files changed, 196 insertions(+), 110 deletions(-) create mode 100644 src/chat/ChatDrawer.tsx diff --git a/src/app/App.css b/src/app/App.css index a7d5557..6d337d1 100644 --- a/src/app/App.css +++ b/src/app/App.css @@ -22,4 +22,17 @@ html, body, #root { height: 100%; margin: 0; padding: 0; +} + +/* styles.css or a CSS module */ +.MuiDialog-root { + z-index: 1500 !important; +} + +.MuiDrawer-root { + z-index: 1300 !important; +} + +.MuiMenu-root { + z-index: 1400 !important; /* Ensure it's above the drawer */ } \ No newline at end of file diff --git a/src/app/HeaderButtons.tsx b/src/app/HeaderButtons.tsx index 1b349e0..7126d9a 100644 --- a/src/app/HeaderButtons.tsx +++ b/src/app/HeaderButtons.tsx @@ -2,6 +2,7 @@ import { Chat as ChatIcon, ChevronRight } from "@mui/icons-material"; import { Box, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import Chat from "chat/Chat"; +import { ChatDrawer } from "chat/ChatDrawer"; import { useMobile } from "hooks"; import { Team, User } from "models"; import moment from "moment"; @@ -36,7 +37,8 @@ const useStyles = makeStyles((theme: Theme) => ({ padding: theme.spacing(1), height: "100%", minWidth: theme.spacing(54), - maxWidth: theme.spacing(54) + maxWidth: theme.spacing(54), + zIndex: 1000000000000 }, chatDrawerMobile: { padding: theme.spacing(1), @@ -119,22 +121,29 @@ export default function HeaderButtons(props: Props) { <> {chatButton()} {team && team.settings && team.settings.key && ( - setChatDrawerOpen(false)} - style={{ height: "100%", maxWidth: "100%" }} - title={team.settings.name ? team.settings.name + "Chat" : "Chat"}> -
-
- setChatDrawerOpen(false)}> - - - {team.name()} Chat -
- -
- + team={team} + /> + // setChatDrawerOpen(false)} + // style={{ height: "100%", maxWidth: "100%" }} + // title={team.settings.name ? team.settings.name + "Chat" : "Chat"}> + + //
+ //
+ // setChatDrawerOpen(false)}> + // + // + // {team.name()} Chat + //
+ // + //
+ // )} ) diff --git a/src/chat/Chat.tsx b/src/chat/Chat.tsx index 68e5e5b..3382b95 100644 --- a/src/chat/Chat.tsx +++ b/src/chat/Chat.tsx @@ -1,4 +1,4 @@ -import { Box, CircularProgress } from "@mui/material"; +import { Box, CircularProgress, Theme } from "@mui/material"; import { useGlobalState, useNoteAPI, useTeamAPI } from "providers"; import React from "react"; import { useCallback } from "react"; @@ -9,6 +9,7 @@ import ChatOutput from "./ChatOutput"; import { Note } from "models"; import { pond } from "protobuf-ts/pond"; import moment from "moment-timezone"; +import { makeStyles } from "@mui/styles"; interface Props { objectKey: string; @@ -26,6 +27,7 @@ export default function Chat(props: Props) { const [attachmentMap, setAttachmentMap] = useState>(new Map()); const teamAPI = useTeamAPI(); + // const classes = useStyles(); const loadNotes = useCallback(() => { let currentNotes: Note[] = notes; @@ -36,7 +38,6 @@ export default function Chat(props: Props) { if (resp.data.notes.length < 1) { return; } - setTotalMessages(resp.data.total); let tempNotes: Note[] = []; let tempAttachmentMap: Map = attachmentMap; diff --git a/src/chat/ChatDrawer.tsx b/src/chat/ChatDrawer.tsx new file mode 100644 index 0000000..b3d8d3f --- /dev/null +++ b/src/chat/ChatDrawer.tsx @@ -0,0 +1,61 @@ +import { ChevronRight } from "@mui/icons-material"; +import { Box, Drawer, IconButton, Theme, Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { useMobile } from "hooks"; +import { Team } from "models"; +import { pond } from "protobuf-ts/pond"; +import Chat from "./Chat"; + +const useStyles = makeStyles((theme: Theme) => { + return ({ + chatDrawer: { + backgroundColor: theme.palette.background.default, + // padding: theme.spacing(1), + height: "100%", + minWidth: theme.spacing(54), + maxWidth: theme.spacing(54), + // zIndex: 1000000000000, + // zIndex: theme.zIndex.drawer, + }, + chatDrawerMobile: { + backgroundColor: theme.palette.background.default, + // padding: theme.spacing(1), + height: "auto", + width: "100%" + }, + drawerHeader: { + display: "flex", + alignItems: "center", + padding: theme.spacing(1), + // necessary for content to be below app bar + ...theme.mixins.toolbar, + justifyContent: "flex-start" + } + }); +}); + +interface Props { + open: boolean; + onClose: () => void; + team: Team; +} + +export function ChatDrawer(props: Props) { + const { open, onClose, team } = props; + const isMobile = useMobile(); + const classes = useStyles() + + return ( + + + + + + + {team.name()} Chat + + + + + ) +} \ No newline at end of file diff --git a/src/chat/ChatInput.tsx b/src/chat/ChatInput.tsx index 5fc1c30..518615c 100644 --- a/src/chat/ChatInput.tsx +++ b/src/chat/ChatInput.tsx @@ -1,4 +1,5 @@ import { + Box, Button, //DialogActions, //DialogContent, @@ -31,12 +32,22 @@ const useStyles = makeStyles((theme: Theme) => ({ margin: 8, marginRight: 12 }, + textAreaBox: { + width: "100%", + padding: theme.spacing(1), + paddingTop: theme.spacing(0), + }, textAreaClass: { - backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)", - borderColor: getThemeType() === "light" ? "rgb(255, 255, 255)" : "rgb(60, 60, 60)", - color: getThemeType() === "light" ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)", + padding: theme.spacing(1), + // backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)", + // borderColor: getThemeType() === "light" ? "rgb(255, 255, 255)" : "rgb(60, 60, 60)", + // color: getThemeType() === "light" ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)", + backgroundColor: theme.palette.background.paper, + borderColor: theme.palette.background.default, + color: theme.palette.text.primary, borderRadius: "5px", - width: "100%" + width: "100%", + } })) @@ -104,20 +115,19 @@ export default function ChatInput(props: Props) { let newNote = Note.create(); newNote.settings.objectKey = objectKey; newNote.settings.userId = user.id(); - //newNote.settings.objectType = pond.NoteType.NOTE_TYPE_TEAM not using type at the moment if (type) { newNote.settings.objectType = type; } newNote.settings.timestamp = Date.now(); newNote.settings.content = message; - noteAPI .addNote(newNote.settings, Array.from(uploadedFiles.keys())) .then(resp => { + newNote.settings.key = resp.data.note props.newNoteMethod(newNote); openSnack("Message Sent"); }) - .catch(err => { + .catch(_err => { openSnack("Message Failed to send"); }); } @@ -175,19 +185,21 @@ export default function ChatInput(props: Props) { justifyContent="space-between" spacing={1} style={{ marginTop: theme.spacing(1) }}> - + {/* - - - setMessage(e.target.value)} - onKeyDown={onKeyDown} - onKeyUp={onKeyUp} - /> + */} + + +