Adds focused and located state for items list. #693.
This commit is contained in:
parent
33902428a8
commit
3a6199f975
|
@ -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 -->
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue