1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-07 01:41:39 +00:00

add tooltip

This commit is contained in:
shanshuirenjia
2018-12-18 09:02:16 +08:00
parent 163f92493c
commit 5273dbf657
2 changed files with 27 additions and 11 deletions

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 } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
@@ -48,6 +50,7 @@ class DirentListItem extends React.Component {
isCopyDialogShow: false,
isShareDialogShow: false,
isMutipleOperation: false,
isShowTagTooltip: false,
};
this.zipToken = null;
}
@@ -373,12 +376,18 @@ class DirentListItem extends React.Component {
return path === '/' ? path + dirent.name : path + '/' + dirent.name;
}
onTagTooltipToggle = (e) => {
e.stopPropagation();
this.setState({isShowTagTooltip: !this.state.isShowTagTooltip})
}
render() {
let { path, dirent } = this.props;
let direntPath = Utils.joinPath(path, dirent.name);
let href = siteRoot + 'wiki/lib/' + this.props.repoID + Utils.encodePath(direntPath);
let toolTipID = MD5(dirent.name).slice(0, 7);
let tagTitle = '';
if (dirent.file_tags) {
if (dirent.file_tags && dirent.file_tags.length > 0) {
dirent.file_tags.forEach(item => {
tagTitle += item.name + ' ';
});
@@ -406,14 +415,21 @@ class DirentListItem extends React.Component {
}
</td>
<td>
<div className="dirent-item tag-list tag-list-stacked" title={tagTitle}>
{ dirent.type !== 'dir' && dirent.file_tags.map((fileTag, index) => {
let length = dirent.file_tags.length;
return (
<span className={`file-tag bg-${fileTag.color}`} key={fileTag.id} style={{zIndex: length - index }}></span>
);
})}
</div>
{(dirent.type !== 'dir' && dirent.file_tags) && (
<Fragment>
<div id={`tag-list-title-${toolTipID}`} className="dirent-item tag-list tag-list-stacked">
{dirent.file_tags.map((fileTag, index) => {
let length = dirent.file_tags.length;
return (
<span className={`file-tag bg-${fileTag.color}`} key={fileTag.id} style={{zIndex: length - index }}></span>
);
})}
</div>
<UncontrolledTooltip target={`tag-list-title-${toolTipID}`} placement="bottom">
{tagTitle}
</UncontrolledTooltip>
</Fragment>
)}
</td>
<td className="operation">
{