implement multiline input
This commit is contained in:
parent
ef181f55d5
commit
bf91155e60
|
@ -16,29 +16,25 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_MessageComposer_wrapper {
|
.mx_MessageComposer_wrapper {
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
height: 70px;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-color: #fff;
|
|
||||||
border-top: 2px solid #e1dddd;
|
border-top: 2px solid #e1dddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageComposer_row {
|
.mx_MessageComposer_row {
|
||||||
display: table-row;
|
display: table-row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 70px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 28px;
|
padding-right: 28px;
|
||||||
height: 70px;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar {
|
.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageComposer_input {
|
.mx_MessageComposer_input {
|
||||||
|
@ -49,17 +45,18 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageComposer_input textarea {
|
.mx_MessageComposer_input textarea {
|
||||||
|
display: block;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1.2em;
|
padding: 0px;
|
||||||
padding-top: 0.7em;
|
margin-top: 6px;
|
||||||
padding-bottom: 0.7em;
|
margin-bottom: 6px;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
resize: none;
|
resize: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
-moz-box-shadow: none;
|
-moz-box-shadow: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
/* needed for FF */
|
/* needed for FF */
|
||||||
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
|
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
|
||||||
|
|
|
@ -236,8 +236,8 @@ limitations under the License.
|
||||||
order: 5;
|
order: 5;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-flex: 0 0 70px;
|
-webkit-flex: 0;
|
||||||
flex: 0 0 70px;
|
flex: 0;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -61,7 +61,7 @@ module.exports = React.createClass({
|
||||||
<MemberAvatar member={me} width={24} height={24} />
|
<MemberAvatar member={me} width={24} height={24} />
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_MessageComposer_input">
|
<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>
|
||||||
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
|
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
|
||||||
<img src="img/upload.png" width="17" height="22"/>
|
<img src="img/upload.png" width="17" height="22"/>
|
||||||
|
|
|
@ -315,7 +315,7 @@ module.exports = React.createClass({
|
||||||
{statusBar}
|
{statusBar}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<MessageComposer room={this.state.room} uploadFile={this.uploadFile} />
|
<MessageComposer room={this.state.room} roomView={this} uploadFile={this.uploadFile} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue