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

Added multi-select to book-sort interface

Browse Source 
As discussed in #2064

Closes #2067
This commit is contained in:
Dan Brown
2020-04-27 16:53:27 +01:00
parent 4ef362143b
commit 898d0b5817
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/book-sort.js
View File

@ -1,4 +1,4 @@
import Sortable from "sortablejs"; import {Sortable, MultiDrag} from "sortablejs";
// Auto sort control // Auto sort control
const sortOperations = { const sortOperations = {
@ -43,6 +43,7 @@ class BookSort {
this.input = elem.querySelector('[book-sort-input]'); this.input = elem.querySelector('[book-sort-input]');
const initialSortBox = elem.querySelector('.sort-box'); const initialSortBox = elem.querySelector('.sort-box');
Sortable.mount(new MultiDrag());
this.setupBookSortable(initialSortBox); this.setupBookSortable(initialSortBox);
this.setupSortPresets(); this.setupSortPresets();
@ -134,6 +135,9 @@ class BookSort {
onSort: this.updateMapInput.bind(this), onSort: this.updateMapInput.bind(this),
dragClass: 'bg-white', dragClass: 'bg-white',
ghostClass: 'primary-background-light', ghostClass: 'primary-background-light',
multiDrag: true,
multiDragKey: 'CTRL',
selectedClass: 'sortable-selected',
}); });
} }
} }

4
resources/sass/_lists.scss
View File

@ -275,6 +275,10 @@
.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 {
outline: 1px dotted var(--color-primary);
background-color: var(--color-primary-light) !important;
}
.entity-list-item > div { .entity-list-item > div {
display: block; display: block;
flex: 1; flex: 1;