12.0 optimize user select (#6307)

* 01 remove useless reviewer

* 02 change user select style

* fix code format

frontend/src/components/common/select/seahub-select-style.js

@@ -44,6 +44,47 @@ const UserSelectStyle = {
   clearIndicator: () => ({
     display: 'none',
   }),
+  // multi select style
+  multiValue: (provided) => {
+    return {
+      ...provided,
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0 10px 0 0',
+      padding: '0 0 0 2px',
+    };
+  },
+  multiValueLabel: (provided) => {
+    return {
+      ...provided,
+      padding: '0px',
+    };
+  },
+  multiValueRemove: (provided) => {
+    return {
+      ...provided,
+      color: '#666',
+      ':hover': {
+        backgroundColor: 'transparent',
+        color: '#555555',
+      }
+    };
+  },
+  // single select style
+  singleValue: (provided) => {
+    return {
+      ...provided,
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0',
+      padding: '0 2px',
+      width: 'fit-content',
+    };
+  },
 };
 
 export { MenuSelectStyle, UserSelectStyle };

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -279,7 +279,6 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={true}
-                  className="reviewer-select"
                   placeholder={gettext('Search users')}
                   onSelectChange={this.handleUserSelectChange}
                   value={this.state.selectedUsers}

frontend/src/components/dialog/org-add-admin-dialog.js

@@ -55,7 +55,6 @@ class AddOrgAdminDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Select a user as admin')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/share-to-user.js

@@ -55,11 +55,14 @@ class UserItem extends React.Component {
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
         <td className="name">
           <div className="position-relative">
-            <img src={item.user_info.avatar_url}
+            <img
-              width="24" alt={item.user_info.nickname}
+              src={item.user_info.avatar_url}
+              width="24"
+              alt={item.user_info.nickname}
               className="rounded-circle mr-2 cursor-pointer"
               onMouseEnter={this.userAvatarOnMouseEnter}
-              onMouseLeave={this.userAvatarOnMouseLeave} />
+              onMouseLeave={this.userAvatarOnMouseLeave}
+            />
             <span>{item.user_info.nickname}</span>
             {isUserDetailsPopoverOpen && (
               <div className="user-details-popover p-4 position-absolute w-100 mt-1">
@@ -353,7 +356,6 @@ class ShareToUser extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={true}
-                  className="reviewer-select"
                   placeholder={gettext('Search users')}
                   onSelectChange={this.handleSelectChange}
                 />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-batch-add-admin-dialog.js

@@ -41,7 +41,6 @@ class SysAdminBatchAddAdminDialog extends React.Component {
         <ModalBody>
           <UserSelect
             isMulti={true}
-            className="reviewer-select"
             placeholder={gettext('Search users')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js

@@ -76,7 +76,6 @@ class SysAdminCreateGroupDialog extends React.Component {
               </Label>
               <UserSelect
                 isMulti={false}
-                className="reviewer-select"
                 placeholder={gettext('Select a user')}
                 onSelectChange={this.handleSelectChange}
               />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js

@@ -77,7 +77,6 @@ class SysAdminCreateRepoDialog extends React.Component {
               <UserSelect
                 id="userSelect"
                 isMulti={false}
-                className="reviewer-select"
                 placeholder={gettext('Select a user')}
                 onSelectChange={this.handleSelectChange}
               />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js

@@ -41,7 +41,6 @@ class SysAdminGroupAddMemberDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={true}
-            className="reviewer-select"
             placeholder={gettext('Search users')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js

@@ -47,7 +47,6 @@ class SysAdminTransferGroupDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Select a user')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js

@@ -42,7 +42,6 @@ class SysAdminRepoTransferDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Search users')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js

@@ -236,7 +236,6 @@ class SysAdminShareToUser extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={true}
-                  className="reviewer-select"
                   placeholder={gettext('Search users')}
                   onSelectChange={this.handleSelectChange}
                 />

frontend/src/components/dialog/transfer-dialog.js

@@ -51,7 +51,6 @@ class TransferDialog extends React.Component {
   submit = () => {
     let user = this.state.selectedOption;
     this.props.submit(user);
-
   };
 
   componentDidMount() {
@@ -102,7 +101,6 @@ class TransferDialog extends React.Component {
   onClick = () => {
     this.setState({
       transferToUser: !this.state.transferToUser,
-
     });
   };
 
@@ -142,7 +140,6 @@ class TransferDialog extends React.Component {
                 <UserSelect
                   ref="userSelect"
                   isMulti={false}
-                  className="reviewer-select"
                   placeholder={gettext('Select a user')}
                   onSelectChange={this.handleSelectChange}
                 />

frontend/src/components/dialog/transfer-group-dialog.js

@@ -58,7 +58,6 @@ class TransferGroupDialog extends React.Component {
           <UserSelect
             ref="userSelect"
             isMulti={false}
-            className="reviewer-select"
             placeholder={gettext('Please enter 1 or more character')}
             onSelectChange={this.handleSelectChange}
           />

frontend/src/components/user-select.js

@@ -26,9 +26,14 @@ class UserSelect extends React.Component {
     this.state = {
       searchValue: ''
     };
+    this.userSelect = React.createRef();
   }
 
   onInputChange = (searchValue) => {
+    if (!this.props.isMulti && searchValue.trim()) {
+      this.handleSelectChange(null);
+      this.clearSelect();
+    }
     this.setState({ searchValue });
   };
 
@@ -49,7 +54,8 @@ class UserSelect extends React.Component {
             let obj = {};
             obj.value = item.name;
             obj.email = item.email;
-            obj.label = enableShowContactEmailWhenSearchUser ? (
+            if (enableShowContactEmailWhenSearchUser) {
+              obj.label = (
                 <div className="d-flex">
                   <img src={item.avatar_url} className="avatar" width="24" alt="" />
                   <div className="ml-2">
@@ -57,12 +63,15 @@ class UserSelect extends React.Component {
                     <span className="user-option-email">{item.contact_email}</span>
                   </div>
                 </div>
-            ) : (
+              );
-              <React.Fragment>
+            } else {
+              obj.label = (
+                <>
                   <img src={item.avatar_url} className="select-module select-module-icon avatar" alt=""/>
                   <span className='select-module select-module-name'>{item.name}</span>
-              </React.Fragment>
+                </>
               );
+            }
             this.options.push(obj);
           }
           callback(this.options);
@@ -75,7 +84,7 @@ class UserSelect extends React.Component {
   };
 
   clearSelect = () => {
-    this.refs.userSelect.onChange([], { action: 'clear' });
+    this.userSelect.current.onChange([], { action: 'clear' });
   };
 
   render() {
@@ -92,14 +101,14 @@ class UserSelect extends React.Component {
             );
           }
         }}
-        isMulti={this.props.isMulti}
+        isMulti={true}
         loadOptions={this.loadOptions}
         onChange={this.handleSelectChange}
         onInputChange={this.onInputChange}
         placeholder={this.props.placeholder}
         className={`user-select ${this.props.className}`}
         value={this.props.value}
-        ref="userSelect"
+        ref={this.userSelect}
         styles={UserSelectStyle}
       />
     );

frontend/src/css/draft.css

@@ -17,10 +17,6 @@
   align-items: center;
 }
 
-.header .common-list-btn, .header .add-reviewer-btn {
-  margin-right: .25em;
-}
-
 .header .common-list-btn .common-list-btn-number {
   margin-left: .5em;
 }
@@ -124,7 +120,6 @@
   border: 0;
 }
 
-.review-side-panel-item .reviewer-info,
 .review-side-panel-item .author-info {
   display: flex;
   align-items: center;
@@ -156,7 +151,6 @@
   width: 1.5rem;
 }
 
-.review-side-panel-item .reviewer-name,
 .review-side-panel-item .author-name {
   height: 2rem;
   line-height: 2rem;

frontend/src/css/review-content.css

@@ -1,10 +0,0 @@
-.reviewer-list .reviewer-avatar:first-child {
-  margin-left: 0;
-}
-
-.reviewer-list .reviewer-avatar {
-  margin-left: -0.5rem; 
-  box-shadow: 0 0 0 2px #fff;
-  cursor: pointer;
-}
-

frontend/src/css/transfer-group-dialog.css

@@ -2,8 +2,3 @@
   line-height: 2rem;
   margin-left: 10px;
 }
-
-.group-transfer-select .true__dropdown-indicator,
-.reviewer-select .true__indicator-separator {
-  display: none;
-}

frontend/src/css/user-select.css

@@ -2,6 +2,39 @@
   font-size: 14px;
   font-weight: 500;
 }
+
 .user-option-email {
   font-size: 12px;
 }
+
+/* dropdown menu avatar is 24*24px, selection box avatar is 16*16px */
+.user-select .true__value-container .select-module.select-module-icon.avatar {
+  height: 16px;
+  width: 16px;
+}
+
+.user-select .true__value-container .true__multi-value__label {
+  padding: 0px;
+}
+
+.user-select .true__value-container .true__multi-value__label .select-module.select-module-icon.avatar {
+  transform: translateY(-2px);
+}
+
+.user-select .true__value-container .select-module.select-module-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1;
+  line-height: 20px;
+  margin-left: 5px;
+}
+
+.user-select .true__control.true__control--is-focused,
+.user-select .true__control.true__control--is-focused:hover {
+  background-color: #ffffff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}