webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00
Code Activity

Image manager: Redesigned header bar(s)

Browse Source
This commit is contained in:
Dan Brown
2023-05-26 14:30:59 +01:00
parent e467324658
commit 6c91e09c73
6 changed files with 123 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/views/pages/edit.blade.php
View File

@@ -17,4 +17,9 @@
@include('pages.parts.image-manager', ['uploaded_to' => $page->id])
@include('pages.parts.code-editor')
@include('entities.selector-popup')
<script nonce="{{ $cspNonce }}" type="module">
window.$components.first('image-manager').show((image) => {
console.log(image);
}, 'gallery');
</script>
@stop

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

@@ -18,6 +18,9 @@
</button>
</div>
@endforeach
@if(count($images) === 0)
<p class="m-m text-bigger italic text-muted">{{ trans('common.no_items') }}</p>
@endif
@if($hasMore)
<div class="load-more">
<button type="button" class="button small outline">{{ trans('components.image_load_more') }}</button>

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

@@ -25,39 +25,49 @@
</div>
<div refs="dropzone@drop-target" class="flex-fill image-manager-body">
<div class="image-manager-content">
<div role="tablist" class="image-manager-header grid third no-gap">
<button refs="image-manager@filterTabs"
data-filter="all"
role="tab"
aria-selected="true"
type="button" class="tab-item" title="{{ trans('components.image_all_title') }}">@icon('images') {{ trans('components.image_all') }}</button>
<button refs="image-manager@filterTabs"
data-filter="book"
role="tab"
aria-selected="false"
type="button" class="tab-item" title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'svg-icon']) {{ trans('entities.book') }}</button>
<button refs="image-manager@filterTabs"
data-filter="page"
role="tab"
aria-selected="false"
type="button" class="tab-item" title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'svg-icon']) {{ trans('entities.page') }}</button>
</div>
<div>
<form refs="image-manager@searchForm" class="contained-search-box">
<input refs="image-manager@searchInput"
placeholder="{{ trans('components.image_search_hint') }}"
type="text">
<button refs="image-manager@cancelSearch"
title="{{ trans('common.search_clear') }}"
type="button"
class="cancel">@icon('close')</button>
<button type="submit" class="primary-background text-white"
title="{{ trans('common.search') }}">@icon('search')</button>
</form>
<div class="image-manager-filter-bar flex-container-row justify-space-between">
<div class="primary-background image-manager-filter-bar-bg"></div>
<div>
<form refs="image-manager@searchForm" class="contained-search-box">
<input refs="image-manager@searchInput"
placeholder="{{ trans('components.image_search_hint') }}"
type="text">
<button refs="image-manager@cancelSearch"
title="{{ trans('common.search_clear') }}"
type="button"
class="cancel">@icon('close')</button>
<button type="submit"
title="{{ trans('common.search') }}">@icon('search')</button>
</form>
</div>
<div class="tab-container bordered tab-primary">
<div role="tablist" class="image-manager-filters flex-container-row">
<button refs="image-manager@filterTabs"
data-filter="all"
role="tab"
aria-selected="true"
type="button"
title="{{ trans('components.image_all_title') }}">@icon('images')</button>
<button refs="image-manager@filterTabs"
data-filter="book"
role="tab"
aria-selected="false"
type="button"
title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'svg-icon'])</button>
<button refs="image-manager@filterTabs"
data-filter="page"
role="tab"
aria-selected="false"
type="button"
title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'svg-icon'])</button>
</div>
</div>
</div>
<div refs="image-manager@listContainer" class="image-manager-list"></div>
<div refs="image-manager@loadMore" class="load-more" hidden>
<button type="button" class="button small outline">Load More</button>
</div>
</div>
<div class="image-manager-sidebar flex-container-column">