change participant dialog and detail panel style

frontend/src/components/file-view/comment-panel.js

@@ -5,6 +5,7 @@ import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2h
 import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import ParticipantsList from './participants-list';
 import '../../css/comments-list.css';
 
 const { username, repoID, filePath } = window.app.pageOptions;
@@ -12,6 +13,8 @@ const { username, repoID, filePath } = window.app.pageOptions;
 const CommentPanelPropTypes = {
   toggleCommentPanel: PropTypes.func.isRequired,
   commentsNumber: PropTypes.number,
+  participants: PropTypes.array,
+  onParticipantsChange: PropTypes.func,
 };
 
 class CommentPanel extends React.Component {
@@ -83,6 +86,7 @@ class CommentPanel extends React.Component {
   }
 
   render() {
+    const { participants } = this.props;
     return (
       <div className="seafile-comment">
         <div className="seafile-comment-title">
@@ -125,6 +129,14 @@ class CommentPanel extends React.Component {
             <li className="comment-vacant">{gettext('No comment yet.')}</li>}
         </ul>
         <div className="seafile-comment-footer">
+          {participants &&
+            <ParticipantsList
+              onParticipantsChange={this.props.onParticipantsChange}
+              participants={participants}
+              repoID={repoID}
+              filePath={filePath}
+            />
+          }
           <textarea
             className="add-comment-input" ref="commentTextarea"
             placeholder={gettext('Add a comment.')}

frontend/src/components/file-view/file-view.js

@@ -14,6 +14,8 @@ const propTypes = {
   content: PropTypes.object.isRequired,
   isSaving: PropTypes.bool,
   needSave: PropTypes.bool,
+  participants: PropTypes.array,
+  onParticipantsChange: PropTypes.func,
 };
 
 const { isStarred, isLocked, lockedByMe,
@@ -95,7 +97,11 @@ class FileView extends React.Component {
         <div className="file-view-body flex-auto d-flex o-hidden">
           {this.props.content}
           {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
+            <CommentPanel
+              toggleCommentPanel={this.toggleCommentPanel}
+              participants={this.props.participants}
+              onParticipantsChange={this.props.onParticipantsChange}
+            />
           }
         </div>
       </div>

frontend/src/components/file-view/participants-list.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ModalPortal from '../modal-portal';
+import FileParticipantDialog from '../dialog/file-participant-dialog';
+import { serviceURL } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import '../../css/participants-list.css';
+
+const propTypes = {
+  onParticipantsChange: PropTypes.func.isRequired,
+  participants: PropTypes.array.isRequired,
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+};
+
+class ParticipantsList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showDialog : false,
+    };
+  }
+
+  toggleDialog = () => {
+    this.setState({ showDialog: !this.state.showDialog });
+  }
+
+  render() {
+    const { participants, repoID, filePath } = this.props;
+    return (
+      <div className="file-participants mb-2 position-relative">
+        {participants.map((item, index) => {
+          return <img src={serviceURL + item.avatar_url} className="avatar" alt="avatar" key={index} style={{left: index * -7 + 'px'}}/>;
+        })}
+        <span className="add-file-participants" style={{left: participants.length * 21, top: 8 }} onClick={this.toggleDialog}>
+          <i className="fas fa-plus-circle"></i>
+        </span>
+        {this.state.showDialog &&
+          <ModalPortal>
+            <FileParticipantDialog
+              repoID={repoID}
+              filePath={filePath}
+              toggleFileParticipantDialog={this.toggleDialog}
+              fileParticipantList={participants}
+              onParticipantsChange={this.props.onParticipantsChange}
+            />
+          </ModalPortal>
+        }
+      </div>
+    );
+  }
+}
+
+ParticipantsList.propTypes = propTypes;
+
+export default ParticipantsList;