add appropriate CSS for the TabCompleteBar

pull/21833/head
Matthew Hodgson 2015-12-22 00:47:04 +00:00
parent c8aaee46d7
commit 618978d955
2 changed files with 16 additions and 5 deletions

View File

@ -1292,7 +1292,16 @@ module.exports = React.createClass({
else if (this.tabComplete.isTabCompleting()) { else if (this.tabComplete.isTabCompleting()) {
var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar'); var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
statusBar = ( statusBar = (
<TabCompleteBar entries={this.tabComplete.peek(3)} /> <div className="mx_RoomView_tabCompleteBar">
<div className="mx_RoomView_tabCompleteImage">...</div>
<div className="mx_RoomView_tabCompleteWrapper">
<TabCompleteBar entries={this.tabComplete.peek(6)} />
<div className="mx_RoomView_tabCompleteEol">
<img src="img/eol.svg" width="22" height="16" alt="->|"/>
Auto-complete
</div>
</div>
</div>
); );
} }
else if (this.state.hasUnsentMessages) { else if (this.state.hasUnsentMessages) {

View File

@ -28,15 +28,17 @@ module.exports = React.createClass({
render: function() { render: function() {
return ( return (
<div> <div className="mx_TabCompleteBar">
{this.props.entries.map(function(entry, i) { {this.props.entries.map(function(entry, i) {
var image = ( var image = (
entry.imgUrl ? <img src={entry.imgUrl} /> : null entry.imgUrl ? <img src={entry.imgUrl} width="24" height="24"/> : null
); );
return ( return (
<div key={i + ""}> <div key={i + ""} className="mx_TabCompleteBar_item">
{image} {image}
{entry.text} <span className="mx_TabCompleteBar_text">
{entry.text}
</span>
</div> </div>
); );
})} })}