From cc9dbd346cbdb3b98a1b3202a4438d3b485f2a88 Mon Sep 17 00:00:00 2001 From: llj Date: Sat, 9 Apr 2022 14:55:40 +0800 Subject: [PATCH] [file view] redesigned the comment panel --- .../src/components/file-view/comment-panel.js | 70 ++++++++----------- frontend/src/css/comments-list.css | 55 ++++++++------- frontend/src/css/file-view.css | 4 +- .../src/css/react-mentions-default-style.js | 6 +- 4 files changed, 64 insertions(+), 71 deletions(-) diff --git a/frontend/src/components/file-view/comment-panel.js b/frontend/src/components/file-view/comment-panel.js index a2d4bb3a4f..6629773580 100644 --- a/frontend/src/components/file-view/comment-panel.js +++ b/frontend/src/components/file-view/comment-panel.js @@ -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 (
-
+
- +
{gettext('Comments')}
-
-
{gettext('Show resolved comments')}
-
- -
-
-
    - {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 ( - - - - ); - }) +
    + {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 ( + + + + ); + })} +
    ) : +

    {gettext('No comment yet.')}

    } - {commentsList.length == 0 && -
  • {gettext('No comment yet.')}
    • } -
-
+
+
{participants && - +
+ +
); diff --git a/frontend/src/css/comments-list.css b/frontend/src/css/comments-list.css index cde50bc894..8aac8e7fc9 100644 --- a/frontend/src/css/comments-list.css +++ b/frontend/src/css/comments-list.css @@ -1,4 +1,5 @@ .seafile-comment { + background-color: #f5f5f5; border-left: 1px solid #e6e6dd; display: flex; flex-direction: column; @@ -11,7 +12,7 @@ line-height: 3em; padding: 0 1em; display: flex; - background-color: #fafaf9; + background-color: #fff; } .seafile-comment-title .seafile-comment-title-text, .seafile-history-title .seafile-history-title-text { @@ -27,26 +28,8 @@ .seafile-history-title .seafile-history-title-close:hover { color: #888; } -.seafile-comment-toggle-resolved { - margin-top: 45px; - border-bottom: 1px solid #e5e5e5; - padding: 5px 10px; - display: flex; - position: absolute; - background-color: #fff; - justify-content: space-between; - width: 29%; -} .seafile-comment-list { - height: calc(100% - 40px); - margin-top: 30px; overflow-y: auto; - margin-bottom: 0; -} -.seafile-comment-list .comment-vacant { - padding: 1em; - text-align: center; - list-style: none; } .seafile-comment-item { padding: 15px 10px; @@ -89,6 +72,13 @@ } .seafile-comment-item .seafile-comment-content { margin-left: 42px; + padding: 5px 10px; + border-radius: 4px; + background: #fff; +} +.seafile-comment-item .seafile-comment-content p { + word-break: break-all; + margin: 0; } .seafile-comment-item .seafile-comment-content ol, .seafile-comment-item .seafile-comment-content ul, @@ -104,7 +94,6 @@ background-color: #e6ffed; } .seafile-comment-footer { - background-color: #fafaf9; padding: 10px; border-top: 1px solid #e5e5e5; min-height: 182px; @@ -117,18 +106,30 @@ border-radius: 5px; background-color: #fff; } + +.seafile-comment-footer .comment-submit-container { + border: 1px solid #e6e6dd; + border-top: none; + border-radius: 0 0 5px 5px; + padding: 5px; + background: #fff; + text-align: right; + position: relative; +} +.seafile-comment-footer .comment-submit-container::before { + border-top: 1px solid #e6e6dd; + content: ''; + position: absolute; + left: 5px; + right: 5px; + top: 0; +} .seafile-comment-footer .submit-comment { - margin-top: 5px; - padding: 0.35rem 0.5rem; + height: 28px; } .seafile-edit-comment .comment-btn { height: 28px; } -@media (max-width: 768px) { - .seafile-comment-toggle-resolved { - width: 100%; - } -} .detail-comments { border-left: 0; } diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css index 1949698335..c476b7dff3 100644 --- a/frontend/src/css/file-view.css +++ b/frontend/src/css/file-view.css @@ -61,12 +61,12 @@ body { opacity: 1; } } -/* for mobile */ + /* for mobile */ .file-view-body .seafile-comment { width: 100%; } @media (min-width: 768px) { .file-view-body .seafile-comment { - width: 29%; + width: 300px; } } diff --git a/frontend/src/css/react-mentions-default-style.js b/frontend/src/css/react-mentions-default-style.js index a38ef1f70e..9c8c5807ce 100644 --- a/frontend/src/css/react-mentions-default-style.js +++ b/frontend/src/css/react-mentions-default-style.js @@ -35,14 +35,18 @@ const defaultStyle = { minHeight: 90, height: 90, border: '1px solid #e6e6dd', - borderRadius: '5px', + borderBottom: 'none', + borderRadius: '5px 5px 0 0', overfflowY: 'auto', + outline: 'none', '&focused': { + /* backgroundColor: '#cee4e5', outlineOffset: '-2px', outlineColor: '-webkit-focus-ring-color', outlineStyle: 'auto', outlineWidth: '5px', + */ }, }, },