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->name }}Image List + role="tab">{{ trans('components.image_list') }} + role="tab">{{ trans('components.image_details') }}
@@ -56,6 +56,7 @@