diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php index d71e38346..9782a94c4 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' => 'required|is_image' + 'file' => 'required|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/assets/js/vues/components/dropzone.js b/resources/assets/js/vues/components/dropzone.js index 0f31bd579..65717b86b 100644 --- a/resources/assets/js/vues/components/dropzone.js +++ b/resources/assets/js/vues/components/dropzone.js @@ -12,7 +12,9 @@ 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() { 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]); }); } @@ -49,12 +51,19 @@ function mounted() { } function data() { - return {} + return {}; } +const methods = { + onClose: function () { + this._dz.removeAllFiles(true); + } +}; + module.exports = { template, props, mounted, data, -}; \ No newline at end of file + 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/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 f15528167..430b93757 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -211,6 +211,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; @@ -315,8 +316,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 { @@ -332,11 +332,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 { @@ -385,7 +386,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; @@ -421,13 +422,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 { @@ -482,9 +483,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 { @@ -496,7 +501,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; @@ -597,4 +602,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 3555111d8..3749b5321 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -210,6 +210,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/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 @@
-
+