[share admin] libraries: added support for mobile (#3981)

* and 'bugfix & improvement'

frontend/src/components/dialog/perm-select.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  currentPerm: PropTypes.string.isRequired,
+  permissions: PropTypes.array.isRequired,
+  changePerm: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class PermSelect extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentOption: this.props.currentPerm 
+    };
+  }
+
+  switchOption = (e) => {
+    if (!e.target.checked) {
+      return;
+    }
+
+    const currentOption = e.target.value;
+    this.setState({
+      currentOption: currentOption 
+    });
+
+    this.props.changePerm(currentOption);
+    this.props.toggleDialog();
+  }
+
+  render() {
+    const options = this.props.permissions;
+    const { currentOption } = this.state;
+
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalBody>
+          {options.map((item, index) => {
+            return (
+              <div className="d-flex" key={index}>
+                <input id={`option-${index}`} className="mt-1" type="radio" name="permission" value={item} checked={currentOption == item} onChange={this.switchOption} />
+                <label htmlFor={`option-${index}`} className="ml-2">
+                  {Utils.sharePerms(item)}
+                  <p className="text-secondary small m-0">
+                    {Utils.sharePermsExplanation(item)}
+                  </p>
+                </label>
+              </div>
+            );
+          })}
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+PermSelect.propTypes = propTypes;
+
+export default PermSelect;

frontend/src/css/files-activities.css

@@ -5,15 +5,6 @@
 .activity-details:hover {
   color: #333;
 }
-.mobile-activity-op {
-  display: inline-block;
-  margin: 0 0 .2em .8em;
-  padding: 0 .5em;
-  background: #ffbd6f;
-  border-radius: 2px;
-  color: #fff;
-  font-size: 0.75rem;
-}
 .mobile-activity-time {
   display: inline-block;
   margin-bottom: .2em;

frontend/src/models/shared-repo-info.js

@@ -13,7 +13,7 @@ class SharedRepoInfo {
       this.is_admin = object.is_admin;
       this.user_name = object.user_name;
       this.user_email = object.user_email;
-      this.contact_email = this.contact_email;
+      this.contact_email = object.contact_email;
     } else if (this.share_type === 'group') {
       this.is_admin = object.is_admin;
       this.group_id = object.group_id;

frontend/src/pages/dashboard/files-activities.js

@@ -269,7 +269,7 @@ class ActivityItem extends Component {
             </td>
             <td>
               <a href={userProfileURL}>{item.author_name}</a>
-              <span className="mobile-activity-op">{op}</span>
+              <span className="item-meta-info-highlighted">{op}</span>
               <br />{details}
             </td>
             <td className="text-right align-top">

frontend/src/pages/share-admin/libraries.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { Fragment, Component } from 'react';
 import { Link } from '@reach/router';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -7,6 +8,7 @@ import toaster from '../../components/toast';
 import EmptyTip from '../../components/empty-tip';
 import SharePermissionEditor from '../../components/select-editor/share-permission-editor';
 import SharedRepoInfo from '../../models/shared-repo-info';
+import PermSelect from '../../components/dialog/perm-select';
 
 class Content extends Component {
 
@@ -36,9 +38,11 @@ class Content extends Component {
       const sortByName = sortBy == 'name';
       const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
 
+      const isDesktop = Utils.isDesktop();
       const table = (
-        <table className="table-hover">
+        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
           <thead>
+            {isDesktop ? (
               <tr>
                 <th width="4%">{/*icon*/}</th>
                 <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
@@ -46,10 +50,22 @@ class Content extends Component {
                 <th width="24%">{gettext('Permission')}</th>
                 <th width="8%"></th>
               </tr>
+            ) : (
+              <tr>
+                <th width="12%"></th>
+                <th width="80%"></th>
+                <th width="8%"></th>
+              </tr>
+            )}
           </thead>
           <tbody>
             {items.map((item, index) => {
-              return (<Item key={index} item={item} unshareFolder={this.props.unshareFolder}/>);
+              return (<Item 
+                key={index}
+                isDesktop={isDesktop}
+                item={item}
+                unshareItem={this.props.unshareItem}
+              />);
             })}
           </tbody>
         </table>
@@ -69,21 +85,40 @@ class Item extends Component {
     this.state = {
       share_permission: item.share_permission,
       is_admin: item.is_admin,
-      showOpIcon: false,
+      isOpIconShown: false,
+      isOpMenuOpen: false, // for mobile
+      isPermSelectDialogOpen: false, // for mobile
       unshared: false
     };
-    this.permissions = ['rw', 'r'];
+    let permissions = ['rw', 'r'];
-    if (isPro) {
+    this.permissions = permissions;
-      this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
+    this.showAdmin = isPro && (item.share_type !== 'public');
+    if (this.showAdmin) {
+      permissions.push('admin');
     }
+    if (isPro) {
+      permissions.push('cloud-edit', 'preview');
+    }
+  }
+
+  toggleOpMenu = () => {
+    this.setState({
+      isOpMenuOpen: !this.state.isOpMenuOpen
+    });
+  }
+
+  togglePermSelectDialog = () => {
+    this.setState({
+      isPermSelectDialogOpen: !this.state.isPermSelectDialogOpen
+    });
   }
 
   onMouseEnter = () => {
-    this.setState({showOpIcon: true});
+    this.setState({isOpIconShown: true});
   }
 
   onMouseLeave = () => {
-    this.setState({showOpIcon: false});
+    this.setState({isOpIconShown: false});
   }
 
   changePerm = (permission) => {
@@ -97,8 +132,6 @@ class Item extends Component {
       options.user = item.user_email;
     } else if (share_type == 'group') {
       options.group_id = item.group_id;
-    } else if (share_type === 'public') {
-      // nothing todo
     }
 
     seafileAPI.updateRepoSharePerm(item.repo_id, options).then(() => {
@@ -106,72 +139,102 @@ class Item extends Component {
         share_permission: permission == 'admin' ? 'rw' : permission,
         is_admin: permission == 'admin',
       });
+      toaster.success(gettext('Successfully modified permission.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
   }
 
-  unshare = () => {
+  unshare = (e) => {
-    this.props.unshareFolder(this.props.item);
+    e.preventDefault();
-  }
+    this.props.unshareItem(this.props.item);
-
-  getRepoParams = () => {
-    let item = this.props.item;
-    
-    let iconUrl = Utils.getLibIconUrl(item); 
-    let iconTitle = Utils.getLibIconTitle(item);
-    let repoUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}/`;
-
-    return { iconUrl, iconTitle, repoUrl };
   }
 
   render() {
 
-    let { iconUrl, iconTitle, repoUrl } = this.getRepoParams();
     let item = this.props.item;
-    let { share_permission, is_admin } = this.state;
+    let iconUrl = Utils.getLibIconUrl(item); 
+    let iconTitle = Utils.getLibIconTitle(item);
+    let repoUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`;
+
+    let { share_permission, is_admin, isOpIconShown, isPermSelectDialogOpen } = this.state;
 
     let shareTo;
     const shareType = item.share_type;
     if (shareType == 'personal') {
-      shareTo = <td title={item.contact_email}>{item.user_name}</td>;
+      shareTo = item.user_name;
     } else if (shareType == 'group') {
-      shareTo = <td>{item.group_name}</td>;
+      shareTo = item.group_name;
     } else if (shareType == 'public') {
-      shareTo = <td>{gettext('all members')}</td>;
+      shareTo = gettext('all members');
     }
 
-    // show 'admin' perm or not
+    if (this.showAdmin && is_admin) {
-    let showAdmin = isPro && (item.share_type !== 'public'); 
-    if (showAdmin && is_admin) {
       share_permission = 'admin';
     }
 
-    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
+    const desktopItem = (
-    let unshareIconClassName = 'unshare action-icon sf2-icon-x3' + iconVisibility;
-
-    if (showAdmin && this.permissions.indexOf('admin') === -1) {
-      this.permissions.splice(2, 0, 'admin'); // add a item after 'r' permission;
-    }
-
-    return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td><Link to={repoUrl}>{item.repo_name}</Link></td>
-        {shareTo}
+        <td>
+          {item.share_type == 'personal' ? <span title={item.contact_email}>{shareTo}</span> : shareTo}
+        </td>
         <td>
           <SharePermissionEditor 
             isTextMode={true}
-            isEditIconShow={this.state.showOpIcon}
+            isEditIconShow={this.state.isOpIconShown}
             currentPermission={share_permission}
             permissions={this.permissions}
             onPermissionChanged={this.changePerm}
           />
         </td>
-        <td><a href="#" className={unshareIconClassName} title={gettext('Unshare')} onClick={this.unshare}></a></td>
+        <td><a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
+
+    const mobileItem = (
+      <Fragment>
+        <tr>
+          <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+          <td>
+            <Link to={repoUrl}>{item.repo_name}</Link>
+            <span className="item-meta-info-highlighted">{Utils.sharePerms(share_permission)}</span>
+            <br />
+            <span className="item-meta-info">{`${gettext('Share To:')} ${shareTo}`}</span>
+          </td>
+          <td>
+            <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+              <DropdownToggle
+                tag="i"
+                className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
+                title={gettext('More Operations')}
+                data-toggle="dropdown"
+                aria-expanded={this.state.isOpMenuOpen}
+              />
+              <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
+                <div className="mobile-operation-menu-bg-layer"></div>
+                <div className="mobile-operation-menu">
+                  <DropdownItem className="mobile-menu-item" onClick={this.togglePermSelectDialog}>{gettext('Permission')}</DropdownItem>
+                  <DropdownItem className="mobile-menu-item" onClick={this.unshare}>{gettext('Unshare')}</DropdownItem>
+                </div>
+              </div>
+            </Dropdown>
+          </td>
+        </tr>
+        {isPermSelectDialogOpen &&
+        <PermSelect
+          currentPerm={share_permission}
+          permissions={this.permissions}
+          changePerm={this.changePerm}
+          toggleDialog={this.togglePermSelectDialog}
+        />
+        }
+      </Fragment>
+    );
+
+    return this.props.isDesktop ? desktopItem : mobileItem;
   }
 }
 
@@ -221,7 +284,7 @@ class ShareAdminLibraries extends Component {
     });
   }
 
-  unshareFolder = (item) => {
+  unshareItem = (item) => {
     const share_type = item.share_type;
     let options = {
       'share_type': share_type
@@ -282,7 +345,7 @@ class ShareAdminLibraries extends Component {
               sortBy={this.state.sortBy}
               sortOrder={this.state.sortOrder}
               sortItems={this.sortItems}
-              unshareFolder={this.unshareFolder}
+              unshareItem={this.unshareItem}
             />
           </div>
         </div>

frontend/src/utils/utils.js

@@ -33,6 +33,10 @@ export const Utils = {
     }
   },
 
+  isDesktop: function() {
+    return window.innerWidth >= 768;
+  },
+
   FILEEXT_ICON_MAP: {
 
     // text file

media/css/seahub_react.css

@@ -1134,6 +1134,16 @@ a.table-sort-op:focus {
       color: #666;
     }
 
+    .item-meta-info-highlighted {
+      display: inline-block;
+      margin: 0 0 .2em .8em;
+      padding: 0 .5em;
+      background: #ffbd6f;
+      border-radius: 2px;
+      color: #fff;
+      font-size: 0.75rem;
+    }
+    
     .mobile-operation-menu-bg-layer {
       position: fixed;
       left: 0;