diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0fef17e313..5981922184 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,7 +12,7 @@ "@seafile/react-image-lightbox": "0.0.1", "@seafile/resumablejs": "1.1.16", "@seafile/seafile-calendar": "0.0.12", - "@seafile/seafile-editor": "^0.3.93", + "@seafile/seafile-editor": "^0.3.97", "chart.js": "2.9.4", "classnames": "^2.2.6", "copy-to-clipboard": "^3.0.8", @@ -41,7 +41,7 @@ "react-responsive": "^6.1.2", "react-select": "^2.4.1", "reactstrap": "^6.4.0", - "seafile-js": "0.2.180", + "seafile-js": "0.2.182", "socket.io-client": "^2.2.0", "unified": "^7.0.0", "url-parse": "^1.4.3", @@ -5085,9 +5085,9 @@ } }, "node_modules/@seafile/seafile-editor": { - "version": "0.3.93", - "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.93.tgz", - "integrity": "sha512-9Md5npMKK4AAc3+lzNZPKibOhrYGfuQgzEZBFl++FxodhtvPlzEJ358WAmb7cfgXGVDOkoUDWvfoGvDwwdWRTw==", + "version": "0.3.97", + "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.97.tgz", + "integrity": "sha512-QNf+e3TtNbNK3Rd8J7wXlPOr2IFSn9OCdXLj/+DD0b95NfV6b02UGyAjdBTxBpFNIRY138xbQsTIuzuzYMCe/A==", "dependencies": { "@seafile/react-image-lightbox": "^0.0.9", "@seafile/slate-react": "^0.54.13", @@ -23435,9 +23435,9 @@ } }, "node_modules/seafile-js": { - "version": "0.2.180", - "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.180.tgz", - "integrity": "sha512-Bqvrf7vDwVygQBQg2peKXI2JlgSo29v7mkkAIA9PxD9JMTZJAtRx+PQxf1RqzkrjrfvUQ5mAFX2CUXIDd2+Cpg==", + "version": "0.2.182", + "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.182.tgz", + "integrity": "sha512-JYX+NxxvZBHrZ5e4blHrmptUumkqynIpoot+DxlPaWWTJsOxmRDnVDjRCdvI2scmgDnaJ1lRt6E89nJT7ivh/g==", "dependencies": { "@babel/polyfill": "7.12.1", "axios": "0.21.1", @@ -32114,9 +32114,9 @@ } }, "@seafile/seafile-editor": { - "version": "0.3.93", - "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.93.tgz", - "integrity": "sha512-9Md5npMKK4AAc3+lzNZPKibOhrYGfuQgzEZBFl++FxodhtvPlzEJ358WAmb7cfgXGVDOkoUDWvfoGvDwwdWRTw==", + "version": "0.3.97", + "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.97.tgz", + "integrity": "sha512-QNf+e3TtNbNK3Rd8J7wXlPOr2IFSn9OCdXLj/+DD0b95NfV6b02UGyAjdBTxBpFNIRY138xbQsTIuzuzYMCe/A==", "requires": { "@seafile/react-image-lightbox": "^0.0.9", "@seafile/slate-react": "^0.54.13", @@ -46788,9 +46788,9 @@ } }, "seafile-js": { - "version": "0.2.180", - "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.180.tgz", - "integrity": "sha512-Bqvrf7vDwVygQBQg2peKXI2JlgSo29v7mkkAIA9PxD9JMTZJAtRx+PQxf1RqzkrjrfvUQ5mAFX2CUXIDd2+Cpg==", + "version": "0.2.182", + "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.182.tgz", + "integrity": "sha512-JYX+NxxvZBHrZ5e4blHrmptUumkqynIpoot+DxlPaWWTJsOxmRDnVDjRCdvI2scmgDnaJ1lRt6E89nJT7ivh/g==", "requires": { "@babel/polyfill": "7.12.1", "axios": "0.21.1", diff --git a/frontend/package.json b/frontend/package.json index 1a9e23cca0..83b24cff03 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,8 +7,7 @@ "@seafile/react-image-lightbox": "0.0.1", "@seafile/resumablejs": "1.1.16", "@seafile/seafile-calendar": "0.0.12", - "@seafile/seafile-editor": "^0.3.94", - "MD5": "^1.3.0", + "@seafile/seafile-editor": "^0.3.97", "chart.js": "2.9.4", "classnames": "^2.2.6", "copy-to-clipboard": "^3.0.8", @@ -16,6 +15,7 @@ "i18next": "^17.0.13", "i18next-browser-languagedetector": "^3.0.3", "i18next-xhr-backend": "^3.1.2", + "MD5": "^1.3.0", "merge": "^1.2.1", "moment": "^2.22.2", "object-assign": "4.1.1", diff --git a/frontend/src/components/dirent-detail/detail-comments-list.js b/frontend/src/components/dirent-detail/detail-comments-list.js index 0b8e2a9b61..1e4bf5881b 100644 --- a/frontend/src/components/dirent-detail/detail-comments-list.js +++ b/frontend/src/components/dirent-detail/detail-comments-list.js @@ -138,27 +138,32 @@ class DetailCommentList extends React.Component { render() { const { repoID, filePath, fileParticipantList } = this.props; + const { commentsList } = this.state; return ( -
- -
+
+
{fileParticipantList && - +
+ +
); diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js index e077a78358..bc20bbb37c 100644 --- a/frontend/src/components/dirent-detail/dirent-details.js +++ b/frontend/src/components/dirent-detail/dirent-details.js @@ -214,7 +214,7 @@ class DirentDetail extends React.Component {
{this.renderHeader(smallIconUrl, direntName)} - + {this.renderDetailBody(bigIconUrl, folderDirent)} { - this.setState({ showResolvedComment: !this.state.showResolvedComment }); - } - listComments = () => { seafileAPI.listComments(repoID, filePath).then((res) => { this.setState({ @@ -165,46 +162,34 @@ 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 && - +
+ +
); @@ -329,7 +315,7 @@ class CommentItem extends React.Component {
- {' '} + {' '}
diff --git a/frontend/src/components/review-list-view/review-comments.js b/frontend/src/components/review-list-view/review-comments.js index c950a30edf..2c759286b3 100644 --- a/frontend/src/components/review-list-view/review-comments.js +++ b/frontend/src/components/review-list-view/review-comments.js @@ -8,11 +8,10 @@ import { username } from '../../utils/constants.js'; import { Utils } from '../../utils/utils'; import toaster from '../toast'; -import '../../css/review-comments.css'; +import '../../css/comments-list.css'; const commentPropTypes = { listComments: PropTypes.func.isRequired, - inResizing: PropTypes.bool.isRequired, commentsList: PropTypes.array.isRequired, scrollToQuote: PropTypes.func.isRequired }; @@ -22,8 +21,6 @@ class ReviewComments extends React.Component { constructor(props) { super(props); this.state = { - inResizing: false, - commentFooterHeight: 25, showResolvedComment: true, comment: '', }; @@ -64,10 +61,6 @@ class ReviewComments extends React.Component { }); } - toggleResolvedComment = () => { - this.setState({ showResolvedComment: !this.state.showResolvedComment }); - } - deleteComment = (event) => { seafileAPI.deleteComment(draftRepoID, event.target.id).then((res) => { this.props.listComments(); @@ -77,31 +70,6 @@ class ReviewComments extends React.Component { }); } - onResizeMouseUp = () => { - if (this.state.inResizing) { - this.setState({ inResizing: false }); - } - } - - onResizeMouseDown = () => { - this.setState({ inResizing: true }); - }; - - onResizeMouseMove = (event) => { - let rate = 100 - (event.nativeEvent.clientY - 120 ) / this.refs.comment.clientHeight * 100; - if (rate < 20 || rate > 70) { - if (rate < 20) { - this.setState({ commentFooterHeight: 25 }); - } - if (rate > 70) { - this.setState({ commentFooterHeight: 65 }); - } - this.setState({ inResizing: false }); - return null; - } - this.setState({ commentFooterHeight: rate }); - }; - scrollToQuote = (newIndex, oldIndex, quote) => { this.props.scrollToQuote(newIndex, oldIndex, quote); this.setState({ comment: '' }); @@ -117,33 +85,13 @@ class ReviewComments extends React.Component { } render() { - const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null; const { commentsList } = this.props; return ( -
-
-
{gettext('Show resolved comments')}
-
- -
-
-
- {commentsList.length === 0 && -
-
{gettext('No comment yet.')}
-
- } -
    - {(commentsList.length > 0) && - commentsList.map((item, index) => { +
    +
    + {commentsList.length > 0 ? ( +
      + {commentsList.map((item, index) => { return ( ); - }) - } -
    + })} +
+ ) : +

{gettext('No comment yet.')}

+ }
-
-
-
- - +
+ +
+
diff --git a/frontend/src/css/comments-list.css b/frontend/src/css/comments-list.css index cde50bc894..1aa59916d6 100644 --- a/frontend/src/css/comments-list.css +++ b/frontend/src/css/comments-list.css @@ -1,53 +1,27 @@ .seafile-comment { - border-left: 1px solid #e6e6dd; + background-color: #f5f5f5; display: flex; flex-direction: column; - width: 29%; } -.seafile-comment-title, -.seafile-history-title { +.seafile-comment-title { border-bottom: 1px solid #e5e5e5; min-height: 3em; 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 { +.seafile-comment-title .seafile-comment-title-text { width: 100%; text-align: center; font-weight: 700; } -.seafile-comment-title .seafile-comment-title-close, -.seafile-history-title .seafile-history-title-close { +.seafile-comment-title .seafile-comment-title-close { color: #b9b9b9; } -.seafile-comment-title .seafile-comment-title-close:hover, -.seafile-history-title .seafile-history-title-close:hover { +.seafile-comment-title .seafile-comment-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; margin-bottom: 0; @@ -89,6 +63,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,40 +85,48 @@ background-color: #e6ffed; } .seafile-comment-footer { - background-color: #fafaf9; padding: 10px; border-top: 1px solid #e5e5e5; - min-height: 182px; + display: flex; + flex-direction: column; } +.seafile-comment-footer .add-comment-input, .seafile-edit-comment .edit-comment-input { border: 1px solid #e6e6dd; padding: 5px; - width: 23em; + width: 100%; min-height: 90px; border-radius: 5px; background-color: #fff; } + +.seafile-comment-footer .add-comment-input { + border-bottom: none; + border-radius: 5px 5px 0 0; +} +.seafile-comment-footer .add-comment-input:focus { + outline: none; +} +.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; -} -.detail-comments .seafile-comment-list { - margin-top: 0; -} -.detail-comments .seafile-comment-footer { - min-height: 175px; -} -.detail-comments .seafile-edit-comment .edit-comment-input { - width: 100%; -} diff --git a/frontend/src/css/dirent-detail.css b/frontend/src/css/dirent-detail.css index 3fdcf12258..ef9b6de440 100644 --- a/frontend/src/css/dirent-detail.css +++ b/frontend/src/css/dirent-detail.css @@ -171,11 +171,6 @@ margin-bottom: 0.5rem; } -.detail-container .tab-content { - height: calc(100% - 73px); - overflow-y: auto; -} - .detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i { margin: 0 auto; } diff --git a/frontend/src/css/draft.css b/frontend/src/css/draft.css index 9ff939d12c..c39d83062b 100644 --- a/frontend/src/css/draft.css +++ b/frontend/src/css/draft.css @@ -15,9 +15,7 @@ width: 100%; height: 100%; display: flex; - flex-flow: row nowrap; - justify-content: space-between; - box-sizing: border-box; + flex-flow: row nowrap; background-color: #fafaf9; } @@ -26,27 +24,13 @@ height: 100%; } -.main .cur-view-container .seafile-comment { - height: 100%; - position: relative; -} .main .cur-view-right-part { height: 100%; - width: 35%; + width: 300px; + flex-shrink: 0; position: relative; } -.seafile-comment-resize { - width: 5px; - height: 100%; - background-color: transparent; - position: absolute; - left: 0; - top: 0; - cursor: col-resize; - z-index: 1; -} - .cur-file-info .file-info { display: block; padding-top: 10px; @@ -97,7 +81,7 @@ font-weight: 700; } .review-side-panel-body { - padding: 1rem 2rem 3rem; + padding: 1rem 1rem 3rem; overflow-y: scroll; height: 100%; } @@ -118,7 +102,8 @@ .review-side-panel-item:last-child { border: 0; } -.reviewer-info, .author-info { +.review-side-panel-item .reviewer-info, +.review-side-panel-item .author-info { display: flex; align-items: center; } @@ -144,7 +129,8 @@ height: 1.5rem; width: 1.5rem; } -.reviewer-name, .author-name { +.review-side-panel-item .reviewer-name, +.review-side-panel-item .author-name { height: 2rem; line-height: 2rem; } diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css index 1949698335..c2674fe941 100644 --- a/frontend/src/css/file-view.css +++ b/frontend/src/css/file-view.css @@ -61,12 +61,13 @@ 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; + border-left: 1px solid #e6e6dd; } } 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', + */ }, }, }, diff --git a/frontend/src/css/review-comments.css b/frontend/src/css/review-comments.css deleted file mode 100644 index 3c9e6a066c..0000000000 --- a/frontend/src/css/review-comments.css +++ /dev/null @@ -1,169 +0,0 @@ -.review-side-panel .seafile-comment { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - background-color: #fff; -} -.seafile-comment-resizing { - user-select: none; -} -.seafile-comment-title { - border-bottom: 1px solid #e5e5e5; - line-height: 2em; - padding: 2px 1em; - display: flex; - position: absolute; - z-index: 1; - width: 100%; - background-color: #fff; -} -.seafile-comment-title .seafile-comment-title-text { - width: 100%; -} -.seafile-comment-title .seafile-comment-title-toggle { - display: flex; -} -.seafile-comment-list { - padding-top: 35px; - box-sizing: border-box; - height: 100%; - overflow-y: auto; -} -.seafile-comment .loading-icon { - margin-top: 20px; -} -.seafile-comment-list .comment-vacant { - padding: 15px; - text-align: center; -} -.seafile-comment-item { - padding: 15px 10px; -} -.seafile-comment-item-resolved { - background-color: #e6ffed; -} -.seafile-comment-item .seafile-comment-info { - display: flex; -} -.seafile-comment-item .seafile-comment-info .reviewer-info { - padding-left: 10px; - height: 2rem; - display: block; - max-width: 75%; -} -.seafile-comment-item .seafile-comment-info .reviewer-name { - font-size: 1rem; - height: 1rem; - line-height: 1rem; -} -.seafile-comment-item .seafile-comment-info .review-time { - margin-top: 2px; - font-size: .6rem; - color: #777; -} -.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown { - margin-left: auto; -} -.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button, -.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:hover, -.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:focus - { - border: none; - box-shadow: none; - background-color: #fff; - height: 100%; -} -.seafile-comment-dropdown button:hover i { - color: #555; -} -.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .seafile-comment-dropdown-btn { - color: #999; -} -.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown:hover .seafile-comment-dropdown-btn { - color: #555; -} -.seafile-comment-item .seafile-comment-content { - margin: 10px 0 0 40px; -} -.seafile-comment-item .seafile-comment-content ol, -.seafile-comment-item .seafile-comment-content ul, -.seafile-comment-item .seafile-comment-content li { - margin-left: 10px; -} -.seafile-comment-item .seafile-comment-content table, -.seafile-comment-item .seafile-comment-content th, -.seafile-comment-item .seafile-comment-content td { - border: 1px solid #333; -} -.seafile-comment-item blockquote { - word-wrap: break-word; - overflow: hidden; - padding-left: 1rem; - cursor: pointer; -} -.seafile-comment-row-resize { - height: 5px; - width: 100%; - background-color: transparent; - position: absolute; - left: 0; - top: 0; - cursor: row-resize; - z-index: 1; -} -.seafile-comment-footer { - background-color: #fafaf9; - border-top: 1px solid #e5e5e5; - min-height: 120px; - position: absolute; - bottom: 0; - padding-top: 0; - width: 100%; -} -.seafile-comment-footer .seafile-add-comment { - margin: 10px 20px 5px 15px; - height: 100%; -} -.seafile-add-comment .add-comment-input, -.seafile-edit-comment .edit-comment-input { - box-sizing: border-box; - background-color: #fff; - border: 1px solid #e6e6dd; - padding: 5px; - height: calc(100% - 50px); - min-height: 70px; - width: 100%; - resize: none; - border-radius: 5px; -} -.seafile-comment-footer .seafile-add-comment .comment-btn, -.seafile-edit-comment .comment-btn { - height: 28px; - margin-top: 5px; - width: fit-content; - display: inline-block; -} -.seafile-edit-comment { - margin-top: 10px; -} -@media (max-width: 992px) { - .seafile-comment-footer { - min-height: 80px; - } - .seafile-comment-footer .seafile-add-comment .add-comment-input { - min-height: 30px; - } - .seafile-comment-list .comment-vacant { - padding: 10px; - } - .seafile-comment { - font-size: 12px; - } - .seafile-comment-footer .seafile-add-comment .comment-btn { - height: 24px; - } - .seafile-comment-footer { - min-height: 120px; - } -} \ No newline at end of file diff --git a/frontend/src/draft.js b/frontend/src/draft.js index 101a991b8e..12c1b5831f 100644 --- a/frontend/src/draft.js +++ b/frontend/src/draft.js @@ -53,8 +53,6 @@ class Draft extends React.Component { historyList: [], showReviewerDialog: false, reviewers: [], - inResizing: false, - rightPartWidth: 30, draftStatus: draftStatus, }; this.quote = ''; @@ -561,25 +559,6 @@ class Draft extends React.Component { this.oldIndex = node.data['old_index']; } - onResizeMouseUp = () => { - if (this.state.inResizing) { - this.setState({ inResizing: false }); - } - } - - onResizeMouseDown = () => { - this.setState({ inResizing: true }); - }; - - onResizeMouseMove = (e) => { - let rate = 100 - e.nativeEvent.clientX / this.refs.main.clientWidth * 100; - if (rate < 20 || rate > 60) { - this.setState({ inResizing: false }); - return null; - } - this.setState({ rightPartWidth: rate }); - }; - componentDidMount() { this.getOriginRepoInfo(); this.getDraftInfo(); @@ -660,7 +639,6 @@ class Draft extends React.Component { render() { const { draftInfo, reviewers, originRepoName, draftStatus } = this.state; - const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null; const draftLink = siteRoot + 'lib/' + draftRepoID + '/file' + draftFilePath + '?mode=edit'; const showPublishedButton = this.state.draftStatus == 'published'; const showPublishButton = this.state.draftStatus == 'open' && filePermission == 'rw'; @@ -706,8 +684,8 @@ class Draft extends React.Component {
-
-
+
+
{this.state.isLoading ?
@@ -718,8 +696,7 @@ class Draft extends React.Component {
}
-
-
+
{this.renderNavItems()}