mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-07-20 18:22:19 +00:00
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 <abijeetpatro@gmail.com>
This commit is contained in:
parent
f42d355fd7
commit
d859be3a12
|
@ -13,6 +13,8 @@ function mounted() {
|
||||||
let container = this.$el;
|
let container = this.$el;
|
||||||
let _this = this;
|
let _this = this;
|
||||||
new DropZone(container, {
|
new DropZone(container, {
|
||||||
|
addRemoveLinks: true,
|
||||||
|
dictRemoveFile: trans('components.image_upload_remove'),
|
||||||
url: function() {
|
url: function() {
|
||||||
return _this.uploadUrl;
|
return _this.uploadUrl;
|
||||||
},
|
},
|
||||||
|
@ -41,7 +43,7 @@ function mounted() {
|
||||||
$(file.previewElement).find('[data-dz-errormessage]').text(message);
|
$(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]);
|
if (errorMessage.file) setMessage(errorMessage.file[0]);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -57,4 +59,4 @@ module.exports = {
|
||||||
props,
|
props,
|
||||||
mounted,
|
mounted,
|
||||||
data,
|
data,
|
||||||
};
|
};
|
||||||
|
|
|
@ -207,6 +207,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
padding: $-m $-l;
|
padding: $-m $-l;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
border-left: 1px solid #DDD;
|
border-left: 1px solid #DDD;
|
||||||
.dropzone-container {
|
.dropzone-container {
|
||||||
margin-top: $-m;
|
margin-top: $-m;
|
||||||
|
@ -311,8 +312,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
|
|
||||||
.dz-preview.dz-file-preview .dz-image {
|
.dz-preview.dz-file-preview .dz-image {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #999;
|
background: #e9e9e9;
|
||||||
background: linear-gradient(to bottom, #eee, #ddd);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dz-preview.dz-file-preview .dz-details {
|
.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 {
|
.dz-preview .dz-remove {
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
|
margin-top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dz-preview .dz-remove:hover {
|
.dz-preview .dz-remove:hover {
|
||||||
|
@ -381,7 +382,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
border: 1px solid transparent;
|
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);
|
background-color: rgba(255, 255, 255, 0.4);
|
||||||
padding: 0 0.4em;
|
padding: 0 0.4em;
|
||||||
border-radius: 3px;
|
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 {
|
.dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 500;
|
z-index: 1001;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -27px;
|
margin-left: -27px;
|
||||||
margin-top: -27px;
|
margin-top: -35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
|
.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;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dz-preview.dz-error:hover .dz-error-message {
|
.dz-preview.dz-error {
|
||||||
opacity: 1;
|
.dz-image, .dz-details {
|
||||||
pointer-events: auto;
|
&:hover ~ .dz-error-message {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dz-preview .dz-error-message {
|
.dz-preview .dz-error-message {
|
||||||
|
@ -492,7 +497,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 11.5px;
|
font-size: 12px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
top: 88px;
|
top: 88px;
|
||||||
left: -26px;
|
left: -26px;
|
||||||
|
@ -593,4 +598,4 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
.text-muted {
|
.text-muted {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -209,6 +209,9 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
div[toolbox-tab-content] .padded.files {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin: $-m 0 0 0;
|
margin: $-m 0 0 0;
|
||||||
|
|
|
@ -21,6 +21,7 @@ return [
|
||||||
'image_upload_success' => 'Image uploaded successfully',
|
'image_upload_success' => 'Image uploaded successfully',
|
||||||
'image_update_success' => 'Image details successfully updated',
|
'image_update_success' => 'Image details successfully updated',
|
||||||
'image_delete_success' => 'Image successfully deleted',
|
'image_delete_success' => 'Image successfully deleted',
|
||||||
|
'image_upload_remove' => 'Remove',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Code editor
|
* Code editor
|
||||||
|
@ -29,4 +30,4 @@ return [
|
||||||
'code_language' => 'Code Language',
|
'code_language' => 'Code Language',
|
||||||
'code_content' => 'Code Content',
|
'code_content' => 'Code Content',
|
||||||
'code_save' => 'Save Code',
|
'code_save' => 'Save Code',
|
||||||
];
|
];
|
||||||
|
|
|
@ -35,6 +35,7 @@ return [
|
||||||
'cannot_get_image_from_url' => 'Cannot get image from :url',
|
'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.',
|
'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.',
|
'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_error' => 'An error occurred uploading the image',
|
||||||
'image_upload_type_error' => 'The image type being uploaded is invalid',
|
'image_upload_type_error' => 'The image type being uploaded is invalid',
|
||||||
|
|
||||||
|
@ -78,4 +79,4 @@ return [
|
||||||
'error_occurred' => 'An Error Occurred',
|
'error_occurred' => 'An Error Occurred',
|
||||||
'app_down' => ':appName is down right now',
|
'app_down' => ':appName is down right now',
|
||||||
'back_soon' => 'It will be back up soon.',
|
'back_soon' => 'It will be back up soon.',
|
||||||
];
|
];
|
||||||
|
|
|
@ -37,7 +37,7 @@ return [
|
||||||
'email' => 'The :attribute must be a valid email address.',
|
'email' => 'The :attribute must be a valid email address.',
|
||||||
'filled' => 'The :attribute field is required.',
|
'filled' => 'The :attribute field is required.',
|
||||||
'exists' => 'The selected :attribute is invalid.',
|
'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.',
|
'in' => 'The selected :attribute is invalid.',
|
||||||
'integer' => 'The :attribute must be an integer.',
|
'integer' => 'The :attribute must be an integer.',
|
||||||
'ip' => 'The :attribute must be a valid IP address.',
|
'ip' => 'The :attribute must be a valid IP address.',
|
||||||
|
|
Loading…
Reference in New Issue
Block a user