waku-org
/
js-waku
mirror of https://github.com/waku-org/js-waku.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use flex to keep the input box at the bottom

This commit is contained in:
Franck Royer 2021-04-26 17:33:12 +10:00
parent 2d3cc73569
commit a27080fc34
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web-chat/src/App.tsx
View File

@ -1,4 +1,3 @@
import { Paper } from '@material-ui/core';
import { multiaddr } from 'multiaddr'; import { multiaddr } from 'multiaddr';
import PeerId from 'peer-id'; import PeerId from 'peer-id';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -155,18 +154,14 @@ export default function App() {
}; };
return ( return (
<div className="App"> <div className="chat-app">
<div className="chat-room"> <WakuContext.Provider value={{ waku: stateWaku }}>
<WakuContext.Provider value={{ waku: stateWaku }}> <Room
<Paper> nick={nick}
<Room lines={stateMessages}
nick={nick} commandHandler={commandHandler}
lines={stateMessages} />
commandHandler={commandHandler} </WakuContext.Provider>
/>
</Paper>
</WakuContext.Provider>
</div>
</div> </div>
); );
} }

26
web-chat/src/Room.tsx
View File

@ -1,4 +1,4 @@
import { Box, Grid, List, ListItem, ListItemText } from '@material-ui/core'; import { List, ListItem, ListItemText } from '@material-ui/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ChatMessage } from 'waku-chat/chat_message'; import { ChatMessage } from 'waku-chat/chat_message';
import { WakuMessage } from 'waku/waku_message'; import { WakuMessage } from 'waku/waku_message';
@ -38,24 +38,20 @@ export default function Room(props: Props) {
}; };
return ( return (
<Grid container spacing={2}> <div
<Grid item xs={12}> className="chat-container"
<Box style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
height={800} >
maxHeight={800} <div className="chat-list" style={{ flexGrow: 1, overflow: 'scroll' }}>
style={{ flex: 1, maxHeight: '100%', overflow: 'scroll' }} <Lines messages={props.lines} />
> </div>
<Lines messages={props.lines} /> <div className="chat-input" style={{ flexGrow: 0, height: '120px' }}>
</Box>
</Grid>
<Grid item xs={12}>
<MessageInput <MessageInput
messageHandler={messageHandler} messageHandler={messageHandler}
sendMessage={sendMessage} sendMessage={sendMessage}
/> />
</Grid> </div>
</Grid> </div>
); );
} }