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;
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-result:not(:last-child) {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.messagebox {
|
.messagebox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -412,6 +416,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-sender {
|
.message-sender {
|
||||||
|
font-weight: 700;
|
||||||
color: #6BB758;
|
color: #6BB758;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import pure from 'pure-render-decorator';
|
import pure from 'pure-render-decorator';
|
||||||
import { timestamp } from '../util';
|
import SearchResult from './SearchResult';
|
||||||
|
|
||||||
@pure
|
@pure
|
||||||
export default class Search extends Component {
|
export default class Search extends Component {
|
||||||
@ -19,9 +19,7 @@ export default class Search extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const results = search.results.map(result => (
|
const results = search.results.map(result => (
|
||||||
<p key={result.id}>
|
<SearchResult key={result.id} result={result} />
|
||||||
{timestamp(new Date(result.time * 1000))} {result.from} {result.content}
|
|
||||||
</p>
|
|
||||||
));
|
));
|
||||||
|
|
||||||
return (
|
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