update

frontend/src/components/dialog/manage-members-dialog.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
-import RoleEditor from '../select-editor/role-eidtor';
+import RoleEditor from '../select-editor/role-editor';
 import UserSelect from '../user-select.js';
 import '../../css/manage-members-dialog.css';
 
@@ -22,6 +22,7 @@ class ManageMembersDialog extends React.Component {
       groupMembers: [],
       selectedOption: null,
       errMessage: [],
+      isItemFreezed: false,
     };
   }
 
@@ -63,6 +64,12 @@ class ManageMembersDialog extends React.Component {
     this.listGroupMembers();
   }
 
+  toggleItemFreezed = (isFreezed) => {
+    this.setState({
+      isItemFreezed: isFreezed
+    });
+  }
+
   toggle = () => {
     this.props.toggleManageMembersDialog();
   }
@@ -99,7 +106,7 @@ class ManageMembersDialog extends React.Component {
             })
           }
           <div className="manage-members">
-            <Table hover size="sm" className="manage-members-table">
+            <Table size="sm" className="manage-members-table">
               <thead>
                 <tr>
                   <th width="15%"></th>
@@ -119,6 +126,8 @@ class ManageMembersDialog extends React.Component {
                           onGroupMembersChange={this.onGroupMembersChange}
                           groupID={this.props.groupID}
                           isOwner={this.props.isOwner}
+                          isItemFreezed={this.state.isItemFreezed}
+                          toggleItemFreezed={this.toggleItemFreezed}
                         />
                       </React.Fragment>
                     );
@@ -150,6 +159,9 @@ class Member extends React.PureComponent {
   constructor(props) {
     super(props);
     this.roles = ['Admin', 'Member'];
+    this.state = ({
+      highlight: false,
+    });
   }
 
   onChangeUserRole = (role) => {
@@ -157,6 +169,9 @@ class Member extends React.PureComponent {
     seafileAPI.setGroupAdmin(this.props.groupID, this.props.item.email, isAdmin).then((res) => {
       this.props.onGroupMembersChange();
     });
+    this.setState({
+      highlight: false,
+    });
   }
 
   deleteMember = (name) => {
@@ -165,10 +180,25 @@ class Member extends React.PureComponent {
     });
   }
 
+  handleMouseOver = () => {
+    if (this.props.isItemFreezed) return;
+    this.setState({
+      highlight: true,
+    });
+  }
+
+  handleMouseLeave = () => {
+    if (this.props.isItemFreezed) return;
+    this.setState({
+      highlight: false,
+    });
+  }
+
   render() {
     const { item, isOwner } = this.props;
+    const deleteAuthority = (item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false);
     return(
-      <tr>
+      <tr onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} className={this.state.highlight ? 'editing' : ''}>
         <th scope="row"><img className="avatar" src={item.avatar_url} alt=""/></th>
         <td>{item.name}</td>
         <td>
@@ -178,15 +208,16 @@ class Member extends React.PureComponent {
           {(isOwner === true && item.role !== 'Owner') &&
             <RoleEditor 
               isTextMode={true}
-              isEditIconShow={true}
+              isEditIconShow={this.state.highlight}
-              currentRole={this.props.item.role}
+              currentRole={item.role}
               roles={this.roles}
               onRoleChanged={this.onChangeUserRole}
+              toggleItemFreezed={this.props.toggleItemFreezed}
             />
           }
         </td>
         <td>
-          {((item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false)) &&
+          {(deleteAuthority && !this.props.isItemFreezed) &&
             <i
               className="fa fa-times delete-group-member-icon"
               name={item.email}

frontend/src/components/select-editor/role-editor.js

@@ -9,6 +9,7 @@ const propTypes = {
   roles: PropTypes.array.isRequired,
   currentRole: PropTypes.string.isRequired,
   onRoleChanged: PropTypes.func.isRequired,
+  toggleItemFreezed: PropTypes.func,
 };
 
 class RoleEditor extends React.Component {
@@ -32,6 +33,7 @@ class RoleEditor extends React.Component {
         currentOption={this.props.currentRole}
         onOptionChanged={this.props.onRoleChanged}
         translateOption={this.translateRole}
+        toggleItemFreezed={this.props.toggleItemFreezed}
       />
     );
   }

frontend/src/components/select-editor/select-editor.js

@@ -12,6 +12,7 @@ const propTypes = {
   translateOption: PropTypes.func.isRequired,
   translateExplanation: PropTypes.func,
   onOptionChanged: PropTypes.func.isRequired,
+  toggleItemFreezed: PropTypes.func,
 };
 
 class SelectEditor extends React.Component {
@@ -47,6 +48,7 @@ class SelectEditor extends React.Component {
   onEditPermission = (e) => {
     e.nativeEvent.stopImmediatePropagation();
     this.setState({isEditing: true});
+    this.props.toggleItemFreezed && this.props.toggleItemFreezed(true);
   }
 
   onOptionChanged = (e) => {
@@ -55,6 +57,7 @@ class SelectEditor extends React.Component {
       this.props.onOptionChanged(permission);
     }
     this.setState({isEditing: false});
+    this.props.toggleItemFreezed && this.props.toggleItemFreezed(false);
   }
 
   onSelectHandler = (e) => {
@@ -63,6 +66,7 @@ class SelectEditor extends React.Component {
 
   onHideSelect = () => {
     this.setState({isEditing: false});
+    this.props.toggleItemFreezed && this.props.toggleItemFreezed(false);
   }
 
   render() {

frontend/src/css/manage-members-dialog.css

@@ -22,6 +22,10 @@
   opacity: 1;
 }
 
+.manage-members-table .editing {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
 .toggle-group-admin-icon:hover,
 .delete-group-member-icon:hover {
   color: #333;