Skip to content

Commit

Permalink
add some layout for demo :)
Browse files Browse the repository at this point in the history
  • Loading branch information
maapteh committed Oct 12, 2020
1 parent bf54913 commit 1375205
Showing 1 changed file with 82 additions and 5 deletions.
87 changes: 82 additions & 5 deletions example/chat/src/Room.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,80 @@ export const Chat = styled.div`
max-width: 400px;
max-height: 400px;
border: 1px solid #ccc;
background-color: #babdc6;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
font: 14px verdana;
`;

export const ChatContainer = styled.div`
&:after {
content: "";
display: table;
clear: both;
}
`;

export const Message = styled.div`
color: #000;
clear: both;
line-height: 120%;
padding: 8px;
position: relative;
margin: 8px 0;
max-width: 85%;
word-wrap: break-word;
z-index: 1;
&:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}
span {
display: inline-block;
float: right;
padding: 0 0 0 7px;
position: relative;
bottom: -4px;
}
}`;

const MessageReceived = styled(Message)`
background: #fff;
border-radius: 0px 5px 5px 5px;
float: left;
&:after {
border-width: 0px 10px 10px 0;
border-color: transparent #fff transparent transparent;
top: 0;
left: -4px;
}
span {
display: block;
color: #bbb;
font-size: 10px;
}
`;

const MessageMine = styled(Message)`
background: #e1ffc7;
border-radius: 5px 0px 5px 5px;
float: right;
&:after {
border-width: 0px 0 10px 10px;
border-color: transparent transparent transparent #e1ffc7;
top: 0;
right: -4px;
}
`;

export const Room = ({ channel, name }) => {
Expand Down Expand Up @@ -75,11 +147,16 @@ export const Room = ({ channel, name }) => {

return (<>
<Chat>
{data.room.messages.map((msg) =>
<div key={msg.id}>
{msg.createdBy}: {msg.text}
</div>
)}
<ChatContainer>
{data.room.messages.map((msg) =>
msg.createdBy === name ? <MessageMine key={msg.id}>
{msg.text}
</MessageMine> : <MessageReceived key={msg.id}>
<span>{msg.createdBy}</span>
{msg.text}
</MessageReceived>
)}
</ChatContainer>
<div ref={messagesEndRef} />
</Chat>

Expand Down

0 comments on commit 1375205

Please sign in to comment.