haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-03 16:10:26 +00:00
Code Issues Releases Wiki Activity

[invitations] modification for mobile (#3973)

Browse Source
This commit is contained in:
llj
2019-08-14 15:29:31 +08:00
committed by Daniel Pan
parent 8839207207
commit 04e10f3a4c
2 changed files with 91 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/toolbar/invitations-toolbar.js
View File

@@ -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')}></span>
</MediaQuery>
) : (
<span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Invite People')} onClick={toggleInvitePeopleDialog}></span>
)}
</div>
<CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
</div>

83
frontend/src/pages/invitations/invitations-view.js
View File

@@ -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,8 +78,17 @@ class Item extends React.Component {
return null;
}
const invitationItem = this.props.invitation;
const operation = invitationItem.accept_time ?
const item = this.props.invitation;
const desktopItem = (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<td>{item.accepter}</td>
<td>{moment(item.invite_time).format('YYYY-MM-DD')}</td>
<td>{moment(item.expire_time).format('YYYY-MM-DD')}</td>
<td>{item.accept_time && <i className="sf2-icon-tick invite-accept-icon"></i>}</td>
<td>
{isOpIconShown && (
item.accept_time ?
<i
className="action-icon sf3-font sf3-font-cancel-invitation"
title={gettext('Revoke Access')}
@@ -81,21 +98,50 @@ class Item extends React.Component {
className="action-icon sf2-icon-x3"
title={gettext('Delete')}
onClick={this.deleteItem}>
</i>;
</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}>
<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>
{this.props.isDesktop ? desktopItem : mobileItem}
{isRevokeDialogOpen &&
<InvitationRevokeDialog
accepter={invitationItem.accepter}
token={invitationItem.token}
accepter={item.accepter}
token={item.token}
revokeInvitation={this.revokeItem}
toggleDialog={this.toggleRevokeDialog}
/>
@@ -138,9 +184,11 @@ class Content extends Component {
);
}
const isDesktop = Utils.isDesktop();
return (
<table className="table-hover">
<table className={`table-hover${isDesktop ? '': ' table-thead-hidden'}`}>
<thead>
{isDesktop ?
<tr>
<th width="25%">{gettext('Email')}</th>
<th width="20%">{gettext('Invite Time')}</th>
@@ -148,12 +196,19 @@ class Content extends Component {
<th width="18%">{gettext('Accepted')}</th>
<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}
isDesktop={isDesktop}
invitation={invitation}
/>
);