From f0929ad628031f7f8ad89062af62a58982d12f6f Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 20 Jan 2023 09:50:47 -0300
Subject: [PATCH] More improvements to map view mode. #693.

---
 .../admin/components/lists/items-list.vue     | 26 +++++++--------
 src/views/admin/scss/_view-mode-map.scss      | 28 ++++++++--------
 src/views/admin/scss/_view-mode-records.scss  |  2 ++
 .../theme-search/components/view-mode-map.vue | 32 ++++++++-----------
 4 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index 2633854c8..a00462588 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -1531,7 +1531,7 @@
                             v-for="(itemLocation, index) of itemsLocations"
                             :key="index"
                             :lat-lng="itemLocation.location"
-                            :opacity="selectedMarkerIndexes.length > 0 && !selectedMarkerIndexes.includes(index) ? 0.35 : 1.0"
+                            :opacity="(mapSelectedItemId && itemLocation.item.id != mapSelectedItemId) ? 0.35 : 1.0"
                             @click="showItemByLocation(index)">
                         <l-tooltip>
                             <div
@@ -1595,7 +1595,7 @@
                     <l-control
                             :disable-scroll-propagation="true"
                             :disable-click-propagation="true"
-                            v-if="selectedMarkerIndexes.length"
+                            v-if="selectedMarkerIndexes.length || mapSelectedItemId"
                             position="topleft"
                             class="tainacan-records-container tainacan-records-container--map">
                         <button 
@@ -1614,20 +1614,15 @@
                         </button>
                         <transition-group 
                                 tag="ul"
-                                name="item-appear">
+                                name="appear">
                             <li 
                                     :key="item.id"
                                     :data-tainacan-item-id="item.id"
-                                    v-for="item of items.filter(anItem => selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex] && itemsLocations[aSelectedMarkerIndex].item.id == anItem.id))">
-                                <div 
-                                        :class="{
-                                            'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
-                                        }"
-                                        class="tainacan-record">
+                                    v-for="item of items.filter(anItem => mapSelectedItemId == anItem.id)">
+                                <div class="tainacan-record">
 
                                     <!-- Title -->
-                                    <div
-                                            class="metadata-title">
+                                    <div class="metadata-title">
                                         <span 
                                                 v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
                                                 class="icon has-text-gray"
@@ -1688,7 +1683,7 @@
                                         <a
                                                 id="button-show-location"
                                                 v-if="itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)"
-                                                :aria-label="$i18n.get('label_show_item_location_on_map')" 
+                                                :aria-label="$i18n.get('label_show_item_location_on_map')"
                                                 @click.prevent.stop="showLocationsByItem(item)">
                                             <span
                                                     v-if="selectedGeocoordinateMetadatum.slug"
