haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-16 23:29:49 +00:00
Code Issues Releases Wiki Activity

add icon for search item, add repo_name for link-content (#2803)

Browse Source 
* add icon for search item, add repo_name for link-content

* improve search module
This commit is contained in:
杨顺强
2019-01-10 16:36:54 +08:00
committed by Daniel Pan
parent 61d1518fcd
commit f674f7c21c
2 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/search/search-result-item.js
View File

@@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { siteRoot } from '../../utils/constants';
import { Utils } from '../../utils/utils';
const propTypes = { const propTypes = {
item: PropTypes.object.isRequired, item: PropTypes.object.isRequired,
@@ -15,11 +17,16 @@ class SearchResultItem extends React.Component {
render() { render() {
let item = this.props.item; let item = this.props.item;
let fileIconSize = Utils.isHiDPI() ? 48 : 24;
let fileIconUrl = item.is_dir ? siteRoot + 'media/img/folder-192.png' : Utils.getFileIconUrl(item.name, fileIconSize);
return ( return (
<li className="search-result-item" onClick={this.onClickHandler}> <li className="search-result-item" onClick={this.onClickHandler}>
<span className="item-content item-name">{item.name}</span> <img className="item-img" src={fileIconUrl} alt="" />
<span className="item-content item-link">{item.link_content}</span> <div className="item-content">
<div className="item-content item-text" dangerouslySetInnerHTML={{__html: item.content}}></div> <dt className="item-name ellipsis">{item.name}</dt>
<dd className="item-link ellipsis">{item.repo_name}/{item.link_content}</dd>
<dd className="item-text ellipsis" dangerouslySetInnerHTML={{__html: item.content}}></dd>
</div>
</li> </li>
); );
} }

28
frontend/src/css/search.css
View File

@@ -51,10 +51,11 @@
} }
.search-result-container .search-result-item { .search-result-container .search-result-item {
display: flex;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-left: 2px solid #fff; border-left: 2px solid #fff;
cursor: pointer;
font-size: 0.8125rem; font-size: 0.8125rem;
cursor: pointer;
} }
.search-result-container .search-result-item:hover { .search-result-container .search-result-item:hover {
@@ -62,22 +63,25 @@
background-color: #eee; background-color: #eee;
} }
.search-result-item .item-content { .search-result-item .item-img {
font-weight: normal; width: 36px;
display: block; height: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.search-result-item .item-name { .search-result-item .item-content {
flex: 1;
width: 0;
margin-left: 0.25rem;
}
.item-content .item-name {
color: #eb8205 !important; color: #eb8205 !important;
} }
.search-result-item .item-link { .item-content .item-link {
color: #888; color: #888;
}
.search-result-item .item-text {
margin: 0; margin: 0;
} }
.search-result-item .item-text b { .item-content .item-text {
margin: 0;
}
.item-content .item-text b {
font-weight: bold; font-weight: bold;
} }