archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-19 19:13:21 +00:00
Code Issues Projects Releases Wiki Activity

Finished off design and fixing of sort buttons

Browse source
This commit is contained in:
Dan Brown 2023-01-27 16:25:06 +00:00
parent 40e112fc5b
commit 022cbb9c00
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
6 changed files with 54 additions and 35 deletions

18
resources/js/components/book-sort.js
View file

@ -162,7 +162,7 @@ export class BookSort extends Component {
} }
/** /**
* Setup the handlers for the item-level move buttons. * Set up the handlers for the item-level move buttons.
*/ */
setupMoveActions() { setupMoveActions() {
// Handle move button click // Handle move button click
@ -173,20 +173,12 @@ export class BookSort extends Component {
this.runSortAction(sortItem, action); this.runSortAction(sortItem, action);
} }
}); });
// TODO - Probably can remove this
// // Handle action updating on likely use
// this.container.addEventListener('focusin', event => {
// const sortItem = event.target.closest('[data-type="chapter"],[data-type="page"]');
// if (sortItem) {
// this.updateMoveActionState(sortItem);
// }
// });
this.updateMoveActionStateForAll(); this.updateMoveActionStateForAll();
} }
/** /**
* Setup the handlers for the preset sort type buttons. * Set up the handlers for the preset sort type buttons.
*/ */
setupSortPresets() { setupSortPresets() {
let lastSort = ''; let lastSort = '';
@ -235,6 +227,9 @@ export class BookSort extends Component {
this.sortContainer.append(newBookContainer); this.sortContainer.append(newBookContainer);
this.setupBookSortable(newBookContainer); this.setupBookSortable(newBookContainer);
this.updateMoveActionStateForAll(); this.updateMoveActionStateForAll();
const summary = newBookContainer.querySelector('summary');
summary.focus();
}); });
} }
@ -243,8 +238,7 @@ export class BookSort extends Component {
* @param {Element} bookContainer * @param {Element} bookContainer
*/ */
setupBookSortable(bookContainer) { setupBookSortable(bookContainer) {
const sortElems = [bookContainer.querySelector('.sort-list')]; const sortElems = Array.from(bookContainer.querySelectorAll('.sort-list, .sortable-page-sublist'));
sortElems.push(...bookContainer.querySelectorAll('.entity-list-item + ul'));
const bookGroupConfig = { const bookGroupConfig = {
name: 'book', name: 'book',

2
resources/js/services/keyboard-navigation.js
View file

@ -86,7 +86,7 @@ export class KeyboardNavigationHandler {
*/ */
#getFocusable() { #getFocusable() {
const focusable = []; const focusable = [];
const selector = '[tabindex]:not([tabindex="-1"]),[href],button:not([tabindex="-1"]),input:not([type=hidden])'; const selector = '[tabindex]:not([tabindex="-1"]),[href],button:not([tabindex="-1"],[disabled]),input:not([type=hidden])';
for (const container of this.containers) { for (const container of this.containers) {
focusable.push(...container.querySelectorAll(selector)) focusable.push(...container.querySelectorAll(selector))
} }

13
resources/lang/en/entities.php
View file

@ -149,17 +149,18 @@ return [
'books_sort_chapters_first' => 'Chapters First', 'books_sort_chapters_first' => 'Chapters First',
'books_sort_chapters_last' => 'Chapters Last', 'books_sort_chapters_last' => 'Chapters Last',
'books_sort_show_other' => 'Show Other Books', 'books_sort_show_other' => 'Show Other Books',
'books_sort_save' => 'Save New Order',
'books_sort_show_other_desc' => 'Add other books here to include them in the sort operation, and allow easy cross-book reorganisation.', 'books_sort_show_other_desc' => 'Add other books here to include them in the sort operation, and allow easy cross-book reorganisation.',
'books_sort_move_up' => 'Move Up', 'books_sort_move_up' => 'Move Up',
'books_sort_move_down' => 'Move Down', 'books_sort_move_down' => 'Move Down',
'books_sort_move_prev_book' => 'Move To Previous Book', 'books_sort_move_prev_book' => 'Move to Previous Book',
'books_sort_move_next_book' => 'Move To Next Book', 'books_sort_move_next_book' => 'Move to Next Book',
'books_sort_move_prev_chapter' => 'Move Into Previous Chapter', 'books_sort_move_prev_chapter' => 'Move Into Previous Chapter',
'books_sort_move_next_chapter' => 'Move Into Next Chapter', 'books_sort_move_next_chapter' => 'Move Into Next Chapter',
'books_sort_move_book_start' => 'Move To Start of Book', 'books_sort_move_book_start' => 'Move to Start of Book',
'books_sort_move_book_end' => 'Move To End of Book', 'books_sort_move_book_end' => 'Move to End of Book',
'books_sort_move_before_chapter' => 'Move To Before Chapter', 'books_sort_move_before_chapter' => 'Move to Before Chapter',
'books_sort_move_after_chapter' => 'Move To After Chapter', 'books_sort_move_after_chapter' => 'Move to After Chapter',
'books_copy' => 'Copy Book', 'books_copy' => 'Copy Book',
'books_copy_success' => 'Book successfully copied', 'books_copy_success' => 'Book successfully copied',

19
resources/sass/_lists.scss
View file

@ -267,7 +267,7 @@
.entity-list-item > span:first-child { .entity-list-item > span:first-child {
align-self: flex-start; align-self: flex-start;
} }
.sortable-selected .entity-list-item, .sortable-selected .entity-list-item:hover { .sortable-selected, .sortable-selected:hover {
outline: 1px dotted var(--color-primary); outline: 1px dotted var(--color-primary);
background-color: var(--color-primary-light) !important; background-color: var(--color-primary-light) !important;
} }
@ -284,6 +284,7 @@
padding-inline-start: $-m; padding-inline-start: $-m;
} }
li { li {
@include lightDark(background-color, #FFF, #222);
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #DDD, #666); @include lightDark(border-color, #DDD, #666);
margin-top: -1px; margin-top: -1px;
@ -316,6 +317,22 @@ details.sort-box summary .caret-container svg {
details.sort-box[open] summary .caret-container svg { details.sort-box[open] summary .caret-container svg {
transform: rotate(90deg); transform: rotate(90deg);
} }
.sort-box-actions .icon-button {
opacity: .6;
}
.sort-box .flex-container-row:hover .sort-box-actions .icon-button,
.sort-box .flex-container-row:focus-within .sort-box-actions .icon-button {
opacity: 1;
}
.sort-box-actions .icon-button[disabled] {
visibility: hidden;
}
.sort-box-actions .dropdown-menu button[disabled] {
display: none;
}
.sort-list-handle {
cursor: grab;
}
.activity-list-item { .activity-list-item {
padding: $-s 0; padding: $-s 0;

8
resources/views/books/parts/sort-box-actions.blade.php
View file

@ -1,10 +1,12 @@
<div class="sort-box-actions"> <div class="sort-box-actions flex-container-row items-center px-s gap-xxs">
<button type="button" data-move="up" title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button> <button type="button" data-move="up" class="icon-button p-xs text-bigger"
<button type="button" data-move="down" title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
<button type="button" data-move="down" class="icon-button p-xs text-bigger"
title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button> title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
<div class="dropdown-container" component="dropdown"> <div class="dropdown-container" component="dropdown">
<button refs="dropdown@toggle" <button refs="dropdown@toggle"
title="{{ trans('common.more') }}" title="{{ trans('common.more') }}"
class="icon-button p-xs text-bigger"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false"> aria-expanded="false">
@icon('more') @icon('more')

29
resources/views/books/parts/sort-box.blade.php
View file

@ -21,30 +21,35 @@
@foreach($bookChildren as $bookChild) @foreach($bookChildren as $bookChild)
<li class="text-{{ $bookChild->getType() }}" <li class="text-{{ $bookChild->getType() }}"
data-id="{{$bookChild->id}}" data-type="{{ $bookChild->getType() }}" data-id="{{$bookChild->id}}"
data-name="{{ $bookChild->name }}" data-created="{{ $bookChild->created_at->timestamp }}" data-type="{{ $bookChild->getType() }}"
data-updated="{{ $bookChild->updated_at->timestamp }}" tabindex="0"> data-name="{{ $bookChild->name }}"
<div class="text-muted sort-list-handle">@icon('grip')</div> data-created="{{ $bookChild->created_at->timestamp }}"
<div class="entity-list-item"> data-updated="{{ $bookChild->updated_at->timestamp }}"
<span>@icon($bookChild->getType()) </span> tabindex="0">
<div> <div class="flex-container-row items-center">
{{ $bookChild->name }} <div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
<div class="entity-list-item px-none no-hover">
<span>@icon($bookChild->getType()) </span>
<div> <div>
{{ $bookChild->name }}
<div>
</div>
</div> </div>
</div> </div>
@include('books.parts.sort-box-actions')
</div> </div>
@include('books.parts.sort-box-actions')
@if($bookChild->isA('chapter')) @if($bookChild->isA('chapter'))
<ul class="sortable-page-sublist"> <ul class="sortable-page-sublist">
@foreach($bookChild->visible_pages as $page) @foreach($bookChild->visible_pages as $page)
<li class="text-page" <li class="text-page flex-container-row items-center"
data-id="{{$page->id}}" data-type="page" data-id="{{$page->id}}" data-type="page"
data-name="{{ $page->name }}" data-created="{{ $page->created_at->timestamp }}" data-name="{{ $page->name }}" data-created="{{ $page->created_at->timestamp }}"
data-updated="{{ $page->updated_at->timestamp }}" data-updated="{{ $page->updated_at->timestamp }}"
tabindex="0"> tabindex="0">
<div class="text-muted sort-list-handle">@icon('grip')</div> <div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
<div class="entity-list-item"> <div class="entity-list-item px-none no-hover">
<span>@icon('page')</span> <span>@icon('page')</span>
<span>{{ $page->name }}</span> <span>{{ $page->name }}</span>
</div> </div>