fix-group (#3073)

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

@@ -86,7 +86,7 @@ class ManageMembersDialog extends React.Component {
           <p>{gettext('Add group member')}</p>
           <div className='add-members'>
             <UserSelect
-              placeholder='Search users...'
+              placeholder={gettext('Search users...')}
               onSelectChange={this.onSelectChange}
               ref="userSelect"
               isMulti={true}
@@ -194,6 +194,18 @@ class Member extends React.PureComponent {
     });
   }
 
+  translateRole = (role) => {
+    if (role === 'Admin') {
+      return gettext('Admin');
+    }  
+    else if (role === 'Member') {
+      return gettext('Member');
+    }
+    else if (role === 'Owner') {
+      return gettext('Owner');
+    }
+  }
+
   render() {
     const { item, isOwner } = this.props;
     const deleteAuthority = (item.role !== 'Owner' && isOwner === true) || (item.role === 'Member' && isOwner === false);
@@ -203,7 +215,7 @@ class Member extends React.PureComponent {
         <td>{item.name}</td>
         <td>
           {((isOwner === false) || (isOwner === true && item.role === 'Owner')) && 
-            <span className="group-admin">{item.role}</span>
+            <span className="group-admin">{this.translateRole(item.role)}</span>
           }
           {(isOwner === true && item.role !== 'Owner') &&
             <RoleEditor 

frontend/src/css/group-view.css

@@ -1,11 +1,15 @@
+.group-member-list-header {
+  border-bottom: 1px solid #e3e3e5;
+  padding-bottom: 10px;
+  margin-bottom: 0px;
+}
 .group-member-list {
-  box-sizing: border-box;
   max-height: 400px;
-  overflow-y: auto;
+  border-top: 0;
+  margin-top: 0;
+  padding-top: 0;
 }
 .group-member-list .user-item {
-  margin: 0px -10px;
-  padding: 5px 10px;
   line-height: 2rem;
 }
 .group-member-list .user-item:hover {

frontend/src/pages/groups/group-view.js

@@ -337,9 +337,22 @@ class GroupView extends React.Component {
     });
   }
 
+  translateRole = (role) => {
+    if (role === 'Admin') {
+      return gettext('Admin');
+    }  
+    else if (role === 'Member') {
+      return gettext('Member');
+    }
+    else if (role === 'Owner') {
+      return gettext('Owner');
+    }
+  }
+
   render() {
     let { errMessage, emptyTip, currentGroup } = this.state;
     let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
+    let that = this;
     return (
       <Fragment>
         <div className="main-panel-north border-left-show">
@@ -409,7 +422,7 @@ class GroupView extends React.Component {
                     </a>
                     <Popover placement="bottom" isOpen={this.state.showGroupMembersPopover} target="groupMembers"
                       toggle={this.toggleGroupMembersPopover} hideArrow={true} className="sf-popover">
-                      <div className="sf-popover-hd sf-popover-title">
+                      <div className="sf-popover-hd sf-popover-title group-member-list-header">
                         <span>{gettext('Members')}</span>
                         <a href="#" className="sf-popover-close js-close sf2-icon-x1 action-icon"
                           onClick={this.toggleGroupMembersPopover}></a>
@@ -419,12 +432,14 @@ class GroupView extends React.Component {
                           {
                             this.state.groupMembers.map(function(item, index) {
                               return (
-                                <li className="user-item sf-popover-item" key={index}>
+                                <li key={index}>
-                                  <img src={item.avatar_url} alt="" className="group-member-avatar avatar"/>
+                                  <a href="#" className="sf-popover-item user-item">
-                                  <span className="txt-item ellipsis">
+                                    <img src={item.avatar_url} alt="" className="group-member-avatar avatar"/>
-                                    <span className="group-member-name">{item.name}</span>
+                                    <span className="txt-item ellipsis">
-                                    <span className="group-member-admin">{item.role}</span>
+                                      <span className="group-member-name">{item.name}</span>
-                                  </span>
+                                      <span className="group-member-admin">{that.translateRole(item.role)}</span>
+                                    </span>
+                                  </a>
                                 </li>
                               );
                             })