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

change file tag tooltip (#5692)

Browse Source
This commit is contained in:
Michael An
2023-10-19 13:44:28 +08:00
committed by GitHub
parent bb46410812
commit f2a4df29c5
2 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import moment from 'moment'; import moment from 'moment';
import { Dropdown, DropdownToggle, DropdownItem, UncontrolledTooltip } from 'reactstrap'; import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
import { gettext, siteRoot, mediaUrl, username, useGoFileserver, fileServerRoot } from '../../utils/constants'; import { gettext, siteRoot, mediaUrl, username, useGoFileserver, fileServerRoot } 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';
@@ -19,6 +19,8 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
import EditFileTagPopover from '../popover/edit-filetag-popover'; import EditFileTagPopover from '../popover/edit-filetag-popover';
import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog'; import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
import toaster from '../toast'; import toaster from '../toast';
import FileTag from './file-tag';
import '../../css/dirent-list-item.css'; import '../../css/dirent-list-item.css';
const propTypes = { const propTypes = {
@@ -685,11 +687,6 @@ class DirentListItem extends React.Component {
fileHref = siteRoot + 'lib/' + this.props.repoID + '/revisions/' + dirent.revision_id + '/'; fileHref = siteRoot + 'lib/' + this.props.repoID + '/revisions/' + dirent.revision_id + '/';
} }
let tagTitle = '';
if (dirent.file_tags && dirent.file_tags.length > 0) {
tagTitle = dirent.file_tags.map(item => item.name).join(' ');
}
let iconUrl = Utils.getDirentIcon(dirent); let iconUrl = Utils.getDirentIcon(dirent);
let trClass = this.state.highlight ? 'tr-highlight ' : ''; let trClass = this.state.highlight ? 'tr-highlight ' : '';
@@ -753,19 +750,13 @@ class DirentListItem extends React.Component {
</td> </td>
<td className="tag-list-title"> <td className="tag-list-title">
{(dirent.type !== 'dir' && dirent.file_tags && dirent.file_tags.length > 0) && ( {(dirent.type !== 'dir' && dirent.file_tags && dirent.file_tags.length > 0) && (
<Fragment>
<div id={this.tagListTitleID} className="dirent-item tag-list tag-list-stacked"> <div id={this.tagListTitleID} className="dirent-item tag-list tag-list-stacked">
{dirent.file_tags.map((fileTag, index) => { {dirent.file_tags.map((fileTag, index) => {
let length = dirent.file_tags.length;
return ( return (
<span className="file-tag" key={fileTag.id} style={{zIndex:length - index, backgroundColor:fileTag.color}}></span> <FileTag fileTag={fileTag} length={dirent.file_tags.length} key={index} index={index}/>
); );
})} })}
</div> </div>
<UncontrolledTooltip target={this.tagListTitleID} placement="bottom">
{tagTitle}
</UncontrolledTooltip>
</Fragment>
)} )}
{(dirent.type !== 'dir' && (!dirent.file_tags || dirent.file_tags.length == 0)) && ( {(dirent.type !== 'dir' && (!dirent.file_tags || dirent.file_tags.length == 0)) && (
<div id={this.tagListTitleID} className="dirent-item tag-list tag-list-stacked"></div> <div id={this.tagListTitleID} className="dirent-item tag-list tag-list-stacked"></div>

31
frontend/src/components/dirent-list-view/file-tag.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
import { UncontrolledTooltip } from 'reactstrap';
export default class FileTag extends React.PureComponent {
static propTypes = {
fileTag: PropTypes.object.isRequired,
length: PropTypes.number.isRequired,
index: PropTypes.number.isRequired,
};
render() {
const { fileTag, length, index } = this.props;
const fileTagID = `file-tag-${fileTag.id}-${uuidv4()}`;
return (
<>
<span
className="file-tag"
id={fileTagID}
key={fileTag.id}
style={{zIndex:length - index, backgroundColor:fileTag.color}}
></span>
<UncontrolledTooltip target={fileTagID} placement="bottom">
{fileTag.name}
</UncontrolledTooltip>
</>
);
}
}