implement multiline input

This commit is contained in:
Matthew Hodgson 2015-11-15 03:36:10 +00:00
parent ef181f55d5
commit bf91155e60
4 changed files with 10 additions and 13 deletions

View File

@ -16,29 +16,25 @@ limitations under the License.
.mx_MessageComposer_wrapper {
max-width: 960px;
height: 70px;
vertical-align: middle;
margin: auto;
background-color: #fff;
border-top: 2px solid #e1dddd;
}
.mx_MessageComposer_row {
display: table-row;
width: 100%;
height: 70px;
}
.mx_MessageComposer .mx_MessageComposer_avatar {
display: table-cell;
padding-left: 10px;
padding-right: 28px;
height: 70px;
vertical-align: middle;
}
.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar {
display: block;
margin-top: 18px;
}
.mx_MessageComposer_input {
@ -49,17 +45,18 @@ limitations under the License.
}
.mx_MessageComposer_input textarea {
display: block;
font-size: 15px;
width: 100%;
height: 1.2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
padding: 0px;
margin-top: 6px;
margin-bottom: 6px;
border: 0px;
resize: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
box-shadow: none;
/* needed for FF */
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;

View File

@ -236,8 +236,8 @@ limitations under the License.
order: 5;
width: 100%;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
-webkit-flex: 0;
flex: 0;
margin-right: 2px;
}

View File

@ -61,7 +61,7 @@ module.exports = React.createClass({
<MemberAvatar member={me} width={24} height={24} />
</div>
<div className="mx_MessageComposer_input">
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message..." />
<textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
</div>
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
<img src="img/upload.png" width="17" height="22"/>

View File

@ -315,7 +315,7 @@ module.exports = React.createClass({
{statusBar}
</div>
</div>
<MessageComposer room={this.state.room} uploadFile={this.uploadFile} />
<MessageComposer room={this.state.room} roomView={this} uploadFile={this.uploadFile} />
</div>
);
}