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

improve upload interactive (#3941)

Browse Source 
* improve upload interactive

* improve code
This commit is contained in:
杨顺强
2019-08-02 20:53:39 +08:00
committed by Daniel Pan
parent d62a5584b7
commit 067b17b013
4 changed files with 59 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/cur-dir-path/dir-path.js
View File

@@ -24,7 +24,16 @@ class DirPath extends React.Component {
this.props.onPathClick(path); this.props.onPathClick(path);
} }
onTabNavClick = (tabName, id) => { onTabNavClick = (e, tabName, id) => {
if (window.uploader &&
window.uploader.isUploadProgressDialogShow &&
window.uploader.totalProgress !== 100) {
if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
e.preventDefault();
return false;
}
window.uploader.isUploadProgressDialogShow = false;
}
this.props.onTabNavClick(tabName, id); this.props.onTabNavClick(tabName, id);
} }
@@ -72,20 +81,20 @@ class DirPath extends React.Component {
{this.props.pathPrefix && this.props.pathPrefix.map((item, index) => { {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
return ( return (
<Fragment key={index}> <Fragment key={index}>
<Link to={item.url} className="normal" onClick={() => this.onTabNavClick(item.name, item.id)}>{gettext(item.showName)}</Link> <Link to={item.url} className="normal" onClick={(e) => this.onTabNavClick(e, item.name, item.id)}>{gettext(item.showName)}</Link>
<span className="path-split">/</span> <span className="path-split">/</span>
</Fragment> </Fragment>
); );
})} })}
{this.props.pathPrefix && this.props.pathPrefix.length === 0 && ( {this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
<Fragment> <Fragment>
<Link to={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick('my-libs')}>{gettext('Libraries')}</Link> <Link to={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
<span className="path-split">/</span> <span className="path-split">/</span>
</Fragment> </Fragment>
)} )}
{!this.props.pathPrefix && ( {!this.props.pathPrefix && (
<Fragment> <Fragment>
<Link href={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick('my-libs')}>{gettext('Libraries')}</Link> <Link href={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
<span className="path-split">/</span> <span className="path-split">/</span>
</Fragment> </Fragment>
)} )}

14
frontend/src/components/file-uploader/file-uploader.js
View File

@@ -53,6 +53,7 @@ class FileUploader extends React.Component {
this.timestamp = null; this.timestamp = null;
this.loaded = 0; this.loaded = 0;
this.bitrateInterval = 500; // Interval in milliseconds to calculate the bitrate this.bitrateInterval = 500; // Interval in milliseconds to calculate the bitrate
window.onbeforeunload = this.onbeforeunload;
} }
componentDidMount() { componentDidMount() {
@@ -86,11 +87,20 @@ class FileUploader extends React.Component {
} }
componentWillUnmount = () => { componentWillUnmount = () => {
window.onbeforeunload = null;
if (this.props.dragAndDrop === true) { if (this.props.dragAndDrop === true) {
this.resumable.disableDropOnDocument(); this.resumable.disableDropOnDocument();
} }
} }
onbeforeunload = () => {
if (window.uploader &&
window.uploader.isUploadProgressDialogShow &&
window.uploader.totalProgress !== 100) {
return '';
}
}
bindCallbackHandler = () => { bindCallbackHandler = () => {
let {maxFilesErrorCallback, minFileSizeErrorCallback, maxFileSizeErrorCallback, fileTypeErrorCallback } = this.props; let {maxFilesErrorCallback, minFileSizeErrorCallback, maxFileSizeErrorCallback, fileTypeErrorCallback } = this.props;
@@ -207,6 +217,7 @@ class FileUploader extends React.Component {
isUploadProgressDialogShow: true, isUploadProgressDialogShow: true,
uploadFileList: uploadFileList, uploadFileList: uploadFileList,
}); });
Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', true);
} }
buildCustomFileObj = (resumableFile) => { buildCustomFileObj = (resumableFile) => {
@@ -261,6 +272,7 @@ class FileUploader extends React.Component {
totalProgress: progress, totalProgress: progress,
uploadBitrate: uploadBitrate uploadBitrate: uploadBitrate
}); });
Utils.registerGlobalVariable('uploader', 'totalProgress', progress);
} }
onFileUploadSuccess = (resumableFile, message) => { onFileUploadSuccess = (resumableFile, message) => {
@@ -466,6 +478,7 @@ class FileUploader extends React.Component {
onCloseUploadDialog = () => { onCloseUploadDialog = () => {
this.resumable.files = []; this.resumable.files = [];
this.setState({isUploadProgressDialogShow: false, uploadFileList: []}); this.setState({isUploadProgressDialogShow: false, uploadFileList: []});
Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', false);
} }
onUploadCancel = (uploadingItem) => { onUploadCancel = (uploadingItem) => {
@@ -529,6 +542,7 @@ class FileUploader extends React.Component {
}, () => { }, () => {
this.resumable.upload(); this.resumable.upload();
}); });
Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', true);
} }
cancelFileUpload = () => { cancelFileUpload = () => {

41
frontend/src/components/main-side-nav.js
View File

@@ -62,7 +62,16 @@ class MainSideNav extends React.Component {
}); });
} }
tabItemClick = (param, id) => { tabItemClick = (e, param, id) => {
if (window.uploader &&
window.uploader.isUploadProgressDialogShow &&
window.uploader.totalProgress !== 100) {
if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
e.preventDefault();
return false;
}
window.uploader.isUploadProgressDialogShow = false;
}
this.props.tabItemClick(param, id); this.props.tabItemClick(param, id);
} }
@@ -78,7 +87,7 @@ class MainSideNav extends React.Component {
return ( return (
<ul className={`nav sub-nav nav-pills flex-column grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}> <ul className={`nav sub-nav nav-pills flex-column grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
<li className="nav-item"> <li className="nav-item">
<Link to={siteRoot + 'groups/'} className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={() => this.tabItemClick('groups')}> <Link to={siteRoot + 'groups/'} className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={(e) => this.tabItemClick(e, 'groups')}>
<span className="sharp" aria-hidden="true">#</span> <span className="sharp" aria-hidden="true">#</span>
<span className="nav-text">{gettext('All Groups')}</span> <span className="nav-text">{gettext('All Groups')}</span>
</Link> </Link>
@@ -86,7 +95,7 @@ class MainSideNav extends React.Component {
{this.state.groupItems.map(item => { {this.state.groupItems.map(item => {
return ( return (
<li key={item.id} className="nav-item"> <li key={item.id} className="nav-item">
<Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={() => this.tabItemClick(item.name, item.id)}> <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={(e) => this.tabItemClick(e, item.name, item.id)}>
<span className="sharp" aria-hidden="true">#</span> <span className="sharp" aria-hidden="true">#</span>
<span className="nav-text">{item.name}</span> <span className="nav-text">{item.name}</span>
</Link> </Link>
@@ -111,7 +120,7 @@ class MainSideNav extends React.Component {
if (canGenerateShareLink) { if (canGenerateShareLink) {
linksNavItem = ( linksNavItem = (
<li className="nav-item"> <li className="nav-item">
<Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}> <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-share-links')}>
<span aria-hidden="true" className="sharp">#</span> <span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Links')}</span> <span className="nav-text">{gettext('Links')}</span>
</Link> </Link>
@@ -120,7 +129,7 @@ class MainSideNav extends React.Component {
} else if (canGenerateUploadLink) { } else if (canGenerateUploadLink) {
linksNavItem = ( linksNavItem = (
<li className="nav-item"> <li className="nav-item">
<Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-upload-links')}> <Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-upload-links')}>
<span aria-hidden="true" className="sharp">#</span> <span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Links')}</span> <span className="nav-text">{gettext('Links')}</span>
</Link> </Link>
@@ -131,14 +140,14 @@ class MainSideNav extends React.Component {
<ul className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} > <ul className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
{canAddRepo && ( {canAddRepo && (
<li className="nav-item"> <li className="nav-item">
<Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}> <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
<span aria-hidden="true" className="sharp">#</span> <span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Libraries')}</span> <span className="nav-text">{gettext('Libraries')}</span>
</Link> </Link>
</li> </li>
)} )}
<li className="nav-item"> <li className="nav-item">
<Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}> <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
<span aria-hidden="true" className="sharp">#</span> <span aria-hidden="true" className="sharp">#</span>
<span className="nav-text">{gettext('Folders')}</span> <span className="nav-text">{gettext('Folders')}</span>
</Link> </Link>
@@ -157,20 +166,20 @@ class MainSideNav extends React.Component {
<ul className="nav nav-pills flex-column nav-container"> <ul className="nav nav-pills flex-column nav-container">
{canAddRepo && ( {canAddRepo && (
<li className="nav-item"> <li className="nav-item">
<Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}> <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
<span className="sf2-icon-user" aria-hidden="true"></span> <span className="sf2-icon-user" aria-hidden="true"></span>
<span className="nav-text">{gettext('My Libraries')}</span> <span className="nav-text">{gettext('My Libraries')}</span>
</Link> </Link>
</li> </li>
)} )}
<li className="nav-item"> <li className="nav-item">
<Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}> <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
<span className="sf2-icon-share" aria-hidden="true"></span> <span className="sf2-icon-share" aria-hidden="true"></span>
<span className="nav-text">{gettext('Shared with me')}</span> <span className="nav-text">{gettext('Shared with me')}</span>
</Link> </Link>
</li> </li>
{ canViewOrg && { canViewOrg &&
<li className="nav-item" onClick={() => this.tabItemClick('org')}> <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
<Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}> <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
<span className="sf2-icon-organization" aria-hidden="true"></span> <span className="sf2-icon-organization" aria-hidden="true"></span>
<span className="nav-text">{gettext('Shared with all')}</span> <span className="nav-text">{gettext('Shared with all')}</span>
@@ -190,14 +199,14 @@ class MainSideNav extends React.Component {
<h3 className="sf-heading">{gettext('Tools')}</h3> <h3 className="sf-heading">{gettext('Tools')}</h3>
<ul className="nav nav-pills flex-column nav-container"> <ul className="nav nav-pills flex-column nav-container">
<li className="nav-item"> <li className="nav-item">
<Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}> <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
<span className="sf2-icon-star" aria-hidden="true"></span> <span className="sf2-icon-star" aria-hidden="true"></span>
<span className="nav-text">{gettext('Favorites')}</span> <span className="nav-text">{gettext('Favorites')}</span>
</Link> </Link>
</li> </li>
{showActivity && {showActivity &&
<li className="nav-item"> <li className="nav-item">
<Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={() => this.tabItemClick('dashboard')}> <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
<span className="sf2-icon-clock" aria-hidden="true"></span> <span className="sf2-icon-clock" aria-hidden="true"></span>
<span className="nav-text">{gettext('Activities')}</span> <span className="nav-text">{gettext('Activities')}</span>
</Link> </Link>
@@ -205,14 +214,14 @@ class MainSideNav extends React.Component {
} }
{enableWiki && {enableWiki &&
<li className="nav-item"> <li className="nav-item">
<Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Published Libraries')} onClick={() => this.tabItemClick('published')}> <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Published Libraries')} onClick={(e) => this.tabItemClick(e, 'published')}>
<span className="sf2-icon-wiki-view" aria-hidden="true"></span> <span className="sf2-icon-wiki-view" aria-hidden="true"></span>
<span className="nav-text">{gettext('Published Libraries')}</span> <span className="nav-text">{gettext('Published Libraries')}</span>
</Link> </Link>
</li> </li>
} }
{isDocs && {isDocs &&
<li className="nav-item" onClick={() => this.tabItemClick('drafts')}> <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'drafts')}>
<Link className={`nav-link ellipsis ${this.getActiveClass('drafts')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}> <Link className={`nav-link ellipsis ${this.getActiveClass('drafts')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
<span className="sf2-icon-edit" aria-hidden="true"></span> <span className="sf2-icon-edit" aria-hidden="true"></span>
<span className="draft-info nav-text"> <span className="draft-info nav-text">
@@ -223,14 +232,14 @@ class MainSideNav extends React.Component {
</li> </li>
} }
<li className="nav-item"> <li className="nav-item">
<Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}> <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={(e) => this.tabItemClick(e, 'linked-devices')}>
<span className="sf2-icon-monitor" aria-hidden="true"></span> <span className="sf2-icon-monitor" aria-hidden="true"></span>
<span className="nav-text">{gettext('Linked Devices')}</span> <span className="nav-text">{gettext('Linked Devices')}</span>
</Link> </Link>
</li> </li>
{canInvitePeople && {canInvitePeople &&
<li className="nav-item"> <li className="nav-item">
<Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite People')} onClick={() => this.tabItemClick('invitations')}> <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite People')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
<span className="sf2-icon-invite" aria-hidden="true"></span> <span className="sf2-icon-invite" aria-hidden="true"></span>
<span className="nav-text">{gettext('Invite People')}</span> <span className="nav-text">{gettext('Invite People')}</span>
</Link> </Link>

7
frontend/src/utils/utils.js
View File

@@ -983,6 +983,13 @@ export const Utils = {
} }
return false; return false;
},
registerGlobalVariable(namespace, key, value) {
if (!window[namespace]) {
window[namespace] = {};
}
window[namespace][key] = value;
} }
}; };