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

update comment panel

Browse Source
This commit is contained in:
Michael An
2019-05-29 12:02:07 +08:00
parent 51e90a88d2
commit 3b5d9e2e36
12 changed files with 384 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/dir-view-mode/dir-list-view.js
View File

@@ -38,6 +38,7 @@ const propTypes = {
onItemsCopy: PropTypes.func.isRequired,
onItemsDelete: PropTypes.func.isRequired,
onFileTagChanged: PropTypes.func,
showDirentDetail: PropTypes.func.isRequired,
};
class DirListView extends React.Component {
@@ -96,6 +97,7 @@ class DirListView extends React.Component {
onAddFile={this.props.onAddFile}
onAddFolder={this.props.onAddFolder}
onFileTagChanged={this.props.onFileTagChanged}
showDirentDetail={this.props.showDirentDetail}
/>
</Fragment>
);

226
frontend/src/components/dirent-detail/detail-comments-list.js Normal file
View File

@@ -0,0 +1,226 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html';
import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import '../../css/comments-list.css';
const { username } = window.app.pageOptions;
const DetailCommentListPropTypes = {
repoID: PropTypes.string.isRequired,
filePath: PropTypes.string.isRequired,
};
class DetailCommentList extends React.Component {
constructor(props) {
super(props);
this.state = {
commentsList: [],
};
}
componentDidMount() {
this.listComments();
}
componentWillReceiveProps(nextProps) {
if (nextProps.filePath !== this.props.filePath) {
this.listComments(nextProps.filePath);
}
}
listComments = (filePath) => {
seafileAPI.listComments(this.props.repoID, (filePath || this.props.filePath)).then((res) => {
this.setState({ commentsList: res.data.comments });
});
}
handleCommentChange = (event) => {
this.setState({ comment: event.target.value });
}
submitComment = () => {
let comment = this.refs.commentTextarea.value;
const { repoID, filePath } = this.props;
if (comment.trim()) {
seafileAPI.postComment(repoID, filePath, comment.trim()).then(() => {
this.listComments();
});
}
this.refs.commentTextarea.value = '';
}
resolveComment = (event) => {
const { repoID } = this.props;
seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
this.listComments();
});
}
deleteComment = (event) => {
const { repoID } = this.props;
seafileAPI.deleteComment(repoID, event.target.id).then(() => {
this.listComments();
});
}
editComment = (commentID, newComment) => {
const { repoID } = this.props;
seafileAPI.updateComment(repoID, commentID, null, null, newComment).then(() => {
this.listComments();
});
}
render() {
return (
<div className="seafile-comment detail-comments h-100 w-100">
<ul className="seafile-comment-list">
{this.state.commentsList.length > 0 &&
this.state.commentsList.map((item, index = 0, arr) => {
let oldTime = (new Date(item.created_at)).getTime();
let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
return (
<React.Fragment key={item.id}>
<CommentItem
item={item} time={time} deleteComment={this.deleteComment}
resolveComment={this.resolveComment} editComment={this.editComment}
/>
</React.Fragment>
);
})
}
{(this.state.commentsList.length == 0 ) &&
<li className="comment-vacant">{gettext('No comment yet.')}</li>}
</ul>
<div className="seafile-comment-footer">
<textarea
className="add-comment-input" ref="commentTextarea" placeholder={gettext('Add a comment.')}
clos="100" rows="3" warp="virtual"
></textarea>
<Button className="submit-comment" color="success" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
</div>
</div>
);
}
}
DetailCommentList.propTypes = DetailCommentListPropTypes;
const commentItemPropTypes = {
time: PropTypes.string.isRequired,
item: PropTypes.object.isRequired,
deleteComment: PropTypes.func.isRequired,
resolveComment: PropTypes.func.isRequired,
editComment: PropTypes.func.isRequired,
};
class CommentItem extends React.Component {
constructor(props) {
super(props);
this.state = {
dropdownOpen: false,
html: '',
newComment: this.props.item.comment,
editable: false,
};
}
componentWillMount() {
this.convertComment(this.props.item.comment);
}
componentWillReceiveProps(nextProps) {
this.convertComment(nextProps.item.comment);
}
convertComment = (mdFile) => {
processor.process(mdFile).then((result) => {
let html = String(result);
this.setState({ html: html });
});
}
toggleDropDownMenu = () => {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
}
toggleEditComment = () => {
this.setState({ editable: !this.state.editable });
}
updateComment = (event) => {
const newComment = this.state.newComment;
if (this.props.item.comment !== newComment) {
this.props.editComment(event.target.id, newComment);
}
this.toggleEditComment();
}
handleCommentChange = (event) => {
this.setState({ newComment: event.target.value });
}
renderInfo = (item) => {
return (
<Fragment>
<img className="avatar" src={item.avatar_url} alt=""/>
<div className="reviewer-info">
<div className="reviewer-name ellipsis">{item.user_name}</div>
<div className="review-time">{this.props.time}</div>
</div>
</Fragment>
);
}
render() {
const item = this.props.item;
if (this.state.editable) {
return(
<li className="seafile-comment-item" id={item.id}>
<div className="seafile-comment-info">
{this.renderInfo(item)}
</div>
<div className="seafile-edit-comment">
<textarea className="edit-comment-input" value={this.state.newComment}
onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"
></textarea>
<Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
<Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}> {gettext('Cancel')}</Button>
</div>
</li>
);
}
return (
<li className={item.resolved ? 'seafile-comment-item seafile-comment-item-resolved' : 'seafile-comment-item'} id={item.id}>
<div className="seafile-comment-info">
{this.renderInfo(item)}
<Dropdown isOpen={this.state.dropdownOpen} size="sm" className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
<DropdownToggle className="seafile-comment-dropdown-btn"><i className="fas fa-ellipsis-v"></i></DropdownToggle>
<DropdownMenu>
{item.user_email === username &&
<DropdownItem onClick={this.props.deleteComment} className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>
}
{item.user_email === username &&
<DropdownItem onClick={this.toggleEditComment} className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>
}
{!item.resolved &&
<DropdownItem onClick={this.props.resolveComment} className="seafile-comment-resolved"
id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
}
</DropdownMenu>
</Dropdown>
</div>
<div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
</li>
);
}
}
CommentItem.propTypes = commentItemPropTypes;
export default DetailCommentList;

