Image manager: extracted lang text, updated anims and search cancel

- Updated search cancel to only show when a search is active.
- Updated gallery image load animation to be much faster.

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.',

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() {

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;
 }

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' }};">
         <img src="{{ $image->thumbs['gallery'] }}"
              alt="{{ $image->name }}"
              width="150"

resources/views/pages/parts/image-manager.blade.php

@@ -33,11 +33,11 @@
                         <button id="image-manager-list-tab"
                                 aria-selected="true"
                                 aria-controls="image-manager-list"
-                                role="tab">Image List</button>
+                                role="tab">{{ trans('components.image_list') }}</button>
                         <button id="image-manager-info-tab"
                                 aria-selected="true"
                                 aria-controls="image-manager-info"
-                                role="tab">Image Details</button>
+                                role="tab">{{ trans('components.image_details') }}</button>
                     </div>
                 </div>
                 <div class="flex-container-row flex-fill">
@@ -56,6 +56,7 @@
                                     <button refs="image-manager@cancelSearch"
                                             title="{{ trans('common.search_clear') }}"
                                             type="button"
+                                            hidden="hidden"
                                             class="cancel">@icon('close')</button>
                                     <button type="submit"
                                             title="{{ trans('common.search') }}">@icon('search')</button>