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

[file view] redesigned the comment panel

Browse Source
This commit is contained in:
llj
2022-04-09 14:55:40 +08:00
parent 1c303bf2f7
commit cc9dbd346c
4 changed files with 64 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/components/file-view/comment-panel.js
View File

@@ -10,6 +10,7 @@ import { Utils } from '../../utils/utils';
import toaster from '../toast';
import { MentionsInput, Mention } from 'react-mentions';
import { defaultStyle, defaultMentionStyle } from '../../css/react-mentions-default-style';
import '../../css/comments-list.css';
const { username, repoID, filePath } = window.app.pageOptions;
@@ -35,10 +36,6 @@ class CommentPanel extends React.Component {
this.toBeAddedParticipant = [];
}
toggleResolvedComment = () => {
this.setState({ showResolvedComment: !this.state.showResolvedComment });
}
listComments = () => {
seafileAPI.listComments(repoID, filePath).then((res) => {
this.setState({
@@ -165,46 +162,35 @@ class CommentPanel extends React.Component {
const { participants, commentsList } = this.state;
return (
<div className="seafile-comment">
<div className="seafile-comment-title">
<div className="seafile-comment-title flex-shrink-0">
<div onClick={this.props.toggleCommentPanel} className="seafile-comment-title-close">
<i className="fa fa-times-circle"/>
<i className="fa fa-times-circle"></i>
</div>
<div className="seafile-comment-title-text">{gettext('Comments')}</div>
</div>
<div className="seafile-comment-toggle-resolved">
<div className="seafile-comment-title-text">{gettext('Show resolved comments')}</div>
<div className="seafile-comment-title-toggle d-flex">
<label className="custom-switch" id="toggle-resolved-comments">
<input type="checkbox" name="option" className="custom-switch-input"
onChange={this.toggleResolvedComment}
checked={this.state.showResolvedComment && 'checked'}
/>
<span className="custom-switch-indicator"></span>
</label>
</div>
</div>
<ul className="seafile-comment-list">
{commentsList.length > 0 &&
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}
showResolvedComment={this.state.showResolvedComment}
/>
</React.Fragment>
);
})
<div className="flex-fill o-auto">
{commentsList.length > 0 ? (
<ul className="seafile-comment-list">
{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}
showResolvedComment={this.state.showResolvedComment}
/>
</React.Fragment>
);
})}
</ul>) :
<p className="text-center my-4">{gettext('No comment yet.')}</p>
}
{commentsList.length == 0 &&
<li className="comment-vacant">{gettext('No comment yet.')}</li>}
</ul>
<div className="seafile-comment-footer">
</div>
<div className="seafile-comment-footer flex-shrink-0">
{participants &&
<ParticipantsList
onParticipantsChange={this.onParticipantsChange}
@@ -230,8 +216,10 @@ class CommentPanel extends React.Component {
appendSpaceOnAdd={true}
/>
</MentionsInput>
<Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>
{gettext('Submit')}</Button>
<div className="comment-submit-container">
<Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>
{gettext('Submit')}</Button>
</div>
</div>
</div>
);