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

[dir view] modified 'file upload dialog' for mobile

Browse Source
This commit is contained in:
llj
2022-01-20 13:36:23 +08:00
parent c1720962eb
commit e264fc040e
4 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,7 +30,7 @@ const propTypes = {
};
class FileUploader extends React.Component {
static defaultProps = {
isCustomPermission: false
}
@@ -404,7 +404,7 @@ class FileUploader extends React.Component {
'File size is too large.': gettext('File size is too large.'), // 442
'Out of quota.': gettext('Out of quota.'), // 443
'Internal error.': gettext('Internal Server Error'), // 500
}
};
return errorMessage[key] || key;
}

2
frontend/src/components/file-uploader/forbid-upload-list-item.js
View File

@@ -14,7 +14,7 @@ class ForbidUploadListItem extends React.Component {
return (
<tr className="file-upload-item">
<td className="upload-name">
<div className="ellipsis">{file.name}</div>
<div className="ellipsis" title={file.name}>{file.name}</div>
</td>
<td colSpan={3} className="error">{msg}</td>

13
frontend/src/components/file-uploader/upload-list-item.js
View File

@@ -73,15 +73,18 @@ class UploadListItem extends React.Component {
let progress = Math.round(resumableFile.progress() * 100);
let error = resumableFile.error;
const fileName = resumableFile.newFileName;
const size = this.formatFileSize(resumableFile.size);
return (
<tr className="file-upload-item">
<td className="upload-name">
<div className="ellipsis">{resumableFile.newFileName}</div>
<div className="ellipsis" title={fileName}>{fileName}</div>
</td>
<td>
<span className="file-size">{this.formatFileSize(resumableFile.size)}</span>
<td className="ellipsis">
<span className="file-size" title={size}>{size}</span>
</td>
<td className="upload-progress">
<td className="upload-progress ellipsis">
{(this.state.uploadState === UPLOAD_UPLOADING || this.state.uploadState === UPLOAD_ISSAVING) &&
<Fragment>
{resumableFile.size >= (100 * 1000 * 1000) &&
@@ -118,7 +121,7 @@ class UploadListItem extends React.Component {
<div className="message err-message ml-0" dangerouslySetInnerHTML={{__html: error}}></div>
)}
</td>
<td className="upload-operation">
<td className="upload-operation ellipsis">
<Fragment>
{this.state.uploadState === UPLOAD_UPLOADING && (
<a href="#" onClick={this.onUploadCancel}>{gettext('Cancel')}</a>

40
frontend/src/components/file-uploader/upload-progress-dialog.js
View File

@@ -46,7 +46,7 @@ class UploadProgressDialog extends React.Component {
let uploadBitrate = Utils.formatBitRate(this.props.uploadBitrate);
let uploadedMessage = gettext('File Upload');
let uploadingMessage = gettext('File Uploading...') + ' ' + this.props.totalProgress + '%' + ' (' + uploadBitrate + ')';
let uploadingMessage = gettext('File Uploading...') + ' ' + this.props.totalProgress + '% (' + uploadBitrate + ')';
let uploadingOptions = (<span className="sf2-icon-minus" onClick={this.onMinimizeUpload}></span>);
@@ -60,7 +60,7 @@ class UploadProgressDialog extends React.Component {
let { totalProgress, allFilesUploaded, retryFileList } = this.props;
return (
<div className="uploader-list-view" style={{height: this.state.isMinimized ? '2.25rem' : '20rem'}}>
<div className="uploader-list-view mw-100" style={{height: this.state.isMinimized ? '2.25rem' : '20rem'}}>
<div className="uploader-list-header">
<div className="title">
{totalProgress === 100 ? uploadedMessage : uploadingMessage}
@@ -70,32 +70,28 @@ class UploadProgressDialog extends React.Component {
</div>
</div>
<div className="uploader-list-content">
<div className="text-right mt-2">
{retryFileList.length > 0 ?
<span className="cursor-pointer" onClick={this.props.onUploadRetryAll}>{gettext('Retry All')}</span>
:
<span className="cursor-pointer disabled-link">{gettext('Retry All')}</span>
}
{!allFilesUploaded ?
<span className="cursor-pointer ml-3" onClick={this.onCancelAllUploading}>{gettext('Cancel All')}</span>
:
<span className="cursor-pointer ml-3 disabled-link" >{gettext('Cancel All')}</span>
}
</div>
<table className="table-thead-hidden">
<thead>
<tr>
<th width="35%">{gettext('name')}</th>
<th width="15%">{gettext('size')}</th>
<th width="35%">{gettext('progress')}</th>
<th width="15%">{gettext('state')}</th>
<th width="30%">{gettext('name')}</th>
<th width="20%">{gettext('size')}</th>
<th width="30%">{gettext('progress')}</th>
<th width="20%">{gettext('state')}</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-right" colSpan={3}>
{retryFileList.length > 0 ?
<span className="cursor-pointer" onClick={this.props.onUploadRetryAll}>{gettext('Retry All')}</span>
:
<span className="cursor-pointer disabled-link">{gettext('Retry All')}</span>
}
</td>
<td className="text-right" colSpan={1}>
{!allFilesUploaded ?
<span className="cursor-pointer" onClick={this.onCancelAllUploading}>{gettext('Cancel All')}</span>
:
<span className="cursor-pointer disabled-link" >{gettext('Cancel All')}</span>
}
</td>
</tr>
{
this.props.forbidUploadFileList.map((file, index) => {
return (<ForbidUploadListItem key={index} file={file} />);