Make search results look like messages

This commit is contained in:
Ken-Håvard Lieng 2016-01-23 00:41:35 +01:00
parent bd6c0d26eb
commit a68f5621bc
4 changed files with 45 additions and 14 deletions

File diff suppressed because one or more lines are too long

View File

@ -377,6 +377,10 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
padding: 10px 15px;
}
.search-result:not(:last-child) {
margin-bottom: 5px;
}
.messagebox {
position: absolute;
left: 0;
@ -412,6 +416,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
}
.message-sender {
font-weight: 700;
color: #6BB758;
cursor: pointer;
}

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import pure from 'pure-render-decorator';
import { timestamp } from '../util';
import SearchResult from './SearchResult';
@pure
export default class Search extends Component {
@ -19,9 +19,7 @@ export default class Search extends Component {
};
const results = search.results.map(result => (
<p key={result.id}>
{timestamp(new Date(result.time * 1000))} {result.from} {result.content}
</p>
<SearchResult key={result.id} result={result} />
));
return (

View File

@ -0,0 +1,28 @@
import React, { Component } from 'react';
import Autolinker from 'autolinker';
import pure from 'pure-render-decorator';
import { timestamp } from '../util';
@pure
export default class Search extends Component {
render() {
const { result } = this.props;
const content = Autolinker.link(result.content, { stripPrefix: false });
const style = {
paddingLeft: window.messageIndent + 'px',
textIndent: -window.messageIndent + 'px'
};
return (
<p className="search-result" style={style}>
<span className="message-time">{timestamp(new Date(result.time * 1000))}</span>
<span>
{' '}
<span className="message-sender">{result.from}</span>
</span>
<span dangerouslySetInnerHTML={{ __html: ' ' + content }}></span>
</p>
);
}
}