Merge pull request #249 from coder13/fix-room-chat-layout

Fix normal room chat layout

Author: coder13

client/src/components/Room/Normal/index.jsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@mui/styles';
 import { connect } from 'react-redux';
-import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import BottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
@@ -46,12 +45,30 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   container: {
+    display: 'flex',
     flexGrow: 1,
     flexWrap: 'nowrap',
+    minHeight: 0,
   },
-  panel: {
-    flexGrow: 1,
-    transition: `display 5s ${theme.transitions.easing.easeInOut}`,
+  mainPanel: {
+    display: 'flex',
+    flex: '1 1 auto',
+    minWidth: 0,
+  },
+  chatPanel: {
+    display: 'flex',
+    flex: '0 0 24rem',
+    minWidth: 0,
+    transition: theme.transitions.create('flex-basis'),
+    [theme.breakpoints.down('sm')]: {
+      flexBasis: '100%',
+    },
+  },
+  chatPanelClosed: {
+    flexBasis: '3rem',
+    [theme.breakpoints.down('sm')]: {
+      flexBasis: '100%',
+    },
   },
   backdrop: {
     zIndex: theme.zIndex.drawer + 1,
@@ -73,6 +90,7 @@ const panels = [{
 export const NormalRoom = ({ room, user }) => {
   const classes = useStyles();
   const [currentPanel, setCurrentPanel] = useState(0);
+  const [chatOpen, setChatOpen] = useState(true);
 
   const isAdmin = () => room.admin && room.admin.id === user.id;
 
@@ -91,27 +109,23 @@ export const NormalRoom = ({ room, user }) => {
       </Paper>
       <Divider />
 
-      <Grid container direction="row" className={classes.container}>
-        <Grid
-          item
-          className={clsx(classes.panel, {
+      <div className={classes.container}>
+        <div
+          className={clsx(classes.mainPanel, {
             [classes.hiddenOnMobile]: currentPanel !== 0,
           })}
-          style={{
-            flexGrow: 1,
-          }}
         >
           <Main />
-        </Grid>
-        <Grid
-          item
-          className={clsx(classes.panel, {
+        </div>
+        <div
+          className={clsx(classes.chatPanel, {
             [classes.hiddenOnMobile]: currentPanel !== 1,
+            [classes.chatPanelClosed]: !chatOpen,
           })}
         >
-          <Chat />
-        </Grid>
-      </Grid>
+          <Chat open={chatOpen} onToggle={() => setChatOpen((isOpen) => !isOpen)} />
+        </div>
+      </div>
 
       <BottomNavigation
         value={currentPanel}

client/src/components/Room/Panels/Chat.jsx

@@ -33,21 +33,10 @@ const Icons = {
 const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
-    flexGrow: 0,
-    flexShrink: 1,
-    width: '20rem',
+    flexGrow: 1,
+    minWidth: 0,
     flexDirection: 'column',
     height: '100%',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-      flexGrow: 1,
-    },
-  },
-  closed: {
-    flexGrow: 0,
-    width: 0,
-    position: 'relative',
-    border: 'none',
   },
   messages: {
     display: 'flex',
@@ -85,14 +74,8 @@ const useStyles = makeStyles((theme) => ({
     'user-select': 'text',
   },
   toolbarClosed: {
-    position: 'absolute',
-    width: '10em',
-    right: 0,
-  },
-  hiddenOnMobile: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none',
-    },
+    justifyContent: 'center',
+    padding: 0,
   },
 }));
 
@@ -105,11 +88,10 @@ const UNKOWN_USER = {
 };
 
 function Chat({
-  dispatch, messages, users, user,
+  dispatch, messages, users, user, open, onToggle,
 }) {
   const classes = useStyles();
   const [message, setMessage] = useState('');
-  const [open, setOpen] = useState(true);
   const listRef = useRef();
 
   const findUser = (id) => {
@@ -157,22 +139,24 @@ function Chat({
 
   return (
     <Panel
-      className={clsx(classes.root, {
-        [classes.closed]: !open,
-      })}
+      className={classes.root}
       toolbar={(
         <Toolbar
           variant="dense"
           className={clsx({
             [classes.toolbarClosed]: !open,
           })}
         >
-          <Typography variant="h6" style={{ flexGrow: 1 }}>
-            Chat
-          </Typography>
-          <IconButton className={classes.hiddenOnMobile} onClick={() => setOpen(!open)}>
-            {open ? <ArrowForwardIcon /> : <ArrowBackIcon /> }
-          </IconButton>
+          {open && (
+            <Typography variant="h6" style={{ flexGrow: 1 }}>
+              Chat
+            </Typography>
+          )}
+          {onToggle && (
+            <IconButton onClick={onToggle} aria-label={open ? 'Close chat' : 'Open chat'}>
+              {open ? <ArrowForwardIcon /> : <ArrowBackIcon /> }
+            </IconButton>
+          )}
         </Toolbar>
       )}
     >
@@ -278,6 +262,8 @@ Chat.propTypes = {
     id: PropTypes.number,
     canJoinRoom: PropTypes.bool,
   }),
+  open: PropTypes.bool,
+  onToggle: PropTypes.func,
 };
 
 Chat.defaultProps = {
@@ -287,6 +273,8 @@ Chat.defaultProps = {
     id: undefined,
     canJoinRoom: false,
   },
+  open: true,
+  onToggle: undefined,
 };
 
 const mapStateToProps = (state) => ({

server/config/dev.json

@@ -22,6 +22,6 @@
     "clientSecret": "example-secret"
   },
   "cors": {
-    "origin": ["localhost", "192.168.1.18"]
+    "origin": ["http://localhost:3000", "localhost", "192.168.1.18"]
   }
 }