diff options
author | 2018-06-28 14:16:58 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | 4d1b248d15dbcc40721edd34f87d07f0c0982b80 (patch) | |
tree | b033ce99cf92e21bbad8a5dd99b0d2e901399138 /vnext/src | |
parent | 3c61705c062234adc954c8a42e3ea53ff1007bb6 (diff) |
MessageInput styling
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/MessageInput.js | 29 | ||||
-rw-r--r-- | vnext/src/style/main.css | 13 |
2 files changed, 20 insertions, 22 deletions
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 52ad7bc6..c0b72348 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -73,7 +73,10 @@ export default class MessageInput extends React.Component { render() { return ( <form className="msg-comment-target"> - <div className="msg-comment"> + <div style={commentStyle}> + <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter} + ref={this.textarea} style={textInputStyle} value={this.state.value} + rows={this.props.rows || "1"} placeholder={this.props.children} /> <div style={inputBarStyle}> <div style={this.state.attach ? activeStyle : inactiveStyle} onClick={this.openfile}> @@ -82,9 +85,6 @@ export default class MessageInput extends React.Component { style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach} onChange={this.attachmentChanged} /> </div> - <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter} - ref={this.textarea} style={textInputStyle} value={this.state.value} - rows={this.props.rows || "1"} placeholder={this.props.children} /> <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</Button> </div> </div> @@ -93,6 +93,13 @@ export default class MessageInput extends React.Component { } } +const commentStyle = { + display: 'flex', + flexDirection: 'column', + width: '100%', + marginTop: '10px' +} + const inactiveStyle = { cursor: 'pointer', color: '#888' @@ -103,18 +110,22 @@ const activeStyle = { }; const inputBarStyle = { - border: '1px solid #ddd', display: 'flex', - alignItems: 'flex-start', - padding: '3px', - flexGrow: 1 + borderTop: '1px #eee solid', + alignItems: 'center', + justifyContent: 'space-between', + padding: '3px' } const textInputStyle = { overflow: 'hidden', resize: 'none', display: 'block', - boxSizing: 'border-box' + boxSizing: 'border-box', + border: 0, + outline: 'none', + padding: '4px', + resize: 'none' } MessageInput.propTypes = { diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index b5d4ea0e..9f1d42c0 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -447,22 +447,9 @@ article .tags > a, overflow: hidden; text-indent: 10px; } -.msg-comment { - display: flex; - width: 100%; - margin-top: 10px; -} .msg-comment-hidden { display: none; } -.msg-comment textarea { - border: 0; - flex-grow: 1; - outline: none !important; - padding: 4px; - resize: vertical; - vertical-align: top; -} .msg-comment input { align-self: flex-start; background: #EEE; |