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

tweak styling

Browse source
This commit is contained in:
Devin Howard 2017-01-04 13:34:47 -05:00
parent c5a3c92902
commit 0e422a24ed
2 changed files with 34 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/assets/stylesheets/junto.scss.erb
View file

@ -279,11 +279,13 @@
} }
} }
$chat_font_size: 16px;
.chat-input { .chat-input {
min-height: 80px; min-height: 80px;
width: 94%; width: 88%;
padding: 8px 3% 8px 3%; padding: 8px 9% 8px 3%;
font-size: 13px; font-size: $chat_font_size;
outline: none; outline: none;
resize: none; resize: none;
} }
@ -299,8 +301,8 @@
padding: 8px 8px 2px 8px; padding: 8px 8px 2px 8px;
color: #f5f5f5; color: #f5f5f5;
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 16px; font-size: $chat_font_size;
line-height: 17px; line-height: $chat_font_size + 1px;
a:link { a:link {
color: #4fb5c0; color: #4fb5c0;
@ -347,4 +349,22 @@
} }
} }
} }
.new-message-area {
position: relative;
.extra-message-options {
height: 20px;
position: absolute;
right: 2px;
bottom: 74px;
.emoji-picker-button {
font-size: 16px;
line-height: 20px;
cursor: pointer;
padding: 4px;
}
}
}
} }

12
frontend/src/components/MapChat/NewMessage.js
View file

@ -24,19 +24,25 @@ class NewMessage extends Component {
this.props.handleChange({ target: { this.props.handleChange({ target: {
value: messageText + emoji.colons value: messageText + emoji.colons
}}) }})
this.setState({ showEmojiPicker: false })
} }
render = () => { render = () => {
return ( return (
<div className="new-message-area"> <div className="new-message-area">
<span onClick={this.toggleEmojiPicker}>Emoji</span> <Picker set="emojione"
<Picker set='emojione'
onClick={this.handleClick} onClick={this.handleClick}
style={{ style={{
display: this.state.showEmojiPicker ? 'block' : 'none', display: this.state.showEmojiPicker ? 'block' : 'none',
width: '100%' maxWidth: '100%'
}} }}
emoji="upside_down_face"
title="Emoji"
/> />
<div className="extra-message-options">
<span className="emoji-picker-button" onClick={this.toggleEmojiPicker}>🙃</span>
</div>
<textarea value={this.textAreaValue()} <textarea value={this.textAreaValue()}
onChange={this.props.handleChange} onChange={this.props.handleChange}
{...this.props.textAreaProps} {...this.props.textAreaProps}