Added an indication for when there are noe chat messages

master
Håvar Aambø Fosstveit 2018-10-30 11:48:16 +01:00
parent 636768da4b
commit f5438de2f2
2 changed files with 22 additions and 2 deletions

View File

@ -30,7 +30,7 @@ class MessageList extends Component
return ( return (
<div data-component='MessageList' id='messages'> <div data-component='MessageList' id='messages'>
{ { chatmessages.length > 0 ?
chatmessages.map((message, i) => chatmessages.map((message, i) =>
{ {
const messageTime = new Date(message.time); const messageTime = new Date(message.time);
@ -61,6 +61,9 @@ class MessageList extends Component
</div> </div>
); );
}) })
:<div className='empty'>
<p>No one has said anything yet...</p>
</div>
} }
</div> </div>
); );

View File

@ -6,7 +6,7 @@
} }
[data-component='MessageList'] { [data-component='MessageList'] {
overflow-y: scroll; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
> .message { > .message {
@ -49,6 +49,23 @@
} }
} }
} }
> .empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 20vmin;
> p {
padding: 6px 12px;
border-radius: 6px;
user-select: none;
pointer-events: none;
font-size: 20px;
color: #000;
}
}
} }
[data-component='Sender'] { [data-component='Sender'] {