Merge pull request #815 from geoadmin/feat_PB-471_floating_tooltip_pa…

…rt_2

PB-471 : add floating mode for tooltip

src/modules/infobox/InfoboxModule.vue

@@ -66,24 +66,23 @@ function onClose() {
 <template>
     <div v-if="showContainer" class="infobox card rounded-0" data-cy="infobox" @contextmenu.stop>
         <div class="infobox-header card-header d-flex justify-content-end" data-cy="infobox-header">
+            <button class="btn btn-light btn-sm d-flex align-items-center" @click.stop="onPrint">
+                <FontAwesomeIcon icon="print" />
+            </button>
             <button
                 v-if="showTooltipToggle"
                 class="btn btn-light btn-sm d-flex align-items-center"
                 data-cy="infobox-toggle-floating"
                 @click.stop="setTooltipInfoPosition"
             >
-                <FontAwesomeIcon icon="caret-up" />
-            </button>
-            <button class="btn btn-light btn-sm d-flex align-items-center" @click.stop="onPrint">
-                <FontAwesomeIcon icon="print" />
+                <FontAwesomeIcon icon="angles-up" />
             </button>
             <button
                 class="btn btn-light btn-sm d-flex align-items-center"
                 data-cy="infobox-minimize-maximize"
                 @click="onToggleContent"
             >
-                <FontAwesomeIcon v-if="!showContent" icon="window-maximize" />
-                <FontAwesomeIcon v-if="showContent" icon="window-minimize" />
+                <FontAwesomeIcon :icon="`caret-${showContent ? 'down' : 'right'}`" />
             </button>
             <button
                 class="btn btn-light btn-sm d-flex align-items-center"
@@ -100,6 +99,7 @@ function onClose() {
                 v-if="isSelectedFeatureEditable && showFeatureInfoInBottomPanel"
                 :feature="selectedFeature"
                 :read-only="!showDrawingOverlay"
+                class="p-3"
             />
             <FeatureList v-if="!showDrawingOverlay && showFeatureInfoInBottomPanel" />
         </div>

src/modules/infobox/components/FeatureList.vue

@@ -102,17 +102,17 @@ function loadMoreResultForLayer(layerId) {
 <style lang="scss" scoped>
 @import '@/scss/variables.module';
 .feature-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax($overlay-width, 1fr));
-    justify-content: stretch;
-    align-content: stretch;
     &.fluid {
         max-height: 100%;
         overflow: hidden;
     }
     &:not(.fluid) {
         max-height: 33vh;
         overflow-y: auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax($overlay-width, 1fr));
+        justify-content: stretch;
+        align-content: stretch;
     }
 }
 </style>

src/modules/infobox/components/FeatureListCategory.vue

@@ -37,7 +37,7 @@ const { t } = useI18n()
 <template>
     <div class="feature-list-category border-start">
         <div
-            class="p-2 sticky-top bg-secondary-subtle border-bottom border-secondary-subtle d-flex"
+            class="p-2 sticky-top bg-secondary-subtle border-bottom border-secondary-subtle d-flex cursor-pointer"
             @click="showContent = !showContent"
         >
             <FontAwesomeIcon :icon="`caret-${showContent ? 'down' : 'right'}`" class="me-2" />

src/modules/infobox/components/FeatureListCategoryItem.vue

@@ -7,8 +7,7 @@ import EditableFeature from '@/api/features/EditableFeature.class'
 import LayerFeature from '@/api/features/LayerFeature.class'
 import FeatureDetail from '@/modules/infobox/components/FeatureDetail.vue'
 import ShowGeometryProfileButton from '@/modules/infobox/components/ShowGeometryProfileButton.vue'
-import { canFeatureShowProfile } from '@/store/modules/features.store.js'
-import { FeatureInfoPositions } from '@/store/modules/ui.store.js'
+import { canFeatureShowProfile } from '@/store/modules/features.store'
 import ZoomToExtentButton from '@/utils/components/ZoomToExtentButton.vue'
 
 const dispatcher = { dispatcher: 'FeatureListCategoryItem.vue' }
