permission explanation

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import Select from 'react-select';
+import '../../css/select-editor.css';
 
 const propTypes = {
   isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
@@ -9,6 +10,7 @@ const propTypes = {
   options: PropTypes.array.isRequired,
   currentOption: PropTypes.string.isRequired,
   translateOption: PropTypes.func.isRequired,
+  translateExplanation: PropTypes.func,
   onOptionChanged: PropTypes.func.isRequired,
 };
 
@@ -19,24 +21,36 @@ class SelectEditor extends React.Component {
     this.state = {
       isEditing: false,
     }
+    this.options = [];
   }
 
   componentDidMount() {
     document.addEventListener('click', this.onHideSelect);
+    this.setOptions();
+  }
+
+  setOptions = () => {
+    this.options = [];
+    const options = this.props.options;
+    for (let i = 0, length = options.length; i < length; i++) {
+      let option = {};
+      option.value = options[i];
+      option.label = <div>{this.props.translateOption(options[i])}{ this.props.translateExplanation && <div className="permission-editor-explanation">{this.props.translateExplanation(options[i])}</div>}</div>;
+      this.options.push(option);
+    }
   }
 
   componentWillUnmount() {
     document.removeEventListener('click', this.onHideSelect);
   }
 
-  onEidtPermission = (e) => {
+  onEditPermission = (e) => {
     e.nativeEvent.stopImmediatePropagation();
     this.setState({isEditing: true});
   }
 
   onOptionChanged = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    let permission = e.target.value;
+    let permission = e.value;
     if (permission !== this.props.currentOption) {
       this.props.onOptionChanged(permission);
     }
@@ -56,23 +70,16 @@ class SelectEditor extends React.Component {
 
     // scence1: isTextMode (text)editor-icon --> select
     // scence2: !isTextMode select
-    let selectStyle = {
-      height: '1.5rem',
-      padding: 0
-    };
-    if (!isTextMode) {
-      selectStyle = {};
-    }
     return (
-      <div className="permission-editor">
+      <div className="permission-editor" onClick={this.onSelectHandler}>
         {(!isTextMode || this.state.isEditing) &&
-          <Input style={selectStyle} type="select" onChange={this.onOptionChanged} onClick={this.onSelectHandler} value={currentOption}>
-            {options.map((item, index) => {
-              return (
-                <option key={index} value={item}>{this.props.translateOption(item)}</option>
-              );
-            })}
-          </Input>
+          <Select
+            options={this.options}
+            className="permission-editor-select"
+            classNamePrefix="select"
+            onChange={this.onOptionChanged}
+            menuPlacement="auto"
+          />
         }
         {(isTextMode && !this.state.isEditing) &&
           <div>
@@ -81,7 +88,7 @@ class SelectEditor extends React.Component {
               <span 
                 title={gettext('Edit')} 
                 className="fa fa-pencil attr-action-icon" 
-                onClick={this.onEidtPermission}>
+                onClick={this.onEditPermission}>
               </span>
             )}
           </div>

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

@@ -17,6 +17,10 @@ class SharePermissionEditor extends React.Component {
     return Utils.sharePerms(permission);
   }
 
+  translateExplanation = (explanation) => {
+    return Utils.sharePermsExplanation(explanation);
+  }
+
   render() {
     return (
       <SelectEditor 
@@ -26,6 +30,7 @@ class SharePermissionEditor extends React.Component {
         currentOption={this.props.currentPermission}
         onOptionChanged={this.props.onPermissionChanged}
         translateOption={this.translatePermission}
+        translateExplanation={this.translateExplanation}
       />
     );
   }

frontend/src/css/select-editor.css

@@ -0,0 +1,16 @@
+.permission-editor .permission-editor-explanation {
+  user-select: none;
+  padding-left: 10px;
+  color: #9c9c9c;
+  font-size: 12px;
+  word-break: keep-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.permission-editor .select__option {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.select__control .permission-editor-explanation {
+  display: none;
+}

frontend/src/css/share-link-dialog.css

@@ -1,6 +1,6 @@
 .share-dialog .share-dialog-content {
     padding: 0;
-    min-height: 20rem;
+    min-height: 27rem;
     display: flex;
     flex-direction: row;
     overflow: hidden;
@@ -21,10 +21,17 @@
 .share-dialog-content .share-dialog-main .tab-content {
     flex: 1;
 }
+.share-dialog-content .share-dialog-main .tab-pane {
+    height: 100%;
+}
+.share-dialog-content .share-dialog-main .tab-content thead th {
+    font-weight: 600;
+}
 
 .share-list-container {
-    max-height: 15rem;
+    max-height: 18rem;
     overflow: auto;
+    height: 100%;
 }
 
 .share-dialog-content label {
@@ -73,3 +80,6 @@ input.expire-input {
     margin: 0 0.25rem 0 1.25rem;
 }
 
+.share-dialog-main .permission-editor .select__menu {
+  width: 240px;
+}

frontend/src/utils/utils.js

@@ -339,6 +339,28 @@ export const Utils = {
     return title;
   },
 
+  sharePermsExplanation: function(permission) {
+    var title;
+    switch(permission) {
+      case 'rw':
+        title = gettext("User can read, write, upload, download and sync files.");
+        break;
+      case 'r':
+        title = gettext("User can read, download and sync files.");
+        break;
+      case 'admin':
+        title = gettext("Besides Write permission, user can also share the library.");
+        break;
+      case 'cloud-edit':
+        title = gettext("User can only view files online via browser. Files can't be downloaded.");
+        break;
+      case 'preview':
+        title = gettext("Same as Preview on cloud. But user can also edit files online via browser.");
+        break;
+    }
+    return title;
+  },
+
   formatSize: function(options) {
     /*
      * param: {bytes, precision}