mirror of
https://github.com/haiwen/seahub.git
synced 2025-08-02 15:57:31 +00:00
Share manage improve (#2718)
This commit is contained in:
杨顺强
Daniel Pan
parent
df3cb4c2f2
commit
7836554816
@ -38,10 +38,11 @@ class GroupItem extends React.Component {
|
||||
let item = this.props.item;
|
||||
return (
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td>{item.group_info.name}</td>
|
||||
<td className='name'>{item.group_info.name}</td>
|
||||
<td>
|
||||
<PermissionEditor
|
||||
isTextMode={true}
|
||||
isEditIconShow={this.state.isOperationShow}
|
||||
currentPermission={item.permission}
|
||||
permissions={this.props.permissions}
|
||||
onPermissionChangedHandler={this.onChangeUserPermission}
|
||||
@ -49,7 +50,7 @@ class GroupItem extends React.Component {
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
|
||||
className={`sf2-icon-x3 op-icon ${this.state.isOperationShow ? '' : 'hide'}`}
|
||||
onClick={this.deleteShareItem}
|
||||
title={gettext('Delete')}
|
||||
>
|
||||
|
||||
@ -37,10 +37,11 @@ class UserItem extends React.Component {
|
||||
let item = this.props.item;
|
||||
return (
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td>{item.user_info.nickname}</td>
|
||||
<td className="name">{item.user_info.nickname}</td>
|
||||
<td>
|
||||
<PermissionEditor
|
||||
isTextMode={true}
|
||||
isEditIconShow={this.state.isOperationShow}
|
||||
currentPermission={item.permission}
|
||||
permissions={this.props.permissions}
|
||||
onPermissionChangedHandler={this.onChangeUserPermission}
|
||||
@ -48,7 +49,7 @@ class UserItem extends React.Component {
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`sf2-icon-x3 sf2-x op-icon a-simulate ${this.state.isOperationShow ? '' : 'hide'}`}
|
||||
className={`sf2-icon-x3 op-icon ${this.state.isOperationShow ? '' : 'hide'}`}
|
||||
onClick={this.deleteShareItem}
|
||||
title={gettext('Delete')}
|
||||
>
|
||||
@ -287,6 +288,7 @@ class ShareToUser extends React.Component {
|
||||
<td>
|
||||
<PermissionEditor
|
||||
isTextMode={false}
|
||||
isEditIconShow={this.state.isOperationShow}
|
||||
currentPermission={this.state.permission}
|
||||
permissions={this.permissions}
|
||||
onPermissionChangedHandler={this.setPermission}
|
||||
|
||||
@ -413,7 +413,7 @@ class DirentListItem extends React.Component {
|
||||
</td>
|
||||
<td className="icon">
|
||||
<div className="dir-icon">
|
||||
<img src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt={gettext('file icon')}></img>
|
||||
<img src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt=''></img>
|
||||
{dirent.is_locked && <img className="locked" src={siteRoot + 'media/img/file-locked-32.png'} alt={gettext('locked')}></img>}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Utils } from '../utils/utils';
|
||||
import { Input } from 'reactstrap';
|
||||
import { Utils } from '../utils/utils';
|
||||
import { gettext } from '../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
|
||||
isEditIconShow: PropTypes.bool.isRequired,
|
||||
currentPermission: PropTypes.string.isRequired,
|
||||
permissions: PropTypes.array.isRequired,
|
||||
onPermissionChangedHandler: PropTypes.func.isRequired,
|
||||
@ -75,7 +77,14 @@ class PermissionEditor extends React.Component {
|
||||
{(isTextMode && !this.state.isEditing) &&
|
||||
<div>
|
||||
{Utils.sharePerms(currentPermission)}
|
||||
<span style={{fontSize: '0.875rem', marginLeft: '0.5rem'}} className="fa fa-pencil op-icon" onClick={this.onEidtPermission}></span>
|
||||
{this.props.isEditIconShow && (
|
||||
<span
|
||||
title={gettext('Edit')}
|
||||
style={{fontSize: '0.875rem', marginLeft: '0.5rem'}}
|
||||
className="fa fa-pencil op-icon"
|
||||
onClick={this.onEidtPermission}>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,7 @@ class WikiListView extends Component {
|
||||
return <p className="error text-center">{errorMsg}</p>;
|
||||
} else {
|
||||
return (
|
||||
<table className="wiki-list-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">{gettext('Name')}</th>
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
.history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
background-color: #f4f4f7;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.history-header .title {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1rem;
|
||||
|
||||
@ -8,12 +8,6 @@
|
||||
/* for top bottom layout*/
|
||||
#header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
background-color: #f4f4f7;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* for left right layout */
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from '@reach/router';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
|
||||
import PermissionEditor from '../../components/permission-editor';
|
||||
|
||||
class Content extends Component {
|
||||
|
||||
@ -21,13 +23,13 @@ class Content extends Component {
|
||||
);
|
||||
|
||||
const table = (
|
||||
<table className="table table-hover table-vcenter">
|
||||
<table className="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="7%">{/*icon*/}</th>
|
||||
<th width="30%">{gettext("Name")} <a className="table-sort-op by-name" href="#"><span className="sort-icon icon-caret-down hide"></span>{/* TODO: sort by name */}</a></th>
|
||||
<th width="4%">{/*icon*/}</th>
|
||||
<th width="34%">{gettext("Name")} <a className="table-sort-op by-name" href="#"><span className="sort-icon icon-caret-down hide"></span>{/* TODO: sort by name */}</a></th>
|
||||
<th width="30%">{gettext("Share To")}</th>
|
||||
<th width="25%">{gettext("Permission")}</th>
|
||||
<th width="24%">{gettext("Permission")}</th>
|
||||
<th width="8%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -80,27 +82,21 @@ class Item extends Component {
|
||||
unshared: false
|
||||
};
|
||||
|
||||
this.handleMouseOver = this.handleMouseOver.bind(this);
|
||||
this.handleMouseOut = this.handleMouseOut.bind(this);
|
||||
|
||||
this.showSelect = this.showSelect.bind(this);
|
||||
this.changePerm = this.changePerm.bind(this);
|
||||
this.unshare = this.unshare.bind(this);
|
||||
this.permissions = ['rw', 'r'];
|
||||
if (isPro) {
|
||||
this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseOver() {
|
||||
this.setState({
|
||||
showOpIcon: true
|
||||
});
|
||||
onMouseEnter = () => {
|
||||
this.setState({showOpIcon: true});
|
||||
}
|
||||
|
||||
handleMouseOut() {
|
||||
this.setState({
|
||||
showOpIcon: false
|
||||
});
|
||||
onMouseLeave = () => {
|
||||
this.setState({showOpIcon: false});
|
||||
}
|
||||
|
||||
unshare(e) {
|
||||
unshare = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const data = this.props.data;
|
||||
@ -130,17 +126,17 @@ class Item extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
showSelect(e) {
|
||||
showSelect = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
showSelect: true
|
||||
});
|
||||
}
|
||||
|
||||
changePerm(e) {
|
||||
changePerm = (permission) => {
|
||||
const data = this.props.data;
|
||||
const share_type = data.share_type;
|
||||
const perm = e.target.value;
|
||||
const perm = permission;
|
||||
const postData = {
|
||||
'permission': perm
|
||||
};
|
||||
@ -173,7 +169,6 @@ class Item extends Component {
|
||||
}
|
||||
|
||||
const data = this.props.data;
|
||||
|
||||
const share_permission = this.state.share_permission;
|
||||
|
||||
let is_readonly = false;
|
||||
@ -187,7 +182,7 @@ class Item extends Component {
|
||||
data.icon_title = Utils.getFolderIconTitle({
|
||||
'permission': share_permission
|
||||
});
|
||||
data.url = `${siteRoot}#my-libs/lib/${data.repo_id}${Utils.encodePath(data.path)}`;
|
||||
data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`;
|
||||
|
||||
let shareTo;
|
||||
const shareType = data.share_type;
|
||||
@ -201,35 +196,22 @@ class Item extends Component {
|
||||
data.cur_perm_text = Utils.sharePerms(data.cur_perm);
|
||||
|
||||
let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
|
||||
let editIconClassName = 'perm-edit-icon sf2-icon-edit op-icon' + iconVisibility;
|
||||
let unshareIconClassName = 'unshare op-icon sf2-icon-delete' + iconVisibility;
|
||||
|
||||
let permOption = function(options) {
|
||||
return <option value={options.perm}>{Utils.sharePerms(options.perm)}</option>;
|
||||
};
|
||||
let unshareIconClassName = 'unshare op-icon sf2-icon-x3' + iconVisibility;
|
||||
|
||||
const item = (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
|
||||
<td><a href={data.url}>{data.folder_name}</a></td>
|
||||
<td><Link to={data.url}>{data.folder_name}</Link></td>
|
||||
{shareTo}
|
||||
{
|
||||
this.state.showSelect ? (
|
||||
<td>
|
||||
<select className="form-control" defaultValue={data.cur_perm} onChange={this.changePerm}>
|
||||
{permOption({perm: 'rw'})}
|
||||
{permOption({perm: 'r'})}
|
||||
{isPro ? permOption({perm: 'cloud-edit'}) : ''}
|
||||
{isPro ? permOption({perm: 'preview'}) : ''}
|
||||
</select>
|
||||
</td>
|
||||
) : (
|
||||
<td>
|
||||
<span>{data.cur_perm_text}</span>
|
||||
<a href="#" title={gettext('Edit')} className={editIconClassName} onClick={this.showSelect}></a>
|
||||
</td>
|
||||
)
|
||||
}
|
||||
<td>
|
||||
<PermissionEditor
|
||||
isTextMode={true}
|
||||
isEditIconShow={this.state.showOpIcon}
|
||||
currentPermission={data.cur_perm}
|
||||
permissions={this.permissions}
|
||||
onPermissionChangedHandler={this.changePerm}
|
||||
/>
|
||||
</td>
|
||||
<td><a href="#" className={unshareIconClassName} title={gettext('Unshare')} onClick={this.unshare}></a></td>
|
||||
</tr>
|
||||
);
|
||||
@ -239,6 +221,7 @@ class Item extends Component {
|
||||
}
|
||||
|
||||
class ShareAdminFolders extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from '@reach/router';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
|
||||
import PermissionEditor from '../../components/permission-editor';
|
||||
|
||||
class Content extends Component {
|
||||
|
||||
@ -21,13 +23,13 @@ class Content extends Component {
|
||||
);
|
||||
|
||||
const table = (
|
||||
<table className="table table-hover table-vcenter">
|
||||
<table className="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="7%">{/*icon*/}</th>
|
||||
<th width="30%">{gettext("Name")} <a className="table-sort-op by-name" href="#"><span className="sort-icon icon-caret-down hide"></span>{/* TODO: sort by name */}</a></th>
|
||||
<th width="4%">{/*icon*/}</th>
|
||||
<th width="34%">{gettext("Name")} <a className="table-sort-op by-name" href="#"><span className="sort-icon icon-caret-down hide"></span>{/* TODO: sort by name */}</a></th>
|
||||
<th width="30%">{gettext("Share To")}</th>
|
||||
<th width="25%">{gettext("Permission")}</th>
|
||||
<th width="24%">{gettext("Permission")}</th>
|
||||
<th width="8%"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -80,28 +82,21 @@ class Item extends Component {
|
||||
showSelect: false,
|
||||
unshared: false
|
||||
};
|
||||
|
||||
this.handleMouseOver = this.handleMouseOver.bind(this);
|
||||
this.handleMouseOut = this.handleMouseOut.bind(this);
|
||||
|
||||
this.showSelect = this.showSelect.bind(this);
|
||||
this.changePerm = this.changePerm.bind(this);
|
||||
this.unshare = this.unshare.bind(this);
|
||||
this.permissions = ['rw', 'r'];
|
||||
if (isPro) {
|
||||
this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseOver() {
|
||||
this.setState({
|
||||
showOpIcon: true
|
||||
});
|
||||
onMouseEnter = () => {
|
||||
this.setState({showOpIcon: true});
|
||||
}
|
||||
|
||||
handleMouseOut() {
|
||||
this.setState({
|
||||
showOpIcon: false
|
||||
});
|
||||
onMouseLeave = () => {
|
||||
this.setState({showOpIcon: false});
|
||||
}
|
||||
|
||||
unshare(e) {
|
||||
unshare = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const data = this.props.data;
|
||||
@ -128,17 +123,17 @@ class Item extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
showSelect(e) {
|
||||
showSelect = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
showSelect: true
|
||||
});
|
||||
}
|
||||
|
||||
changePerm(e) {
|
||||
changePerm = (permission) => {
|
||||
const data = this.props.data;
|
||||
const share_type = data.share_type;
|
||||
const perm = e.target.value;
|
||||
const perm = permission;
|
||||
let options = {
|
||||
'share_type': share_type,
|
||||
'permission': perm
|
||||
@ -168,7 +163,6 @@ class Item extends Component {
|
||||
}
|
||||
|
||||
const data = this.props.data;
|
||||
|
||||
const share_permission = this.state.share_permission;
|
||||
const is_admin = this.state.is_admin;
|
||||
|
||||
@ -186,7 +180,7 @@ class Item extends Component {
|
||||
'is_admin': is_admin,
|
||||
'permission': share_permission
|
||||
});
|
||||
data.url = `${siteRoot}#my-libs/lib/${data.repo_id}/`;
|
||||
data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}`;
|
||||
|
||||
let shareTo;
|
||||
const shareType = data.share_type;
|
||||
@ -207,36 +201,26 @@ class Item extends Component {
|
||||
data.cur_perm_text = Utils.sharePerms(data.cur_perm);
|
||||
|
||||
let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
|
||||
let editIconClassName = 'perm-edit-icon sf2-icon-edit op-icon' + iconVisibility;
|
||||
let unshareIconClassName = 'unshare op-icon sf2-icon-delete' + iconVisibility;
|
||||
let unshareIconClassName = 'unshare op-icon sf2-icon-x3' + iconVisibility;
|
||||
|
||||
let permOption = function(options) {
|
||||
return <option value={options.perm}>{Utils.sharePerms(options.perm)}</option>;
|
||||
};
|
||||
if (data.show_admin && this.permissions.indexOf('admin') === -1) {
|
||||
this.permissions.splice(2, 0, 'admin'); // add a item after 'r' permission;
|
||||
}
|
||||
|
||||
const item = (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
|
||||
<td><a href={data.url}>{data.repo_name}</a></td>
|
||||
<td><Link to={data.url}>{data.repo_name}</Link></td>
|
||||
{shareTo}
|
||||
{
|
||||
this.state.showSelect ? (
|
||||
<td>
|
||||
<select className="form-control" defaultValue={data.cur_perm} onChange={this.changePerm}>
|
||||
{permOption({perm: 'rw'})}
|
||||
{permOption({perm: 'r'})}
|
||||
{data.show_admin ? permOption({perm: 'admin'}) : ''}
|
||||
{isPro ? permOption({perm: 'cloud-edit'}) : ''}
|
||||
{isPro ? permOption({perm: 'preview'}) : ''}
|
||||
</select>
|
||||
</td>
|
||||
) : (
|
||||
<td>
|
||||
<span>{data.cur_perm_text}</span>
|
||||
<a href="#" title={gettext('Edit')} className={editIconClassName} onClick={this.showSelect}></a>
|
||||
</td>
|
||||
)
|
||||
}
|
||||
<td>
|
||||
<PermissionEditor
|
||||
isTextMode={true}
|
||||
isEditIconShow={this.state.showOpIcon}
|
||||
currentPermission={data.cur_perm}
|
||||
permissions={this.permissions}
|
||||
onPermissionChangedHandler={this.changePerm}
|
||||
/>
|
||||
</td>
|
||||
<td><a href="#" className={unshareIconClassName} title={gettext('Unshare')} onClick={this.unshare}></a></td>
|
||||
</tr>
|
||||
);
|
||||
@ -246,6 +230,7 @@ class Item extends Component {
|
||||
}
|
||||
|
||||
class ShareAdminLibraries extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
@ -4,28 +4,26 @@ import moment from 'moment';
|
||||
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext, siteRoot, loginUrl, isPro, canGenerateUploadLink } from '../../utils/constants';
|
||||
import { gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants';
|
||||
|
||||
class Content extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
modalOpen: false,
|
||||
modalContent: ''
|
||||
};
|
||||
|
||||
this.toggleModal = this.toggleModal.bind(this);
|
||||
this.showModal = this.showModal.bind(this);
|
||||
}
|
||||
|
||||
// required by `Modal`, and can only set the 'open' state
|
||||
toggleModal() {
|
||||
toggleModal = () => {
|
||||
this.setState({
|
||||
modalOpen: !this.state.modalOpen
|
||||
});
|
||||
}
|
||||
|
||||
showModal(options) {
|
||||
showModal = (options) => {
|
||||
this.toggleModal();
|
||||
this.setState({
|
||||
modalContent: options.content
|
||||
@ -49,11 +47,11 @@ class Content extends Component {
|
||||
|
||||
const table = (
|
||||
<React.Fragment>
|
||||
<table className="table table-hover table-vcenter">
|
||||
<table className="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="10%">{/*icon*/}</th>
|
||||
<th width="30%">{gettext("Name")}<a className="table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-up"></span></a></th>{/* TODO:sort */}
|
||||
<th width="4%">{/*icon*/}</th>
|
||||
<th width="36%">{gettext("Name")}<a className="table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-up"></span></a></th>{/* TODO:sort */}
|
||||
<th width="24%">{gettext("Library")}</th>
|
||||
<th width="12%">{gettext("Visits")}</th>
|
||||
<th width="14%">{gettext("Expiration")}<a className="table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th>{/*TODO:sort*/}
|
||||
@ -106,32 +104,26 @@ class Item extends Component {
|
||||
showOpIcon: false,
|
||||
deleted: false
|
||||
};
|
||||
|
||||
this.handleMouseOver = this.handleMouseOver.bind(this);
|
||||
this.handleMouseOut = this.handleMouseOut.bind(this);
|
||||
|
||||
this.viewLink = this.viewLink.bind(this);
|
||||
this.removeLink = this.removeLink.bind(this);
|
||||
}
|
||||
|
||||
handleMouseOver() {
|
||||
handleMouseOver = () => {
|
||||
this.setState({
|
||||
showOpIcon: true
|
||||
});
|
||||
}
|
||||
|
||||
handleMouseOut() {
|
||||
handleMouseOut = () => {
|
||||
this.setState({
|
||||
showOpIcon: false
|
||||
});
|
||||
}
|
||||
|
||||
viewLink(e) {
|
||||
viewLink = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.showModal({content: this.props.data.link});
|
||||
}
|
||||
|
||||
removeLink(e) {
|
||||
removeLink = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const data = this.props.data;
|
||||
@ -155,14 +147,13 @@ class Item extends Component {
|
||||
}
|
||||
|
||||
const data = this.props.data;
|
||||
|
||||
const icon_size = Utils.isHiDPI() ? 48 : 24;
|
||||
if (data.is_dir) {
|
||||
data.icon_url = Utils.getFolderIconUrl({
|
||||
is_readonly: false,
|
||||
size: icon_size
|
||||
});
|
||||
data.url = `${siteRoot}#my-libs/lib/${data.repo_id}${Utils.encodePath(data.path)}`;
|
||||
data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`;
|
||||
} else {
|
||||
data.icon_url = Utils.getFileIconUrl(data.obj_name, icon_size);
|
||||
data.url = `${siteRoot}lib/${data.repo_id}/file${Utils.encodePath(data.path)}`;
|
||||
@ -179,8 +170,8 @@ class Item extends Component {
|
||||
const item = (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td><img src={data.icon_url} width="24" /></td>
|
||||
<td><a href={data.url}>{data.obj_name}</a></td>
|
||||
<td><a href={`${siteRoot}#my-libs/lib/${data.repo_id}/`}>{data.repo_name}</a></td>
|
||||
<td><Link to={data.url}>{data.obj_name}</Link></td>
|
||||
<td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
|
||||
<td>{data.view_cnt}</td>
|
||||
<td>{data.expire_date ? showDate({date: data.expire_date, is_expired: data.is_expired}) : '--'}</td>
|
||||
<td>
|
||||
@ -195,6 +186,7 @@ class Item extends Component {
|
||||
}
|
||||
|
||||
class ShareAdminShareLinks extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
@ -1,31 +1,28 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from '@reach/router';
|
||||
import moment from 'moment';
|
||||
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext, siteRoot, loginUrl, isPro, canGenerateShareLink } from '../../utils/constants';
|
||||
import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/constants';
|
||||
|
||||
class Content extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
modalOpen: false,
|
||||
modalContent: ''
|
||||
};
|
||||
|
||||
this.toggleModal = this.toggleModal.bind(this);
|
||||
this.showModal = this.showModal.bind(this);
|
||||
}
|
||||
|
||||
// required by `Modal`, and can only set the 'open' state
|
||||
toggleModal() {
|
||||
toggleModal = () => {
|
||||
this.setState({
|
||||
modalOpen: !this.state.modalOpen
|
||||
});
|
||||
}
|
||||
|
||||
showModal(options) {
|
||||
showModal = (options) => {
|
||||
this.toggleModal();
|
||||
this.setState({
|
||||
modalContent: options.content
|
||||
@ -49,13 +46,13 @@ class Content extends Component {
|
||||
|
||||
const table = (
|
||||
<React.Fragment>
|
||||
<table className="table table-hover table-vcenter">
|
||||
<table className="table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="10%">{/*icon*/}</th>
|
||||
<th width="35%">{gettext("Name")}</th>
|
||||
<th width="4%">{/*icon*/}</th>
|
||||
<th width="42%">{gettext("Name")}</th>
|
||||
<th width="30%">{gettext("Library")}</th>
|
||||
<th width="15%">{gettext("Visits")}</th>
|
||||
<th width="14%">{gettext("Visits")}</th>
|
||||
<th width="10%">{/*Operations*/}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -105,32 +102,22 @@ class Item extends Component {
|
||||
showOpIcon: false,
|
||||
deleted: false
|
||||
};
|
||||
|
||||
this.handleMouseOver = this.handleMouseOver.bind(this);
|
||||
this.handleMouseOut = this.handleMouseOut.bind(this);
|
||||
|
||||
this.viewLink = this.viewLink.bind(this);
|
||||
this.removeLink = this.removeLink.bind(this);
|
||||
}
|
||||
|
||||
handleMouseOver() {
|
||||
this.setState({
|
||||
showOpIcon: true
|
||||
});
|
||||
handleMouseOver = () => {
|
||||
this.setState({showOpIcon: true});
|
||||
}
|
||||
|
||||
handleMouseOut() {
|
||||
this.setState({
|
||||
showOpIcon: false
|
||||
});
|
||||
handleMouseOut = () => {
|
||||
this.setState({showOpIcon: false});
|
||||
}
|
||||
|
||||
viewLink(e) {
|
||||
viewLink = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.showModal({content: this.props.data.link});
|
||||
}
|
||||
|
||||
removeLink(e) {
|
||||
removeLink = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const data = this.props.data;
|
||||
@ -159,8 +146,9 @@ class Item extends Component {
|
||||
data.icon_url = Utils.getFolderIconUrl({
|
||||
is_readonly: false,
|
||||
size: icon_size
|
||||
});
|
||||
data.url = `${siteRoot}#my-libs/lib/${data.repo_id}${Utils.encodePath(data.path)}`;
|
||||
});
|
||||
|
||||
data.url = `${siteRoot}library/${data.repo_id}/${data.repo_name}${Utils.encodePath(data.path)}`;
|
||||
|
||||
let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
|
||||
let linkIconClassName = 'sf2-icon-link op-icon' + iconVisibility;
|
||||
@ -169,8 +157,8 @@ class Item extends Component {
|
||||
const item = (
|
||||
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<td><img src={data.icon_url} width="24" /></td>
|
||||
<td><a href={data.url}>{data.obj_name}</a></td>
|
||||
<td><a href={`${siteRoot}#my-libs/lib/${data.repo_id}/`}>{data.repo_name}</a></td>
|
||||
<td><Link to={data.url}>{data.obj_name}</Link></td>
|
||||
<td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}`}>{data.repo_name}</Link></td>
|
||||
<td>{data.view_cnt}</td>
|
||||
<td>
|
||||
<a href="#" className={linkIconClassName} title={gettext('View')} onClick={this.viewLink}></a>
|
||||
@ -184,6 +172,7 @@ class Item extends Component {
|
||||
}
|
||||
|
||||
class ShareAdminUploadLinks extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
@ -288,6 +288,12 @@ ul,ol,li {
|
||||
margin-right:3px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
.op-icon:focus,
|
||||
.op-icon:hover {
|
||||
color: #333;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.op-icon.sf2-x,
|
||||
.op-icon.sf2-x:hover {
|
||||
color:#f89a68;
|
||||
@ -415,15 +421,6 @@ ul,ol,li {
|
||||
}
|
||||
}
|
||||
|
||||
a.op-icon:focus {
|
||||
outline:none;
|
||||
text-decoration:none;
|
||||
}
|
||||
.op-icon:hover {/** for <a> **/
|
||||
color:#888;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/* sf-nav-link */
|
||||
.nav .nav-item {
|
||||
padding: 0;
|
||||
@ -852,6 +849,10 @@ table .star .empty {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
table .name {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
table .rename-container input {
|
||||
box-sizing: content-box;
|
||||
padding: 2px 3px;
|
||||
@ -1081,10 +1082,6 @@ table .menu-toggle {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.wiki-list-table td {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
/* react select-module */
|
||||
.select-module {
|
||||
font-size: 1rem;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user