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

change comment panel style (#2573)

Browse Source
This commit is contained in:
Michael An
2018-11-28 12:43:53 +08:00
committed by Daniel Pan
parent 09f32f2312
commit c122f30101
4 changed files with 102 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/review-list-view/review-comments.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { processor } from '../../utils/seafile-markdown2html';
import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api';
import { reviewID, gettext } from '../../utils/constants';
import Loading from '../../components/loading.js';
@@ -12,7 +12,6 @@ import '../../css/review-comments.css';
const commentPropTypes = {
getCommentsNumber: PropTypes.func.isRequired,
inResizing: PropTypes.bool.isRequired,
toggleCommentList: PropTypes.func.isRequired,
commentsNumber: PropTypes.number.isRequired,
selectedText: PropTypes.string,
newIndex: PropTypes.number,
@@ -29,8 +28,7 @@ class ReviewComments extends React.Component {
userAvatar: '',
inResizing: false,
commentFooterHeight: 30,
showResolvedComment: false,
openResolvedTooltip: false,
showResolvedComment: true,
comment: '',
};
this.accountInfo = {};
@@ -107,12 +105,6 @@ class ReviewComments extends React.Component {
});
}
toggleResolvedTooltip = () => {
this.setState({
openResolvedTooltip: !this.state.openResolvedTooltip
});
}
deleteComment = (event) => {
seafileAPI.deleteReviewComment(reviewID, event.target.id).then((res) => {
this.props.getCommentsNumber();
@@ -135,7 +127,7 @@ class ReviewComments extends React.Component {
};
onResizeMouseMove = (event) => {
let rate = 100 - (event.nativeEvent.clientY - 50 ) / this.refs.comment.clientHeight * 100;
let rate = 100 - (event.nativeEvent.clientY - 120 ) / this.refs.comment.clientHeight * 100;
if (rate < 20 || rate > 70) {
if (rate < 20) {
this.setState({
@@ -162,7 +154,7 @@ class ReviewComments extends React.Component {
let comment = '> ' + text;
this.setState({
comment: comment
})
});
}
}
@@ -195,18 +187,15 @@ class ReviewComments extends React.Component {
'seafile-comment seafile-comment-resizing' : 'seafile-comment'}
onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="comment">
<div className="seafile-comment-title">
<div onClick={this.props.toggleCommentList} className={'seafile-comment-title-close'}>
<i className={'fa fa-times-circle'}/>
</div>
<div className={'seafile-comment-title-text'}>{gettext('Comments')}</div>
<div className={'seafile-comment-title-text'}>{gettext('Show resolved comments')}</div>
<div className={'seafile-comment-title-toggle'}>
<label className="custom-switch" id="toggle-resolved-comments">
<input type="checkbox" name="option" className="custom-switch-input" onClick={this.toggleResolvedComment}/>
<input type="checkbox" name="option" className="custom-switch-input"
onChange={this.toggleResolvedComment}
checked={this.state.showResolvedComment && 'checked'}
/>
<span className="custom-switch-indicator"></span>
</label>
<Tooltip placement="bottom" isOpen={this.state.openResolvedTooltip}
target="toggle-resolved-comments" toggle={this.toggleResolvedTooltip}>
{gettext('Show/Hide resolved comments')}</Tooltip>
</div>
</div>
<div style={{height:(100-this.state.commentFooterHeight)+'%'}}>

26
frontend/src/css/draft-review.css
View File

@@ -1,5 +1,6 @@
.header .button-group {
display: flex;
align-items: center;
}
.header .common-list-btn, .header .add-reviewer-btn {
@@ -139,17 +140,40 @@
cursor: pointer;
background-color: #eee;
}
.comments-number {
font-size: 12px;
width: 16px;
height: 16px;
border-radius: 8px;
text-align: center;
line-height: 16px;
font-weight: 600;
background-color: #feac74;
position: absolute;
top: 10%;
right: 30%;
color: #fff;
}
.review-side-panel-nav {
margin: 0;
}
.review-side-panel-nav .nav-item {
width: 50%;
width: 33.3%;
}
.review-side-panel-nav .nav-item a {
margin: 0 auto;
}
.review-side-panel-nav .nav-item i {
padding: 0 8px;
font-size: 1rem;
width: 1rem;
}
.review-side-panel .tab-content {
height: 100%;
}
.review-side-panel .tab-content .comments {
height: 100%;
}
@media (max-width: 992px) {

41
frontend/src/css/review-comments.css
View File

@@ -1,40 +1,31 @@
.seafile-comment {
border-left: 1px solid #e6e6dd;
background-color: #fff;
display: flex;
flex-direction: column;
flex: 0 0 auto;
height: 100%;
}
.seafile-comment-resizing {
user-select: none;
}
.seafile-comment-title {
border-bottom: 1px solid #e5e5e5;
line-height: 3em;
line-height: 2em;
padding: 0 1em;
display: flex;
flex-direction: row;
position: absolute;
z-index: 1;
width: 100%;
background-color: #fafaf9;
background-color: #fff;
}
.seafile-comment-title .seafile-comment-title-text {
width: 100%;
text-align: center;
font-weight: 700;
}
.seafile-comment-title .seafile-comment-title-close {
color: #b9b9b9;
}
.seafile-comment-title .seafile-comment-title-close:hover {
color: #888;
}
.seafile-comment-title .seafile-comment-title-toggle {
display: flex;
}
.seafile-comment-list {
padding-top: 45px;
padding-top: 30px;
box-sizing: border-box;
height: 100%;
overflow-y: auto;
@@ -49,7 +40,6 @@
.seafile-comment-item {
overflow-y: hidden;
padding: 15px 10px;
overflow-y: hidden;
}
.seafile-comment-item-resolved {
background-color: #e6ffed;
@@ -59,9 +49,17 @@
}
.seafile-comment-item .seafile-comment-info .reviewer-info {
padding-left: 10px;
height: 2rem;
display: block;
}
.seafile-comment-item .seafile-comment-info .reviewer-name {
font-size: 1rem;
height: 1rem;
line-height: 1rem;
}
.seafile-comment-item .seafile-comment-info .review-time {
font-size: .6em;
margin-top: 2px;
font-size: .6rem;
color: #777;
}
.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown {
@@ -86,7 +84,7 @@
color: #555;
}
.seafile-comment-item .seafile-comment-content {
margin-left: 42px;
margin: 10px 0 0 42px;
}
.seafile-comment-item .seafile-comment-content ol,
.seafile-comment-item .seafile-comment-content ul,
@@ -112,15 +110,11 @@
background-color: #fafaf9;
padding: 10px;
border-top: 1px solid #e5e5e5;
display: flex;
justify-content: flex-start;
position: relative;
min-height: 140px;
min-height: 170px;
position: absolute;
bottom: 0;
padding-top: 0;
width: 100%;
position: relative;
}
.seafile-comment-footer .user-header {
margin-top: 10px;
@@ -129,15 +123,14 @@
.seafile-comment-footer .seafile-add-comment {
margin: 10px 10px 5px 40px;
height: 100%;
width: 100%;
}
.seafile-comment-footer .seafile-add-comment .add-comment-input {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #e6e6dd;
padding: 5px;
height: calc(100% - 38px);
min-height: 90px;
height: calc(100% - 100px);
min-height: 70px;
width: 100%;
resize: none;
}

89
frontend/src/draft-review.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
/* eslint-disable */
import Prism from 'prismjs';
/* eslint-enable */
@@ -127,12 +128,6 @@ class DraftReview extends React.Component {
});
}
toggleCommentList = () => {
this.setState({
isShowComments: !this.state.isShowComments
});
}
getCommentsNumber = () => {
seafileAPI.listReviewComments(reviewID).then((res) => {
let number = res.data.total_count;
@@ -338,14 +333,15 @@ class DraftReview extends React.Component {
tabItemClick = (tab) => {
if (this.state.activeTab !== tab) {
if (tab == "reviewInfo") {
if (tab == 'reviewInfo') {
this.initialContent();
} else {
}
else if (tab == 'history'){
this.initialDiffViewerContent();
}
this.setState({
activeTab: tab
})
});
}
}
@@ -354,13 +350,13 @@ class DraftReview extends React.Component {
let keys = [];
let lastDiffState = '';
nodes.map((node) => {
if (node.data.get("diff_state") === 'diff-added' && lastDiffState !== 'diff-added') {
if (node.data.get('diff_state') === 'diff-added' && lastDiffState !== 'diff-added') {
keys.push(node.key);
}
else if (node.data.get("diff_state") === 'diff-removed' && lastDiffState !== 'diff-removed') {
else if (node.data.get('diff_state') === 'diff-removed' && lastDiffState !== 'diff-removed') {
keys.push(node.key);
}
lastDiffState = node.data.get("diff_state");
lastDiffState = node.data.get('diff_state');
});
this.setState({
changedNodes: keys
@@ -422,7 +418,7 @@ class DraftReview extends React.Component {
this.setState({
draftContent: content.data,
draftOriginContent: ''
})
});
});
});
}
@@ -433,7 +429,7 @@ class DraftReview extends React.Component {
this.setState({
draftContent: newContent,
draftOriginContent: prevContent
})
});
}
render() {
@@ -468,14 +464,6 @@ class DraftReview extends React.Component {
target="toggle-diff" toggle={this.toggleDiffTip}>
{gettext('View diff')}</Tooltip>
</div>
<button className="btn btn-icon btn-secondary btn-active common-list-btn"
id="commentsNumber" type="button" data-active="false"
onMouseDown={this.toggleCommentList}>
<i className="fa fa-comments"></i>
{ this.state.commentsNumber > 0 &&
<span>&nbsp;{this.state.commentsNumber}</span>
}
</button>
{
this.state.reviewStatus === 'open' &&
<div className="cur-file-operation">
@@ -524,21 +512,6 @@ class DraftReview extends React.Component {
</div>
}
</div>
{ this.state.isShowComments &&
<div className="cur-view-right-part" style={{width:(this.state.commentWidth)+'%'}}>
<div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
<ReviewComments
toggleCommentList={this.toggleCommentList}
scrollToQuote={this.scrollToQuote}
getCommentsNumber={this.getCommentsNumber}
commentsNumber={this.state.commentsNumber}
inResizing={this.state.inResizing}
selectedText={this.selectedText}
newIndex={this.newIndex}
oldIndex={this.oldIndex}
/>
</div>
}
{ !this.state.isShowComments &&
<div className="cur-view-right-part" style={{width:(this.state.commentWidth)+'%'}}>
<div className="seafile-comment-resize" onMouseDown={this.onResizeMouseDown}></div>
@@ -552,7 +525,17 @@ class DraftReview extends React.Component {
<i className="fas fa-info-circle"></i>
</NavLink>
</NavItem>
{ this.state.reviewStatus == "finished" ? '':
<NavItem className="nav-item">
<NavLink
className={classnames({ active: this.state.activeTab === 'comments' })}
onClick={() => { this.tabItemClick('comments');}}
>
<i className="fa fa-comments"></i>
{ this.state.commentsNumber > 0 &&
<div className='comments-number'>{this.state.commentsNumber}</div>}
</NavLink>
</NavItem>
{ this.state.reviewStatus == 'finished' ? '':
<NavItem className="nav-item">
<NavLink
className={classnames({ active: this.state.activeTab === 'history' })}
@@ -577,7 +560,21 @@ class DraftReview extends React.Component {
}
</div>
</TabPane>
{ this.state.reviewStatus == "finished"? '':
<TabPane tabId="comments" className="comments">
{this.state.commentsNumber &&
<ReviewComments
scrollToQuote={this.scrollToQuote}
getCommentsNumber={this.getCommentsNumber}
commentsNumber={this.state.commentsNumber}
inResizing={this.state.inResizing}
selectedText={this.selectedText}
newIndex={this.newIndex}
oldIndex={this.oldIndex}
/>
}
</TabPane>
{ this.state.reviewStatus == 'finished'? '':
<TabPane tabId="history" className="history">
<HistoryList setDiffViewerContent={this.setDiffViewerContent}
historyList={this.state.historyList}
@@ -632,6 +629,13 @@ class SidePanelReviewers extends React.Component {
}
}
const sidePanelReviewersPropTypes = {
reviewers: PropTypes.array.isRequired,
toggleAddReviewerDialog: PropTypes.func.isRequired
};
SidePanelReviewers.propTypes = sidePanelReviewersPropTypes;
class SidePanelAuthor extends React.Component {
render() {
return (
@@ -670,6 +674,13 @@ class SidePanelChanges extends React.Component {
}
}
const sidePanelChangesPropTypes = {
changedNumber: PropTypes.number.isRequired,
scrollToChangedNode: PropTypes.func.isRequired
};
SidePanelChanges.propTypes = sidePanelChangesPropTypes;
ReactDOM.render (
<DraftReview />,
document.getElementById('wrapper')