Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Style chat pictures

master
Torjus 2018-07-18 14:15:06 +02:00
parent 3a43443011
commit 1275e6fef4
4 changed files with 38 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/lib/components/Chat/Chat.jsx
View File

@ -46,7 +46,8 @@ Chat.propTypes =
onSendMessage : PropTypes.func, onSendMessage : PropTypes.func,
disabledInput : PropTypes.bool, disabledInput : PropTypes.bool,
autofocus : PropTypes.bool, autofocus : PropTypes.bool,
displayName : PropTypes.string displayName : PropTypes.string,
picture : PropTypes.string
}; };
Chat.defaultProps = Chat.defaultProps =

30
app/lib/components/Chat/MessageList.jsx
View File

@ -56,19 +56,22 @@ class MessageList extends Component
return ( return (
<div className='message' key={i}> <div className='message' key={i}>
<div className={message.sender}> <div className={message.sender}>
{picture && <img src={picture} />} <img className='message-avatar' src={picture} />
<div <div className='message-content'>
className='message-text' <div
// eslint-disable-next-line react/no-danger className='message-text'
dangerouslySetInnerHTML={{ __html : marked.parse( // eslint-disable-next-line react/no-danger
message.text, dangerouslySetInnerHTML={{ __html : marked.parse(
{ sanitize: true, renderer: linkRenderer } message.text,
) }} { sanitize: true, renderer: linkRenderer }
/> ) }}
<span className='message-time'> />
{message.name} - {this.getTimeString(messageTime)}
</span> <span className='message-time'>
{message.name} - {this.getTimeString(messageTime)}
</span>
</div>
</div> </div>
</div> </div>
); );
@ -81,7 +84,8 @@ class MessageList extends Component
MessageList.propTypes = MessageList.propTypes =
{ {
chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired,
myPicture : PropTypes.string
}; };
const mapStateToProps = (state) => const mapStateToProps = (state) =>

3
app/lib/redux/reducers/peers.js
View File

@ -31,7 +31,8 @@ const peer = (state = {}, action) =>
case 'REMOVE_CONSUMER': case 'REMOVE_CONSUMER':
{ {
const consumers = state.consumers.filter((consumer) => consumer !== action.payload.consumerId); const consumers = state.consumers.filter((consumer) =>
consumer !== action.payload.consumerId);
return { ...state, consumers }; return { ...state, consumers };
} }

42
app/stylus/components/Chat.styl
View File

@ -74,40 +74,32 @@
color: rgba(#000, 1.0) color: rgba(#000, 1.0)
> .client { > .client {
background-color: rgba(#fff, 0.9);
border-radius: 5px;
padding: 6px;
max-width: 215px;
text-align: left;
margin-left: auto; margin-left: auto;
> .message-text {
font-size: 1.3vmin;
color: rgba(#000, 1.0);
}
> .message-time {
font-size: 1vmin;
color: rgba(#777, 1.0)
}
} }
> .response { > .client, > .response {
background-color: rgba(#fff, 0.9); background-color: rgba(#fff, 0.9);
border-radius: 5px; border-radius: 5px;
padding: 6px;
max-width: 215px; max-width: 215px;
text-align: left; display: flex;
font-size: 1.3vmin; align-items: center;
> .message-text { > .message-avatar {
font-size: 1.3vmin; height: 2rem;
color: rgba(#000, 1.0);
} }
> .message-time { > .message-content {
font-size: 1vmin; padding: 6px;
color: rgba(#777, 1.0);
> .message-text {
font-size: 1.3vmin;
color: rgba(#000, 1.0);
}
> .message-time {
font-size: 1vmin;
color: rgba(#777, 1.0);
}
} }
} }
} }