1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-31 22:54:11 +00:00

Group and shared module improve (#2739)

* update seafile-ui.css

* add repo detail for group

* add-detail for groups-view

* group-and-shared-module-improve

* when look detail, clicking navPath, or clicking other item will generator error
This commit is contained in:
杨顺强
2018-12-29 18:25:18 +08:00
committed by Daniel Pan
parent cfc6f2221f
commit 169a11615b
8 changed files with 138 additions and 38 deletions

View File

@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Link } from '@reach/router';
@@ -7,6 +7,8 @@ import { Utils } from '../../utils/utils';
import Repo from '../../models/repo';
import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
import Loading from '../../components/loading';
import ModalPotal from '../../components/modal-portal';
import ShareDialog from '../../components/dialog/share-dialog';
class Content extends Component {
@@ -116,7 +118,8 @@ class Item extends Component {
super(props);
this.state = {
showOpIcon: false,
unshared: false
unshared: false,
isShowSharedDialog: false,
};
this.handleMouseOver = this.handleMouseOver.bind(this);
@@ -140,7 +143,7 @@ class Item extends Component {
share(e) {
e.preventDefault();
// TODO
this.setState({isShowSharedDialog: true});
}
leaveShare(e) {
@@ -169,6 +172,10 @@ class Item extends Component {
});
}
toggleShareDialog = () => {
this.setState({isShowSharedDialog: false});
}
render() {
if (this.state.unshared) {
@@ -199,37 +206,63 @@ class Item extends Component {
let leaveShareIconClassName = 'op-icon sf2-icon-x3' + iconVisibility;
const desktopItem = (
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
<td>
{ isPro && data.is_admin ?
<a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
: ''}
<a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
</td>
<td>{data.size}</td>
<td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
<td title={data.owner_contact_email}>{data.owner_name}</td>
</tr>
<Fragment>
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
<td>
{(isPro && data.is_admin) &&
<a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
}
<a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
</td>
<td>{data.size}</td>
<td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
<td title={data.owner_contact_email}>{data.owner_name}</td>
</tr>
{this.state.isShowSharedDialog && (
<ModalPotal>
<ShareDialog
itemType={'library'}
itemName={data.repo_name}
itemPath={'/'}
repoID={data.repo_id}
toggleDialog={this.toggleShareDialog}
/>
</ModalPotal>
)}
</Fragment>
);
const mobileItem = (
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
<Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link><br />
<span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
<span className="item-meta-info">{data.size}</span>
<span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
</td>
<td>
{ isPro && data.is_admin ?
<a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
: ''}
<a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
</td>
</tr>
<Fragment>
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
<Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link><br />
<span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
<span className="item-meta-info">{data.size}</span>
<span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
</td>
<td>
{(isPro && data.is_admin) &&
<a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
}
<a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
</td>
</tr>
{this.state.isShowSharedDialog && (
<ModalPotal>
<ShareDialog
itemType={'library'}
itemName={data.repo_name}
itemPath={'/'}
repoID={data.repo_id}
toggleDialog={this.toggleShareDialog}
/>
</ModalPotal>
)}
</Fragment>
);
return window.innerWidth >= 768 ? desktopItem : mobileItem;