Skip to content

Commit 022cbb9

Browse files
ssddanbrownssddanbrown
committed
Finished off design and fixing of sort buttons
1 parent 40e112f commit 022cbb9

File tree

6 files changed

+54
-35
lines changed

6 files changed

+54
-35
lines changed

‎resources/js/components/book-sort.js‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ export class BookSort extends Component {
162162
}
163163

164164
/**
165-
* Setup the handlers for the item-level move buttons.
165+
* Set up the handlers for the item-level move buttons.
166166
*/
167167
setupMoveActions() {
168168
// Handle move button click
@@ -173,20 +173,12 @@ export class BookSort extends Component {
173173
this.runSortAction(sortItem, action);
174174
}
175175
});
176-
// TODO - Probably can remove this
177-
// // Handle action updating on likely use
178-
// this.container.addEventListener('focusin', event => {
179-
// const sortItem = event.target.closest('[data-type="chapter"],[data-type="page"]');
180-
// if (sortItem) {
181-
// this.updateMoveActionState(sortItem);
182-
// }
183-
// });
184176

185177
this.updateMoveActionStateForAll();
186178
}
187179

188180
/**
189-
* Setup the handlers for the preset sort type buttons.
181+
* Set up the handlers for the preset sort type buttons.
190182
*/
191183
setupSortPresets() {
192184
let lastSort = '';
@@ -235,6 +227,9 @@ export class BookSort extends Component {
235227
this.sortContainer.append(newBookContainer);
236228
this.setupBookSortable(newBookContainer);
237229
this.updateMoveActionStateForAll();
230+
231+
const summary = newBookContainer.querySelector('summary');
232+
summary.focus();
238233
});
239234
}
240235

