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

Improved shelf book management interface

- Added ability to search books list (Local simple text match).
- Added handles, hover-states and cursor states for better user
  interaction and clearer use of drag & drop.
- Improved styles for dark mode.
- Converted shelf sort component to newer component format.
- Modernized shelf controller code a little.

Related to #3266
This commit is contained in:
Dan Brown
2022-07-24 12:23:25 +01:00
parent 975ba4f8d8
commit b0adb74d62
6 changed files with 102 additions and 48 deletions

View File

@@ -10,15 +10,17 @@
@include('form.textarea', ['name' => 'description'])
</div>
<div shelf-sort class="grid half gap-xl">
<div component="shelf-sort" class="grid half gap-xl">
<div class="form-group">
<label for="books">{{ trans('entities.shelves_books') }}</label>
<input type="hidden" id="books-input" name="books"
<input refs="shelf-sort@input" type="hidden" name="books"
value="{{ isset($shelf) ? $shelf->visibleBooks->implode('id', ',') : '' }}">
<div class="scroll-box" shelf-sort-assigned-books data-instruction="{{ trans('entities.shelves_drag_books') }}">
<div class="scroll-box-header-item">{{ trans('entities.shelves_drag_books') }}</div>
<div refs="shelf-sort@shelf-book-list" class="scroll-box">
@if (count($shelf->visibleBooks ?? []) > 0)
@foreach ($shelf->visibleBooks as $book)
<div data-id="{{ $book->id }}" class="scroll-box-item">
<div class="handle">@icon('grip')</div>
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
</div>
@endforeach
@@ -27,9 +29,11 @@
</div>
<div class="form-group">
<label for="books">{{ trans('entities.shelves_add_books') }}</label>
<div class="scroll-box">
<input type="text" refs="shelf-sort@book-search" class="scroll-box-search" placeholder="{{ trans('common.search') }}">
<div refs="shelf-sort@all-book-list" class="scroll-box">
@foreach ($books as $book)
<div data-id="{{ $book->id }}" class="scroll-box-item">
<div class="handle">@icon('grip')</div>
<a href="{{ $book->getUrl() }}" class="text-book">@icon('book'){{ $book->name }}</a>
</div>
@endforeach