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 ( return (
<Fragment> <Fragment>
<div className="share-dialog-side"> <div className="share-dialog-side">
<Nav pills vertical> <Nav pills>
<NavItem> <NavItem>
<NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}> <NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}>
{gettext('User Permission')} {gettext('User Permission')}

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

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

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

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

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

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

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

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

@@ -289,7 +289,7 @@ class ShareToGroup extends React.Component {
render() { render() {
return ( return (
<Fragment> <Fragment>
<table> <table className="w-xs-200">
<thead> <thead>
<tr> <tr>
<th width="50%">{gettext('Group')}</th> <th width="50%">{gettext('Group')}</th>
@@ -337,7 +337,7 @@ class ShareToGroup extends React.Component {
</tbody> </tbody>
</table> </table>
<div className="share-list-container"> <div className="share-list-container">
<table className="table-thead-hidden"> <table className="table-thead-hidden w-xs-200">
<thead> <thead>
<tr> <tr>
<th width="50%">{gettext('Group')}</th> <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; let { sharedItems, isSubmitting } = this.state;
return ( return (
<Fragment> <Fragment>
<table className="table-thead-hidden"> <table className="table-thead-hidden w-xs-200">
<thead> <thead>
<tr> <tr>
<th width="50%">{gettext('Invite Guest')}</th> <th width="50%">{gettext('Invite Guest')}</th>
@@ -290,7 +290,7 @@ class ShareToInvitePeople extends React.Component {
</tbody> </tbody>
</table> </table>
<div className="share-list-container"> <div className="share-list-container">
<table> <table className="w-xs-200">
<thead> <thead>
<tr> <tr>
<th width="25%">{gettext('Email')}</th> <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; let { sharedItems } = this.state;
return ( return (
<Fragment> <Fragment>
<table> <table className="w-xs-200">
<thead> <thead>
<tr> <tr>
<th width="50%">{gettext('User')}</th> <th width="50%">{gettext('User')}</th>
@@ -324,7 +324,7 @@ class ShareToUser extends React.Component {
</tbody> </tbody>
</table> </table>
<div className="share-list-container"> <div className="share-list-container">
<table className="table-thead-hidden"> <table className="table-thead-hidden w-xs-200">
<thead> <thead>
<tr> <tr>
<th width="50%">{gettext('User')}</th> <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 ( return (
<Fragment> <Fragment>
<div className="share-dialog-side"> <div className="share-dialog-side">
<Nav pills vertical> <Nav pills>
{enableDirPrivateShare && {enableDirPrivateShare &&
<Fragment> <Fragment>
<NavItem> <NavItem>

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

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

9
media/css/seahub_react.css
View File

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