From f15c77b869ba62baf6f7619ecbc41567ea33b1ce Mon Sep 17 00:00:00 2001 From: eamahanna Date: Wed, 21 Oct 2020 15:55:51 -0800 Subject: [PATCH 1/5] Add functionality --- .../narrative_core/upload/fileUploadWidget.js | 38 +++++++++++-------- .../templates/data_staging/dropped_file.html | 31 +++++++++------ 2 files changed, 42 insertions(+), 27 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js index 6e7d591961..c567a01b55 100644 --- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js +++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js @@ -85,6 +85,13 @@ define([ $dropzoneElem.find('#global-info').css({'display': 'inline'}); $dropzoneElem.find('#upload-message').text(this.makeUploadMessage()); + // If there is a button already in the area, it has to be removed, + // and appened to the new document when additional errored files are added. + if ($dropzoneElem.find('#clear-all-btn').length){ + this.deleteClearAllButton(); + $dropzoneElem.append(this.makeClearAllButton()); + } + }) .on('success', (file, serverResponse) => { $dropzoneElem.find('#upload-message').text(this.makeUploadMessage()); @@ -93,12 +100,8 @@ define([ file.previewElement.querySelector('#status-message').style.display = 'inline'; $(file.previewElement.querySelector('.fa-ban')).removeClass('fa-ban').addClass('fa-check'); $(file.previewElement.querySelector('.btn-danger')).removeClass('btn-danger').addClass('btn-success'); - if (this.dropzone.getQueuedFiles().length === 0 && - this.dropzone.getUploadingFiles().length === 0) { - $($dropzoneElem.find('#total-progress')).fadeOut(1000, function() { - $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'}); - }); - } + + this.removeProgressBar($dropzoneElem); $(file.previewElement).fadeOut(1000, function() { $(file.previewElement.querySelector('.btn')).trigger('click'); }); @@ -124,22 +127,18 @@ define([ $dropzoneElem.find('#global-info').css({'display': 'none'}); $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'}); }) - .on('error', (err) => { + .on('error', (erroredFile) => { + this.removeProgressBar($dropzoneElem); let errorText = 'unable to upload file!'; - if (err && err.xhr && err.xhr.responseText) { - errorText = err.xhr.responseText; + if (erroredFile && erroredFile.xhr && erroredFile.xhr.responseText) { + errorText = erroredFile.xhr.responseText; } $dropzoneElem.find('.error.text-danger').text('Error: ' + errorText); + $dropzoneElem.find('#upload_progress_and_cancel').remove(); // Check to see if there already a button in the dropzone area if (!$dropzoneElem.find('#clear-all-btn').length){ $dropzoneElem.append(this.makeClearAllButton()); - - } else { - // If there is a button already in the area, it has to be removed, - // and appened to the new document when additional errored files are added. - this.deleteClearAllButton(); - $dropzoneElem.append(this.makeClearAllButton()); } }); }, @@ -168,6 +167,15 @@ define([ $('#clear-all-btn').remove(); }, + removeProgressBar: function($dropzoneElem) { + if (this.dropzone.getQueuedFiles().length === 0 && + this.dropzone.getUploadingFiles().length === 0) { + $($dropzoneElem.find('#total-progress')).fadeOut(1000, function() { + $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'}); + }); + } + }, + makeUploadMessage: function() { if (!this.dropzone) { return 'No files uploading.'; diff --git a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html index 57bb6fb302..da1add58f3 100644 --- a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html +++ b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html @@ -1,22 +1,29 @@
- - +
+
-
- -
-
+ +
+
+ +
+
+
-
-
-
- +
+
+ +
+
+ Error + +
\ No newline at end of file From 7d77fc18cc69ffcbb6452740c90f29210c3e1086 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Thu, 22 Oct 2020 15:35:06 -0800 Subject: [PATCH 2/5] styling changes --- .../static/kbase/css/kbaseNarrative.css | 54 +++++++++++++++++-- .../narrative_core/upload/fileUploadWidget.js | 19 ++++--- .../templates/data_staging/dropped_file.html | 22 ++++---- src/config.json | 4 +- 4 files changed, 75 insertions(+), 24 deletions(-) diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css index 939e3674dd..477a91f36e 100644 --- a/kbase-extension/static/kbase/css/kbaseNarrative.css +++ b/kbase-extension/static/kbase/css/kbaseNarrative.css @@ -17,7 +17,7 @@ margin: 2em 4.5em; } -.text-button { +.btn__text { background: #FFFFFF; box-sizing: border-box; border-radius: 4px; @@ -35,26 +35,26 @@ height: 34px; } -.text-button:hover { +.btn__text:hover { color: #36618E; border: 1px solid #ECF2F7; background-color: #ECF2F7; cursor: pointer; } -.text-button:focus { +.btn__text:focus { color: #36618E; border: 1px solid #E3EBF3; background-color: #E3EBF3; } -.text-button:active { +.btn__text:active { color: #36618E; border: 1px solid #D9E4EF; background-color: #D9E4EF; } -.text-button:disabled { +.btn__text:disabled { color: #929292; border: 1px solid #FAFAFA; background-color: #FAFAFA; @@ -64,6 +64,50 @@ margin: 6px; } +.dz-file { + width:100%; + border: 1px solid #EEEEEE; + margin: 2px 0px; + padding: 5px 0px; + font-family: Oxygen, Arial, sans-serif; + font-style: normal; + font-size: 16px; +} + + +.dz-file__name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 20px; +} + +.dz-file__msg { + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; +} + +.dz-file__msg__success { + display:none; + color: #4BAF4F; +} + +.dz-file__progress__bar { + margin-bottom: inherit; + margin-left: 5px; +} + +.dz-file__icon { + margin: 5px; + display: none; + font-weight: bold; +} + +.dz-file__icon__success { + color: #4BAF4F; +} + #kb-data-staging-table_wrapper { margin-top: 44px; } diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js index c567a01b55..ce2b8af027 100644 --- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js +++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js @@ -95,11 +95,10 @@ define([ }) .on('success', (file, serverResponse) => { $dropzoneElem.find('#upload-message').text(this.makeUploadMessage()); - file.previewElement.querySelector('#status-message').textContent = 'Completed'; - file.previewElement.querySelector('.progress').style.display = 'none'; - file.previewElement.querySelector('#status-message').style.display = 'inline'; - $(file.previewElement.querySelector('.fa-ban')).removeClass('fa-ban').addClass('fa-check'); - $(file.previewElement.querySelector('.btn-danger')).removeClass('btn-danger').addClass('btn-success'); + var $successElem = $(file.previewElement); + $successElem.find('#upload_progress_and_cancel').remove(); + $successElem.find('#success_icon').css('display', 'inline'); + $successElem.find('#success_message').css('display', 'inline'); this.removeProgressBar($dropzoneElem); $(file.previewElement).fadeOut(1000, function() { @@ -128,13 +127,17 @@ define([ $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'}); }) .on('error', (erroredFile) => { + var $errorElem = $(erroredFile.previewElement); + $errorElem.css('color', '#DF0002'); + $errorElem.find('#upload_progress_and_cancel').remove(); + $errorElem.find('#error_icon').css('display', 'inline'); + this.removeProgressBar($dropzoneElem); let errorText = 'unable to upload file!'; if (erroredFile && erroredFile.xhr && erroredFile.xhr.responseText) { errorText = erroredFile.xhr.responseText; } - $dropzoneElem.find('.error.text-danger').text('Error: ' + errorText); - $dropzoneElem.find('#upload_progress_and_cancel').remove(); + $dropzoneElem.find('#error_message').text('Error: ' + errorText); // Check to see if there already a button in the dropzone area if (!$dropzoneElem.find('#clear-all-btn').length){ @@ -146,7 +149,7 @@ define([ makeClearAllButton: function() { var $clearAllBtn = $(' +
-
-
- +
+
+ Error + +
+
+ Completed +
-
- Error - -
-
- Completed - +
+
+
+
Successfully moved to stagin area!
+
\ No newline at end of file diff --git a/src/config.json b/src/config.json index 57119633c1..4edff1a286 100644 --- a/src/config.json +++ b/src/config.json @@ -379,7 +379,7 @@ "upload": { "timeout": 0, "parallel_uploads": 10, - "max_file_size": 1, + "max_file_size": 20480, "globus_upload_url": "https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a" }, "use_local_widgets": true, From e1baef8b22698dc9833888a5e5858d3302de5320 Mon Sep 17 00:00:00 2001 From: eamahanna Date: Thu, 22 Oct 2020 20:04:38 -0800 Subject: [PATCH 4/5] fix typo --- .../js/widgets/narrative_core/upload/fileUploadWidget.js | 4 ++-- src/config.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js index 54a08c5fb5..cad747780e 100644 --- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js +++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js @@ -96,7 +96,7 @@ define([ .on('success', (file, serverResponse) => { var $successElem = $(file.previewElement); $successElem.find('#upload_progress_and_cancel').remove(); - $successElem.find('#dz_file_row_1'.css({"display": "flex", "align-items": "center"})); + $successElem.find('#dz_file_row_1').css({"display": "flex", "align-items": "center"}); $successElem.find('#success_icon').css('display', 'flex'); $successElem.find('#success_message').css('display', 'inline'); $dropzoneElem.find('#upload-message').text(this.makeUploadMessage()); @@ -130,7 +130,7 @@ define([ .on('error', (erroredFile) => { var $errorElem = $(erroredFile.previewElement); $errorElem.find('#upload_progress_and_cancel').remove(); - $errorElem.find('#dz_file_row_1'.css({"display": "flex", "align-items": "center"})); + $errorElem.find('#dz_file_row_1').css({"display": "flex", "align-items": "center"}); $errorElem.css('color', '#DF0002'); $errorElem.find('#error_icon').css('display', 'flex'); diff --git a/src/config.json b/src/config.json index 4edff1a286..57119633c1 100644 --- a/src/config.json +++ b/src/config.json @@ -379,7 +379,7 @@ "upload": { "timeout": 0, "parallel_uploads": 10, - "max_file_size": 20480, + "max_file_size": 1, "globus_upload_url": "https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a" }, "use_local_widgets": true, From a703fefa9deda5fcff95d1f519d04188a741791f Mon Sep 17 00:00:00 2001 From: eamahanna Date: Fri, 23 Oct 2020 05:57:11 -0800 Subject: [PATCH 5/5] Fix success clear --- .../js/widgets/narrative_core/upload/fileUploadWidget.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js index cad747780e..f7a7edf7e8 100644 --- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js +++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js @@ -95,7 +95,7 @@ define([ }) .on('success', (file, serverResponse) => { var $successElem = $(file.previewElement); - $successElem.find('#upload_progress_and_cancel').remove(); + $successElem.find('#upload_progress_and_cancel').hide(); $successElem.find('#dz_file_row_1').css({"display": "flex", "align-items": "center"}); $successElem.find('#success_icon').css('display', 'flex'); $successElem.find('#success_message').css('display', 'inline'); @@ -129,7 +129,7 @@ define([ }) .on('error', (erroredFile) => { var $errorElem = $(erroredFile.previewElement); - $errorElem.find('#upload_progress_and_cancel').remove(); + $errorElem.find('#upload_progress_and_cancel').hide(); $errorElem.find('#dz_file_row_1').css({"display": "flex", "align-items": "center"}); $errorElem.css('color', '#DF0002'); $errorElem.find('#error_icon').css('display', 'flex');