mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Image manager: fix upload control for drawing, updated styles
- Tightened image manager styles to address things that looked akward. - Prevented visiblity/use of upload controls for drawings. - Updated dropzone to use error handling from validation messages.
This commit is contained in:
Dan Brown
parent
61d2ea6ac7
commit
722c38d576
@ -12,6 +12,8 @@ export class Dropzone extends Component {
|
||||
this.dropTarget = this.$refs.dropTarget;
|
||||
this.selectButtons = this.$manyRefs.selectButton || [];
|
||||
|
||||
this.isActive = true;
|
||||
|
||||
this.url = this.$opts.url;
|
||||
this.successMessage = this.$opts.successMessage;
|
||||
this.errorMessage = this.$opts.errorMessage;
|
||||
@ -23,6 +25,14 @@ export class Dropzone extends Component {
|
||||
this.setupListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Public method to allow external disabling/enabling of this drag+drop dropzone.
|
||||
* @param {Boolean} active
|
||||
*/
|
||||
toggleActive(active) {
|
||||
this.isActive = active;
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
onSelect(this.selectButtons, this.manualSelectHandler.bind(this));
|
||||
this.setupDropTargetHandlers();
|
||||
@ -40,7 +50,7 @@ export class Dropzone extends Component {
|
||||
event.preventDefault();
|
||||
depth += 1;
|
||||
|
||||
if (depth === 1) {
|
||||
if (depth === 1 && this.isActive) {
|
||||
this.showOverlay();
|
||||
}
|
||||
});
|
||||
@ -59,6 +69,11 @@ export class Dropzone extends Component {
|
||||
this.dropTarget.addEventListener('drop', event => {
|
||||
event.preventDefault();
|
||||
reset();
|
||||
|
||||
if (!this.isActive) {
|
||||
return;
|
||||
}
|
||||
|
||||
const clipboard = new Clipboard(event.dataTransfer);
|
||||
const files = clipboard.getFiles();
|
||||
for (const file of files) {
|
||||
@ -158,7 +173,7 @@ export class Dropzone extends Component {
|
||||
} else if (this.readyState === XMLHttpRequest.DONE && this.status >= 400) {
|
||||
const content = this.responseText;
|
||||
const data = content.startsWith('{') ? JSON.parse(content) : {message: content};
|
||||
const message = data?.message || content;
|
||||
const message = data?.message || data?.error || content;
|
||||
upload.markError(message);
|
||||
}
|
||||
},
|
||||
|
||||
@ -18,6 +18,8 @@ export class ImageManager extends Component {
|
||||
this.listContainer = this.$refs.listContainer;
|
||||
this.filterTabs = this.$manyRefs.filterTabs;
|
||||
this.selectButton = this.$refs.selectButton;
|
||||
this.uploadButton = this.$refs.uploadButton;
|
||||
this.uploadHint = this.$refs.uploadHint;
|
||||
this.formContainer = this.$refs.formContainer;
|
||||
this.formContainerPlaceholder = this.$refs.formContainerPlaceholder;
|
||||
this.dropzoneContainer = this.$refs.dropzoneContainer;
|
||||
@ -35,11 +37,6 @@ export class ImageManager extends Component {
|
||||
this.resetState();
|
||||
|
||||
this.setupListeners();
|
||||
|
||||
window.setTimeout(() => {
|
||||
this.show(() => {
|
||||
}, 'gallery');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
@ -60,18 +57,14 @@ export class ImageManager extends Component {
|
||||
this.resetListView();
|
||||
this.resetSearchView();
|
||||
this.loadGallery();
|
||||
this.cancelSearch.classList.remove('active');
|
||||
});
|
||||
|
||||
this.searchInput.addEventListener('input', () => {
|
||||
this.cancelSearch.classList.toggle('active', this.searchInput.value.trim());
|
||||
});
|
||||
|
||||
onChildEvent(this.listContainer, '.load-more', 'click', async event => {
|
||||
showLoading(event.target);
|
||||
onChildEvent(this.listContainer, '.load-more button', 'click', async event => {
|
||||
const wrapper = event.target.closest('.load-more');
|
||||
showLoading(wrapper);
|
||||
this.page += 1;
|
||||
await this.loadGallery();
|
||||
event.target.remove();
|
||||
wrapper.remove();
|
||||
});
|
||||
|
||||
this.listContainer.addEventListener('event-emit-select-image', this.onImageSelectEvent.bind(this));
|
||||
@ -106,7 +99,15 @@ export class ImageManager extends Component {
|
||||
this.callback = callback;
|
||||
this.type = type;
|
||||
this.getPopup().show();
|
||||
this.dropzoneContainer.classList.toggle('hidden', type !== 'gallery');
|
||||
|
||||
const hideUploads = type !== 'gallery';
|
||||
this.dropzoneContainer.classList.toggle('hidden', hideUploads);
|
||||
this.uploadButton.classList.toggle('hidden', hideUploads);
|
||||
this.uploadHint.classList.toggle('hidden', hideUploads);
|
||||
|
||||
/** @var {Dropzone} * */
|
||||
const dropzone = window.$components.firstOnElement(this.container, 'dropzone');
|
||||
dropzone.toggleActive(!hideUploads);
|
||||
|
||||
if (!this.hasData) {
|
||||
this.loadGallery();
|
||||
|
||||
@ -386,13 +386,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
.image-manager .load-more {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@include lightDark(background-color, #EEE, #444);
|
||||
padding: $-s $-m;
|
||||
color: #AAA;
|
||||
clear: both;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
font-style: italic;
|
||||
.loading-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image-manager .loading-container {
|
||||
@ -444,6 +442,17 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
}
|
||||
}
|
||||
|
||||
.image-manager [role="tablist"] button[role="tab"] {
|
||||
border-right: 1px solid #DDD;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.image-manager-header {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.tab-container [role="tablist"] {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
|
||||
@ -120,29 +120,36 @@ $loadingSize: 10px;
|
||||
.contained-search-box {
|
||||
display: flex;
|
||||
height: 38px;
|
||||
z-index: -1;
|
||||
input, button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ddd;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
margin-inline-start: -1px;
|
||||
&:last-child {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 5;
|
||||
padding: $-xs $-s;
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
outline: 1px dotted var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
border: 1px solid #ddd;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 60px;
|
||||
}
|
||||
button.primary-background {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
button i {
|
||||
padding: 0;
|
||||
}
|
||||
button.cancel.active {
|
||||
background-color: $negative;
|
||||
color: #EEE;
|
||||
}
|
||||
svg {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -19,5 +19,7 @@
|
||||
</div>
|
||||
@endforeach
|
||||
@if($hasMore)
|
||||
<div class="load-more">{{ trans('components.image_load_more') }}</div>
|
||||
<div class="load-more">
|
||||
<button type="button" class="button small outline">{{ trans('components.image_load_more') }}</button>
|
||||
</div>
|
||||
@endif
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">{{ trans('components.image_select') }}</div>
|
||||
<button refs="dropzone@selectButton" type="button">
|
||||
<button refs="dropzone@selectButton image-manager@uploadButton" type="button">
|
||||
<span>@icon('upload')</span>
|
||||
<span>{{ trans('components.image_upload') }}</span>
|
||||
</button>
|
||||
@ -26,7 +26,7 @@
|
||||
<div refs="dropzone@drop-target" class="flex-fill image-manager-body">
|
||||
|
||||
<div class="image-manager-content">
|
||||
<div role="tablist" class="image-manager-header primary-background-light grid third no-gap">
|
||||
<div role="tablist" class="image-manager-header grid third no-gap">
|
||||
<button refs="image-manager@filterTabs"
|
||||
data-filter="all"
|
||||
role="tab"
|
||||
@ -67,7 +67,7 @@
|
||||
|
||||
<div refs="image-manager@form-container-placeholder" class="p-m text-small text-muted">
|
||||
<p>{{ trans('components.image_intro') }}</p>
|
||||
<p>{{ trans('components.image_intro_upload') }}</p>
|
||||
<p refs="image-manager@upload-hint">{{ trans('components.image_intro_upload') }}</p>
|
||||
</div>
|
||||
|
||||
<div refs="image-manager@formContainer" class="inner flex">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user