From 1c303bf2f748a2ca6d4041ae800a3564e552dd28 Mon Sep 17 00:00:00 2001 From: llj Date: Fri, 8 Apr 2022 18:07:53 +0800 Subject: [PATCH 1/8] [seafile-editor] updated the version --- frontend/package-lock.json | 28 ++++++++++++++-------------- frontend/package.json | 4 ++-- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0fef17e313..34d20578fd 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.96", "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.96", + "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.96.tgz", + "integrity": "sha512-+aXsQrz+1JCLOJzR0iBicRAFc13G2XLefkexpY5NI9j+G8bQ8PmC8OP8k3vg2YMWvWMbLtICviC5bNTNgWm1Og==", "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.96", + "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.96.tgz", + "integrity": "sha512-+aXsQrz+1JCLOJzR0iBicRAFc13G2XLefkexpY5NI9j+G8bQ8PmC8OP8k3vg2YMWvWMbLtICviC5bNTNgWm1Og==", "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..77260f9255 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.96", "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", From cc9dbd346cbdb3b98a1b3202a4438d3b485f2a88 Mon Sep 17 00:00:00 2001 From: llj Date: Sat, 9 Apr 2022 14:55:40 +0800 Subject: [PATCH 2/8] [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', + */ }, }, }, From be69c6d7ce0fe68c35b4de8841aa60989424aef9 Mon Sep 17 00:00:00 2001 From: llj Date: Sat, 9 Apr 2022 17:11:17 +0800 Subject: [PATCH 3/8] [dir view] redesigned the 'comment panel' for file items --- .../dirent-detail/detail-comments-list.js | 43 +++++++++++-------- .../dirent-detail/dirent-details.js | 2 +- .../src/components/file-view/comment-panel.js | 20 ++++----- frontend/src/css/comments-list.css | 7 --- frontend/src/css/dirent-detail.css | 5 --- 5 files changed, 35 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/dirent-detail/detail-comments-list.js b/frontend/src/components/dirent-detail/detail-comments-list.js index 0b8e2a9b61..0d4ab2ab98 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 ( -
-
    - {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 ( - +
    +
    + {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.')}

    } - {(this.state.commentsList.length == 0 ) && -
  • {gettext('No comment yet.')}
    • } -
-
+
+
{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)} - - + ); })} ) : @@ -217,8 +216,7 @@ class CommentPanel extends React.Component { />
- +
diff --git a/frontend/src/css/comments-list.css b/frontend/src/css/comments-list.css index 8aac8e7fc9..7bdbe3e6c7 100644 --- a/frontend/src/css/comments-list.css +++ b/frontend/src/css/comments-list.css @@ -3,7 +3,6 @@ border-left: 1px solid #e6e6dd; display: flex; flex-direction: column; - width: 29%; } .seafile-comment-title, .seafile-history-title { @@ -28,9 +27,6 @@ .seafile-history-title .seafile-history-title-close:hover { color: #888; } -.seafile-comment-list { - overflow-y: auto; -} .seafile-comment-item { padding: 15px 10px; margin-bottom: 0; @@ -133,9 +129,6 @@ .detail-comments { border-left: 0; } -.detail-comments .seafile-comment-list { - margin-top: 0; -} .detail-comments .seafile-comment-footer { min-height: 175px; } 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; } From e086097a6929fc0b4a1400f90acd1f8e08b584d6 Mon Sep 17 00:00:00 2001 From: llj Date: Mon, 11 Apr 2022 17:57:24 +0800 Subject: [PATCH 4/8] [draft view] redesigned the 'comment' panel --- .../review-list-view/review-comments.js | 93 +++------- frontend/src/css/comments-list.css | 23 ++- frontend/src/css/draft.css | 12 +- frontend/src/css/file-view.css | 1 + frontend/src/css/review-comments.css | 169 ------------------ frontend/src/draft.js | 2 +- 6 files changed, 39 insertions(+), 261 deletions(-) delete mode 100644 frontend/src/css/review-comments.css diff --git a/frontend/src/components/review-list-view/review-comments.js b/frontend/src/components/review-list-view/review-comments.js index c950a30edf..9114756912 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 7bdbe3e6c7..7cf3410183 100644 --- a/frontend/src/css/comments-list.css +++ b/frontend/src/css/comments-list.css @@ -1,6 +1,5 @@ .seafile-comment { background-color: #f5f5f5; - border-left: 1px solid #e6e6dd; display: flex; flex-direction: column; } @@ -92,17 +91,26 @@ .seafile-comment-footer { 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; @@ -126,12 +134,3 @@ .seafile-edit-comment .comment-btn { height: 28px; } -.detail-comments { - border-left: 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/draft.css b/frontend/src/css/draft.css index 9ff939d12c..498ff1178b 100644 --- a/frontend/src/css/draft.css +++ b/frontend/src/css/draft.css @@ -26,13 +26,9 @@ height: 100%; } -.main .cur-view-container .seafile-comment { - height: 100%; - position: relative; -} .main .cur-view-right-part { height: 100%; - width: 35%; + width: 300px; position: relative; } @@ -118,7 +114,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 +141,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 c476b7dff3..c2674fe941 100644 --- a/frontend/src/css/file-view.css +++ b/frontend/src/css/file-view.css @@ -68,5 +68,6 @@ body { @media (min-width: 768px) { .file-view-body .seafile-comment { width: 300px; + border-left: 1px solid #e6e6dd; } } 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..8b730ebc54 100644 --- a/frontend/src/draft.js +++ b/frontend/src/draft.js @@ -54,7 +54,7 @@ class Draft extends React.Component { showReviewerDialog: false, reviewers: [], inResizing: false, - rightPartWidth: 30, + rightPartWidth: 300 / window.innerWidth * 100, draftStatus: draftStatus, }; this.quote = ''; From 0e180dd6b907357dbaa99ca703245e07d1eb2176 Mon Sep 17 00:00:00 2001 From: llj Date: Mon, 11 Apr 2022 18:46:33 +0800 Subject: [PATCH 5/8] [comment panels] fixed bugs & cleaned up some code --- .../components/dirent-detail/detail-comments-list.js | 2 +- frontend/src/components/file-view/comment-panel.js | 4 ++-- .../components/review-list-view/review-comments.js | 2 +- frontend/src/css/comments-list.css | 12 ++++-------- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/dirent-detail/detail-comments-list.js b/frontend/src/components/dirent-detail/detail-comments-list.js index 0d4ab2ab98..1e4bf5881b 100644 --- a/frontend/src/components/dirent-detail/detail-comments-list.js +++ b/frontend/src/components/dirent-detail/detail-comments-list.js @@ -176,7 +176,7 @@ class DetailCommentList 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 9114756912..2c759286b3 100644 --- a/frontend/src/components/review-list-view/review-comments.js +++ b/frontend/src/components/review-list-view/review-comments.js @@ -113,7 +113,7 @@ class ReviewComments extends React.Component { diff --git a/frontend/src/css/comments-list.css b/frontend/src/css/comments-list.css index 7cf3410183..1aa59916d6 100644 --- a/frontend/src/css/comments-list.css +++ b/frontend/src/css/comments-list.css @@ -3,8 +3,7 @@ display: flex; flex-direction: column; } -.seafile-comment-title, -.seafile-history-title { +.seafile-comment-title { border-bottom: 1px solid #e5e5e5; min-height: 3em; line-height: 3em; @@ -12,18 +11,15 @@ display: flex; 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-item { From 1869489c0e5c7e9aa5c4cd602b04e54b7cc7d36f Mon Sep 17 00:00:00 2001 From: llj Date: Mon, 11 Apr 2022 18:51:25 +0800 Subject: [PATCH 6/8] [draft view] side panel: improved the 'info' panel --- frontend/src/css/draft.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/css/draft.css b/frontend/src/css/draft.css index 498ff1178b..d3ee7e5ee7 100644 --- a/frontend/src/css/draft.css +++ b/frontend/src/css/draft.css @@ -93,7 +93,7 @@ font-weight: 700; } .review-side-panel-body { - padding: 1rem 2rem 3rem; + padding: 1rem 1rem 3rem; overflow-y: scroll; height: 100%; } From 7f976c2073abb346c165d1afbeec1726014100cd Mon Sep 17 00:00:00 2001 From: llj Date: Tue, 12 Apr 2022 12:21:52 +0800 Subject: [PATCH 7/8] [seafile-editor] updated the version --- frontend/package-lock.json | 14 +++++++------- frontend/package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 34d20578fd..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.96", + "@seafile/seafile-editor": "^0.3.97", "chart.js": "2.9.4", "classnames": "^2.2.6", "copy-to-clipboard": "^3.0.8", @@ -5085,9 +5085,9 @@ } }, "node_modules/@seafile/seafile-editor": { - "version": "0.3.96", - "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.96.tgz", - "integrity": "sha512-+aXsQrz+1JCLOJzR0iBicRAFc13G2XLefkexpY5NI9j+G8bQ8PmC8OP8k3vg2YMWvWMbLtICviC5bNTNgWm1Og==", + "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", @@ -32114,9 +32114,9 @@ } }, "@seafile/seafile-editor": { - "version": "0.3.96", - "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.3.96.tgz", - "integrity": "sha512-+aXsQrz+1JCLOJzR0iBicRAFc13G2XLefkexpY5NI9j+G8bQ8PmC8OP8k3vg2YMWvWMbLtICviC5bNTNgWm1Og==", + "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", diff --git a/frontend/package.json b/frontend/package.json index 77260f9255..83b24cff03 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,7 +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.96", + "@seafile/seafile-editor": "^0.3.97", "chart.js": "2.9.4", "classnames": "^2.2.6", "copy-to-clipboard": "^3.0.8", From 6999d3be764b497ac9b366a09981e2f430855014 Mon Sep 17 00:00:00 2001 From: llj Date: Tue, 12 Apr 2022 14:23:19 +0800 Subject: [PATCH 8/8] [draft view] removed the vertical resizer between the main panel & the side panel --- frontend/src/css/draft.css | 16 ++-------------- frontend/src/draft.js | 29 +++-------------------------- 2 files changed, 5 insertions(+), 40 deletions(-) diff --git a/frontend/src/css/draft.css b/frontend/src/css/draft.css index d3ee7e5ee7..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; } @@ -29,20 +27,10 @@ .main .cur-view-right-part { height: 100%; 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; diff --git a/frontend/src/draft.js b/frontend/src/draft.js index 8b730ebc54..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: 300 / window.innerWidth * 100, 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()}