diff options
author | Asaad Mahmood <Unknowngi@live.com> | 2015-08-27 20:46:25 +0500 |
---|---|---|
committer | Asaad Mahmood <Unknowngi@live.com> | 2015-08-27 20:46:25 +0500 |
commit | 1e647cbdfc159d6d3905c5af0ece6ce4255ea80a (patch) | |
tree | 59560f9504bce2f5e57665ea0e96084ffc865529 /web | |
parent | d3093028cff337ede3747c6f0908eda432c3cb88 (diff) | |
download | chat-1e647cbdfc159d6d3905c5af0ece6ce4255ea80a.tar.gz chat-1e647cbdfc159d6d3905c5af0ece6ce4255ea80a.tar.bz2 chat-1e647cbdfc159d6d3905c5af0ece6ce4255ea80a.zip |
MM-1899 - Updating UI for commands in input box
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/command_list.jsx | 8 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_command-box.scss | 16 |
2 files changed, 18 insertions, 6 deletions
diff --git a/web/react/components/command_list.jsx b/web/react/components/command_list.jsx index 5efe98dc6..8f8f9d08d 100644 --- a/web/react/components/command_list.jsx +++ b/web/react/components/command_list.jsx @@ -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> ); diff --git a/web/sass-files/sass/partials/_command-box.scss b/web/sass-files/sass/partials/_command-box.scss index 44eb9b8df..565296fae 100644 --- a/web/sass-files/sass/partials/_command-box.scss +++ b/web/sass-files/sass/partials/_command-box.scss @@ -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 { |