Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- Updated search cancel to only show when a search is active.
- Updated gallery image load animation to be much faster.
This commit is contained in:
Dan Brown 2023-05-28 11:37:49 +01:00
parent 946c9ae804
commit 89d6d862fa
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lang/en/components.php
View File

@ -6,6 +6,8 @@ return [
// Image Manager // Image Manager
'image_select' => 'Image Select', 'image_select' => 'Image Select',
'image_list' => 'Image List',
'image_details' => 'Image Details',
'image_upload' => 'Upload Image', 'image_upload' => 'Upload Image',
'image_intro' => 'Here you can select and manage images that have been previously uploaded to the system.', '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.', 'image_intro_upload' => 'Upload a new image by dragging an image file into this window, or by using the "Upload Image" button above.',

2
resources/js/components/image-manager.js
View File

@ -53,6 +53,7 @@ export class ImageManager extends Component {
this.searchForm.addEventListener('submit', event => { this.searchForm.addEventListener('submit', event => {
this.resetListView(); this.resetListView();
this.loadGallery(); this.loadGallery();
this.cancelSearch.toggleAttribute('hidden', !this.searchInput.value);
event.preventDefault(); event.preventDefault();
}); });
@ -201,6 +202,7 @@ export class ImageManager extends Component {
resetSearchView() { resetSearchView() {
this.searchInput.value = ''; this.searchInput.value = '';
this.cancelSearch.toggleAttribute('hidden', true);
} }
resetEditForm() { resetEditForm() {

2
resources/sass/_animations.scss
View File

@ -2,7 +2,7 @@
.anim.fadeIn { .anim.fadeIn {
opacity: 0; opacity: 0;
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: 180ms; animation-duration: 120ms;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }

2
resources/views/pages/parts/image-manager-list.blade.php
View File

@ -4,7 +4,7 @@
option:event-emit-select:name="image" option:event-emit-select:name="image"
option:event-emit-select:data="{{ json_encode($image) }}" option:event-emit-select:data="{{ json_encode($image) }}"
class="image anim fadeIn text-link" 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'] }}" <img src="{{ $image->thumbs['gallery'] }}"
alt="{{ $image->name }}" alt="{{ $image->name }}"
width="150" width="150"

5
resources/views/pages/parts/image-manager.blade.php
View File

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