haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-08 10:22:46 +00:00
Code Issues Releases Wiki Activity

update

Browse Source
This commit is contained in:
Michael An
2019-04-26 12:07:55 +08:00
parent ee419a6048
commit 4641cb2c9d
4 changed files with 117 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/dialog/add-reviewer-dialog.js
View File

@@ -28,16 +28,12 @@ class AddReviewerDialog extends React.Component {
listReviewers = () => { listReviewers = () => {
seafileAPI.listDraftReviewers(this.props.draftID).then((res) => { seafileAPI.listDraftReviewers(this.props.draftID).then((res) => {
this.setState({ this.setState({ reviewers: res.data.reviewers });
reviewers: res.data.reviewers
});
}); });
} }
handleSelectChange = (option) => { handleSelectChange = (option) => {
this.setState({ this.setState({ selectedOption: option });
selectedOption: option,
});
this.Options = []; this.Options = [];
} }
@@ -58,9 +54,7 @@ class AddReviewerDialog extends React.Component {
for (let i = 0 ; i < res.data.failed.length ; i++) { for (let i = 0 ; i < res.data.failed.length ; i++) {
errorMsg[i] = res.data.failed[i]; errorMsg[i] = res.data.failed[i];
} }
this.setState({ this.setState({ errorMsg: errorMsg });
errorMsg: errorMsg
});
} }
this.setState({ this.setState({
selectedOption: null, selectedOption: null,
@@ -83,18 +77,18 @@ class AddReviewerDialog extends React.Component {
newReviewers.push(this.state.reviewers[i]); newReviewers.push(this.state.reviewers[i]);
} }
} }
this.setState({ this.setState({ reviewers: newReviewers });
reviewers: newReviewers
});
} }
}); });
} }
render() { render() {
const toggleDialog = this.props.toggleAddReviewerDialog;
const { reviewers, errorMsg } = this.state;
return ( return (
<Modal isOpen={true} toggle={this.props.toggleAddReviewerDialog}> <Modal isOpen={true} toggle={toggleDialog}>
<ModalHeader>{gettext('Request a review')}</ModalHeader> <ModalHeader toggle={toggleDialog}>{gettext('Request a review')}</ModalHeader>
<ModalBody > <ModalBody>
<p>{gettext('Add new reviewer')}</p> <p>{gettext('Add new reviewer')}</p>
<div className='add-reviewer'> <div className='add-reviewer'>
<UserSelect <UserSelect
@@ -109,16 +103,16 @@ class AddReviewerDialog extends React.Component {
<Button color="secondary" disabled>{gettext('Submit')}</Button> <Button color="secondary" disabled>{gettext('Submit')}</Button>
} }
</div> </div>
{this.state.errorMsg.length > 0 && {errorMsg.length > 0 &&
this.state.errorMsg.map((item, index = 0, arr) => { errorMsg.map((item, index = 0, arr) => {
return ( return (
<p className="reviewer-select-error error" key={index}>{this.state.errorMsg[index].email} <p className="reviewer-select-error error" key={index}>{errorMsg[index].email}
{': '}{this.state.errorMsg[index].error_msg}</p> {': '}{errorMsg[index].error_msg}</p>
); );
}) })
} }
{ this.state.reviewers.length > 0 && {reviewers.length > 0 &&
this.state.reviewers.map((item, index = 0, arr) => { reviewers.map((item, index = 0, arr) => {
return ( return (
<div className="reviewer-select-info" key={index}> <div className="reviewer-select-info" key={index}>
<div> <div>
@@ -132,8 +126,7 @@ class AddReviewerDialog extends React.Component {
} }
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="secondary" onClick={this.props.toggleAddReviewerDialog}> <Button color="secondary" onClick={toggleDialog}>{gettext('Close')}</Button>
{gettext('Close')}</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
); );

47
frontend/src/components/review-list-view/review-comment-dialog.js
View File

@@ -13,7 +13,6 @@ const commentDialogPropTypes = {
quote: PropTypes.string, quote: PropTypes.string,
newIndex: PropTypes.number, newIndex: PropTypes.number,
oldIndex: PropTypes.number, oldIndex: PropTypes.number,
draftID: PropTypes.string,
}; };
class ReviewCommentDialog extends React.Component { class ReviewCommentDialog extends React.Component {
@@ -28,43 +27,35 @@ class ReviewCommentDialog extends React.Component {
handleCommentChange = (event) => { handleCommentChange = (event) => {
let comment = event.target.value; let comment = event.target.value;
this.setState({ this.setState({ comment: comment });
comment: comment
});
} }
submitComment = () => { submitComment = () => {
let comment = this.state.comment.trim(); const { quote, newIndex, oldIndex } = this.props;
if (comment.length > 0) { const comment = this.state.comment.trim();
if (this.props.quote.length > 0) { if (comment.length === 0) return;
let detail = { if (quote.length > 0) {
quote: this.props.quote, let detail = {
newIndex: this.props.newIndex, quote: quote,
oldIndex: this.props.oldIndex newIndex: newIndex,
}; oldIndex: oldIndex
let detailJSON = JSON.stringify(detail); };
seafileAPI.postComment(draftRepoID, draftFilePath, comment, detailJSON).then((response) => { seafileAPI.postComment(draftRepoID, draftFilePath, comment, JSON.stringify(detail)).then(() => {
this.props.onCommentAdded(); this.props.onCommentAdded();
}); });
} } else {
else { seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
seafileAPI.postComment(draftRepoID, draftFilePath, comment).then((response) => { this.props.onCommentAdded();
this.props.onCommentAdded();
});
}
this.setState({
comment: ''
}); });
} }
this.setState({ comment: '' });
} }
setQuoteText = (mdQuote) => { setQuoteText = (mdQuote) => {
processor.process(mdQuote).then( processor.process(mdQuote).then(
(result) => { (result) => {
let quote = String(result); let quote = String(result);
this.setState({ this.setState({ quote: quote });
quote: quote
});
} }
); );
} }

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

@@ -37,9 +37,7 @@ class ReviewComments extends React.Component {
let commentItem = new reviewComment(item); let commentItem = new reviewComment(item);
commentList.push(commentItem); commentList.push(commentItem);
}); });
this.setState({ this.setState({ commentsList: commentList });
commentsList: commentList
});
if (scroll) { if (scroll) {
let that = this; let that = this;
setTimeout(() => { setTimeout(() => {
@@ -50,21 +48,17 @@ class ReviewComments extends React.Component {
} }
handleCommentChange = (event) => { handleCommentChange = (event) => {
this.setState({ this.setState({ comment: event.target.value });
comment: event.target.value,
});
} }
submitComment = () => { submitComment = () => {
let comment = this.state.comment.trim(); let comment = this.state.comment.trim();
if (comment.length > 0) { if (comment.length > 0) {
seafileAPI.postComment(draftRepoID, draftFilePath, comment).then((response) => { seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
this.listComments(true); this.listComments(true);
this.props.getCommentsNumber(); this.props.getCommentsNumber();
}); });
this.setState({ this.setState({ comment: '' });
comment: ''
});
} }
} }
@@ -83,9 +77,7 @@ class ReviewComments extends React.Component {
} }
toggleResolvedComment = () => { toggleResolvedComment = () => {
this.setState({ this.setState({ showResolvedComment: !this.state.showResolvedComment });
showResolvedComment: !this.state.showResolvedComment
});
} }
deleteComment = (event) => { deleteComment = (event) => {
@@ -97,46 +89,32 @@ class ReviewComments extends React.Component {
onResizeMouseUp = () => { onResizeMouseUp = () => {
if (this.state.inResizing) { if (this.state.inResizing) {
this.setState({ this.setState({ inResizing: false });
inResizing: false
});
} }
} }
onResizeMouseDown = () => { onResizeMouseDown = () => {
this.setState({ this.setState({ inResizing: true });
inResizing: true
});
}; };
onResizeMouseMove = (event) => { onResizeMouseMove = (event) => {
let rate = 100 - (event.nativeEvent.clientY - 120 ) / 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 || rate > 70) {
if (rate < 20) { if (rate < 20) {
this.setState({ this.setState({ commentFooterHeight: 25 });
commentFooterHeight: 25
});
} }
if (rate > 70) { if (rate > 70) {
this.setState({ this.setState({ commentFooterHeight: 65 });
commentFooterHeight: 65
});
} }
this.setState({ this.setState({ inResizing: false });
inResizing: false
});
return null; return null;
} }
this.setState({ this.setState({ commentFooterHeight: rate });
commentFooterHeight: rate
});
}; };
scrollToQuote = (newIndex, oldIndex, quote) => { scrollToQuote = (newIndex, oldIndex, quote) => {
this.props.scrollToQuote(newIndex, oldIndex, quote); this.props.scrollToQuote(newIndex, oldIndex, quote);
this.setState({ this.setState({ comment: '' });
comment: ''
});
} }
componentWillMount() { componentWillMount() {
@@ -151,6 +129,8 @@ class ReviewComments extends React.Component {
render() { render() {
const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null; const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
const { commentsNumber } = this.props;
const { commentsList } = this.state;
return ( return (
<div className={(this.state.inResizing || this.props.inResizing)? <div className={(this.state.inResizing || this.props.inResizing)?
'seafile-comment seafile-comment-resizing' : 'seafile-comment'} 'seafile-comment seafile-comment-resizing' : 'seafile-comment'}
@@ -167,23 +147,29 @@ class ReviewComments extends React.Component {
</label> </label>
</div> </div>
</div> </div>
<div style={{height:(100-this.state.commentFooterHeight)+'%'}}> <div style={{height:(100 - this.state.commentFooterHeight)+'%'}}>
{ this.props.commentsNumber == 0 && {commentsNumber == 0 &&
<div className={'seafile-comment-list'}> <div className="seafile-comment-list">
<div className="comment-vacant">{gettext('No comment yet.')}</div> <div className="comment-vacant">{gettext('No comment yet.')}</div>
</div> </div>
} }
{ (this.state.commentsList.length === 0 && this.props.commentsNumber > 0) && {(commentsList.length === 0 && commentsNumber > 0) &&
<div className={'seafile-comment-list'}><Loading/></div> <div className={'seafile-comment-list'}><Loading/></div>
} }
{ this.state.commentsList.length > 0 && {commentsList.length > 0 &&
<ul className={'seafile-comment-list'} ref='commentsList'> <ul className="seafile-comment-list" ref='commentsList'>
{ (this.state.commentsList.length > 0 && this.props.commentsNumber > 0) && {(commentsList.length > 0 && commentsNumber > 0) &&
this.state.commentsList.map((item, index) => { commentsList.map((item, index) => {
return ( return (
<CommentItem item={item} showResolvedComment={this.state.showResolvedComment} <CommentItem
resolveComment={this.resolveComment} key={index} editComment={this.editComment} item={item}
scrollToQuote={this.scrollToQuote} deleteComment={this.deleteComment}/> key={index}
showResolvedComment={this.state.showResolvedComment}
resolveComment={this.resolveComment}
editComment={this.editComment}
scrollToQuote={this.scrollToQuote}
deleteComment={this.deleteComment}
/>
); );
}) })
} }
@@ -193,9 +179,13 @@ class ReviewComments extends React.Component {
<div className="seafile-comment-footer" style={{height:this.state.commentFooterHeight+'%'}}> <div className="seafile-comment-footer" style={{height:this.state.commentFooterHeight+'%'}}>
<div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div> <div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div>
<div className="seafile-add-comment"> <div className="seafile-add-comment">
<textarea className="add-comment-input" value={this.state.comment} <textarea
placeholder={gettext('Add a comment.')} onChange={this.handleCommentChange} className="add-comment-input"
clos="100" rows="3" warp="virtual"></textarea> value={this.state.comment}
placeholder={gettext('Add a comment.')}
onChange={this.handleCommentChange}
clos="100" rows="3" warp="virtual"
></textarea>
<Button className="comment-btn" color="success" <Button className="comment-btn" color="success"
size="sm" onClick={this.submitComment}> size="sm" onClick={this.submitComment}>
{gettext('Submit')}</Button> {gettext('Submit')}</Button>
@@ -231,28 +221,18 @@ class CommentItem extends React.Component {
} }
toggleDropDownMenu = () => { toggleDropDownMenu = () => {
this.setState({ this.setState({ dropdownOpen: !this.state.dropdownOpen });
dropdownOpen: !this.state.dropdownOpen,
});
} }
convertComment = (item) => { convertComment = (item) => {
processor.process(item.comment).then( processor.process(item.comment).then((result) => {
(result) => { let comment = String(result);
let comment = String(result); this.setState({ comment: comment });
this.setState({ });
comment: comment processor.process(item.quote).then((result) => {
}); let quote = String(result);
} this.setState({ quote: quote });
); });
processor.process(item.quote).then(
(result) => {
let quote = String(result);
this.setState({
quote: quote
});
}
);
} }
scrollToQuote = () => { scrollToQuote = () => {
@@ -261,9 +241,7 @@ class CommentItem extends React.Component {
} }
toggleEditComment = () => { toggleEditComment = () => {
this.setState({ this.setState({ editable: !this.state.editable });
editable: !this.state.editable
});
} }
updateComment = (event) => { updateComment = (event) => {
@@ -275,9 +253,7 @@ class CommentItem extends React.Component {
} }
handleCommentChange = (event) => { handleCommentChange = (event) => {
this.setState({ this.setState({ newComment: event.target.value });
newComment: event.target.value,
});
} }
componentWillMount() { componentWillMount() {
@@ -290,9 +266,7 @@ class CommentItem extends React.Component {
render() { render() {
const item = this.props.item; const item = this.props.item;
if (item.resolved && !this.props.showResolvedComment) { if (item.resolved && !this.props.showResolvedComment) return null;
return null;
}
if (this.state.editable) { if (this.state.editable) {
return( return(
<li className="seafile-comment-item" id={item.id}> <li className="seafile-comment-item" id={item.id}>
@@ -304,9 +278,16 @@ class CommentItem extends React.Component {
</div> </div>
</div> </div>
<div className="seafile-edit-comment"> <div className="seafile-edit-comment">
<textarea className="edit-comment-input" value={this.state.newComment} onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"></textarea> <textarea
<Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '} className="edit-comment-input"
<Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}> {gettext('Cancel')}</Button> value={this.state.newComment}
onChange={this.handleCommentChange}
clos="100" rows="3" warp="virtual"
></textarea>
<Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>
{gettext('Update')}</Button>{' '}
<Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}>
{gettext('Cancel')}</Button>
</div> </div>
</li> </li>
); );
@@ -320,17 +301,17 @@ class CommentItem extends React.Component {
<div className="reviewer-name">{item.name}</div> <div className="reviewer-name">{item.name}</div>
<div className="review-time">{item.time}</div> <div className="review-time">{item.time}</div>
</div> </div>
{ !item.resolved && {!item.resolved &&
<Dropdown isOpen={this.state.dropdownOpen} size="sm" <Dropdown isOpen={this.state.dropdownOpen} size="sm"
className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}> className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
<DropdownToggle className="seafile-comment-dropdown-btn"> <DropdownToggle className="seafile-comment-dropdown-btn">
<i className="fas fa-ellipsis-v"></i> <i className="fas fa-ellipsis-v"></i>
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu>
{ (item.userEmail === username) && {(item.userEmail === username) &&
<DropdownItem onClick={this.props.deleteComment} <DropdownItem onClick={this.props.deleteComment}
className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>} className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>}
{ (item.userEmail === username) && {(item.userEmail === username) &&
<DropdownItem onClick={this.toggleEditComment} <DropdownItem onClick={this.toggleEditComment}
className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>} className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>}
<DropdownItem onClick={this.props.resolveComment} <DropdownItem onClick={this.props.resolveComment}
@@ -339,7 +320,7 @@ class CommentItem extends React.Component {
</Dropdown> </Dropdown>
} }
</div> </div>
{ (item.newIndex >= -1 && item.oldIndex >= -1) && {(item.newIndex >= -1 && item.oldIndex >= -1) &&
<blockquote className="seafile-comment-content"> <blockquote className="seafile-comment-content">
<div onClick={this.scrollToQuote} dangerouslySetInnerHTML={{ __html: this.state.quote }}></div> <div onClick={this.scrollToQuote} dangerouslySetInnerHTML={{ __html: this.state.quote }}></div>
</blockquote> </blockquote>

62
frontend/src/draft.js
View File

@@ -221,12 +221,8 @@ class Draft extends React.Component {
addComment = (e) => { addComment = (e) => {
e.stopPropagation(); e.stopPropagation();
this.getQuote(); this.getQuote();
if (!this.quote) { if (!this.quote) return;
return; this.setState({ isShowCommentDialog: true });
}
this.setState({
isShowCommentDialog: true
});
} }
onCommentAdded = () => { onCommentAdded = () => {
@@ -482,8 +478,7 @@ class Draft extends React.Component {
} }
if (tab == 'reviewInfo') { if (tab == 'reviewInfo') {
this.initialContent(); this.initialContent();
} } else if (tab == 'history') {
else if (tab == 'history') {
this.initialDiffViewerContent(); this.initialDiffViewerContent();
} }
this.setState({ this.setState({
@@ -553,8 +548,7 @@ class Draft extends React.Component {
newNativeRange.setStartBefore(startNode); newNativeRange.setStartBefore(startNode);
newNativeRange.setEndAfter(startNode); newNativeRange.setEndAfter(startNode);
this.range = findRange(newNativeRange, this.refs.diffViewer); this.range = findRange(newNativeRange, this.refs.diffViewer);
} } else {
else {
this.range = findRange(nativeRange, this.refs.diffViewer); this.range = findRange(nativeRange, this.refs.diffViewer);
} }
if (!this.range) { if (!this.range) {
@@ -588,9 +582,7 @@ class Draft extends React.Component {
getQuote = () => { getQuote = () => {
let range = this.range; let range = this.range;
if (!range) { if (!range) return;
return;
}
this.quote = ''; this.quote = '';
const { document } = this.refs.diffViewer.value; const { document } = this.refs.diffViewer.value;
let { anchor, focus } = range; let { anchor, focus } = range;
@@ -633,15 +625,11 @@ class Draft extends React.Component {
removeNullNode = (oldNodes) => { removeNullNode = (oldNodes) => {
let newNodes = []; let newNodes = [];
oldNodes.map((node) => { oldNodes.map((node) => {
const text = node.text.trim(); if (!node.text.trim()) return;
const childNodes = node.nodes; const childNodes = node.nodes;
if (!text) {
return;
}
if ((childNodes && childNodes.size === 1) || (!childNodes)) { if ((childNodes && childNodes.size === 1) || (!childNodes)) {
newNodes.push(node); newNodes.push(node);
} } else if (childNodes.size > 1) {
else if (childNodes.size > 1) {
let nodes = this.removeNullNode(childNodes); let nodes = this.removeNullNode(childNodes);
let newNode = Block.create({ let newNode = Block.create({
nodes: nodes, nodes: nodes,
@@ -657,29 +645,21 @@ class Draft extends React.Component {
onResizeMouseUp = () => { onResizeMouseUp = () => {
if (this.state.inResizing) { if (this.state.inResizing) {
this.setState({ this.setState({ inResizing: false });
inResizing: false
});
} }
} }
onResizeMouseDown = () => { onResizeMouseDown = () => {
this.setState({ this.setState({ inResizing: true });
inResizing: true
});
}; };
onResizeMouseMove = (e) => { onResizeMouseMove = (e) => {
let rate = 100 - e.nativeEvent.clientX / this.refs.main.clientWidth * 100; let rate = 100 - e.nativeEvent.clientX / this.refs.main.clientWidth * 100;
if (rate < 20 || rate > 60) { if (rate < 20 || rate > 60) {
this.setState({ this.setState({ inResizing: false });
inResizing: false
});
return null; return null;
} }
this.setState({ this.setState({ rightPartWidth: rate });
rightPartWidth: rate
});
}; };
componentWillMount() { componentWillMount() {
@@ -701,20 +681,14 @@ class Draft extends React.Component {
renderDiffButton = () => { renderDiffButton = () => {
switch(draftStatus) { switch(draftStatus) {
case 'open': case 'open':
if (!draftFileExists) { if (!draftFileExists || !originFileExists) {
return; return;
} }
if (!originFileExists) {
return;
}
return this.showDiffButton(); return this.showDiffButton();
case 'published': case 'published':
if (!originFileExists) { if (!originFileExists) {
return; return;
} }
return this.showDiffButton(); return this.showDiffButton();
} }
} }
@@ -879,7 +853,7 @@ class Draft extends React.Component {
</div> </div>
</div> </div>
</div> </div>
{ this.state.showReviewerDialog && {this.state.showReviewerDialog &&
<ModalPortal> <ModalPortal>
<AddReviewerDialog <AddReviewerDialog
showReviewerDialog={this.state.showReviewerDialog} showReviewerDialog={this.state.showReviewerDialog}
@@ -895,7 +869,6 @@ class Draft extends React.Component {
toggleCommentDialog={this.toggleCommentDialog} toggleCommentDialog={this.toggleCommentDialog}
onCommentAdded={this.onCommentAdded} onCommentAdded={this.onCommentAdded}
quote={this.quote} quote={this.quote}
draftID={draftID}
newIndex={this.newIndex} newIndex={this.newIndex}
oldIndex={this.oldIndex} oldIndex={this.oldIndex}
/> />
@@ -914,13 +887,14 @@ class SidePanelReviewers extends React.Component {
} }
render() { render() {
const { reviewers } = this.props;
return ( return (
<div className="review-side-panel-item"> <div className="review-side-panel-item">
<div className="review-side-panel-header">{gettext('Reviewers')} <div className="review-side-panel-header">{gettext('Reviewers')}
<i className="fa fa-cog" onClick={this.props.toggleAddReviewerDialog}></i> <i className="fa fa-cog" onClick={this.props.toggleAddReviewerDialog}></i>
</div> </div>
{ this.props.reviewers.length > 0 ? {reviewers.length > 0 ?
this.props.reviewers.map((item, index = 0, arr) => { reviewers.map((item, index = 0, arr) => {
return ( return (
<div className="reviewer-info" key={index}> <div className="reviewer-info" key={index}>
<img className="avatar review-side-panel-avatar" src={item.avatar_url} alt=""/> <img className="avatar review-side-panel-avatar" src={item.avatar_url} alt=""/>
@@ -1023,7 +997,7 @@ class SidePanelChanges extends React.Component {
<div className="review-side-panel-header">{gettext('Changes')}</div> <div className="review-side-panel-header">{gettext('Changes')}</div>
<div className="changes-info"> <div className="changes-info">
<span>{gettext('Number of changes:')}{' '}{this.props.changedNumber}</span> <span>{gettext('Number of changes:')}{' '}{this.props.changedNumber}</span>
{ this.props.changedNumber > 0 && {this.props.changedNumber > 0 &&
<div> <div>
<i className="fa fa-arrow-circle-up" onClick={() => { this.props.scrollToChangedNode('down');}}></i> <i className="fa fa-arrow-circle-up" onClick={() => { this.props.scrollToChangedNode('down');}}></i>
<i className="fa fa-arrow-circle-down" onClick={() => { this.props.scrollToChangedNode('up');}}></i> <i className="fa fa-arrow-circle-down" onClick={() => { this.props.scrollToChangedNode('up');}}></i>