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

add tooltip

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

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

4
media/css/seahub_react.css
View File

@@ -1018,8 +1018,8 @@ table .menu-toggle {
.file-tag { .file-tag {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 0.75rem; width: 1rem;
height: 0.75rem; height: 1rem;
border-radius: 50%; border-radius: 50%;
} }