MM-1899 - Updating UI for commands in input box

This commit is contained in:
Asaad Mahmood
2015-08-27 20:46:25 +05:00
parent d3093028cf
commit 1e647cbdfc
3 changed files with 19 additions and 7 deletions

View File

@@ -10,7 +10,7 @@
"ServiceSettings": {
"SiteName": "Mattermost",
"Mode" : "dev",
"AllowTesting" : false,
"AllowTesting" : true,
"UseSSL": false,
"Port": "8065",
"Version": "developer",

View File

@@ -44,19 +44,21 @@ module.exports = React.createClass({
var suggestions = [];
console.log(this.state.suggestions.length);
for (var i = 0; i < this.state.suggestions.length; i++) {
if (this.state.suggestions[i].suggestion != this.state.cmd) {
suggestions.push(
<div key={i} className="command-name" onClick={this.handleClick.bind(this, i)}>
<div className="pull-left"><strong>{ this.state.suggestions[i].suggestion }</strong></div>
<div className="command-desc pull-right">{ this.state.suggestions[i].description }</div>
<div className="command__title"><strong>{ this.state.suggestions[i].suggestion }</strong></div>
<div className="command__desc">{ this.state.suggestions[i].description }</div>
</div>
);
}
}
return (
<div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*37)+2}}>
<div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*56)+2}}>
{ suggestions }
</div>
);

View File

@@ -4,20 +4,30 @@
width: 100%;
border: $border-gray;
bottom: 38px;
overflow: auto;
@extend %popover-box-shadow;
.sidebar--right & {
bottom: 100px;
}
}
.command-name {
position: relative;
width: 100%;
background-color: #fff;
height: 37px;
line-height: 37px;
padding: 2px 10px 2px 5px;
line-height: 24px;
padding: 5px 10px 8px;
z-index: 101;
font-size: 0.95em;
border-bottom: 1px solid #ddd;
&:hover {
background-color: #e8eaed;
}
.command__desc {
margin-left: 5px;
color: #999;
line-height: normal;
}
}
.command-desc {