aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-28 14:16:58 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commit4d1b248d15dbcc40721edd34f87d07f0c0982b80 (patch)
treeb033ce99cf92e21bbad8a5dd99b0d2e901399138
parent3c61705c062234adc954c8a42e3ea53ff1007bb6 (diff)
MessageInput styling
-rw-r--r--vnext/src/components/MessageInput.js29
-rw-r--r--vnext/src/style/main.css13
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;