glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

found a better way to handle junto chat panel

Browse source
This commit is contained in:
Connor Turland 2017-03-22 16:35:28 +00:00
parent 49102ea474
commit 2cae12e1ab
1 changed files with 9 additions and 12 deletions

21
frontend/src/components/MapView/MapChat/index.js
View file

@ -101,12 +101,13 @@ class MapChat extends Component {
const { unreadMessages, chatOpen, conversationLive, const { unreadMessages, chatOpen, conversationLive,
isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
const { videosShowing, cursorsShowing, alertSound } = this.state const { videosShowing, cursorsShowing, alertSound } = this.state
const rightOffset = chatOpen ? '0' : '-300px'
return ( return (
<div id="chat-box-wrapper"> <div className="chat-box">
<div className="chat-box" <div className={`chat-button ${conversationLive ? 'active' : ''}`} onClick={this.toggleDrawer}>
style={{ right: rightOffset }} <div className="tooltips">Chat</div>
> <Unread count={unreadMessages} />
</div>
{chatOpen && <div className="chat-panel">
<div className="junto-header"> <div className="junto-header">
PARTICIPANTS PARTICIPANTS
<div onClick={this.toggleVideosShowing} className={`video-toggle ${videosShowing ? '' : 'active'}`} /> <div onClick={this.toggleVideosShowing} className={`video-toggle ${videosShowing ? '' : 'active'}`} />
@ -135,14 +136,10 @@ class MapChat extends Component {
CHAT CHAT
<div onClick={this.toggleAlertSound} className={`sound-toggle ${alertSound ? '' : 'active'}`}></div> <div onClick={this.toggleAlertSound} className={`sound-toggle ${alertSound ? '' : 'active'}`}></div>
</div> </div>
<div className={`chat-button ${conversationLive ? 'active' : ''}`} onClick={this.toggleDrawer}>
<div className="tooltips">Chat</div>
<Unread count={unreadMessages} />
</div>
<div className="chat-messages" ref={div => { this.messagesDiv = div }}> <div className="chat-messages" ref={div => { this.messagesDiv = div }}>
{makeList(messages)} {makeList(messages)}
</div> </div>
{chatOpen && <NewMessage messageText={this.state.messageText} <NewMessage messageText={this.state.messageText}
focusMessageInput={this.focusMessageInput} focusMessageInput={this.focusMessageInput}
handleChange={this.handleChange('messageText')} handleChange={this.handleChange('messageText')}
textAreaProps={{ textAreaProps={{
@ -153,8 +150,8 @@ class MapChat extends Component {
onFocus: this.props.inputFocus, onFocus: this.props.inputFocus,
onBlur: this.props.inputBlur onBlur: this.props.inputBlur
}} }}
/>} />
</div> </div>}
</div> </div>
) )
} }