@@ -243,8 +238,7 @@ export class BookSort extends Component {
243238
* @param {Element} bookContainer
244239
*/
245240
setupBookSortable(bookContainer) {
246-
const sortElems = [bookContainer.querySelector('.sort-list')];
247-
sortElems.push(...bookContainer.querySelectorAll('.entity-list-item + ul'));
241+
const sortElems = Array.from(bookContainer.querySelectorAll('.sort-list, .sortable-page-sublist'));
248242

249243
const bookGroupConfig = {
250244
name: 'book',

‎resources/js/services/keyboard-navigation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export class KeyboardNavigationHandler {
8686
*/
8787
#getFocusable() {
8888
const focusable = [];
89-
const selector = '[tabindex]:not([tabindex="-1"]),[href],button:not([tabindex="-1"]),input:not([type=hidden])';
89+
const selector = '[tabindex]:not([tabindex="-1"]),[href],button:not([tabindex="-1"],[disabled]),input:not([type=hidden])';
9090
for (const container of this.containers) {
9191
focusable.push(...container.querySelectorAll(selector))
9292
}

‎resources/lang/en/entities.php‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -149,17 +149,18 @@
149149
'books_sort_chapters_first' => 'Chapters First',
150150
'books_sort_chapters_last' => 'Chapters Last',
151151
'books_sort_show_other' => 'Show Other Books',
152+
'books_sort_save' => 'Save New Order',
152153
'books_sort_show_other_desc' => 'Add other books here to include them in the sort operation, and allow easy cross-book reorganisation.',
153154
'books_sort_move_up' => 'Move Up',
154155
'books_sort_move_down' => 'Move Down',
155-
'books_sort_move_prev_book' => 'Move To Previous Book',
156-
'books_sort_move_next_book' => 'Move To Next Book',
156+
'books_sort_move_prev_book' => 'Move to Previous Book',
157+
'books_sort_move_next_book' => 'Move to Next Book',
157158
'books_sort_move_prev_chapter' => 'Move Into Previous Chapter',
158159
'books_sort_move_next_chapter' => 'Move Into Next Chapter',
159-
'books_sort_move_book_start' => 'Move To Start of Book',
160-
'books_sort_move_book_end' => 'Move To End of Book',
161-
'books_sort_move_before_chapter' => 'Move To Before Chapter',
162-
'books_sort_move_after_chapter' => 'Move To After Chapter',
160+
'books_sort_move_book_start' => 'Move to Start of Book',
161+
'books_sort_move_book_end' => 'Move to End of Book',
162+
'books_sort_move_before_chapter' => 'Move to Before Chapter',
163+
'books_sort_move_after_chapter' => 'Move to After Chapter',
163164
'books_copy' => 'Copy Book',
164165
'books_copy_success' => 'Book successfully copied',
165166

‎resources/sass/_lists.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@
267267
.entity-list-item > span:first-child {
268268
align-self: flex-start;
269269
}
270-
.sortable-selected .entity-list-item, .sortable-selected .entity-list-item:hover {
270+
.sortable-selected, .sortable-selected:hover {
271271
outline: 1px dotted var(--color-primary);
272272
background-color: var(--color-primary-light) !important;
273273
}
@@ -284,6 +284,7 @@
284284
padding-inline-start: $-m;
285285
}
286286
li {
287+
@include lightDark(background-color, #FFF, #222);
287288
border: 1px solid;
288289
@include lightDark(border-color, #DDD, #666);
289290
margin-top: -1px;
@@ -316,6 +317,22 @@ details.sort-box summary .caret-container svg {
316317
details.sort-box[open] summary .caret-container svg {
317318
transform: rotate(90deg);
318319
}
320+
.sort-box-actions .icon-button {
321+
opacity: .6;
322+
}
323+
.sort-box .flex-container-row:hover .sort-box-actions .icon-button,
324+
.sort-box .flex-container-row:focus-within .sort-box-actions .icon-button {
325+
opacity: 1;
326+
}
327+
.sort-box-actions .icon-button[disabled] {
328+
visibility: hidden;
329+
}
330+
.sort-box-actions .dropdown-menu button[disabled] {
331+
display: none;
332+
}
333+
.sort-list-handle {
334+
cursor: grab;
335+
}
319336

320337
.activity-list-item {
321338
padding: $-s 0;

‎resources/views/books/parts/sort-box-actions.blade.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
<div class="sort-box-actions">
2-
<button type="button" data-move="up" title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
3-
<button type="button" data-move="down"
1+
<div class="sort-box-actions flex-container-row items-center px-s gap-xxs">
2+
<button type="button" data-move="up" class="icon-button p-xs text-bigger"
3+
title="{{ trans('entities.books_sort_move_up') }}">@icon('chevron-up')</button>
4+
<button type="button" data-move="down" class="icon-button p-xs text-bigger"
45
title="{{ trans('entities.books_sort_move_down') }}">@icon('chevron-down')</button>
56
<div class="dropdown-container" component="dropdown">
67
<button refs="dropdown@toggle"
78
title="{{ trans('common.more') }}"
9+
class="icon-button p-xs text-bigger"
810
aria-haspopup="true"
911
aria-expanded="false">
1012
@icon('more')

‎resources/views/books/parts/sort-box.blade.php‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,35 @@
2121

2222
@foreach($bookChildren as $bookChild)
2323
<li class="text-{{ $bookChild->getType() }}"
24-
data-id="{{$bookChild->id}}" data-type="{{ $bookChild->getType() }}"
25-
data-name="{{ $bookChild->name }}" data-created="{{ $bookChild->created_at->timestamp }}"
26-
data-updated="{{ $bookChild->updated_at->timestamp }}" tabindex="0">
27-
<div class="text-muted sort-list-handle">@icon('grip')</div>
28-
<div class="entity-list-item">
29-
<span>@icon($bookChild->getType()) </span>
30-
<div>
31-
{{ $bookChild->name }}
24+
data-id="{{$bookChild->id}}"
25+
data-type="{{ $bookChild->getType() }}"
26+
data-name="{{ $bookChild->name }}"
27+
data-created="{{ $bookChild->created_at->timestamp }}"
28+
data-updated="{{ $bookChild->updated_at->timestamp }}"
29+
tabindex="0">
30+
<div class="flex-container-row items-center">
31+
<div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
32+
<div class="entity-list-item px-none no-hover">
33+
<span>@icon($bookChild->getType()) </span>
3234
<div>
35+
{{ $bookChild->name }}
36+
<div>
3337

38+
</div>
3439
</div>
3540
</div>
41+
@include('books.parts.sort-box-actions')
3642
</div>
37-
@include('books.parts.sort-box-actions')
3843
@if($bookChild->isA('chapter'))
3944
<ul class="sortable-page-sublist">
4045
@foreach($bookChild->visible_pages as $page)
41-
<li class="text-page"
46+
<li class="text-page flex-container-row items-center"
4247
data-id="{{$page->id}}" data-type="page"
4348
data-name="{{ $page->name }}" data-created="{{ $page->created_at->timestamp }}"
4449
data-updated="{{ $page->updated_at->timestamp }}"
4550
tabindex="0">
46-
<div class="text-muted sort-list-handle">@icon('grip')</div>
47-
<div class="entity-list-item">
51+
<div class="text-muted sort-list-handle px-s py-m">@icon('grip')</div>
52+
<div class="entity-list-item px-none no-hover">
4853
<span>@icon('page')</span>
4954
<span>{{ $page->name }}</span>
5055
</div>

0 commit comments

Comments
 (0)