106
frontend/src/components/dirent-detail/dirent-details.js
View File

@@ -1,5 +1,8 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
import DetailCommentList from './detail-comments-list';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import Dirent from '../../models/dirent';
@@ -15,6 +18,7 @@ const propTypes = {
currentRepoInfo: PropTypes.object.isRequired,
onItemDetailsClose: PropTypes.func.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
direntDetailPanelTab: PropTypes.string,
};
class DirentDetail extends React.Component {
@@ -27,9 +31,16 @@ class DirentDetail extends React.Component {
fileTagList: [],
relatedFiles: [],
folderDirent: null,
activeTab: 'info',
};
}
componentWillMount() {
if (this.props.direntDetailPanelTab) {
this.tabItemClick(this.props.direntDetailPanelTab);
}
}
componentDidMount() {
let { dirent, path, repoID } = this.props;
this.loadDirentInfo(dirent, path, repoID);
@@ -38,6 +49,9 @@ class DirentDetail extends React.Component {
componentWillReceiveProps(nextProps) {
let { dirent, path, repoID } = nextProps;
this.loadDirentInfo(dirent, path, repoID);
if (this.props.direntDetailPanelTab) {
this.tabItemClick(this.props.direntDetailPanelTab);
}
}
loadDirentInfo = (dirent, path, repoID) => {
@@ -109,23 +123,35 @@ class DirentDetail extends React.Component {
this.updateDetailView(dirent, direntPath);
}
render() {
let { dirent } = this.props;
let { folderDirent } = this.state;
if (!dirent && !folderDirent) {
return '';
tabItemClick = (tab) => {
if (this.state.activeTab !== tab) {
this.setState({ activeTab: tab });
}
}
let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
if (isImg) {
bigIconUrl = siteRoot + 'thumbnail/' + this.props.repoID + '/1024/' + dirent.name;
}
let direntName = dirent ? dirent.name : folderDirent.name;
renderNavItem = (showTab) => {
switch(showTab) {
case 'info':
return (
<NavItem className="nav-item w-50">
<NavLink className={classnames({ active: this.state.activeTab === 'info' })} onClick={() => { this.tabItemClick('info');}}>
<i className="fas fa-info-circle"></i>
</NavLink>
</NavItem>
);
case 'comments':
return (
<NavItem className="nav-item w-50">
<NavLink className={classnames({ active: this.state.activeTab === 'comments' })} onClick={() => {this.tabItemClick('comments');}}>
<i className="fa fa-comments"></i>
</NavLink>
</NavItem>
);
}
}
renderHeader = (smallIconUrl, direntName) => {
return (
<div className="detail-container">
<div className="detail-header">
<div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
<div className="detail-title dirent-title">
@@ -133,10 +159,14 @@ class DirentDetail extends React.Component {
<span className="name ellipsis" title={direntName}>{direntName}</span>
</div>
</div>
);
}
renderDetailBody = (bigIconUrl, folderDirent) => {
return (
<Fragment>
<div className="detail-body dirent-info">
<div className="img">
<img src={bigIconUrl} className="thumbnail" alt="" />
</div>
<div className="img"><img src={bigIconUrl} className="thumbnail" alt="" /></div>
{this.state.direntDetail &&
<div className="dirent-table-container">
<DetailListView
@@ -154,8 +184,48 @@ class DirentDetail extends React.Component {
</div>
}
</div>
</Fragment>
);
}
render() {
let { dirent } = this.props;
let { folderDirent } = this.state;
if (!dirent && !folderDirent) {
return '';
}
let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
if (isImg) {
bigIconUrl = siteRoot + 'thumbnail/' + this.props.repoID + '/1024/' + dirent.name;
}
let direntName = dirent ? dirent.name : folderDirent.name;
if (dirent && dirent.type === 'file') {
return (
<div className="detail-container">
{this.renderHeader(smallIconUrl, direntName)}
<Nav tabs className="mx-0">{this.renderNavItem('info')}{this.renderNavItem('comments')}</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="info">{this.renderDetailBody(bigIconUrl, folderDirent)}</TabPane>
<TabPane tabId="comments" className="comments h-100">
<DetailCommentList
repoID={this.props.repoID}
filePath={this.props.path + dirent.name}
/>
</TabPane>
</TabContent>
</div>
);
} else {
return (
<div className="detail-container">
{this.renderHeader(smallIconUrl, direntName)}
{this.renderDetailBody(bigIconUrl, folderDirent)}
</div>
);
}
}
}

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

@@ -48,6 +48,7 @@ const propTypes = {
getDirentItemMenuList: PropTypes.func.isRequired,
onFileTagChanged: PropTypes.func,
enableDirPrivateShare: PropTypes.bool.isRequired,
showDirentDetail: PropTypes.func.isRequired,
};
class DirentListItem extends React.Component {
@@ -210,7 +211,7 @@ class DirentListItem extends React.Component {
this.onLockItem();
break;
case 'Comment':
this.onComnentItem();
this.props.showDirentDetail('comments');
break;
case 'History':
this.onHistory();
@@ -288,10 +289,6 @@ class DirentListItem extends React.Component {
});
}
onComnentItem = () => {
}
onHistory = () => {
let repoID = this.props.repoID;
let filePath = this.getDirentPath(this.props.dirent);

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

@@ -47,6 +47,7 @@ const propTypes = {
onFileTagChanged: PropTypes.func,
enableDirPrivateShare: PropTypes.bool.isRequired,
isGroupOwnedRepo: PropTypes.bool.isRequired,
showDirentDetail: PropTypes.func.isRequired,
};
class DirentListView extends React.Component {
@@ -642,6 +643,7 @@ class DirentListView extends React.Component {
activeDirent={this.state.activeDirent}
onFileTagChanged={this.props.onFileTagChanged}
getDirentItemMenuList={this.getDirentItemMenuList}
showDirentDetail={this.props.showDirentDetail}
/>
);
})}

14
frontend/src/css/comments-list.css
View File

@@ -104,7 +104,7 @@
}
.seafile-comment-footer {
background-color: #fafaf9;
padding: 10px 10px 0;
padding: 10px;
border-top: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
@@ -132,3 +132,15 @@
width: 100%;
}
}
.detail-comments {
border-left: 0;
}
.detail-comments .seafile-comment-list {
margin-top: 0;
}
.detail-comments .seafile-comment-footer {
min-height: 140px;
}
.detail-comments .seafile-comment-footer .add-comment-input, .detail-comments .seafile-edit-comment .edit-comment-input {
width: 100%;
}

8
frontend/src/css/dirent-detail.css
View File

@@ -169,3 +169,11 @@
.sf-add-related-file .related-file-subtitle {
margin-bottom: 4px;
}
.detail-container .tab-content {
height: calc(100% - 73px);
}
.detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i {
margin: 0 auto;
}

3
frontend/src/pages/lib-content-view/lib-content-container.js
View File

@@ -87,6 +87,7 @@ const propTypes = {
updateDetail: PropTypes.bool.isRequired,
onListContainerScroll: PropTypes.func.isRequired,
onDirentClick: PropTypes.func.isRequired,
direntDetailPanelTab: PropTypes.string,
};
class LibContentContainer extends React.Component {
@@ -223,6 +224,7 @@ class LibContentContainer extends React.Component {
onItemsCopy={this.props.onItemsCopy}
onItemsDelete={this.props.onItemsDelete}
onFileTagChanged={this.props.onFileTagChanged}
showDirentDetail={this.props.showDirentDetail}
/>
)}
{this.props.currentMode === 'grid' && (
@@ -335,6 +337,7 @@ class LibContentContainer extends React.Component {
currentRepoInfo={this.props.currentRepoInfo}
onFileTagChanged={this.props.onFileTagChanged}
onItemDetailsClose={this.props.closeDirentDetail}
direntDetailPanelTab={this.props.direntDetailPanelTab}
/>
}
</div>

45
frontend/src/pages/lib-content-view/lib-content-view.js
View File

@@ -71,6 +71,7 @@ class LibContentView extends React.Component {
dirID: '', // for update dir list
errorMsg: '',
isDirentDetailShow: false,
direntDetailPanelTab: '',
updateDetail: false,
itemsShowLength: 100,
isSessionExpired: false,
@@ -82,16 +83,31 @@ class LibContentView extends React.Component {
this.isNeedUpdateHistoryState = true; // Load, refresh page, switch mode for the first time, no need to set historyState
}
showDirentDetail = () => {
this.setState({isDirentDetailShow: true});
showDirentDetail = (direntDetailPanelTab) => {
if (direntDetailPanelTab) {
this.setState({ direntDetailPanelTab: direntDetailPanelTab }, () => {
this.setState({ isDirentDetailShow: true });
});
} else {
this.setState({
direntDetailPanelTab: '',
isDirentDetailShow: true
});
}
}
toggleDirentDetail = () => {
this.setState({ isDirentDetailShow: !this.state.isDirentDetailShow });
this.setState({
direntDetailPanelTab: '',
isDirentDetailShow: !this.state.isDirentDetailShow
});
}
closeDirentDetail = () => {
this.setState({ isDirentDetailShow: false });
this.setState({
isDirentDetailShow: false,
direntDetailPanelTab: '',
});
}
componentWillMount() {
@@ -581,12 +597,12 @@ class LibContentView extends React.Component {
}
this.deleteDirent(direntPath);
});
var msg = gettext("Successfully deleted {name} and other {n} items.");
var msg = gettext('Successfully deleted {name} and other {n} items.');
msg = msg.replace('{name}', dirNames[0]);
msg = msg.replace('{n}', dirNames.length - 1);
toaster.success(msg);
}).catch(() => {
var msg = gettext("Failed to delete {name} and other {n} items.");
var msg = gettext('Failed to delete {name} and other {n} items.');
msg = msg.replace('{name}', dirNames[0]);
msg = msg.replace('{n}', dirNames.length - 1);
toaster.danger(msg);
@@ -755,22 +771,22 @@ class LibContentView extends React.Component {
seafileAPI.renameDir(repoID, path, newName).then(() => {
this.renameItemAjaxCallback(path, newName);
let name = Utils.getFileName(path);
var msg = gettext("Rename {name} successfully").replace('{name}', name);
var msg = gettext('Rename {name} successfully').replace('{name}', name);
toaster.success(msg);
}).catch(() => {
let name = Utils.getFileName(path);
var msg = gettext("Renaming {name} failed").replace('{name}', name);
var msg = gettext('Renaming {name} failed').replace('{name}', name);
toaster.danger(msg);
});
} else {
seafileAPI.renameFile(repoID, path, newName).then(() => {
this.renameItemAjaxCallback(path, newName);
let name = Utils.getFileName(path);
var msg = gettext("Rename {name} successfully").replace('{name}', name);
var msg = gettext('Rename {name} successfully').replace('{name}', name);
toaster.success(msg);
}).catch(() => {
let name = Utils.getFileName(path);
var msg = gettext("Renaming {name} failed").replace('{name}', name);
var msg = gettext('Renaming {name} failed').replace('{name}', name);
toaster.danger(msg);
});
}
@@ -789,22 +805,22 @@ class LibContentView extends React.Component {
seafileAPI.deleteDir(repoID, path).then(() => {
this.deleteItemAjaxCallback(path, isDir);
let name = Utils.getFileName(path);
var msg = gettext("Successfully deleted {name}").replace('{name}', name);
var msg = gettext('Successfully deleted {name}').replace('{name}', name);
toaster.success(msg);
}).catch(() => {
let name = Utils.getFileName(path);
var msg = gettext("Failed to delete {name}").replace('{name}', name);
var msg = gettext('Failed to delete {name}').replace('{name}', name);
toaster.danger(msg);
});
} else {
seafileAPI.deleteFile(repoID, path).then(() => {
this.deleteItemAjaxCallback(path, isDir);
let name = Utils.getFileName(path);
var msg = gettext("Successfully deleted {name}").replace('{name}', name);
var msg = gettext('Successfully deleted {name}').replace('{name}', name);
toaster.success(msg);
}).catch(() => {
let name = Utils.getFileName(path);
var msg = gettext("Failed to delete {name}").replace('{name}', name);
var msg = gettext('Failed to delete {name}').replace('{name}', name);
toaster.danger(msg);
});
}
@@ -1579,6 +1595,7 @@ class LibContentView extends React.Component {
onItemsDelete={this.onDeleteItems}
closeDirentDetail={this.closeDirentDetail}
showDirentDetail={this.showDirentDetail}
direntDetailPanelTab={this.state.direntDetailPanelTab}
onDeleteRepoTag={this.onDeleteRepoTag}
onToolbarFileTagChanged={this.onToolbarFileTagChanged}
updateDetail={this.state.updateDetail}

2
frontend/src/pages/shared-with-all/public-shared-view.js
View File

@@ -177,7 +177,7 @@ class PublicSharedView extends React.Component {
<Dropdown isOpen={this.state.isCreateMenuShow} toggle={this.onAddRepoToggle}>
<MediaQuery query="(min-width: 768px)">
<DropdownToggle className='btn btn-secondary operation-item'>
<i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
<i className="fas fa-plus-square text-secondary"></i>{gettext('Add Library')}
</DropdownToggle>
</MediaQuery>
<MediaQuery query="(max-width: 767.8px)">

2
seahub/templates/base_for_react.html
View File

@@ -54,7 +54,7 @@
canGenerateUploadLink: {% if user.permissions.can_generate_upload_link %} true {% else %} false {% endif %},
canViewOrg:'{{ user.permissions.can_view_org }}',
fileAuditEnabled: '{{ file_audit_enabled }}',
enableFileComment: '{{ enable_file_comment }}',
enableFileComment: {% if enableFileComment %} true {% else %} false {% endif %},
folderPermEnabled: {% if folder_perm_enabled %} true {% else %} false {% endif %},
enableResetEncryptedRepoPassword: '{{ enable_reset_encrypted_repo_password }}',
isEmailConfigured: '{{ is_email_configured }}',

1
seahub/views/__init__.py
View File

@@ -1239,6 +1239,7 @@ def react_fake_view(request, **kwargs):
'enable_encrypted_library': config.ENABLE_ENCRYPTED_LIBRARY,
'enable_repo_history_setting': config.ENABLE_REPO_HISTORY_SETTING,
'enable_reset_encrypted_repo_password': ENABLE_RESET_ENCRYPTED_REPO_PASSWORD,
'enableFileComment': settings.ENABLE_FILE_COMMENT,
'is_email_configured': IS_EMAIL_CONFIGURED,
'can_add_public_repo': request.user.permissions.can_add_public_repo(),
'folder_perm_enabled': folder_perm_enabled,