[invitations] modification for mobile (#3973)

frontend/src/components/toolbar/invitations-toolbar.js

@@ -24,16 +24,15 @@ class InvitationsToolbar extends React.Component {
         <div className="cur-view-toolbar">
           <span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
           </span>
-          <MediaQuery query="(min-width: 768px)">
+          {window.innerWidth >= 768 ? (
             <div className="operation">
               <Button color="btn btn-secondary operation-item" onClick={toggleInvitePeopleDialog}>
                 <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite People')}
               </Button>
             </div>
-          </MediaQuery>
+          ) : (
-          <MediaQuery query="(max-width: 767.8px)">
+            <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Invite People')} onClick={toggleInvitePeopleDialog}></span>
-            <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Invite People')}></span>
+          )}
-          </MediaQuery>
         </div>
         <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
       </div>

frontend/src/pages/invitations/invitations-view.js

@@ -1,7 +1,8 @@
 import React, { Component, Fragment } from 'react';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { gettext, siteRoot, loginUrl, canInvitePeople } from '../../utils/constants';
+import { gettext, loginUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import InvitationsToolbar from '../../components/toolbar/invitations-toolbar';
@@ -19,10 +20,17 @@ class Item extends React.Component {
     super(props);
     this.state = {
       isOpIconShown: false, 
+      isOpMenuOpen: false, // for mobile
       isRevokeDialogOpen: false
     };
   }
 
+  toggleOpMenu = () => {
+    this.setState({
+      isOpMenuOpen: !this.state.isOpMenuOpen
+    });
+  }
+
   onMouseEnter = () => {
     this.setState({
       isOpIconShown: true
@@ -70,32 +78,70 @@ class Item extends React.Component {
       return null;
     }
 
-    const invitationItem = this.props.invitation;
+    const item = this.props.invitation;
-    const operation = invitationItem.accept_time ?
+
-      <i
+    const desktopItem = (
-        className="action-icon sf3-font sf3-font-cancel-invitation"
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        title={gettext('Revoke Access')}
+        <td>{item.accepter}</td>
-        onClick={this.toggleRevokeDialog}>
+        <td>{moment(item.invite_time).format('YYYY-MM-DD')}</td>
-      </i> :
+        <td>{moment(item.expire_time).format('YYYY-MM-DD')}</td>
-      <i
+        <td>{item.accept_time && <i className="sf2-icon-tick invite-accept-icon"></i>}</td>
-        className="action-icon sf2-icon-x3"
+        <td>
-        title={gettext('Delete')}
+          {isOpIconShown && (
-        onClick={this.deleteItem}>
+            item.accept_time ?
-      </i>;
+              <i
+                className="action-icon sf3-font sf3-font-cancel-invitation"
+                title={gettext('Revoke Access')}
+                onClick={this.toggleRevokeDialog}>
+              </i> :
+              <i
+                className="action-icon sf2-icon-x3"
+                title={gettext('Delete')}
+                onClick={this.deleteItem}>
+              </i>
+          )}
+        </td>
+      </tr>
+    );
+
+    const mobileItem = (
+      <tr>
+        <td>
+          {item.accepter}<br />
+          <span className="item-meta-info">{moment(item.invite_time).format('YYYY-MM-DD')}<span className="small">({gettext('Invite Time')})</span></span>
+          <span className="item-meta-info">{moment(item.expire_time).format('YYYY-MM-DD')}<span className="small">({gettext('Expiration')})</span></span>
+          <span className="item-meta-info">{item.accept_time && gettext('Accepted')}</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">
+                {item.accept_time ?
+                  <DropdownItem className="mobile-menu-item" onClick={this.toggleRevokeDialog}>{gettext('Revoke Access')}</DropdownItem> :
+                  <DropdownItem className="mobile-menu-item" onClick={this.deleteItem}>{gettext('Delete')}</DropdownItem>
+                }
+              </div>
+            </div>
+          </Dropdown>
+        </td>
+      </tr>
+    );
 
     return (
       <Fragment>
-        <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        {this.props.isDesktop ? desktopItem : mobileItem}
-          <td>{invitationItem.accepter}</td>
-          <td>{moment(invitationItem.invite_time).format('YYYY-MM-DD')}</td>
-          <td>{moment(invitationItem.expire_time).format('YYYY-MM-DD')}</td>
-          <td>{invitationItem.accept_time && <i className="sf2-icon-tick invite-accept-icon"></i>}</td>
-          <td>{isOpIconShown && operation}</td>
-        </tr>
         {isRevokeDialogOpen &&
         <InvitationRevokeDialog
-          accepter={invitationItem.accepter}
+          accepter={item.accepter}
-          token={invitationItem.token}
+          token={item.token}
           revokeInvitation={this.revokeItem}
           toggleDialog={this.toggleRevokeDialog}
         />
@@ -138,23 +184,32 @@ class Content extends Component {
       );
     }
 
+    const isDesktop = Utils.isDesktop();
     return (
-      <table className="table-hover">
+      <table className={`table-hover${isDesktop ? '': ' table-thead-hidden'}`}>
         <thead>
-          <tr>
+          {isDesktop ?
-            <th width="25%">{gettext('Email')}</th>
+            <tr>
-            <th width="20%">{gettext('Invite Time')}</th>
+              <th width="25%">{gettext('Email')}</th>
-            <th width="20%">{gettext('Expiration')}</th>
+              <th width="20%">{gettext('Invite Time')}</th>
-            <th width="18%">{gettext('Accepted')}</th>
+              <th width="20%">{gettext('Expiration')}</th>
-            <th width="7%"></th>
+              <th width="18%">{gettext('Accepted')}</th>
-          </tr>
+              <th width="7%"></th>
+            </tr>
+            :
+            <tr>
+              <th width="92%"></th>
+              <th width="8%"></th>
+            </tr>
+          }
         </thead>
         <tbody>
           {invitationsList.map((invitation, index) => {
             return (
               <Item
-              key={index}
+                key={index}
-              invitation={invitation}
+                isDesktop={isDesktop}
+                invitation={invitation}
               />
             );
           })}