change participant dialog and detail panel style

2025-09-03 16:10:26 +00:00 · 2019-06-26 14:56:03 +08:00
parent c29d990c67
commit e382d40df8
11 changed files with 259 additions and 108 deletions
--- a/frontend/src/components/dialog/file-participant-dialog.js
+++ b/frontend/src/components/dialog/file-participant-dialog.js
@@ -1,11 +1,16 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {Modal, ModalHeader, ModalBody, ModalFooter, Button} from 'reactstrap';
-import {gettext} from '../../utils/constants';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
 import UserSelect from '../user-select';
-import {seafileAPI} from '../../utils/seafile-api';
 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"
-          title={gettext('Delete')}
-          onClick={this.props.deleteFileParticipant.bind(this, this.props.participant.email)}
-        ></i>
-        }
+          <i
+            className={`action-icon sf2-icon-x3 ${!this.state.isOperationShow &&'o-hidden'}`}
+            title={gettext('Delete')}
+            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) {
@@ -65,12 +68,13 @@ class FileParticipantDialog extends Component {
  }

  handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({ selectedOption: option });
  };

  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,36 +119,26 @@ 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'}}>
-              <UserSelect
-                ref="userSelect"
-                isMulti={false}
-                className="reviewer-select"
-                placeholder={gettext('Select users...')}
-                onSelectChange={this.handleSelectChange}
-              />
-            </div>
-            <Button className="btn btn-secondary" onClick={this.addFileParticipant}>{gettext('Submit')}</Button>
-          </div>
-          <div>
-            {renderParticipantList}
+          <div className="add-reviewer">
+            <UserSelect
+              ref="userSelect"
+              isMulti={false}
+              className="reviewer-select"
+              placeholder={gettext('Select users...')}
+              onSelectChange={this.handleSelectChange}
+            />
+            <Button className="btn btn-secondary ml-2" onClick={this.addFileParticipant}>{gettext('Add')}</Button>
          </div>
+          {renderParticipantList}
        </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;
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/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,
    };
  }

@@ -80,12 +79,6 @@ class DetailListView extends React.Component {
      showRelatedFileDialog: false,
    });
  }
-
-  toggleFileParticipantDialog = () => {
-    this.setState({
-      isFileParticipantDialogShow: !this.state.isFileParticipantDialogShow,
-    });
-  }
  
  render() {
    let { direntType, direntDetail, fileTagList, relatedFiles, fileParticipantList } = this.props;
@@ -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,26 +167,16 @@ class DetailListView extends React.Component {
              />
            </ModalPortal>
          }
-          {
-            this.state.isEditFileTagShow &&
-            <EditFileTagDialog
-              repoID={this.props.repoID}
-              fileTagList={fileTagList}
-              filePath={direntPath}
-              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}
-            />
+          {this.state.isEditFileTagShow &&
+            <ModalPortal>
+              <EditFileTagDialog
+                repoID={this.props.repoID}
+                fileTagList={fileTagList}
+                filePath={direntPath}
+                toggleCancel={this.onEditFileTagToggle}
+                onFileTagChanged={this.onFileTagChanged}
+              />
+            </ModalPortal>
          }
        </Fragment>
      );
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/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>
          }
--- a/frontend/src/components/file-view/comment-panel.js
+++ b/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.')}
--- a/frontend/src/components/file-view/file-view.js
+++ b/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>
--- a/frontend/src/components/file-view/participants-list.js
+++ b/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;