Added an indication for when there are noe chat messages
parent
636768da4b
commit
f5438de2f2
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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'] {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue