diff --git a/lang/en/components.php b/lang/en/components.php
index cd5dca251..919efd331 100644
--- a/lang/en/components.php
+++ b/lang/en/components.php
@@ -6,6 +6,8 @@ return [
// Image Manager
'image_select' => 'Image Select',
+ 'image_list' => 'Image List',
+ 'image_details' => 'Image Details',
'image_upload' => 'Upload Image',
'image_intro' => 'Here you can select and manage images that have been previously uploaded to the system.',
'image_intro_upload' => 'Upload a new image by dragging an image file into this window, or by using the "Upload Image" button above.',
diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
index dddf6ad8f..78abcf30d 100644
--- a/resources/js/components/image-manager.js
+++ b/resources/js/components/image-manager.js
@@ -53,6 +53,7 @@ export class ImageManager extends Component {
this.searchForm.addEventListener('submit', event => {
this.resetListView();
this.loadGallery();
+ this.cancelSearch.toggleAttribute('hidden', !this.searchInput.value);
event.preventDefault();
});
@@ -201,6 +202,7 @@ export class ImageManager extends Component {
resetSearchView() {
this.searchInput.value = '';
+ this.cancelSearch.toggleAttribute('hidden', true);
}
resetEditForm() {
diff --git a/resources/sass/_animations.scss b/resources/sass/_animations.scss
index eb9f4e767..f1aa3139b 100644
--- a/resources/sass/_animations.scss
+++ b/resources/sass/_animations.scss
@@ -2,7 +2,7 @@
.anim.fadeIn {
opacity: 0;
animation-name: fadeIn;
- animation-duration: 180ms;
+ animation-duration: 120ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
diff --git a/resources/views/pages/parts/image-manager-list.blade.php b/resources/views/pages/parts/image-manager-list.blade.php
index 3a8a0b63b..da3f3be44 100644
--- a/resources/views/pages/parts/image-manager-list.blade.php
+++ b/resources/views/pages/parts/image-manager-list.blade.php
@@ -4,7 +4,7 @@
option:event-emit-select:name="image"
option:event-emit-select:data="{{ json_encode($image) }}"
class="image anim fadeIn text-link"
- style="animation-delay: {{ $index > 26 ? '160ms' : ($index * 25) . 'ms' }};">
+ style="animation-delay: {{ min($index * 10, 260) . 'ms' }};">
Image List
+ role="tab">{{ trans('components.image_list') }}
+ role="tab">{{ trans('components.image_details') }}