From 9a720991aac8a556d37214077b3f6d3dfe8b4d90 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Tue, 17 Jan 2023 11:50:37 -0300 Subject: [PATCH] Changes the interaction and listing strategy on the map view mode. #692. --- .../admin/components/lists/items-list.vue | 399 +++++++++++++----- src/views/admin/scss/_view-mode-map.scss | 168 +++++++- .../theme-search/components/view-mode-map.vue | 7 +- src/views/tainacan-i18n.php | 3 +- 4 files changed, 456 insertions(+), 121 deletions(-) diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue index 28b3271c6..5b108351e 100644 --- a/src/views/admin/components/lists/items-list.vue +++ b/src/views/admin/components/lists/items-list.vue @@ -1349,7 +1349,7 @@ - +
+ + +
  • +
    + + +
    + +
    + + +
    + + + +

    +

    +

    + +
    + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    +
    + +
    + +

    {{ $i18n.get('label_description') }}

    +

    + + +

    {{ column.name }}

    +

    + + +

    {{ column.name }}

    +

    + +

    +
    +
    +
    • +     +     - + class="tainacan-map-cards-container">
  • + v-for="item of items">
    + class="tainacan-map-card">
    + class="map-card-checkbox">
    • -     +
    @@ -1829,12 +2002,7 @@ export default { } } - - let selectedItemId = false; - if ( this.selectedMarkerIndexes.length > 0 ) - selectedItemId = locations[this.selectedMarkerIndexes[0]].item.id; - - return selectedItemId ? locations.filter((aLocation) => aLocation.item.id == selectedItemId) : locations; + return locations; }, geocoordinateMetadata() { let geocoordinateMetadata = []; @@ -1902,9 +2070,9 @@ export default { setTimeout(() => { if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) { if (this.itemsLocations.length == 1) - this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 }); + this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] }); else - this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 }); + this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] }); } }, 500) }, @@ -2281,16 +2449,16 @@ export default { 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) - this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 }); + this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] }); else - this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 }); + this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] }); } }, showItemByLocation(index) { 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 }); + 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, 300] }); }, showLocationsByItem(item) { this.selectedMarkerIndexes = []; @@ -2299,12 +2467,21 @@ export default { this.selectedMarkerIndexes.push(index); return anItemLocation.item.id == item.id; }) - // if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) { - // if (selectedLocationsByItem.length > 1) - // this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 }); - // else - // this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 }); - // } + + if ( selectedLocationsByItem.length) { + if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) { + if (selectedLocationsByItem.length > 1) + this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] }); + else + this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] }); + } + } else { + this.$buefy.snackbar.open({ + message: this.$i18n.get('info_non_located_item'), + type: 'is-warning', + duration: 3000 + }); + } } } } diff --git a/src/views/admin/scss/_view-mode-map.scss b/src/views/admin/scss/_view-mode-map.scss index 6135914ab..341233b55 100644 --- a/src/views/admin/scss/_view-mode-map.scss +++ b/src/views/admin/scss/_view-mode-map.scss @@ -47,24 +47,31 @@ } .tainacan-records-container--map { - left: 0; - top: 0; - position: relative; - float: left; - width: 25%; height: 60vh; overflow-y: auto; overflow-x: hidden; - - &>li { + width: 300px; + float: none; + position: initial; + font-size: 1rem; + padding-top: 10px; + + &>li, + &>ul>li { width: 100%; .tainacan-record { margin-bottom: 0.125rem; max-width: 100%; + box-shadow: 0px 0px 12px -10px #000; + border: 2px solid rgba(0,0,0,0.2); opacity: 1.0; transition: 1.0; + &:not(.is-selecting) { + background-color: var(--tainacan-background-color); + } + &.non-located-item { opacity: 0.35; @@ -82,6 +89,153 @@ .media .list-metadata { padding: 1rem; } + + .actions-area { + margin-bottom: -32px; + } + } + } + } + + .tainacan-map-cards-container { + left: 0; + top: 0; + position: relative; + float: left; + width: 300px; + height: 60vh; + overflow-y: auto; + overflow-x: hidden; + + &>li { + width: 100%; + + .tainacan-map-card { + max-width: 100%; + opacity: 1.0; + transition: filter; + + &.non-located-item { + opacity: 0.45; + + &:hover, + &:focus { + opacity: 1.0; + } + } + + .tainacan-map-card-item-thumbnail, + img { + max-width: 60px; + } + + &.selected-map-card { + background-color: var(--tainacan-turquoise1); + .metadata-title { + background-color: var(--tainacan-turquoise2); + } + } + + .map-card-checkbox { + position: absolute; + margin-left: 1.0em; + margin-top: 12px; + z-index: 9; + } + .actions-area { + position: relative; + float: right; + top: calc(-1 * var(--tainacan-container-padding)); + bottom: 0; + padding-right: 12px; + //width: 80px; + margin-bottom: -25px; + display: flex; + justify-content: space-between; + visibility: hidden; + opacity: 0; + transition: visibility 0.2s, opacity 0.3s ease, top 0.2s ease; + + a { + margin-left: 12px; + opacity: 0; + transition: opacity 0.3s ease; + } + } + &:hover .actions-area { + visibility: visible; + opacity: 1.0; + top: calc(-1 * 1.5em - var(--tainacan-container-padding)); + + a { + opacity: 1; + } + } + .tainacan-map-card-thumbnail { + max-width: 40px; + margin-top: -0.5em; + margin-left: auto; + } + .tainacan-map-card-item-thumbnail, + img { + width: 40px; + height: 40px; + border-radius: 0px; + position: relative; + z-index: 1; + } + .metadata-title { + flex-shrink: 0; + padding: 0.75em 1.125em; + font-size: 1.0em !important; + min-height: 40px; + position: relative; + white-space: wrap; + display: flex; + gap: 0.75rem; + min-width: 100%; + align-items: flex-start; + color: var(--tainacan-heading-color); + transition: background-color 0.3s ease; + + p { + line-height: 1.5em; + font-size: 0.875em !important; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin: 0; + width: 100%; + transition: background-color 0.3s; + } + .slideshow-icon { + color: var(--tainacan-info-color); + position: absolute; + right: 7px; + top: 7px; + transform: scale(0.0); + transition: transform 0.2s ease; + } + .icon:not(.slideshow-icon) { + float: left; + margin-top: -1px; + } + } + &:hover, + &:focus { + .tainacan-map-card-item-thumbnail { + opacity: 0.0; + visibility: hidden; + } + .metadata-title { + background-color: var(---tainacan-item-heading-hover-background-color) !important; + p { text-decoration: none !important; } + .slideshow-icon { + transform: scale(1.0); + } + } + } + } } } 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 0c5b8b7dd..88c9aed5a 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 @@ -21,7 +21,7 @@ - +
    __( 'Try disabling the search by words, to search for the complete phrase.', 'tainacan' ), 'info_details_about_search_by_word' => __( 'They may be located on different metadata and order, but you will still be able to use quotes to group them.', 'tainacan' ), 'info_empty_geocoordinate_metadata_list' => __( 'No geocoordinate metadata was found. Try enabling it in the "displayed metadata" dropdown.', 'tainacan' ), - + 'info_non_located_item' => __( 'This item does not have any location based on this metadata.', 'tainacan' ), + /* Activity actions */ 'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'), 'action_update' => __( 'General Updates', 'tainacan'),