change participant dialog and detail panel style

frontend/src/components/dialog/file-participant-dialog.js

@@ -2,10 +2,15 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import UserSelect from '../user-select';
 import { seafileAPI } from '../../utils/seafile-api';
+import UserSelect from '../user-select';
 import toaster from '../toast';
+import '../../css/add-reviewer-dialog.css';
 
+const fileParticipantListItemPropTypes = {
+  participant: PropTypes.object.isRequired,
+  deleteFileParticipant: PropTypes.func.isRequired,
+};
 
 class FileParticipantListItem extends Component {
 
@@ -17,44 +22,42 @@ class FileParticipantListItem extends Component {
   }
 
   onMouseOver = () => {
-    this.setState({
-      isOperationShow: true,
-    });
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({
-      isOperationShow: false,
-    });
+    this.setState({ isOperationShow: false });
   };
 
   render() {
+    const { participant } = this.props;
     return (
-      <div className="reviewer-select-info" style={{display: 'flex'}} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+      <div className="reviewer-select-info" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
         <div className="d-flex">
-          <img className="avatar reviewer-select-avatar" src={this.props.participant.avatar_url} alt=""/>
-          <span className="reviewer-select-name ellipsis">{this.props.participant.name}</span>
+          <img className="avatar reviewer-select-avatar" src={participant.avatar_url} alt=""/>
+          <span className="reviewer-select-name ellipsis">{participant.name}</span>
         </div>
-        {this.state.isOperationShow &&
           <i
-          className="action-icon sf2-icon-x3"
+            className={`action-icon sf2-icon-x3 ${!this.state.isOperationShow &&'o-hidden'}`}
             title={gettext('Delete')}
-          onClick={this.props.deleteFileParticipant.bind(this, this.props.participant.email)}
+            onClick={this.props.deleteFileParticipant.bind(this, participant.email)}
           ></i>
-        }
       </div>
     );
   }
 }
 
-const fileParticipantListItemPropTypes = {
-  participant: PropTypes.object.isRequired,
-  deleteFileParticipant: PropTypes.func.isRequired,
-};
-
 FileParticipantListItem.propTypes = fileParticipantListItemPropTypes;
 
 
