ref(chat): add a header for holding the close button

This commit is contained in:
Leonard Kim 2019-05-02 13:53:17 -07:00 committed by virtuacoplenny
parent 0318568a30
commit 01458eeff9
2 changed files with 46 additions and 22 deletions

View File

@ -42,7 +42,6 @@
flex: 1;
font-size: 10pt;
line-height: 20px;
margin-top: $desktopAppDragBarHeight + 5px;
overflow: auto;
padding: 5px;
text-align: left;
@ -92,21 +91,32 @@
}
}
.chat-header {
background-color: rgba(42, 58, 75, 0.9);
height: 70px;
position: relative;
width: 100%;
z-index: 1;
.chat-close {
background: gray;
border: 3px solid rgba(255, 255, 255, 0.1);
border-radius: 100%;
align-items: center;
bottom: 8px;
color: white;
cursor: pointer;
height: 10px;
line-height: 10px;
display: flex;
font-size: 18px;
height: 40px;
justify-content: center;
line-height: 15px;
padding: 4px;
position: absolute;
right: 5px;
text-align: center;
top: $desktopAppDragBarHeight;
width: 10px;
z-index: 1;
width: 40px;
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
}
#chat-input {
@ -146,14 +156,12 @@
}
#nickname {
position: absolute;
text-align: center;
color: #9d9d9d;
font-size: 18px;
top: 100px;
margin-top: 30px;
left: 5px;
right: 5px;
width: 95%;
}
#chat_container .display-name {

View File

@ -106,6 +106,7 @@ class Chat extends AbstractChat<Props> {
<div
className = 'sideToolbarContainer__inner'
id = 'chat_container'>
{ this._renderChatHeader() }
<div id = 'chatconversation'>
{ messages }
</div>
@ -114,6 +115,23 @@ class Chat extends AbstractChat<Props> {
);
}
/**
* Instantiates a React Element to display at the top of {@code Chat} to
* close {@code Chat}.
*
* @private
* @returns {ReactElement}
*/
_renderChatHeader() {
return (
<div className = 'chat-header'>
<div
className = 'chat-close'
onClick = { this.props._onToggleChat }>X</div>
</div>
);
}
_renderMessage: (Object) => void;
/**
@ -145,14 +163,12 @@ class Chat extends AbstractChat<Props> {
_renderPanelContent(state) {
this._isExited = state === 'exited';
const { _isOpen, _onToggleChat, _showNamePrompt } = this.props;
const { _isOpen, _showNamePrompt } = this.props;
const ComponentToRender = !_isOpen && state === 'exited'
? null
: (
<div>
<div
className = 'chat-close'
onClick = { _onToggleChat }>X</div>
{ this._renderChatHeader() }
{ _showNamePrompt
? <DisplayNameForm /> : this._renderChat() }
</div>