From f42d355fd74fc32ea62fd85e17de304e146ca9c3 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Tue, 13 Mar 2018 09:10:23 +0530 Subject: [PATCH 1/4] Fixes issue with the validation message not being translated. Signed-off-by: Abijeet --- app/Http/Controllers/ImageController.php | 2 +- app/Providers/AppServiceProvider.php | 2 +- resources/lang/en/validation.php | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php index a61f447eb..17e690813 100644 --- a/app/Http/Controllers/ImageController.php +++ b/app/Http/Controllers/ImageController.php @@ -120,7 +120,7 @@ class ImageController extends Controller { $this->checkPermission('image-create-all'); $this->validate($request, [ - 'file' => 'is_image' + 'file' => 'image' ]); if (!$this->imageRepo->isValidType($type)) { diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php index b06b2f3a2..57e5c8ed5 100644 --- a/app/Providers/AppServiceProvider.php +++ b/app/Providers/AppServiceProvider.php @@ -15,7 +15,7 @@ class AppServiceProvider extends ServiceProvider public function boot() { // Custom validation methods - Validator::extend('is_image', function ($attribute, $value, $parameters, $validator) { + Validator::extend('image', function ($attribute, $value, $parameters, $validator) { $imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/jpg', 'image/tiff', 'image/webp']; return in_array($value->getMimeType(), $imageMimes); }); diff --git a/resources/lang/en/validation.php b/resources/lang/en/validation.php index b75af7485..7c06264ab 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.', From d859be3a128cf3a624f70cd082d3ed09124769a3 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sun, 18 Mar 2018 18:44:11 +0530 Subject: [PATCH 2/4] 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.', From 83d830fd7dce94ba776bb6db9356f52ef9f98092 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sun, 18 Mar 2018 18:58:04 +0530 Subject: [PATCH 3/4] Fixes the icons not being aligned properly in attached items section for the page. Also formatting. Signed-off-by: Abijeet --- resources/assets/sass/_blocks.scss | 8 ++++---- resources/assets/sass/_components.scss | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss index e3238f4b4..4cf2397bc 100644 --- a/resources/assets/sass/_blocks.scss +++ b/resources/assets/sass/_blocks.scss @@ -224,15 +224,15 @@ padding: 0; align-items: center; text-align: center; + justify-content: center; width: 28px; padding-left: $-xs; padding-right: $-xs; &:hover { background-color: #EEE; } - i { - flex: 1; - padding: 0; + .svg-icon { + margin-right: 0px; } } > div .outline input { @@ -258,4 +258,4 @@ background-color: #F8F8F8; padding: $-m; border: 1px solid #DDD; -} \ No newline at end of file +} diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss index 30edd0451..0b5d767fa 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -480,12 +480,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } .dz-preview.dz-error { - .dz-image, .dz-details { - &:hover ~ .dz-error-message { - opacity: 1; - pointer-events: auto; - } - } + .dz-image, .dz-details { + &:hover ~ .dz-error-message { + opacity: 1; + pointer-events: auto; + } + } } .dz-preview .dz-error-message { From 3a5c20c17e4228ad37a35e7267ab890c7ae92bcb Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sun, 18 Mar 2018 23:38:37 +0530 Subject: [PATCH 4/4] Removing the selected image and clearing the dropdzone on dialog close. Towards #741 Signed-off-by: Abijeet --- resources/assets/js/vues/components/dropzone.js | 11 +++++++++-- resources/assets/js/vues/image-manager.js | 4 +++- resources/views/components/image-manager.blade.php | 6 +++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/resources/assets/js/vues/components/dropzone.js b/resources/assets/js/vues/components/dropzone.js index e0a6d8b9d..65717b86b 100644 --- a/resources/assets/js/vues/components/dropzone.js +++ b/resources/assets/js/vues/components/dropzone.js @@ -12,7 +12,7 @@ const props = ['placeholder', 'uploadUrl', 'uploadedTo']; function mounted() { let container = this.$el; let _this = this; - new DropZone(container, { + this._dz = new DropZone(container, { addRemoveLinks: true, dictRemoveFile: trans('components.image_upload_remove'), url: function() { @@ -51,12 +51,19 @@ function mounted() { } function data() { - return {} + return {}; } +const methods = { + onClose: function () { + this._dz.removeAllFiles(true); + } +}; + module.exports = { template, props, mounted, data, + methods }; diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js index 12ccc970d..89fe6769e 100644 --- a/resources/assets/js/vues/image-manager.js +++ b/resources/assets/js/vues/image-manager.js @@ -43,6 +43,8 @@ const methods = { hide() { this.showing = false; + this.selectedImage = false; + this.$refs.dropzone.onClose(); this.$el.children[0].components.overlay.hide(); }, @@ -175,4 +177,4 @@ module.exports = { data, computed, components: {dropzone}, -}; \ No newline at end of file +}; diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php index b860038b4..78c6435d6 100644 --- a/resources/views/components/image-manager.blade.php +++ b/resources/views/components/image-manager.blade.php @@ -1,10 +1,10 @@
-
+
{{ trans('components.image_select') }}
- +
@@ -79,7 +79,7 @@
- +