Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-01-03 00:06:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix:Libraries table to use draggable handle for items so they can be clicked and edited #839

Browse Source
This commit is contained in:
advplyr 2022-07-18 17:44:01 -05:00
parent 9e7b84f289
commit 1c9e56ce2e
3 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/assets/draggable.css
View File

@ -1,34 +1,40 @@
.flip-list-move { .flip-list-move {
transition: transform 0.5s; transition: transform 0.5s;
} }
.no-move { .no-move {
transition: transform 0s; transition: transform 0s;
} }
.ghost { .ghost {
opacity: 0.5; opacity: 0.5;
background-color: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.25);
} }
.list-group { .list-group {
min-height: 30px; min-height: 30px;
} }
#librariesTable .item {
cursor: n-resize;
}
.drag-handle { .drag-handle {
cursor: n-resize; cursor: n-resize;
} }
.list-group-item:not(.exclude) { .list-group-item:not(.exclude) {
cursor: n-resize; cursor: n-resize;
} }
.list-group-item.exclude { .list-group-item.exclude {
cursor: not-allowed; cursor: not-allowed;
} }
.list-group-item:not(.ghost):not(.exclude):hover { .list-group-item:not(.ghost):not(.exclude):hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
.list-group-item:nth-child(even):not(.ghost):not(.exclude) { .list-group-item:nth-child(even):not(.ghost):not(.exclude) {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.list-group-item:nth-child(even):not(.ghost):not(.exclude):hover { .list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
@ -36,6 +42,7 @@
.list-group-item.exclude:not(.ghost) { .list-group-item.exclude:not(.ghost) {
background-color: rgba(255, 0, 0, 0.25); background-color: rgba(255, 0, 0, 0.25);
} }
.list-group-item.exclude:not(.ghost):hover { .list-group-item.exclude:not(.ghost):hover {
background-color: rgba(223, 0, 0, 0.25); background-color: rgba(223, 0, 0, 0.25);
} }

2
client/components/tables/library/LibrariesTable.vue
View File

@ -6,7 +6,7 @@
<span class="material-icons" style="font-size: 1.4rem">add</span> <span class="material-icons" style="font-size: 1.4rem">add</span>
</div> </div>
</div> </div>
<draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag"> <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
<template v-for="library in libraryCopies"> <template v-for="library in libraryCopies">
<div :key="library.id" class="item"> <div :key="library.id" class="item">
<tables-library-item :library="library" :selected="currentLibraryId === library.id" :dragging="drag" @edit="editLibrary" @click="setLibrary" /> <tables-library-item :library="library" :selected="currentLibraryId === library.id" :dragging="drag" @edit="editLibrary" @click="setLibrary" />

2
client/components/tables/library/LibraryItem.vue
View File

@ -23,7 +23,7 @@
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /> <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg> </svg>
</div> </div>
<span class="material-icons text-xl text-gray-400 hover:text-gray-50 ml-4">reorder</span> <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-4">reorder</span>
<!-- For mobile --> <!-- For mobile -->
<modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="mobileMenuItems" @action="mobileMenuAction" /> <modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="mobileMenuItems" @action="mobileMenuAction" />