Adds focused and located state for items list. #693.

This commit is contained in:
mateuswetah 2023-01-10 12:19:44 -03:00
parent 33902428a8
commit 3a6199f975
2 changed files with 19 additions and 1 deletions

View File

@ -1406,7 +1406,11 @@
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
v-for="(item, index) of items"> v-for="(item, index) of items">
<div <div
:class="{ 'selected-record': getSelectedItemChecked(item.id) == true }" :class="{
'selected-record': getSelectedItemChecked(item.id) == true,
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id),
'non-focused-item': selectedMarkerIndexes.length && selectedMarkerIndexes.findIndex((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex].item.id == item.id) < 0
}"
class="tainacan-record"> class="tainacan-record">
<!-- Checkbox --> <!-- Checkbox -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->

View File

@ -26,6 +26,20 @@
.tainacan-record { .tainacan-record {
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
max-width: 100%; max-width: 100%;
opacity: 1.0;
transition: 1.0;
&.non-located-item {
opacity: 0.35;
}
&.non-focused-item {
opacity: 0.5;
&:hover,
&:focus {
opacity: 1.0;
}
}
.tainacan-record-item-thumbnail, .tainacan-record-item-thumbnail,
img { img {