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

* and 'bugfix & improvement'
2025-09-15 14:49:09 +00:00 · 2019-08-14 15:10:58 +08:00
parent 8dc7c950a3
commit 8839207207
7 changed files with 197 additions and 64 deletions
--- a/frontend/src/components/dialog/perm-select.js
+++ b/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;
--- a/frontend/src/css/files-activities.css
+++ b/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;
--- a/frontend/src/models/shared-repo-info.js
+++ b/frontend/src/models/shared-repo-info.js
@@ -13,8 +13,8 @@ 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;
-    } else if(this.share_type === 'group') {
+      this.contact_email = object.contact_email;
+    } else if (this.share_type === 'group') {
      this.is_admin = object.is_admin;
      this.group_id = object.group_id;
      this.group_name = object.group_name;
--- a/frontend/src/pages/dashboard/files-activities.js
+++ b/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">
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/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'];
-    if (isPro) {
-      this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
+    let permissions = ['rw', 'r'];
+    this.permissions = permissions;
+    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 = () => {
-    this.props.unshareFolder(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 };
+  unshare = (e) => {
+    e.preventDefault();
+    this.props.unshareItem(this.props.item);
  }

  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
-    let showAdmin = isPro && (item.share_type !== 'public'); 
-    if (showAdmin && is_admin) {
+    if (this.showAdmin && is_admin) {
      share_permission = 'admin';
    }

-    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
-    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 (
+    const desktopItem = (
      <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>
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -33,6 +33,10 @@ export const Utils = {
    }
  },

+  isDesktop: function() {
+    return window.innerWidth >= 768;
+  },
+
  FILEEXT_ICON_MAP: {

    // text file
@@ -90,7 +94,7 @@ export const Utils = {
  },

  // check if a file is an image
-  imageCheck: function (filename) {
+  imageCheck: function(filename) {
    // no file ext
    if (filename.lastIndexOf('.') == -1) {
      return false;
@@ -119,7 +123,7 @@ export const Utils = {
  },

  // check if a file is a video
-  videoCheck: function (filename) {
+  videoCheck: function(filename) {
    // no file ext
    if (filename.lastIndexOf('.') == -1) {
      return false;
--- a/media/css/seahub_react.css
+++ b/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;