From 3a6199f975ed56d3751b3e55bb3fb72afaa2625b Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 10 Jan 2023 12:19:44 -0300
Subject: [PATCH] Adds focused and located state for items list. #693.

---
 src/views/admin/components/lists/items-list.vue |  6 +++++-
 src/views/admin/scss/_view-mode-map.scss        | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index bc672b075..197ac33de 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -1406,7 +1406,11 @@
                             :data-tainacan-item-id="item.id"
                             v-for="(item, index) of items">
                         <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">
                             <!-- Checkbox -->
                             <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
diff --git a/src/views/admin/scss/_view-mode-map.scss b/src/views/admin/scss/_view-mode-map.scss
index 31177a75a..d23fc5111 100644
--- a/src/views/admin/scss/_view-mode-map.scss
+++ b/src/views/admin/scss/_view-mode-map.scss
@@ -26,6 +26,20 @@
             .tainacan-record {
                 margin-bottom: 0.125rem;
                 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,
                 img {