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

[dir view] redesigned the 'comment panel' for file items

This commit is contained in:
llj
2022-04-09 17:11:17 +08:00
parent cc9dbd346c
commit be69c6d7ce
5 changed files with 35 additions and 42 deletions

View File

@@ -138,27 +138,32 @@ class DetailCommentList extends React.Component {
render() {
const { repoID, filePath, fileParticipantList } = this.props;
const { commentsList } = this.state;
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}>
<div className="seafile-comment detail-comments h-100">
<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 (
<CommentItem
item={item} time={time} deleteComment={this.deleteComment}
resolveComment={this.resolveComment} editComment={this.editComment}
key={item.id}
item={item}
time={time}
deleteComment={this.deleteComment}
resolveComment={this.resolveComment}
editComment={this.editComment}
/>
</React.Fragment>
);
})
);
})
}
</ul>) :
<p className="text-center my-4">{gettext('No comment yet.')}</p>
}
{(this.state.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">
{fileParticipantList &&
<ParticipantsList
onParticipantsChange={this.props.onParticipantsChange}
@@ -184,7 +189,9 @@ class DetailCommentList 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>
);

View File

@@ -214,7 +214,7 @@ class DirentDetail extends React.Component {
<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}>
<TabContent activeTab={this.state.activeTab} className="flex-fill o-auto">
<TabPane tabId="info">{this.renderDetailBody(bigIconUrl, folderDirent)}</TabPane>
<TabPane tabId="comments" className="comments h-100">
<DetailCommentList

View File

@@ -175,15 +175,14 @@ class CommentPanel extends React.Component {
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>
<CommentItem
key={item.id}
item={item} time={time}
deleteComment={this.deleteComment}
resolveComment={this.resolveComment}
editComment={this.editComment}
showResolvedComment={this.state.showResolvedComment}
/>
);
})}
</ul>) :
@@ -217,8 +216,7 @@ class CommentPanel extends React.Component {
/>
</MentionsInput>
<div className="comment-submit-container">
<Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>
{gettext('Submit')}</Button>
<Button className="submit-comment" color="primary" size="sm" onClick={this.onSubmit}>{gettext('Submit')}</Button>
</div>
</div>
</div>