gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 39320: (QA follow-up): Add an empty drop area placeholder 

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Pedro Amorim 2025-10-22 09:13:53 +00:00 committed by Lucas Gass
parent 1a5de8d08f
commit 5a133c8756
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
1 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/ModuleDashboard.vue
View File

@ -11,6 +11,12 @@
</div>
<div class="row">
<div class="col-md-6 dashboard-left-col">
<div
v-if="selectedWidgetsLeft.length === 0"
class="empty-placeholder"
>
{{ $__("Drop widgets here") }}
</div>
<draggable
:ghost="true"
@drag="handleDrag"
@ -18,6 +24,12 @@
:list="selectedWidgetsLeft"
group="widgets"
handle=".widget-drag-handle"
:class="[
'dragArea',
'list-group',
'w-full',
{ 'empty-drag-area': selectedWidgetsLeft.length === 0 },
]"
>
<component
v-for="(widget, index) in selectedWidgetsLeft"
@ -32,6 +44,12 @@
</draggable>
</div>
<div class="col-md-6 dashboard-right-col">
<div
v-if="selectedWidgetsRight.length === 0"
class="empty-placeholder"
>
{{ $__("Drop widgets here") }}
</div>
<draggable
:ghost="true"
@drag="handleDrag"
@ -39,6 +57,12 @@
:list="selectedWidgetsRight"
group="widgets"
handle=".widget-drag-handle"
:class="[
'dragArea',
'list-group',
'w-full',
{ 'empty-drag-area': selectedWidgetsRight.length === 0 },
]"
>
<component
v-for="(widget, index) in selectedWidgetsRight"
@ -253,4 +277,31 @@ export default {
.sortable-ghost.sortable-chosen > * {
visibility: hidden;
}
.dashboard-right-col,
.dashboard-left-col {
position: relative;
}
.empty-placeholder {
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: 150px;
background-color: #fafafa;
color: #999;
font-style: italic;
font-size: 1.2rem;
pointer-events: none;
border: 2px dotted #ccc;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
z-index: 2;
}
.empty-drag-area {
min-height: 150px;
}
</style>