Make search results look like messages
This commit is contained in:
parent
bd6c0d26eb
commit
a68f5621bc
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
@ -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 (
|
||||
|
28
client/src/js/components/SearchResult.js
Normal file
28
client/src/js/components/SearchResult.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user