diff --git a/resources/js/components/dropzone.js b/resources/js/components/dropzone.js
index 56c576f29..1fdf824ae 100644
--- a/resources/js/components/dropzone.js
+++ b/resources/js/components/dropzone.js
@@ -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);
}
},
diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
index fe01d4595..b81782364 100644
--- a/resources/js/components/image-manager.js
+++ b/resources/js/components/image-manager.js
@@ -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();
diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 1c417b2ad..d1a11a964 100644
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -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;
diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index 0f4ec7041..2ed680646 100644
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -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;
}
diff --git a/resources/views/pages/parts/image-manager-list.blade.php b/resources/views/pages/parts/image-manager-list.blade.php
index 22fe7addd..ccf79fb6d 100644
--- a/resources/views/pages/parts/image-manager-list.blade.php
+++ b/resources/views/pages/parts/image-manager-list.blade.php
@@ -19,5 +19,7 @@
@endforeach
@if($hasMore)
- {{ trans('components.image_load_more') }}
+
+ {{ trans('components.image_load_more') }}
+
@endif
\ No newline at end of file
diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php
index aee292f38..cab5daa64 100644
--- a/resources/views/pages/parts/image-manager.blade.php
+++ b/resources/views/pages/parts/image-manager.blade.php
@@ -16,7 +16,7 @@