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.

diff --git a/lang/en/components.php b/lang/en/components.php
index cd5dca251bbc7ec59f779fb9d727b57dfbd2c0c2..919efd331769857344eac57ea1e033c0fb2497d1 100644 (file)
--- 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 dddf6ad8f82717291a18be5d02dbca83a63ed60d..78abcf30d8b8c5465f360094f9a9d193be02dd5e 100644 (file)
--- 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 eb9f4e767a4e9cf604287c411b8cee55299b4faa..f1aa3139b8ea7aff9f01088d8a680584b483e9c1 100644 (file)
--- 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 3a8a0b63b055f6132199eddab1dfb2ba7466f945..da3f3be44d82fe6fe187e9c8d89d8c7419132a38 100644 (file)
--- 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' }};">
         <img src="{{ $image->thumbs['gallery'] }}"
              alt="{{ $image->name }}"
              width="150"

diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php
index 9945f4d6c6dbdc02c385cf0d0446bb78535f5557..1824e5fa633b64caac375dd7d100f43225cc2e45 100644 (file)
--- a/resources/views/pages/parts/image-manager.blade.php
+++ b/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>