haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 07:27:04 +00:00
Code Issues Releases Wiki Activity

improved dialogs (#4505)

Browse Source 
* improved dialogs

* redesigned 'share' dialog and 'folder permission' dialog for mobile
* improved 'API token' dialog

* [dialogs] modification for mobile

* [dialogs] improvement & bugfix
This commit is contained in:
llj
2020-04-04 14:32:11 +08:00
committed by GitHub
parent ab1babef38
commit 2796c7a648
11 changed files with 88 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
View File

@@ -37,7 +37,7 @@ class LibSubFolderPermissionDialog extends React.Component {
return (
<Fragment>
<div className="share-dialog-side">
<Nav pills vertical>
<Nav pills>
<NavItem>
<NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}>
{gettext('User Permission')}

27
frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
View File

@@ -264,19 +264,22 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
);
}
return (
<Fragment>
<table>
const thead = (
<thead>
<tr>
<th width={showPath ? '32%' : '55%'}>{gettext('Group')}</th>
{showPath &&
<th width="32%">{gettext('Folder')}</th>
}
<th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
<th width={showPath ? '10%' : '15%'}></th>
<th width={showPath ? '24%' : '30%'}>{gettext('Permission')}</th>
<th width={showPath ? '12%' : '15%'}></th>
</tr>
</thead>
);
return (
<Fragment>
<table className="w-xs-250">
{thead}
<tbody>
<tr>
<td>
@@ -284,7 +287,6 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
onChange={this.handleSelectChange}
options={this.options}
placeholder={gettext('Select a group')}
components={makeAnimated()}
maxMenuHeight={200}
inputId={'react-select-2-input'}
value={this.state.selectedOption}
@@ -325,17 +327,8 @@ class LibSubFolderSerGroupPermissionDialog extends React.Component {
</tbody>
</table>
<div className="share-list-container">
<table className="table-thead-hidden">
<thead>
<tr>
<th width={showPath ? '32%': '55%'}>{gettext('Group')}</th>
{showPath &&
<th width="32%">{gettext('Folder')}</th>
}
<th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
<th width={showPath ? '10%' : '15%'}></th>
</tr>
</thead>
<table className="table-thead-hidden w-xs-250">
{thead}
<tbody>
{this.state.groupPermissionItems.map((item, index) => {
return (

26
frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
View File

@@ -239,19 +239,22 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
);
}
return (
<Fragment>
<table>
const thead = (
<thead>
<tr>
<th width={showPath ? '32%': '55%'}>{gettext('User')}</th>
{showPath &&
<th width="32%">{gettext('Folder')}</th>
}
<th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
<th width={showPath ? '10%' : '15%'}></th>
<th width={showPath ? '24%': '30%'}>{gettext('Permission')}</th>
<th width={showPath ? '12%' : '15%'}></th>
</tr>
</thead>
);
return (
<Fragment>
<table className="w-xs-250">
{thead}
<tbody>
<tr>
<td>
@@ -303,17 +306,8 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
</tbody>
</table>
<div className="share-list-container">
<table className="table-thead-hidden">
<thead>
<tr>
<th width={showPath ? '32%': '55%'}>{gettext('User')}</th>
{showPath &&
<th width="32%">{gettext('Folder')}</th>
}
<th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
<th width={showPath ? '10%' : '15%'}></th>
</tr>
</thead>
<table className="table-thead-hidden w-xs-250">
{thead}
<tbody>
{userFolderPermItems.map((item, index) => {
return (

31
frontend/src/components/dialog/repo-api-token-dialog.js
View File

@@ -9,9 +9,6 @@ import toaster from '../toast';
import copy from 'copy-to-clipboard';
import Loading from '../loading';
import '../../css/share-link-dialog.css';
const apiTokenItemPropTypes = {
item: PropTypes.object.isRequired,
deleteAPIToken: PropTypes.func.isRequired,
@@ -217,23 +214,21 @@ class RepoAPITokenDialog extends React.Component {
const thead = (
<thead>
<tr>
<th width="22%">{gettext('App Name')}</th>
<th width="20%">{gettext('App Name')}</th>
<th width="20%">{gettext('Permission')}</th>
<th width="48%">API Token</th>
<th width="10%"></th>
<th width="12%"></th>
</tr>
</thead>
);
return (
<Fragment>
{this.state.errorMsg &&
<div className='w-100'>
<p className="error text-center">{this.state.errorMsg}</p>
</div>
}
{!this.state.errorMsg &&
<div className='mx-5 mb-5' style={{height: 'auto'}}>
<table>
<Fragment>
<table className="w-xs-250">
{thead}
<tbody>
<tr>
@@ -261,22 +256,18 @@ class RepoAPITokenDialog extends React.Component {
</tr>
</tbody>
</table>
<div style={{minHeight: '10rem', maxHeight: '18rem'}}>
{this.state.apiTokenList.length !== 0 &&
<div className='o-auto' style={{height: 'calc(100% - 91px)'}}>
<div className="h-100" style={{maxHeight: '18rem'}}>
<table className="table-thead-hidden">
<table className="table-thead-hidden w-xs-250">
{thead}
<tbody>
{renderAPITokenList}
</tbody>
</table>
</div>
</div>
}
{this.state.loading &&
<Loading/>
}
</div>
{this.state.loading && <Loading/>}
</Fragment>
}
</Fragment>
);
@@ -289,14 +280,16 @@ class RepoAPITokenDialog extends React.Component {
const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName);
return (
<Modal
isOpen={true} className="share-dialog" style={{maxWidth: '800px'}}
isOpen={true} style={{maxWidth: '800px'}}
toggle={this.props.onRepoAPITokenToggle}
>
<ModalHeader toggle={this.props.onRepoAPITokenToggle}>
<p dangerouslySetInnerHTML={{__html: title}} className="m-0"></p>
</ModalHeader>
<ModalBody className="share-dialog-content">
<ModalBody>
<div className="o-auto">
{this.renderContent()}
</div>
</ModalBody>
</Modal>
);

4
frontend/src/components/dialog/share-dialog.js
View File

@@ -84,7 +84,7 @@ class ShareDialog extends React.Component {
return (
<Fragment>
<div className="share-dialog-side">
<Nav pills vertical>
<Nav pills>
{enableShareLink &&
<NavItem>
<NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLink')}>
@@ -189,7 +189,7 @@ class ShareDialog extends React.Component {
return (
<Fragment>
<div className="share-dialog-side">
<Nav pills vertical>
<Nav pills>
<NavItem>
<NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={(this.toggle.bind(this, 'shareLink'))}>
{gettext('Share Link')}

4
frontend/src/components/dialog/share-to-group.js
View File

@@ -289,7 +289,7 @@ class ShareToGroup extends React.Component {
render() {
return (
<Fragment>
<table>
<table className="w-xs-200">
<thead>
<tr>
<th width="50%">{gettext('Group')}</th>
@@ -337,7 +337,7 @@ class ShareToGroup extends React.Component {
</tbody>
</table>
<div className="share-list-container">
<table className="table-thead-hidden">
<table className="table-thead-hidden w-xs-200">
<thead>
<tr>
<th width="50%">{gettext('Group')}</th>

4
frontend/src/components/dialog/share-to-invite-people.js
View File

@@ -248,7 +248,7 @@ class ShareToInvitePeople extends React.Component {
let { sharedItems, isSubmitting } = this.state;
return (
<Fragment>
<table className="table-thead-hidden">
<table className="table-thead-hidden w-xs-200">
<thead>
<tr>
<th width="50%">{gettext('Invite Guest')}</th>
@@ -290,7 +290,7 @@ class ShareToInvitePeople extends React.Component {
</tbody>
</table>
<div className="share-list-container">
<table>
<table className="w-xs-200">
<thead>
<tr>
<th width="25%">{gettext('Email')}</th>

4
frontend/src/components/dialog/share-to-user.js
View File

@@ -274,7 +274,7 @@ class ShareToUser extends React.Component {
let { sharedItems } = this.state;
return (
<Fragment>
<table>
<table className="w-xs-200">
<thead>
<tr>
<th width="50%">{gettext('User')}</th>
@@ -324,7 +324,7 @@ class ShareToUser extends React.Component {
</tbody>
</table>
<div className="share-list-container">
<table className="table-thead-hidden">
<table className="table-thead-hidden w-xs-200">
<thead>
<tr>
<th width="50%">{gettext('User')}</th>

2
frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
View File

@@ -42,7 +42,7 @@ class SysAdminShareDialog extends React.Component {
return (
<Fragment>
<div className="share-dialog-side">
<Nav pills vertical>
<Nav pills>
{enableDirPrivateShare &&
<Fragment>
<NavItem>

18
frontend/src/css/share-link-dialog.css
View File

@@ -2,15 +2,30 @@
padding: 0;
min-height: 27rem;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.share-dialog .share-dialog-content {
flex-direction: row;
}
}
.share-dialog-content .share-dialog-side {
display: flex;
flex: 0 0 22%;
padding: 1rem;
border-bottom: 1px solid #eee;
}
@media (min-width: 768px) {
.share-dialog-content .share-dialog-side {
padding: 1rem 0 0 1rem;
border: 0;
border-right: 1px solid #eee;
}
.share-dialog-side .nav {
flex-direction: column;
}
}
.share-dialog-side .nav-pills .nav-item .nav-link {
width: 100%;
@@ -28,11 +43,12 @@
.share-dialog-content .share-dialog-main .tab-pane {
height: 100%;
overflow: auto;
}
.share-list-container {
max-height: 18rem;
height: 100%;
min-height: 10rem;
}
.share-dialog-content label {

9
media/css/seahub_react.css
View File

@@ -227,6 +227,15 @@ a:hover { color:#eb8205; }
padding: 0 0.5rem;
min-width: 55px;
}
/* for 'extra small' */
@media (max-width: 575px) {
.w-xs-200 {
width: 200%;
}
.w-xs-250 {
width: 250%;
}
}
/* UI Widget */