From d859be3a128cf3a624f70cd082d3ed09124769a3 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sun, 18 Mar 2018 18:44:11 +0530 Subject: [PATCH] Fixes a number of issues with the image uploader. Read below, - Added a remove link to remove files that have an error. - Error will appear below the progress bar. - Hovering on dz-image or dz-details will display the error message. Otherwise error message was covering the remove link as well. - Removed styling around the file size. - Removed gradient effect in accordance with BookStack styling. - Dropzone filenae will not overflow the container element. Also done for page attachments - Added a 'uploaded' error message. this error was being thrown when the file size exceeded the server configured file size. (https://stackoverflow.com/a/42934387/903324) Towards #741 Signed-off-by: Abijeet --- .../assets/js/vues/components/dropzone.js | 6 +++-- resources/assets/sass/_components.scss | 27 +++++++++++-------- resources/assets/sass/_pages.scss | 3 +++ resources/lang/en/components.php | 3 ++- resources/lang/en/errors.php | 3 ++- resources/lang/en/validation.php | 2 +- 6 files changed, 28 insertions(+), 16 deletions(-) diff --git a/resources/assets/js/vues/components/dropzone.js b/resources/assets/js/vues/components/dropzone.js index 0f31bd579..e0a6d8b9d 100644 --- a/resources/assets/js/vues/components/dropzone.js +++ b/resources/assets/js/vues/components/dropzone.js @@ -13,6 +13,8 @@ function mounted() { let container = this.$el; let _this = this; new DropZone(container, { + addRemoveLinks: true, + dictRemoveFile: trans('components.image_upload_remove'), url: function() { return _this.uploadUrl; }, @@ -41,7 +43,7 @@ function mounted() { $(file.previewElement).find('[data-dz-errormessage]').text(message); } - if (xhr.status === 413) setMessage(trans('errors.server_upload_limit')); + if (xhr && xhr.status === 413) setMessage(trans('errors.server_upload_limit')); if (errorMessage.file) setMessage(errorMessage.file[0]); }); } @@ -57,4 +59,4 @@ module.exports = { props, mounted, data, -}; \ No newline at end of file +}; diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss index 70cfaf2b4..30edd0451 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -207,6 +207,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { margin-left: 1px; padding: $-m $-l; overflow-y: auto; + overflow-x: hidden; border-left: 1px solid #DDD; .dropzone-container { margin-top: $-m; @@ -311,8 +312,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .dz-preview.dz-file-preview .dz-image { border-radius: 4px; - background: #999; - background: linear-gradient(to bottom, #eee, #ddd); + background: #e9e9e9; } .dz-preview.dz-file-preview .dz-details { @@ -328,11 +328,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } .dz-preview .dz-remove { - font-size: 14px; + font-size: 13px; text-align: center; display: block; cursor: pointer; border: none; + margin-top: 3px; } .dz-preview .dz-remove:hover { @@ -381,7 +382,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { border: 1px solid transparent; } -.dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span { +.dz-preview .dz-details .dz-filename span { background-color: rgba(255, 255, 255, 0.4); padding: 0 0.4em; border-radius: 3px; @@ -417,13 +418,13 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { pointer-events: none; opacity: 0; - z-index: 500; + z-index: 1001; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; - margin-top: -27px; + margin-top: -35px; } .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg { @@ -478,9 +479,13 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { display: block; } -.dz-preview.dz-error:hover .dz-error-message { - opacity: 1; - pointer-events: auto; +.dz-preview.dz-error { + .dz-image, .dz-details { + &:hover ~ .dz-error-message { + opacity: 1; + pointer-events: auto; + } + } } .dz-preview .dz-error-message { @@ -492,7 +497,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { opacity: 0; transition: opacity 0.3s ease; border-radius: 4px; - font-size: 11.5px; + font-size: 12px; line-height: 1.2; top: 88px; left: -26px; @@ -593,4 +598,4 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .text-muted { color: #999; } -} \ No newline at end of file +} diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index 8eb3d2923..cb1cae19f 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -209,6 +209,9 @@ flex: 1; padding-top: 0; } + div[toolbox-tab-content] .padded.files { + overflow-x: hidden; + } h4 { font-size: 24px; margin: $-m 0 0 0; diff --git a/resources/lang/en/components.php b/resources/lang/en/components.php index 334502d05..2266fe2b2 100644 --- a/resources/lang/en/components.php +++ b/resources/lang/en/components.php @@ -21,6 +21,7 @@ return [ 'image_upload_success' => 'Image uploaded successfully', 'image_update_success' => 'Image details successfully updated', 'image_delete_success' => 'Image successfully deleted', + 'image_upload_remove' => 'Remove', /** * Code editor @@ -29,4 +30,4 @@ return [ 'code_language' => 'Code Language', 'code_content' => 'Code Content', 'code_save' => 'Save Code', -]; \ No newline at end of file +]; diff --git a/resources/lang/en/errors.php b/resources/lang/en/errors.php index 3b1d6e8b3..a86a1cdfc 100644 --- a/resources/lang/en/errors.php +++ b/resources/lang/en/errors.php @@ -35,6 +35,7 @@ return [ 'cannot_get_image_from_url' => 'Cannot get image from :url', 'cannot_create_thumbs' => 'The server cannot create thumbnails. Please check you have the GD PHP extension installed.', 'server_upload_limit' => 'The server does not allow uploads of this size. Please try a smaller file size.', + 'uploaded' => 'The server does not allow uploads of this size. Please try a smaller file size.', 'image_upload_error' => 'An error occurred uploading the image', 'image_upload_type_error' => 'The image type being uploaded is invalid', @@ -78,4 +79,4 @@ return [ 'error_occurred' => 'An Error Occurred', 'app_down' => ':appName is down right now', 'back_soon' => 'It will be back up soon.', -]; \ No newline at end of file +]; diff --git a/resources/lang/en/validation.php b/resources/lang/en/validation.php index 7c06264ab..b75af7485 100644 --- a/resources/lang/en/validation.php +++ b/resources/lang/en/validation.php @@ -37,7 +37,7 @@ return [ 'email' => 'The :attribute must be a valid email address.', 'filled' => 'The :attribute field is required.', 'exists' => 'The selected :attribute is invalid.', - 'image' => 'The :attribute must be an image.', + 'image' => 'The :attribute must be an image.', 'in' => 'The selected :attribute is invalid.', 'integer' => 'The :attribute must be an integer.', 'ip' => 'The :attribute must be a valid IP address.',