@@ -1878,7 +1873,8 @@ export default {
             longitude: -51.31668,
             mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
             mapTileAttribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-            selectedMarkerIndexes: []
+            selectedMarkerIndexes: [],
+            mapSelectedItemId: false
         }
     },
     computed: {
@@ -2431,6 +2427,7 @@ export default {
             return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
         },
         clearSelectedMarkers() {
+            this.mapSelectedItemId = false;
             this.selectedMarkerIndexes = [];
             if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
                 if (this.itemsLocations.length == 1)
@@ -2440,13 +2437,16 @@ export default {
             }
         },
         showItemByLocation(index) {
+            this.mapSelectedItemId = this.itemsLocations[index].item.id;
             this.selectedMarkerIndexes = [];
             this.selectedMarkerIndexes.push(index);
             if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
                 this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
         },
         showLocationsByItem(item) {
+            this.mapSelectedItemId = item.id;
             this.selectedMarkerIndexes = [];
+
             const selectedLocationsByItem = this.itemsLocations.filter((anItemLocation, index) => {
                 if (anItemLocation.item.id == item.id)
                     this.selectedMarkerIndexes.push(index);
diff --git a/src/views/admin/scss/_view-mode-map.scss b/src/views/admin/scss/_view-mode-map.scss
index e9af5d110..484ac74af 100644
--- a/src/views/admin/scss/_view-mode-map.scss
+++ b/src/views/admin/scss/_view-mode-map.scss
@@ -1,14 +1,14 @@
 .tainacan-leaflet-map-container {
-    display: flex;
-    flex-wrap: nowrap;
     border: 1px solid var(--tainacan-input-border-color);
     border-radius: 3px;
+    height: 60vh;
 
     #tainacan-admin-view-mode-map,
     #tainacan-view-mode-map {
         position: relative;
         border: none;
         border-left: 1px solid var(--tainacan-input-border-color);
+        float: right;
 
         /deep/ .leaflet-marker-pane {
             filter: hue-rotate(-22deg);
@@ -58,7 +58,8 @@
     }
 
     .tainacan-records-container--map {
-        height: calc(60vh - 72px);
+        height: auto;
+        max-height: calc(60vh - 72px);
         overflow-y: auto;
         overflow-x: hidden;
         width: 286px;
@@ -123,14 +124,11 @@
                     }
                 }
 
-                &.non-located-item {
-                    opacity: 0.35;
-
-                    &:hover,
-                    &:focus {
-                        opacity: 1.0;
-                    } 
+                #button-show-location {
+                    color: var(--tainacan-secondary);
+                    cursor: pointer;
                 }
+
                 .tainacan-record-thumbnail {
                     margin: 0 0 0.75rem 1rem !important;
                 }
@@ -158,7 +156,8 @@
         height: 60vh;
         overflow-y: auto;
         overflow-x: hidden;
-        
+        display: inline-block;
+
         &>li {
             width: 100%;
 
@@ -169,11 +168,10 @@
                 border-bottom: 1px solid var(--tainacan-item-hover-background-color);
 
                 &.non-located-item {
-                    opacity: 0.45;
+                    opacity: 0.35;
 
                     &:hover,
                     &:focus {
-                        background-color: var(--tainacan-item-background-color);
                         opacity: 1.0;
                     } 
                 }
@@ -283,6 +281,7 @@
                     }
                     .metadata-title {
                         background-color: var(---tainacan-item-heading-hover-background-color) !important;
+
                         p { text-decoration: none !important; }
                         .slideshow-icon {
                             transform: scale(1.0);
@@ -295,13 +294,14 @@
     }
 
     @media screen and (max-width: 960px) {
-        flex-wrap: wrap;
 
         #tainacan-admin-view-mode-map,
         #tainacan-view-mode-map,
         .tainacan-map-cards-container {
             width: 100% !important;
             max-width: 100%;
+            float: none;
+            display: block;
         }
 
         #tainacan-admin-view-mode-map,
diff --git a/src/views/admin/scss/_view-mode-records.scss b/src/views/admin/scss/_view-mode-records.scss
index d201c01c2..5976b0f17 100644
--- a/src/views/admin/scss/_view-mode-records.scss
+++ b/src/views/admin/scss/_view-mode-records.scss
@@ -163,6 +163,7 @@
 
             .list-metadata {
                 padding: var(--tainacan-container-padding);
+                padding-top: 0.5em;
                 flex: 1;
                 font-size: 1em;
                 color: var(--tainacan-info-color);
@@ -171,6 +172,7 @@
             
                 .metadata-label {
                     margin: 0 0 0.5em 0;
+                    padding-top: 0;
                     font-size: 0.75em;
                     font-weight: 700;
                     color: var(--tainacan-info-color);
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
index fa28cd4f4..c6bdaca69 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
@@ -4,22 +4,10 @@
 
             <!-- Empty result placeholder, rendered in the parent component -->
             <slot />
-
-            <!-- SKELETON LOADING -->
-            <div 
-                    v-if="isLoading"
-                    class="tainacan-records-container--skeleton">
-                <div 
-                        :key="item"
-                        v-for="item in 12"
-                        class="skeleton" />
-            </div>
             
             <!-- MAP VIEW MODE -->
            <div class="tainacan-leaflet-map-container">
-                <ul
-                            v-if="!isLoading"
-                            class="tainacan-map-cards-container">
+                <ul class="tainacan-map-cards-container">
                     <li
                             role="listitem"
                             :aria-setsize="totalItems"
@@ -170,7 +158,7 @@
                     <l-control
                             :disable-scroll-propagation="true"
                             :disable-click-propagation="true"
-                            v-if="selectedMarkerIndexes.length"
+                            v-if="selectedMarkerIndexes.length || mapSelectedItemId"
                             position="topleft"
                             class="tainacan-records-container tainacan-records-container--map">
                         <button 
@@ -189,13 +177,13 @@
                         </button>
                         <transition-group
                                     tag="ul"
-                                    name="item-appear">
+                                    name="appear">
                             <li
                                     :aria-setsize="totalItems"
                                     :aria-posinset="getPosInSet(index)"
                                     :data-tainacan-item-id="item.id"
                                     :key="item.id"
-                                    v-for="(item, index) of items.filter(anItem => selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex].item.id == anItem.id))">
+                                    v-for="(item, index) of items.filter(anItem => mapSelectedItemId == anItem.id)">
                                 <a 
                                         :href="getItemLink(item.url, index)"
                                         :class="{
@@ -219,12 +207,13 @@
                                                     placement: 'auto',
                                                     popperClass: ['tainacan-tooltip', 'tooltip']
                                                 }"
+                                                id="button-show-location"
                                                 class="icon"
-                                                style="margin:0px 2px 0px 0px;"
+                                                style="margin: -1px 4px 0px 0px;"
                                                 :aria-label="$i18n.get('label_show_item_location_on_map')" 
                                                 @click.prevent.stop="showLocationsByItem(item)">
                                             <svg
-                                                    style="width: 1.5em;height: 1.5em;"
+                                                    style="width: 1.125em;height: 1.125em;"
                                                     viewBox="0 0 24 24">
                                                 <path
                                                         fill="currentColor"
@@ -353,7 +342,8 @@ export default {
             longitude: -51.31668,
             mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
             mapTileAttribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-            selectedMarkerIndexes: []
+            selectedMarkerIndexes: [],
+            mapSelectedItemId: false
         }
     },
     computed: {
@@ -480,6 +470,7 @@ export default {
                 return '';
         },
         clearSelectedMarkers() {
+            this.mapSelectedItemId = false;
             this.selectedMarkerIndexes = [];
             if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
                 if (this.itemsLocations.length == 1)
@@ -489,13 +480,16 @@ export default {
             }
         },
         showItemByLocation(index) {
+            this.mapSelectedItemId = this.itemsLocations[index].item.id;
             this.selectedMarkerIndexes = [];
             this.selectedMarkerIndexes.push(index);
             if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
                 this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 12, paddingTopLeft: [0, 286] });
         },
         showLocationsByItem(item) {
+            this.mapSelectedItemId = item.id;
             this.selectedMarkerIndexes = [];
+
             const selectedLocationsByItem = this.itemsLocations.filter((anItemLocation, index) => {
                 if (anItemLocation.item.id == item.id)
                     this.selectedMarkerIndexes.push(index);