+const fileParticipantDialogPropTypes = {
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  toggleFileParticipantDialog: PropTypes.func.isRequired,
+  fileParticipantList: PropTypes.array.isRequired,
+  onParticipantsChange: PropTypes.func,
+};
+
 class FileParticipantDialog extends Component {
 
   constructor(props) {
@@ -69,8 +72,9 @@ class FileParticipantDialog extends Component {
   };
 
   deleteFileParticipant = (email) => {
-    seafileAPI.deleteFileParticipant(this.props.repoID, this.props.filePath, email).then((res) => {
-      this.props.onRelatedFileChange(this.props.dirent, this.props.filePath);
+    const { repoID, filePath, dirent } = this.props;
+    seafileAPI.deleteFileParticipant(repoID, filePath, email).then((res) => {
+      this.props.onParticipantsChange(repoID, filePath);
     }).catch((error) => {
       this.handleError(error);
     });
@@ -78,18 +82,17 @@ class FileParticipantDialog extends Component {
   };
 
   addFileParticipant = () => {
-    if (!this.state.selectedOption || this.state.selectedOption.length === 0) {
+    const { selectedOption } = this.state;
+    const { repoID, filePath, dirent } = this.props;
+    if (!selectedOption || selectedOption.length === 0) {
       return;
     }
-    let email = this.state.selectedOption.email;
-    seafileAPI.addFileParticipant(this.props.repoID, this.props.filePath, email).then((res) => {
-      this.props.onRelatedFileChange(this.props.dirent, this.props.filePath);
+    seafileAPI.addFileParticipant(repoID, filePath, selectedOption.email).then((res) => {
+      this.props.onParticipantsChange(repoID, filePath);
     }).catch((error) => {
       this.handleError(error);
     });
-    this.setState({
-      selectedOption: null,
-    });
+    this.setState({ selectedOption: null });
     this.refs.userSelect.clearSelect();
   };
 
@@ -116,8 +119,7 @@ class FileParticipantDialog extends Component {
       <Modal isOpen={true} toggle={this.props.toggleFileParticipantDialog}>
         <ModalHeader toggle={this.props.toggleFileParticipantDialog}>{gettext('Participants')}</ModalHeader>
         <ModalBody>
-          <div className="add-reviewer"  style={{display: 'flex'}}>
-            <div style={{width: '385px'}}>
+          <div className="add-reviewer">
             <UserSelect
               ref="userSelect"
               isMulti={false}
@@ -125,27 +127,18 @@ class FileParticipantDialog extends Component {
               placeholder={gettext('Select users...')}
               onSelectChange={this.handleSelectChange}
             />
+            <Button className="btn btn-secondary ml-2" onClick={this.addFileParticipant}>{gettext('Add')}</Button>
           </div>
-            <Button className="btn btn-secondary" onClick={this.addFileParticipant}>{gettext('Submit')}</Button>
-          </div>
-          <div>
           {renderParticipantList}
-          </div>
         </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleFileParticipantDialog}>{gettext('Close')}</Button>
+        </ModalFooter>
       </Modal>
     );
   }
 }
 
-const fileParticipantDialogPropTypes = {
-  repoID: PropTypes.string.isRequired,
-  filePath: PropTypes.string.isRequired,
-  toggleFileParticipantDialog: PropTypes.func.isRequired,
-  fileParticipantList: PropTypes.array.isRequired,
-  onRelatedFileChange: PropTypes.func.isRequired,
-  dirent: PropTypes.object.isRequired,
-};
-
 FileParticipantDialog.propTypes = fileParticipantDialogPropTypes;
 
 export default FileParticipantDialog;

frontend/src/components/dirent-detail/detail-list-view.js

@@ -6,7 +6,7 @@ import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ModalPortal from '../modal-portal';
 import RelatedFileDialogs from '../dialog/related-file-dialogs';
-import FileParticipantDialog from '../dialog/file-participant-dialog';
+import ParticipantsList from '../file-view/participants-list';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -29,7 +29,6 @@ class DetailListView extends React.Component {
     this.state = {
       isEditFileTagShow: false,
       showRelatedFileDialog: false,
-      isFileParticipantDialogShow : false,
     };
   }
 
@@ -81,12 +80,6 @@ class DetailListView extends React.Component {
     });
   }
   
-  toggleFileParticipantDialog = () => {
-    this.setState({
-      isFileParticipantDialogShow: !this.state.isFileParticipantDialogShow,
-    });
-  }
-  
   render() {
     let { direntType, direntDetail, fileTagList, relatedFiles, fileParticipantList } = this.props;
     let position = this.getDirentPostion();
@@ -149,16 +142,14 @@ class DetailListView extends React.Component {
               <tr className="file-related-files">
                 <th>{gettext('Participants')}</th>
                 <td>
-                  <ul>
-                    {fileParticipantList.map((fileParticipant, index) => {
-                      return (
-                        <li key={index}>
-                          <span>{fileParticipant.name}</span>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                  <i className='fa fa-pencil-alt attr-action-icon' onClick={this.toggleFileParticipantDialog}></i>
+                  {fileParticipantList &&
+                    <ParticipantsList
+                      onParticipantsChange={this.props.onParticipantsChange}
+                      participants={fileParticipantList}
+                      repoID={this.props.repoID}
+                      filePath={direntPath}
+                    />
+                  }
                 </td>
               </tr>
             </tbody>
@@ -176,8 +167,8 @@ class DetailListView extends React.Component {
               />
             </ModalPortal>
           }
-          {
-            this.state.isEditFileTagShow &&
+          {this.state.isEditFileTagShow &&
+            <ModalPortal>
               <EditFileTagDialog
                 repoID={this.props.repoID}
                 fileTagList={fileTagList}
@@ -185,17 +176,7 @@ class DetailListView extends React.Component {
                 toggleCancel={this.onEditFileTagToggle}
                 onFileTagChanged={this.onFileTagChanged}
               />
-          }
-          {
-            this.state.isFileParticipantDialogShow &&
-            <FileParticipantDialog
-              repoID={this.props.repoID}
-              filePath={direntPath}
-              dirent={this.props.dirent}
-              toggleFileParticipantDialog={this.toggleFileParticipantDialog}
-              fileParticipantList={this.props.fileParticipantList}
-              onRelatedFileChange={this.props.onRelatedFileChange}
-            />
+            </ModalPortal>
           }
         </Fragment>
       );

frontend/src/components/dirent-detail/dirent-details.js

@@ -77,7 +77,6 @@ class DirentDetail extends React.Component {
     }
   }
 
-
   updateDetailView = (dirent, direntPath) => {
     let repoID = this.props.repoID;
     if (dirent.type === 'file') {
@@ -110,11 +109,7 @@ class DirentDetail extends React.Component {
           });
         }
       });
-      seafileAPI.listFileParticipants(repoID, direntPath).then((res) => {
-        this.setState({
-          fileParticipantList: res.data.participant_list,
-        });
-      });
+      this.listParticipants(repoID, direntPath);
     } else {
       seafileAPI.getDirInfo(repoID, direntPath).then(res => {
         this.setState({
@@ -125,6 +120,16 @@ class DirentDetail extends React.Component {
     }
   }
 
+  listParticipants = (repoID, filePath) => {
+    seafileAPI.listFileParticipants(repoID, filePath).then((res) => {
+      this.setState({ fileParticipantList: res.data.participant_list });
+    });
+  }
+
+  onParticipantsChange = (repoID, filePath) => {
+    this.listParticipants(repoID, filePath);
+  }
+
   onRelatedFileChange = (dirent, direntPath) => {
     this.updateDetailView(dirent, direntPath);
   }
@@ -187,6 +192,7 @@ class DirentDetail extends React.Component {
                 onFileTagChanged={this.props.onFileTagChanged}
                 onRelatedFileChange={this.onRelatedFileChange}
                 fileParticipantList={this.state.fileParticipantList}
+                onParticipantsChange={this.onParticipantsChange}
               />
             </div>
           }

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;

frontend/src/css/comments-list.css

@@ -108,7 +108,7 @@
   border-top: 1px solid #e5e5e5;
   display: flex;
   flex-direction: column;
-  min-height: 150px;
+  min-height: 182px;
 }
 .seafile-comment-footer .add-comment-input,
 .seafile-edit-comment .edit-comment-input {

frontend/src/css/dirent-detail.css

@@ -66,7 +66,7 @@
 }
 
 .dirent-table-container {
-  padding: 10px 20px;
+  padding: 10px 20px 20px;
   display: flex;
 }
 
@@ -139,12 +139,12 @@
   max-height: 100px;
   overflow-y: scroll;
   white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
 }
 
 .file-related-files td ul li {
   margin-bottom: 5px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 
 .file-related-files ul li a,
@@ -173,6 +173,7 @@
 
 .detail-container .tab-content {
   height: calc(100% - 73px);
+  overflow-y: auto;
 }
 
 .detail-container .nav-item .nav-link, .detail-container .nav-item .nav-link i {

frontend/src/css/participants-list.css

@@ -0,0 +1,18 @@
+.file-participants {
+  min-height: 30px;
+}
+.file-participants .avatar {
+  width: 28px;
+  height: 28px;
+  border: 2px solid #fff;
+}
+.file-participants .add-file-participants {
+  position: absolute;
+  cursor: pointer;
+}
+.file-participants .add-file-participants i {
+  font-size: 16px;
+  color: rgb(229, 162, 82);
+  border: 2px solid #fff;
+  border-radius: 50%;
+}

frontend/src/markdown-editor.js

@@ -10,6 +10,7 @@ import ModalPortal from './components/modal-portal';
 import ShareDialog from './components/dialog/share-dialog';
 import InsertFileDialog from './components/dialog/insert-file-dialog';
 import InsertRepoImageDialog from './components/dialog/insert-repo-image-dialog';
+import FileParticipantDialog from './components/dialog/file-participant-dialog';
 import { serialize, deserialize } from '@seafile/seafile-editor/dist/utils/slate2markdown';
 import LocalDraftDialog from './components/dialog/local-draft-dialog';
 import MarkdownViewerToolbar from './components/toolbar/markdown-viewer-toolbar';
@@ -252,6 +253,15 @@ class EditorUtilities {
   markdownLint(slateValue) {
     return seafileAPI.markdownLint(slateValue);
   }
+
+  listFileParticipant() {
+    return seafileAPI.listFileParticipants(repoID, filePath);
+  }
+
+  addFileParticipant(email) {
+    return seafileAPI.addFileParticipant(repoID, filePath, email);
+  }
+
 }
 
 const editorUtilities = new EditorUtilities();
@@ -286,6 +296,7 @@ class MarkdownEditor extends React.Component {
       showShareLinkDialog: false,
       showInsertFileDialog: false,
       showInsertRepoImageDialog: false,
+      showFileParticipantDialog: false,
       showDraftSaved: false,
       collabUsers: userInfo ?
         [{user: userInfo, is_editing: false}] : [],
@@ -301,6 +312,7 @@ class MarkdownEditor extends React.Component {
       showRelatedFileDialog: false,
       showEditFileTagDialog: false,
       viewMode: 'list_related_file',
+      participants: [],
     };
 
     if (this.state.collabServer) {
@@ -400,6 +412,7 @@ class MarkdownEditor extends React.Component {
       showInsertRepoImageDialog: false,
       showRelatedFileDialog: false,
       showEditFileTagDialog: false,
+      showFileParticipantDialog: false,
     });
   }
 
@@ -516,6 +529,12 @@ class MarkdownEditor extends React.Component {
           showMarkdownEditorDialog: true,
         });
         break;
+      case 'add-participant':
+        this.setState({
+          showMarkdownEditorDialog: true,
+          showFileParticipantDialog: true,
+        });
+        break;
       default:
         return;
     }
@@ -596,6 +615,7 @@ class MarkdownEditor extends React.Component {
     this.listRelatedFiles();
     this.listFileTags();
 
+    this.listFileParticipants();
     setTimeout(() => {
       let url = new URL(window.location.href);
       if (url.hash) {
@@ -628,6 +648,16 @@ class MarkdownEditor extends React.Component {
     this.listFileTags();
   }
 
+  listFileParticipants = () => {
+    editorUtilities.listFileParticipant().then((res) => {
+      this.setState({ participants: res.data.participant_list });
+    });
+  }
+
+  onParticipantsChange = () => {
+    this.listFileParticipants();
+  }
+
   setFileInfoMtime = (fileInfo) => {
     this.setState({
       fileInfo: Object.assign({}, this.state.fileInfo, { mtime: fileInfo.mtime, id: fileInfo.id, lastModifier: fileInfo.last_modifier_name })
@@ -795,6 +825,8 @@ class MarkdownEditor extends React.Component {
             saving={this.state.saving}
             fileTagList={this.state.fileTagList}
             relatedFiles={this.state.relatedFiles}
+            participants={this.state.participants}
+            onParticipantsChange={this.onParticipantsChange}
           />
         </Fragment>
       );
@@ -870,6 +902,17 @@ class MarkdownEditor extends React.Component {
                   />
                 </ModalPortal>
               }
+              {this.state.showFileParticipantDialog &&
+                <ModalPortal>
+                  <FileParticipantDialog
+                    repoID={repoID}
+                    filePath={filePath}
+                    toggleFileParticipantDialog={this.toggleCancel}
+                    fileParticipantList={this.state.participants}
+                    onParticipantsChange={this.onParticipantsChange}
+                  />
+                </ModalPortal>
+              }
             </React.Fragment>
           )}
         </React.Fragment>

frontend/src/view-file-text.js

@@ -24,7 +24,7 @@ import 'codemirror/lib/codemirror.css';
 import './css/text-file-view.css';
 
 const {
-  err, fileExt, fileContent, repoID, filePath, fileName, canEditFile
+  err, fileExt, fileContent, repoID, filePath, fileName, canEditFile, username
 } = window.app.pageOptions;
 
 const options = {
@@ -45,8 +45,10 @@ class ViewFileText extends React.Component {
       content: fileContent,
       needSave: false,
       isSaving: false,
+      participants: [],
     };
     this.onSave=this.onSave.bind(this);
+    this.isParticipant = false;
   }
 
 
@@ -58,6 +60,9 @@ class ViewFileText extends React.Component {
   }
 
   onSave () {
+    if (!this.isParticipant) {
+      this.addParticipant();
+    }
     let dirPath = '/';
     return (
       seafileAPI.getUpdateLink(repoID, dirPath).then((res) => {
@@ -83,6 +88,33 @@ class ViewFileText extends React.Component {
     );
   }
 
+  addParticipant = () => {
+    seafileAPI.addFileParticipant(repoID, filePath, username).then((res) => {
+      if (res.status === 201) {
+        this.isParticipant = true;
+        this.getParticipants();
+      }
+    });
+  }
+
+  getParticipants = () => {
+    seafileAPI.listFileParticipants(repoID, filePath).then((res) => {
+      const participants = res.data.participant_list;
+      this.setState({ participants: participants });
+      this.isParticipant = participants.every((participant) => {
+        return participant.email == username;
+      });
+    });
+  }
+
+  onParticipantsChange = () => {
+    this.getParticipants();
+  }
+
+  componentDidMount() {
+    this.getParticipants();
+  }
+
   render() {
     return (
       <FileView 
@@ -95,6 +127,8 @@ class ViewFileText extends React.Component {
         isSaving={this.state.isSaving}
         needSave={this.state.needSave}
         onSave={this.onSave}
+        participants={this.state.participants}
+        onParticipantsChange={this.onParticipantsChange}
       />
     );
   }