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

frontend/src/components/file-uploader/file-uploader.js

@@ -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;
   }
 

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

@@ -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>

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

@@ -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>
+        <td className="ellipsis">
-          <span className="file-size">{this.formatFileSize(resumableFile.size)}</span>
+          <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>

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

@@ -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">
-          <table className="table-thead-hidden">
+          <div className="text-right mt-2">
-            <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>
-              </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 ml-3" onClick={this.onCancelAllUploading}>{gettext('Cancel All')}</span>
               :
-                    <span className="cursor-pointer disabled-link" >{gettext('Cancel All')}</span>
+              <span className="cursor-pointer ml-3 disabled-link" >{gettext('Cancel All')}</span>
             }
-                </td>
+          </div>
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <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>
               {
                 this.props.forbidUploadFileList.map((file, index) => {
                   return (<ForbidUploadListItem key={index} file={file} />);