tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds information of selected items. Better geo metadata selection. #693.

This commit is contained in:
mateuswetah 2023-01-11 12:17:03 -03:00
parent 3a6199f975
commit 06fbeddb8d
3 changed files with 94 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/admin/components/lists/items-list.vue
View File

@ -1381,7 +1381,11 @@
</l-tooltip> </l-tooltip>
</l-marker> </l-marker>
<l-control position="topright"> <l-control position="topright">
<div class="geocoordinate-input-panel"> <div class="geocoordinate-panel">
<div
v-if="geocoordinateMetadata.length"
class="geocoordinate-panel--input">
<label>{{ $i18n.get('label_showing_locations_for') }}&nbsp;</label>
<b-select <b-select
:placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')" :placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')"
id="tainacan-select-geocoordinate-metatum" id="tainacan-select-geocoordinate-metatum"
@ -1396,20 +1400,42 @@
</option> </option>
</b-select> </b-select>
</div> </div>
<transition name="filter-item">
<div
v-if="selectedMarkerIndexes.length"
class="geocoordinate-panel--input">
<p>{{ selectedMarkerIndexes.length == 1 ? $i18n.get('label_one_selected_location') : $i18n.getWithVariables('label_%s_selected_locations', [ selectedMarkerIndexes.length ]) }}. <a @click="selectedMarkerIndexes = []">{{ $i18n.get('label_clean') }}</a></p>
</div>
</transition>
<section
v-if="!geocoordinateMetadata.length"
class="section">
<div class="content has-text-grey has-text-centered">
<p>
<span class="icon is-large">
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-public" />
</span>
</p>
<p>{{ $i18n.get('info_empty_geocoordinate_metadata_list') }}</p>
</div>
</section>
</div>
</l-control> </l-control>
</l-map> </l-map>
<ul <transition-group
tag="ul"
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }" :class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }"
class="tainacan-records-container tainacan-records-container--map"> class="tainacan-records-container tainacan-records-container--map"
name="item-appear">
<li <li
:key="index" :key="item.id"
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
v-for="(item, index) of items"> v-for="item of items"
v-show="!selectedMarkerIndexes.length || selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex].item.id == item.id)">
<div <div
:class="{ :class="{
'selected-record': getSelectedItemChecked(item.id) == true, 'selected-record': getSelectedItemChecked(item.id) == true,
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id), '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 -->
@ -1628,7 +1654,7 @@
</div> </div>
</div> </div>
</li> </li>
</ul> </transition-group>
</div> </div>
</div> </div>
@ -1866,15 +1892,18 @@ export default {
setTimeout(() => { setTimeout(() => {
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) { if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
if (this.itemsLocations.length == 1) if (this.itemsLocations.length == 1)
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true }); this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
else else
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true }); this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
} }
}, 500) }, 500)
}, },
selectedGeocoordinateMetadatum() {
this.selectedMarkerIndexes = [];
},
geocoordinateMetadata: { geocoordinateMetadata: {
handler() { handler() {
if ( this.geocoordinateMetadata.length > 0 ) if ( this.geocoordinateMetadata.length )
this.selectedGeocoordinateMetadatum = this.geocoordinateMetadata[0]; this.selectedGeocoordinateMetadatum = this.geocoordinateMetadata[0];
}, },
immediate: true immediate: true
@ -2138,9 +2167,9 @@ export default {
this.clearContextMenu(); this.clearContextMenu();
}, },
selectItem() { selectItem() {
if (this.contextMenuItem != null) { if (this.contextMenuItem != null)
this.setSelectedItemChecked(this.contextMenuItem.id); this.setSelectedItemChecked(this.contextMenuItem.id);
}
this.clearContextMenu(); this.clearContextMenu();
}, },
onClickItem($event, item) { onClickItem($event, item) {
@ -2242,7 +2271,7 @@ export default {
this.selectedMarkerIndexes = []; this.selectedMarkerIndexes = [];
this.selectedMarkerIndexes.push(index); this.selectedMarkerIndexes.push(index);
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) 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.flyToBounds( [ this.itemsLocations[index].location ], { animate: true }); this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12 });
}, },
showLocationsByItem(item) { showLocationsByItem(item) {
this.selectedMarkerIndexes = []; this.selectedMarkerIndexes = [];
@ -2251,8 +2280,12 @@ export default {
this.selectedMarkerIndexes.push(index); this.selectedMarkerIndexes.push(index);
return anItemLocation.item.id == item.id; 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 ( 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.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true }); 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 });
}
} }
} }
} }

25
src/views/admin/scss/_view-mode-map.scss
View File

@ -3,12 +3,35 @@
#tainacan-admin-view-mode-map { #tainacan-admin-view-mode-map {
float: right; float: right;
.geocoordinate-input-panel { .geocoordinate-panel {
background: var(--tainacan-background-color);
box-shadow: 0px 0px 12px -10px #000;
border-radius: 3px;
padding: 0.25rem 0.125rem 0.25rem 1rem;
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
opacity: 0.9;
transition: opacity ease 0.3s, box-shadow ease 0.3s;
&:hover,
&:focus {
opacity: 1.0;
box-shadow: 4px 0px 18px -12px #000;
}
.geocoordinate-panel--input {
display: flex;
align-items: center;
padding: 0;
font-size: 1.25em;
font-family: var(--tainacan-font-family);
/deep/ select { /deep/ select {
background-color: var(--tainacan-input-background-color); background-color: var(--tainacan-input-background-color);
} }
} }
} }
}
.tainacan-records-container--map { .tainacan-records-container--map {
left: 0; left: 0;

5
src/views/tainacan-i18n.php
View File

@ -664,6 +664,10 @@ return apply_filters( 'tainacan-i18n', [
'label_use_search_separated_words' => __( 'Search each word separatelly', 'tainacan' ), 'label_use_search_separated_words' => __( 'Search each word separatelly', 'tainacan' ),
'label_map' => __( 'Map', 'tainacan' ), 'label_map' => __( 'Map', 'tainacan' ),
'label_show_item_location_on_map' => __( 'Show item location on map', 'tainacan' ), 'label_show_item_location_on_map' => __( 'Show item location on map', 'tainacan' ),
/* translators: This appears before a select where you choose possible geocoorinate metadata */
'label_showing_locations_for' => __( 'Showing locations for:', 'tainacan' ),
'label_one_selected_location' => __( 'One selected location', 'tainacan' ),
'label_%s_selected_locations' => __( '%s selected locations', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
@ -997,6 +1001,7 @@ return apply_filters( 'tainacan-i18n', [
'info_try_enabling_search_by_word' => __( 'Try enabling the search by words.', 'tainacan' ), 'info_try_enabling_search_by_word' => __( 'Try enabling the search by words.', 'tainacan' ),
'info_try_disabling_search_by_word' => __( 'Try disabling the search by words, to search for the complete phrase.', 'tainacan' ), 'info_try_disabling_search_by_word' => __( '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_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' ),
/* Activity actions */ /* Activity actions */
'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'), 'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'),