@@ -39,7 +38,6 @@ const store = useStore()
 const isHighlightedFeature = computed(
     () => store.state.features.highlightedFeatureId === item.value.id
 )
-const selectedFeaturesCount = computed(() => store.getters.selectedFeatures?.length)
 
 function highlightFeature(feature) {
     store.dispatch('setHighlightedFeatureId', {
@@ -76,34 +74,11 @@ function showContentAndScrollIntoView(event) {
         return false
     }
 }
-
-function forceFeatureInfoAtBottom() {
-    store.dispatch('setFeatureInfoPosition', {
-        position: FeatureInfoPositions.BOTTOMPANEL,
-        ...dispatcher,
-    })
-}
-
-function onShowProfile(event) {
-    showContentAndScrollIntoView(event)
-    // as the profile will be stored at the bottom of the screen, we do not want to have
-    // a floating tooltip while some information are at the bottom, so we force the tooltip down
-    forceFeatureInfoAtBottom()
-}
-
-function onZoomToExtent(event) {
-    showContentAndScrollIntoView(event)
-    // if more than one feature are currently selected, we can't be sure the new extent of the map will
-    // contain all of them, so we switch the feature list to be at the bottom of the screen
-    if (selectedFeaturesCount.value > 0) {
-        forceFeatureInfoAtBottom()
-    }
-}
 </script>
 
 <template>
     <div
-        class="feature-list-category-item-name p-2 align-middle position-relative"
+        class="feature-list-category-item-name p-2 align-middle position-relative cursor-pointer"
         :class="{ highlighted: isHighlightedFeature, 'border-bottom': !showContent }"
         data-cy="feature-item"
         @click="toggleShowContent"
@@ -117,7 +92,7 @@ function onZoomToExtent(event) {
             v-if="item.extent"
             :extent="item.extent"
             class="float-end"
-            @click="onZoomToExtent"
+            @click="showContentAndScrollIntoView"
         />
     </div>
     <div
@@ -130,7 +105,7 @@ function onZoomToExtent(event) {
     >
         <FeatureDetail :feature="item" />
         <div v-if="canDisplayProfile" class="d-grid p-1">
-            <ShowGeometryProfileButton :feature="item" @click="onShowProfile" />
+            <ShowGeometryProfileButton :feature="item" @click="showContentAndScrollIntoView" />
         </div>
     </div>
 </template>

src/modules/map/components/LocationPopup.vue

@@ -11,6 +11,7 @@ import { createShortLink } from '@/api/shortlink.api'
 import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
 import LocationPopupPosition from '@/modules/map/components/LocationPopupPosition.vue'
 import LocationPopupShare from '@/modules/map/components/LocationPopupShare.vue'
+import { MapPopoverMode } from '@/modules/map/components/MapPopover.vue'
 import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
 import log from '@/utils/logging'
 import { stringifyQuery } from '@/utils/url-router'
@@ -159,9 +160,10 @@ function clearClick() {
     <component
         :is="mappingFrameworkSpecificPopup"
         v-if="coordinate"
-        :title="selectedTab == 'position' ? i18n.t('position') : i18n.t('link_bowl_crosshair')"
+        :title="selectedTab === 'position' ? i18n.t('position') : i18n.t('link_bowl_crosshair')"
         :coordinates="coordinate"
         :projection="projection"
+        :mode="MapPopoverMode.FEATURE_TOOLTIP"
         use-content-padding
         class="location-popup"
         data-cy="location-popup"
@@ -201,8 +203,7 @@ function clearClick() {
                     <!-- Italian text does not fit on one line with normal sized text -->
                     <div
                         :class="{
-                            small: currentLang == 'it',
-                            '': currentLang != 'it',
+                            small: currentLang === 'it',
                         }"
                     >
                         {{ i18n.t('link_bowl_crosshair') }} &nbsp;&nbsp;<FontAwesomeIcon