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

[grid] improvement

Browse Source 
* modifie UI for 'thumbnail' images
* added 'Tags'('Select Tags') for file
* show tags for tagged files
This commit is contained in:
llj
2019-07-02 14:35:35 +08:00
parent c24ecf8b50
commit 8d1eabc541
4 changed files with 61 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/dirent-grid-view/dirent-grid-item.js
View File

@@ -1,5 +1,7 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import MD5 from 'MD5';
import { UncontrolledTooltip } from 'reactstrap';
import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
import { Utils } from '../../utils/utils';
@@ -136,6 +138,14 @@ class DirentGridItem extends React.Component {
let iconUrl = Utils.getDirentIcon(dirent, true);
let fileUrl = dirent.encoded_thumbnail_src ? this.getFileUrl(dirent.encoded_thumbnail_src) : '';
let toolTipID = MD5(dirent.name).slice(0, 7);
let tagTitle = '';
if (dirent.file_tags && dirent.file_tags.length > 0) {
dirent.file_tags.forEach(item => {
tagTitle += item.name + ' ';
});
}
let dirHref = '';
if (this.props.currentRepoInfo) {
dirHref = siteRoot + 'library/' + this.props.repoID + '/' + this.props.currentRepoInfo.repo_name + Utils.encodePath(direntPath);
@@ -169,6 +179,21 @@ class DirentGridItem extends React.Component {
{dirent.is_locked && <img className="grid-file-locked-icon" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
</div>
<div className="grid-file-name" onDragStart={this.onGridItemDragStart} draggable="true" >
{(dirent.type !== 'dir' && dirent.file_tags) && (
<Fragment>
<div id={`tag-list-title-${toolTipID}`} className="dirent-item tag-list tag-list-stacked d-inline-flex">
{dirent.file_tags.map((fileTag, index) => {
let length = dirent.file_tags.length;
return (
<span className="file-tag" key={fileTag.id} style={{zIndex:length - index, backgroundColor:fileTag.color}}></span>
);
})}
</div>
<UncontrolledTooltip target={`tag-list-title-${toolTipID}`} placement="bottom">
{tagTitle}
</UncontrolledTooltip>
</Fragment>
)}
<a className={`grid-file-name-link ${this.state.isGridSelected ? 'grid-link-selected-active' : ''}`} href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
</div>
</li>