user-select-translation (#2956)

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

@@ -89,6 +89,12 @@ const propTypes = {
   repoID: PropTypes.string.isRequired
 };
 
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
+  );
+};
+
 class ShareToGroup extends React.Component {
 
   constructor(props) {
@@ -267,6 +273,7 @@ class ShareToGroup extends React.Component {
                   maxMenuHeight={200}
                   inputId={'react-select-2-input'}
                   value={this.state.selectedOption}
+                  components={{ NoOptionsMessage }}
                 />
               </td>
               <td>

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

@@ -89,6 +89,12 @@ const propTypes = {
   repoID: PropTypes.string.isRequired
 };
 
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('User not found')}</div>
+  );
+};
+
 class ShareToUser extends React.Component {
 
   constructor(props) {
@@ -284,6 +290,7 @@ class ShareToUser extends React.Component {
                   loadOptions={this.loadOptions}
                   onChange={this.handleSelectChange}
                   value={this.state.selectedOption}
+                  components={{ NoOptionsMessage }}
                   maxMenuHeight={200}
                   isMulti 
                   isFocused

frontend/src/components/user-select.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/lib/Async';
 import { seafileAPI } from '../utils/seafile-api.js';
+import gettext from '../utils/constants';
 
 const propTypes = {
   placeholder: PropTypes.string.isRequired,
@@ -10,6 +11,12 @@ const propTypes = {
   className: PropTypes.string.isRequired,
 };
 
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('No Options.')}</div>
+  );
+};
+
 class UserSelect extends React.Component {
 
   constructor(props) {
@@ -53,6 +60,7 @@ class UserSelect extends React.Component {
       <AsyncSelect
         isClearable
         classNamePrefix
+        components={{ NoOptionsMessage }}
         isMulti={this.props.isMulti}
         loadOptions={this.loadOptions}
         onChange={this.handleSelectChange}

frontend/src/css/layout.css

@@ -129,6 +129,10 @@
   border-radius: 2px;
 }
 
+.cur-view-content .permission-editor-select .permission-editor__control {
+  height: 24px;
+  min-height: 24px;
+}
 .cur-view-detail {
   flex: 0 0 20rem;
   display: flex;

frontend/src/css/select-editor.css

@@ -11,10 +11,6 @@
   padding-top: 2px;
   padding-bottom: 2px;
 }
-.permission-editor-select .permission-editor__control {
-  height: 24px;
-  min-height: 24px;
-}
 .permission-editor .permission-editor__control .permission-editor-explanation {
   display: none;
 }