Merge pull request #61 from havfo/fix/sidebar-styling
Attempt to slightly improve the sidebar styling
This commit is contained in:
Håvar Aambø Fosstveit
@@ -1,131 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as stateActions from '../redux/stateActions';
|
||||
import * as requestActions from '../redux/requestActions';
|
||||
import MessageList from './Chat/MessageList';
|
||||
|
||||
class ChatWidget extends Component
|
||||
{
|
||||
componentWillReceiveProps(nextProps)
|
||||
{
|
||||
if (nextProps.chatmessages.length !== this.props.chatmessages.length)
|
||||
if (!this.props.showChat)
|
||||
this.props.increaseBadge();
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const {
|
||||
senderPlaceHolder,
|
||||
onSendMessage,
|
||||
onToggleChat,
|
||||
showChat,
|
||||
disabledInput,
|
||||
badge,
|
||||
autofocus,
|
||||
displayName
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div data-component='ChatWidget'>
|
||||
{
|
||||
showChat &&
|
||||
<div data-component='Conversation'>
|
||||
<MessageList />
|
||||
<form
|
||||
data-component='Sender'
|
||||
onSubmit={(e) => { onSendMessage(e, displayName); }}
|
||||
>
|
||||
<input
|
||||
type='text'
|
||||
className='new-message'
|
||||
name='message'
|
||||
placeholder={senderPlaceHolder}
|
||||
disabled={disabledInput}
|
||||
autoFocus={autofocus}
|
||||
autoComplete='off'
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
<div
|
||||
className='launcher'
|
||||
data-type='dark'
|
||||
data-tip='Show room chat'
|
||||
onClick={onToggleChat}
|
||||
>
|
||||
{
|
||||
badge > 0 && <span className='badge'>{badge}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ChatWidget.propTypes =
|
||||
{
|
||||
onToggleChat : PropTypes.func,
|
||||
showChat : PropTypes.bool,
|
||||
senderPlaceHolder : PropTypes.string,
|
||||
onSendMessage : PropTypes.func,
|
||||
disabledInput : PropTypes.bool,
|
||||
badge : PropTypes.number,
|
||||
autofocus : PropTypes.bool,
|
||||
displayName : PropTypes.string,
|
||||
chatmessages : PropTypes.arrayOf(PropTypes.object),
|
||||
increaseBadge : PropTypes.func
|
||||
};
|
||||
|
||||
ChatWidget.defaultProps =
|
||||
{
|
||||
senderPlaceHolder : 'Type a message...',
|
||||
autofocus : true
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) =>
|
||||
{
|
||||
return {
|
||||
showChat : state.chatbehavior.showChat,
|
||||
disabledInput : state.chatbehavior.disabledInput,
|
||||
displayName : state.me.displayName,
|
||||
badge : state.chatbehavior.badge,
|
||||
chatmessages : state.chatmessages
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
{
|
||||
return {
|
||||
onToggleChat : () =>
|
||||
{
|
||||
dispatch(stateActions.toggleChat());
|
||||
},
|
||||
onSendMessage : (event, displayName) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
const userInput = event.target.message.value;
|
||||
|
||||
if (userInput)
|
||||
{
|
||||
dispatch(stateActions.addUserMessage(userInput));
|
||||
dispatch(requestActions.sendChatMessage(userInput, displayName));
|
||||
}
|
||||
event.target.message.value = '';
|
||||
},
|
||||
increaseBadge : () =>
|
||||
{
|
||||
dispatch(stateActions.increaseBadge());
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const ChatWidgetContainer = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ChatWidget);
|
||||
|
||||
export default ChatWidgetContainer;
|
||||
@@ -65,7 +65,6 @@ class Room extends React.Component
|
||||
{
|
||||
const {
|
||||
room,
|
||||
toolAreaOpen,
|
||||
amActiveSpeaker,
|
||||
onRoomLinkCopy
|
||||
} = this.props;
|
||||
@@ -155,16 +154,8 @@ class Room extends React.Component
|
||||
delayHide={100}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={classnames('toolarea-wrapper', { open: toolAreaOpen })}
|
||||
>
|
||||
{toolAreaOpen ?
|
||||
<ToolArea
|
||||
advancedMode={room.advancedMode}
|
||||
/>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
|
||||
<ToolArea />
|
||||
</div>
|
||||
</Appear>
|
||||
</Fragment>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import * as stateActions from '../../redux/stateActions';
|
||||
|
||||
const TabHeader = ({ currentToolTab, setToolTab, id, name, badge }) => (
|
||||
<div
|
||||
className={classNames('tab-header', {
|
||||
checked : currentToolTab === id
|
||||
})}
|
||||
onClick={() => setToolTab(id)}
|
||||
>
|
||||
{name}
|
||||
|
||||
{badge > 0 && (
|
||||
<span className='badge'>{badge}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
TabHeader.propTypes = {
|
||||
currentToolTab : PropTypes.string.isRequired,
|
||||
setToolTab : PropTypes.func.isRequired,
|
||||
id : PropTypes.string.isRequired,
|
||||
name : PropTypes.string.isRequired,
|
||||
badge : PropTypes.number
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
currentToolTab : state.toolarea.currentToolTab
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
setToolTab : stateActions.setToolTab
|
||||
};
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TabHeader);
|
||||
@@ -1,11 +1,13 @@
|
||||
import React from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import * as toolTabActions from '../../redux/stateActions';
|
||||
import ParticipantList from '../ParticipantList/ParticipantList';
|
||||
import Chat from '../Chat/Chat';
|
||||
import Settings from '../Settings';
|
||||
import FileSharing from '../FileSharing';
|
||||
import TabHeader from './TabHeader';
|
||||
|
||||
class ToolArea extends React.Component
|
||||
{
|
||||
@@ -18,88 +20,61 @@ class ToolArea extends React.Component
|
||||
{
|
||||
const {
|
||||
currentToolTab,
|
||||
toolAreaOpen,
|
||||
unreadMessages,
|
||||
unreadFiles,
|
||||
setToolTab
|
||||
unreadFiles
|
||||
} = this.props;
|
||||
|
||||
const VisibleTab = {
|
||||
chat : Chat,
|
||||
files : FileSharing,
|
||||
users : ParticipantList,
|
||||
settings : Settings
|
||||
}[currentToolTab];
|
||||
|
||||
return (
|
||||
<div data-component='ToolArea'>
|
||||
<div className='tabs'>
|
||||
<input
|
||||
type='radio'
|
||||
name='tabs'
|
||||
id='tab-chat'
|
||||
onChange={() =>
|
||||
{
|
||||
setToolTab('chat');
|
||||
}}
|
||||
checked={currentToolTab === 'chat'}
|
||||
/>
|
||||
<label htmlFor='tab-chat'>
|
||||
Chat
|
||||
|
||||
{unreadMessages > 0 && (
|
||||
<span className='badge'>{unreadMessages}</span>
|
||||
)}
|
||||
</label>
|
||||
<Fragment>
|
||||
<div
|
||||
className={classNames('toolarea-shade', {
|
||||
open : toolAreaOpen
|
||||
})}
|
||||
/>
|
||||
|
||||
<div className='tab'>
|
||||
<Chat />
|
||||
<div
|
||||
data-component='ToolArea'
|
||||
className={classNames({
|
||||
open : toolAreaOpen
|
||||
})}
|
||||
>
|
||||
<div className='tab-headers'>
|
||||
<TabHeader
|
||||
id='chat'
|
||||
name='Chat'
|
||||
badge={unreadMessages}
|
||||
/>
|
||||
|
||||
<TabHeader
|
||||
id='files'
|
||||
name='Files'
|
||||
badge={unreadFiles}
|
||||
/>
|
||||
|
||||
<TabHeader
|
||||
id='users'
|
||||
name='Users'
|
||||
/>
|
||||
|
||||
<TabHeader
|
||||
id='settings'
|
||||
name='Settings'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type='radio'
|
||||
name='tabs'
|
||||
id='tab-files'
|
||||
onChange={() => setToolTab('files')}
|
||||
checked={currentToolTab === 'files'}
|
||||
/>
|
||||
<label htmlFor='tab-files'>
|
||||
Files
|
||||
|
||||
{unreadFiles > 0 && (
|
||||
<span className='badge'>{unreadFiles}</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
<div className='tab'>
|
||||
<FileSharing />
|
||||
</div>
|
||||
|
||||
<input
|
||||
type='radio'
|
||||
name='tabs'
|
||||
id='tab-users'
|
||||
onChange={() =>
|
||||
{
|
||||
setToolTab('users');
|
||||
}}
|
||||
checked={currentToolTab === 'users'}
|
||||
/>
|
||||
<label htmlFor='tab-users'>Users</label>
|
||||
|
||||
<div className='tab'>
|
||||
<ParticipantList />
|
||||
</div>
|
||||
|
||||
<input
|
||||
type='radio'
|
||||
name='tabs'
|
||||
id='tab-settings'
|
||||
onChange={() =>
|
||||
{
|
||||
setToolTab('settings');
|
||||
}}
|
||||
checked={currentToolTab === 'settings'}
|
||||
/>
|
||||
<label htmlFor='tab-settings'>Settings</label>
|
||||
|
||||
<div className='tab'>
|
||||
<Settings />
|
||||
<VisibleTab />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -110,13 +85,15 @@ ToolArea.propTypes =
|
||||
currentToolTab : PropTypes.string.isRequired,
|
||||
setToolTab : PropTypes.func.isRequired,
|
||||
unreadMessages : PropTypes.number.isRequired,
|
||||
unreadFiles : PropTypes.number.isRequired
|
||||
unreadFiles : PropTypes.number.isRequired,
|
||||
toolAreaOpen : PropTypes.bool
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
currentToolTab : state.toolarea.currentToolTab,
|
||||
unreadMessages : state.toolarea.unreadMessages,
|
||||
unreadFiles : state.toolarea.unreadFiles
|
||||
unreadFiles : state.toolarea.unreadFiles,
|
||||
toolAreaOpen : state.toolarea.toolAreaOpen
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
|
||||
Reference in New Issue
Block a user