From 71a09bcf6eff97ae2017510d30bef8db37406d3c Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 17 Feb 2023 15:05:28 +0000 Subject: [PATCH] Started accessible controls for shelf book sort Added buttons and fit to design. Added new icon variations to support. Extracted book item to own view and setup for future auto sorts. --- app/Http/Controllers/BookshelfController.php | 4 +- resources/icons/add-small.svg | 1 + resources/icons/remove.svg | 1 + resources/sass/_components.scss | 77 +++++++++++++++++++ resources/sass/styles.scss | 65 ---------------- resources/views/shelves/parts/form.blade.php | 24 ++---- .../parts/shelf-sort-book-item.blade.php | 18 +++++ 7 files changed, 107 insertions(+), 83 deletions(-) create mode 100644 resources/icons/add-small.svg create mode 100644 resources/icons/remove.svg create mode 100644 resources/views/shelves/parts/shelf-sort-book-item.blade.php diff --git a/app/Http/Controllers/BookshelfController.php b/app/Http/Controllers/BookshelfController.php index 537ea915b..d4642be78 100644 --- a/app/Http/Controllers/BookshelfController.php +++ b/app/Http/Controllers/BookshelfController.php @@ -64,7 +64,7 @@ class BookshelfController extends Controller public function create() { $this->checkPermission('bookshelf-create-all'); - $books = Book::visible()->orderBy('name')->get(['name', 'id', 'slug']); + $books = Book::visible()->orderBy('name')->get(['name', 'id', 'slug', 'created_at', 'updated_at']); $this->setPageTitle(trans('entities.shelves_create')); return view('shelves.create', ['books' => $books]); @@ -140,7 +140,7 @@ class BookshelfController extends Controller $this->checkOwnablePermission('bookshelf-update', $shelf); $shelfBookIds = $shelf->books()->get(['id'])->pluck('id'); - $books = Book::visible()->whereNotIn('id', $shelfBookIds)->orderBy('name')->get(['name', 'id', 'slug']); + $books = Book::visible()->whereNotIn('id', $shelfBookIds)->orderBy('name')->get(['name', 'id', 'slug', 'created_at', 'updated_at']); $this->setPageTitle(trans('entities.shelves_edit_named', ['name' => $shelf->getShortName()])); diff --git a/resources/icons/add-small.svg b/resources/icons/add-small.svg new file mode 100644 index 000000000..81aaf4f65 --- /dev/null +++ b/resources/icons/add-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/icons/remove.svg b/resources/icons/remove.svg new file mode 100644 index 000000000..088c34a5d --- /dev/null +++ b/resources/icons/remove.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index 2150f6d07..ac0d913aa 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -1050,4 +1050,81 @@ $btt-size: 40px; vertical-align: top; line-height: 2; } +} + +// Sortable scroll boxes +.scroll-box { + list-style: none; + padding: 0; + margin: 0; + max-height: 250px; + overflow-y: scroll; + border: 1px solid; + @include lightDark(border-color, #DDD, #000); + border-radius: 3px; + min-height: 20px; + @include lightDark(background-color, #EEE, #000); +} +.scroll-box-item { + border-bottom: 1px solid; + border-top: 1px solid; + @include lightDark(border-color, #DDD, #000); + margin-top: -1px; + @include lightDark(background-color, #FFF, #222); + display: flex; + align-items: flex-start; + padding: 1px; + &:last-child { + border-bottom: 0; + } + &:hover { + cursor: pointer; + @include lightDark(background-color, #f8f8f8, #333); + } + .handle { + color: #AAA; + cursor: grab; + } + .handle svg { + margin: 0; + } + > * { + padding: $-xs $-m; + } + .handle + * { + padding-left: 0; + } + &:hover .handle { + @include lightDark(color, #444, #FFF); + } + a:hover { + text-decoration: none; + } +} + +input.scroll-box-search, .scroll-box-header-item { + font-size: 0.8rem; + padding: $-xs $-m; + border: 1px solid; + @include lightDark(border-color, #DDD, #000); + @include lightDark(background-color, #FFF, #222); + margin-bottom: -1px; + border-radius: 3px 3px 0 0; + width: 100%; + max-width: 100%; + height: auto; + line-height: 1.4; + color: #666; +} + +.scroll-box-search + .scroll-box, +.scroll-box-header-item + .scroll-box { + border-radius: 0 0 3px 3px; +} + +.scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] { + display: none; +} +.scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"] { + display: none; } \ No newline at end of file diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss index 668cb5c85..0f4ec7041 100644 --- a/resources/sass/styles.scss +++ b/resources/sass/styles.scss @@ -198,71 +198,6 @@ $loadingSize: 10px; } } -.scroll-box { - max-height: 250px; - overflow-y: scroll; - border: 1px solid; - @include lightDark(border-color, #DDD, #000); - border-radius: 3px; - min-height: 20px; - @include lightDark(background-color, #EEE, #000); -} -.scroll-box-item { - border-bottom: 1px solid; - border-top: 1px solid; - @include lightDark(border-color, #DDD, #000); - margin-top: -1px; - @include lightDark(background-color, #FFF, #222); - display: flex; - padding: 1px; - &:last-child { - border-bottom: 0; - } - &:hover { - cursor: pointer; - @include lightDark(background-color, #f8f8f8, #333); - } - .handle { - color: #AAA; - cursor: grab; - } - .handle svg { - margin: 0; - } - > * { - padding: $-xs $-m; - } - .handle + * { - padding-left: 0; - } - &:hover .handle { - @include lightDark(color, #444, #FFF); - } - a:hover { - text-decoration: none; - } -} - -input.scroll-box-search, .scroll-box-header-item { - font-size: 0.8rem; - padding: $-xs $-m; - border: 1px solid; - @include lightDark(border-color, #DDD, #000); - @include lightDark(background-color, #FFF, #222); - margin-bottom: -1px; - border-radius: 3px 3px 0 0; - width: 100%; - max-width: 100%; - height: auto; - line-height: 1.4; - color: #666; -} - -.scroll-box-search + .scroll-box, -.scroll-box-header-item + .scroll-box { - border-radius: 0 0 3px 3px; -} - .fullscreen { border:0; position:fixed; diff --git a/resources/views/shelves/parts/form.blade.php b/resources/views/shelves/parts/form.blade.php index 364f8e0be..02cea64ff 100644 --- a/resources/views/shelves/parts/form.blade.php +++ b/resources/views/shelves/parts/form.blade.php @@ -16,28 +16,20 @@
{{ trans('entities.shelves_drag_books') }}
-
- @if (count($shelf->visibleBooks ?? []) > 0) - @foreach ($shelf->visibleBooks as $book) -
-
@icon('grip')
- @icon('book'){{ $book->name }} -
- @endforeach - @endif -
+
-
+
    @foreach ($books as $book) -
    -
    @icon('grip')
    - @icon('book'){{ $book->name }} -
    + @include('shelves.parts.shelf-sort-book-item', ['book' => $book]) @endforeach -
+
diff --git a/resources/views/shelves/parts/shelf-sort-book-item.blade.php b/resources/views/shelves/parts/shelf-sort-book-item.blade.php new file mode 100644 index 000000000..25aeecdb8 --- /dev/null +++ b/resources/views/shelves/parts/shelf-sort-book-item.blade.php @@ -0,0 +1,18 @@ +
  • +
    @icon('grip')
    + @icon('book'){{ $book->name }} +
    + + + + +
    +
    • \ No newline at end of file