From 7aa6c1ecc4b648397452eafb0493220dfffa4d6b Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Jul 2016 12:18:31 +0530 Subject: [PATCH 1/6] AS#152122905738640, File upload: inconsistent validation with preview image upload -- Fixed with catch that it still allows any file named with zip extension. --- .../tc-fp-file-input/tc-fp-file-input.directive.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js index 08fd3ce7a..c589e7ac1 100644 --- a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js +++ b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js @@ -32,11 +32,11 @@ import _ from 'lodash' scope.filePath += _.join([userId, scope.fieldId, (new Date()).valueOf()], '-') + '.zip' } var dragAreaClasses = 'tc-fp-file-drag-drop' - // set extensions + // set mimeTypes if (scope.fieldId.indexOf('ZIP') > -1) { - scope.extensions = '.zip' + scope.mimeTypes = 'application/zip' } else if (scope.fieldId.indexOf('DESIGN_COVER') > -1) { - scope.extensions = '.png,.jpeg,.jpg,.bmp' + scope.mimeTypes = 'image/png,image/jpeg,image/bmp' dragAreaClasses += ' tc-fp-file-drag-drop-image' } @@ -64,7 +64,7 @@ import _ from 'lodash' input.setAttribute('data-fp-button-class', 'tc-btn') input.setAttribute('data-fp-drag-class', dragAreaClasses) input.setAttribute('data-fp-multiple', false) - input.setAttribute('data-fp-extensions', scope.extensions) + input.setAttribute('data-fp-mimetypes', scope.mimeTypes) input.setAttribute('data-fp-store-location', 's3') input.setAttribute('data-fp-store-container', scope.fpContainer) input.setAttribute('data-fp-store-path', scope.filePath) From 6ba4d50a35738c662dc2245e4200095e07abe12e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Jul 2016 13:34:02 +0530 Subject: [PATCH 2/6] AS#152122905738626, Files upload: dragging/dropping incorrect file leads to overlap with help text -- Fixed, with catch been that 'or' keyword is not removed in case of file type does not match the required types because we don't get the event from filestack for this case. --- .../tc-fp-file-input.directive.js | 4 +++ .../tc-fp-file-input/tc-fp-file-input.jade | 1 - .../tc-fp-file-input.directive.scss | 27 ++++++++----------- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js index c589e7ac1..6f19e4361 100644 --- a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js +++ b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js @@ -32,12 +32,15 @@ import _ from 'lodash' scope.filePath += _.join([userId, scope.fieldId, (new Date()).valueOf()], '-') + '.zip' } var dragAreaClasses = 'tc-fp-file-drag-drop' + var dragText = '' // set mimeTypes if (scope.fieldId.indexOf('ZIP') > -1) { scope.mimeTypes = 'application/zip' + dragText = 'Drag and drop your .zip file here (500MB max)' } else if (scope.fieldId.indexOf('DESIGN_COVER') > -1) { scope.mimeTypes = 'image/png,image/jpeg,image/bmp' dragAreaClasses += ' tc-fp-file-drag-drop-image' + dragText = 'Drag and Drop your PNG or JPG file here' } // set default services @@ -63,6 +66,7 @@ import _ from 'lodash' input.setAttribute('data-fp-services', scope.fpServices) input.setAttribute('data-fp-button-class', 'tc-btn') input.setAttribute('data-fp-drag-class', dragAreaClasses) + input.setAttribute('data-fp-drag-text', dragText) input.setAttribute('data-fp-multiple', false) input.setAttribute('data-fp-mimetypes', scope.mimeTypes) input.setAttribute('data-fp-store-location', 's3') diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.jade b/app/directives/tc-fp-file-input/tc-fp-file-input.jade index 971f95ab5..d5f67ab0b 100644 --- a/app/directives/tc-fp-file-input/tc-fp-file-input.jade +++ b/app/directives/tc-fp-file-input/tc-fp-file-input.jade @@ -11,6 +11,5 @@ ng-model="ngModel", ng-required="mandatory", data-fp-button-text="Pick A File", - data-fp-drag-text=" ", on-success="onFileSeleted(event.fpfile)" ) diff --git a/assets/css/directives/tc-fp-file-input.directive.scss b/assets/css/directives/tc-fp-file-input.directive.scss index 45cf8f418..10f7fa39f 100644 --- a/assets/css/directives/tc-fp-file-input.directive.scss +++ b/assets/css/directives/tc-fp-file-input.directive.scss @@ -40,13 +40,23 @@ tc-fp-file-input { .tc-fp-file-drag-drop { width: calc(100% - 4px); - position: absolute; left: 0; top: 0; height: 190px; width: 240px; position: relative; + color: $tc-gray-50 !important; + padding: 25px !important; + text-align: center; + // div used to show progress bar for drop upload + > div { + position: absolute; + left: 0; + top: 0; + } + + // span used for showing remove button > span { position: absolute; top: 0px; @@ -54,21 +64,6 @@ tc-fp-file-input { } } - .tc-fp-file-drag-drop::after { - content: 'Drag and drop your .zip file here (500MB max)'; - color: $tc-gray-50; - top: 25px; - position: absolute; - width: 198px; - text-align: center; - left: 50%; - transform: translateX(-50%) - } - - .tc-fp-file-drag-drop-image::after { - content: 'Drag and Drop your PNG or JPG file here'; - } - &.file-uploaded { .tc-file-field__input::after, .tc-fp-file-drag-drop::after { From f48b606a21c43c183c6e7ff598473f19cd12f992 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Jul 2016 17:16:43 +0530 Subject: [PATCH 3/6] AS#152122905738626, Files upload: dragging/dropping incorrect file leads to overlap with help text -- Fixed --- .../tc-fp-file-input/tc-fp-file-input.directive.js | 4 ++-- assets/css/directives/tc-fp-file-input.directive.scss | 11 ----------- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js index 6f19e4361..89042497f 100644 --- a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js +++ b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js @@ -36,11 +36,11 @@ import _ from 'lodash' // set mimeTypes if (scope.fieldId.indexOf('ZIP') > -1) { scope.mimeTypes = 'application/zip' - dragText = 'Drag and drop your .zip file here (500MB max)' + dragText = 'Drag and drop your .zip file here (500MB max)
or' } else if (scope.fieldId.indexOf('DESIGN_COVER') > -1) { scope.mimeTypes = 'image/png,image/jpeg,image/bmp' dragAreaClasses += ' tc-fp-file-drag-drop-image' - dragText = 'Drag and Drop your PNG or JPG file here' + dragText = 'Drag and Drop your PNG or JPG file here
or' } // set default services diff --git a/assets/css/directives/tc-fp-file-input.directive.scss b/assets/css/directives/tc-fp-file-input.directive.scss index 10f7fa39f..f65597174 100644 --- a/assets/css/directives/tc-fp-file-input.directive.scss +++ b/assets/css/directives/tc-fp-file-input.directive.scss @@ -18,17 +18,6 @@ tc-fp-file-input { width: 240px; } - .tc-file-field__input::after { - content: 'or'; - font-size: 12px; - line-height: 15px; - color: $tc-gray-30; - bottom: 85px; - position: absolute; - left: 50%; - transform: translateX(-50%) - } - .tc-btn { margin-bottom: 5px; position: absolute; From 8fdbc818f202ea7f43a910debe8a93feaeebb03e Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Jul 2016 17:43:41 +0530 Subject: [PATCH 4/6] AS#152122905738669, File upload confirmation page: change copy -- Changed copies. -- Implemented all points except >>Also, please make sure this page can't somehow revert to an error state, which happened when the submission failed.<< --- .../submit-design-files/submit-design-files.controller.js | 6 ++++++ .../submit-design-files/submit-design-files.jade | 5 ++--- assets/css/submissions/submit-file.scss | 2 ++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/app/submissions/submit-design-files/submit-design-files.controller.js b/app/submissions/submit-design-files/submit-design-files.controller.js index b215d0ec4..8b7b1fb8b 100644 --- a/app/submissions/submit-design-files/submit-design-files.controller.js +++ b/app/submissions/submit-design-files/submit-design-files.controller.js @@ -10,6 +10,7 @@ import _ from 'lodash' function SubmitDesignFilesController($scope, $window, $stateParams, logger, UserService, SubmissionsService, challengeToSubmitTo) { if (!challengeToSubmitTo.challenge) { return } + var challengeTitle = challengeToSubmitTo.challenge.name var vm = this vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/) @@ -36,6 +37,7 @@ import _ from 'lodash' stockArts: [], hasAgreedToTerms: false } + vm.progressTitle = '' var userId = parseInt(UserService.getUserIdentity().userId) @@ -114,6 +116,8 @@ import _ from 'lodash' vm.errorInUpload = false vm.uploadProgress = 0 vm.showProgress = true + vm.progressTitle = 'Uploading submission for "' + challengeTitle + '"' + vm.uploadProgressMessage = 'Hey, your work is AWESOME! Please don’t close the window while the upload is in progress, or you’ll lose all files!' vm.preparing = true vm.finishing = false vm.finished = false @@ -178,6 +182,8 @@ import _ from 'lodash' vm.preparing = false vm.finishing = false vm.finished = true + vm.progressTitle = 'Submission completed for "' + challengeTitle + '"' + vm.uploadProgressMessage = 'Thanks for participating! We\'ve received your submission and will send you an email shortly to confirm and explain what happens next.' } } else { // assume it to be error condition diff --git a/app/submissions/submit-design-files/submit-design-files.jade b/app/submissions/submit-design-files/submit-design-files.jade index 36ce18f46..7e1d8b8f1 100644 --- a/app/submissions/submit-design-files/submit-design-files.jade +++ b/app/submissions/submit-design-files/submit-design-files.jade @@ -161,12 +161,12 @@ modal.transition(show="vm.showProgress", background-click-close="false", style="background-color:white;") .upload-progress(ng-class="{'upload-progress--error': vm.errorInUpload}") .upload-progress__title - p Uploading submission for "{{submissions.challengeTitle}}" + p {{ vm.progressTitle }} img.upload-progress__image(src=require("../../../assets/images/skills/id-180.svg"), ng-hide="vm.errorInUpload") img.upload-progress__image--error(src=require("../../../assets/images/robot-embarresed.svg"), ng-show="vm.errorInUpload") - p.upload-progress__message(ng-hide="vm.errorInUpload") Hey, your work is AWESOME! Please don’t close the window while the upload is in progress, or you’ll lose all files! + p.upload-progress__message(ng-hide="vm.errorInUpload") {{ vm.uploadProgressMessage}} p.upload-progress__message--error(ng-show="vm.errorInUpload") Oh, that’s embarrassing! One of the files couldn’t be uploaded, I’m so sorry. @@ -177,7 +177,6 @@ modal.transition(show="vm.showProgress", background-click-close="false", style=" p Finishing... .upload-progress__finished(ng-show="vm.finished && !vm.errorInUpload") - p Finished! .upload-progess__links a.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenge-details/{{submissions.challengeId}}/?type={{submissions.track}}") Back to the challenge diff --git a/assets/css/submissions/submit-file.scss b/assets/css/submissions/submit-file.scss index 8d5939ee5..1818379a5 100644 --- a/assets/css/submissions/submit-file.scss +++ b/assets/css/submissions/submit-file.scss @@ -158,6 +158,8 @@ modal { line-height: 19px; color: $accent-gray; margin-top: 40px; + padding: 0px 40px; + text-align: center; } .upload-progress__progress-bar { From ba119d896f24bea52d5d64adf9b5cb32946c6cc1 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Jul 2016 17:49:10 +0530 Subject: [PATCH 5/6] margin between buttons for error state of file upload for design submission page. --- assets/css/submissions/submit-file.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/css/submissions/submit-file.scss b/assets/css/submissions/submit-file.scss index 1818379a5..2f9dbe781 100644 --- a/assets/css/submissions/submit-file.scss +++ b/assets/css/submissions/submit-file.scss @@ -195,6 +195,12 @@ modal { } } } + + .upload-progress__error-action { + button:not(:first-child) { + margin-left: 10px; + } + } } .upload-progess__links { From a1908a2366fa268a477a1dc2295f5457961795f9 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Thu, 7 Jul 2016 19:11:26 +0530 Subject: [PATCH 6/6] AS#152122905738603, Fix alignment and copy for Files upload section -- Fixed all sub tasks except >> On the right-hand side, move comma as so: "declaration.txt," --- .../tc-fp-file-input/tc-fp-file-input.directive.js | 2 +- app/directives/tc-fp-file-input/tc-fp-file-input.jade | 2 +- app/submissions/submit-design-files/submit-design-files.jade | 2 +- assets/css/directives/tc-fp-file-input.directive.scss | 5 +++++ assets/css/submissions/submit-file.scss | 2 +- 5 files changed, 9 insertions(+), 4 deletions(-) diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js index 89042497f..ca4d7b366 100644 --- a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js +++ b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js @@ -40,7 +40,7 @@ import _ from 'lodash' } else if (scope.fieldId.indexOf('DESIGN_COVER') > -1) { scope.mimeTypes = 'image/png,image/jpeg,image/bmp' dragAreaClasses += ' tc-fp-file-drag-drop-image' - dragText = 'Drag and Drop your PNG or JPG file here
or' + dragText = 'Drag and drop your .png or .jpg file here
or' } // set default services diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.jade b/app/directives/tc-fp-file-input/tc-fp-file-input.jade index d5f67ab0b..bafe07691 100644 --- a/app/directives/tc-fp-file-input/tc-fp-file-input.jade +++ b/app/directives/tc-fp-file-input/tc-fp-file-input.jade @@ -1,6 +1,6 @@ .tc-file-field__label label.tc-label {{labelText}} - span.lowercase(ng-if="showFileType") {{ ' *(.' + fileType + ')'}} + //- span.lowercase(ng-if="showFileType") {{ ' *(.' + fileType + ')'}} .tc-file-field__inputs .tc-label__wrapper diff --git a/app/submissions/submit-design-files/submit-design-files.jade b/app/submissions/submit-design-files/submit-design-files.jade index 7e1d8b8f1..5e3ec6735 100644 --- a/app/submissions/submit-design-files/submit-design-files.jade +++ b/app/submissions/submit-design-files/submit-design-files.jade @@ -23,7 +23,7 @@ p Please be sure to double-check that you have submitted the correct files and that your JPG files (if applicable) are in RGB color mode. - a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/219122667-Formatting-Your-Submission-for-Design-Challenges") Learn more about formatting your submission file + a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/219122667-Formatting-Your-Submission-for-Design-Challenges") Learn more about formatting your submission file. .form-block__fields .fieldset.files diff --git a/assets/css/directives/tc-fp-file-input.directive.scss b/assets/css/directives/tc-fp-file-input.directive.scss index f65597174..cbf3b9651 100644 --- a/assets/css/directives/tc-fp-file-input.directive.scss +++ b/assets/css/directives/tc-fp-file-input.directive.scss @@ -27,6 +27,10 @@ tc-fp-file-input { z-index: 1; } + .tc-label__asterisk { + right: 0px; + } + .tc-fp-file-drag-drop { width: calc(100% - 4px); left: 0; @@ -36,6 +40,7 @@ tc-fp-file-input { position: relative; color: $tc-gray-50 !important; padding: 25px !important; + margin-left: 0px !important; text-align: center; // div used to show progress bar for drop upload diff --git a/assets/css/submissions/submit-file.scss b/assets/css/submissions/submit-file.scss index 2f9dbe781..9bbf75bde 100644 --- a/assets/css/submissions/submit-file.scss +++ b/assets/css/submissions/submit-file.scss @@ -79,7 +79,7 @@ tc-fp-file-input { flex-wrap: wrap; justify-content: space-around; - @media screen and (min-width: 1000px) { + @media screen and (min-width: 875px) { justify-content: space-between; } }