diff --git a/cypress/e2e/footer-bar.cy.ts b/cypress/e2e/footer-bar.cy.ts index 5f4b31c1..1496a958 100644 --- a/cypress/e2e/footer-bar.cy.ts +++ b/cypress/e2e/footer-bar.cy.ts @@ -26,6 +26,13 @@ describe('Footer bar', () => { cy.get('button[data-cy="drawButton"]').click() cy.get('[data-cy="myMapsPanel"]').should('exist') }) + + it('closes the info panel', () => { + cy.get('[data-cy="infoOpenClose"]').find('button').click() + cy.get('[data-cy="infoPanel"]').should('exist') + cy.get('button[data-cy="drawButton"]').click() + cy.get('[data-cy="infoPanel"]').should('not.exist') + }) }) describe('Layers button', () => { @@ -65,17 +72,45 @@ describe('Footer bar', () => { it('Other panels are closed', () => { cy.get('[data-cy="styleSelector"]').should('not.exist') cy.get('[data-cy="layerPanel"]').should('not.exist') + cy.get('[data-cy="infoPanel"]').should('not.exist') }) - describe('When clicking on myMapsPanel button', () => { + describe('When clicking on layers panel button', () => { beforeEach(() => { cy.get('[data-cy="layersOpenClose"]').find('button').click() }) - it('closes the left panel', () => { + it('closes the mymaps panel', () => { cy.get('[data-cy="myMapsPanel"]').should('not.exist') }) }) }) }) + + describe('Info button', () => { + describe('When opening Info panel', () => { + beforeEach(() => { + cy.get('[data-cy="infoOpenClose"]').find('button').click() + }) + + it('Info panel is shown', () => { + cy.get('[data-cy="infoPanel"]').should('exist') + }) + + it('Other panels are closed', () => { + cy.get('[data-cy="styleSelector"]').should('not.exist') + cy.get('[data-cy="layerPanel"]').should('not.exist') + }) + + describe('When clicking on layers panel button', () => { + beforeEach(() => { + cy.get('[data-cy="layersOpenClose"]').find('button').click() + }) + + it('closes the info panel', () => { + cy.get('[data-cy="infoPanel"]').should('not.exist') + }) + }) + }) + }) }) diff --git a/public/assets/locales/app.de.json b/public/assets/locales/app.de.json index 50d3bbc5..09663de8 100644 --- a/public/assets/locales/app.de.json +++ b/public/assets/locales/app.de.json @@ -49,5 +49,7 @@ "Retry": "Von vorne anfangen", "small": "Klein", "Take measure": "Messen", - "Update offline data": "Offline-Daten updaten" + "Update offline data": "Offline-Daten updaten", + "A right click (tap and hold on mobile)...": "Durch Rechtsklick (tippen und halten auf Mobil) werden Informationen über den aktuellen Standort angezeigt", + "A short click (tap on mobile)...": "Durch Klick (tippen auf Mobil) auf einer Funktion wir diese Augewählt und weitere Informationen angezeigt" } diff --git a/public/assets/locales/app.en.json b/public/assets/locales/app.en.json index 72f5997b..f45da356 100644 --- a/public/assets/locales/app.en.json +++ b/public/assets/locales/app.en.json @@ -49,5 +49,7 @@ "Retry": "Retry", "small": "small", "Take measure": "Take measure", - "Update offline data": "Update offline data" + "Update offline data": "Update offline data", + "A right click (tap and hold on mobile)...": "A right click (tap and hold on mobile) will display information about the current location.", + "A short click (tap on mobile)...": "A short click (tap on mobile) on a map feature will select the feature and show more information." } diff --git a/public/assets/locales/app.fr.json b/public/assets/locales/app.fr.json index 85395a99..268b1653 100644 --- a/public/assets/locales/app.fr.json +++ b/public/assets/locales/app.fr.json @@ -49,5 +49,7 @@ "Retry": "Recommencez", "small": "Petite", "Take measure": "Mesurer", - "Update offline data": "Mettre à jour données hors connexion" + "Update offline data": "Mettre à jour données hors connexion", + "A right click (tap and hold on mobile)...": "Un clic droit (appuyez et maintenez sur mobile) affiche des informations sur l'emplacement actuel.", + "A short click (tap on mobile)...": "Un clic court (tap sur mobile) sur une caractéristique de la carte permet de sélectionner la caractéristique et de montrer plus d'informations" } diff --git a/public/assets/locales/app.lb.json b/public/assets/locales/app.lb.json index 0ca0fe4d..0905de5c 100644 --- a/public/assets/locales/app.lb.json +++ b/public/assets/locales/app.lb.json @@ -49,5 +49,7 @@ "Retry": "Nach eng Kéier probéiren", "small": "Kleng", "Take measure": "Moossen", - "Update offline data": "Offline-Daten updaten" + "Update offline data": "Offline-Daten updaten", + "A right click (tap and hold on mobile)...": "Duerch Rietsklick (tippen an gedréckt haalen op mobil) ginn d'Informatiounen iwwert déi aktuell Positioun ugewisen", + "A short click (tap on mobile)...": "Duerch Klick (tippen op mobil) op eng Funktioun gëtt dës ausgewielt an méi Informatiounen ugewisen" } diff --git a/src/App.vue b/src/App.vue index a5a4682e..1423e255 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,6 +14,7 @@ import StylePanel from '@/components/style-selector/style-panel.vue' import MyMapsPanel from '@/components/my-maps/my-maps-panel.vue' import MapContainer from '@/components/map/map-container.vue' import SliderComparator from '@/components/slider/slider-comparator.vue' +import InfoPanel from '@/components/info/info-panel.vue' import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service' import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service' @@ -39,12 +40,13 @@ statePersistorStyleService.bootstrap() statePersistorBgLayerService.bootstrap() mvtStyleService.initBackgroundsConfigs() -const { embedded, layersOpen, myMapsOpen, styleEditorOpen } = +const { embedded, layersOpen, myMapsOpen, infoOpen, styleEditorOpen } = storeToRefs(appStore) watch(layersOpen, timeoutResizeMap) watch(styleEditorOpen, timeoutResizeMap) watch(myMapsOpen, timeoutResizeMap) +watch(infoOpen, timeoutResizeMap) function timeoutResizeMap() { setTimeout(() => map.resize(), 50) @@ -78,6 +80,11 @@ onUnmounted(() => window.removeEventListener('resize', map.resize)) + +
+ +
+
diff --git a/src/components/footer/footer-bar.vue b/src/components/footer/footer-bar.vue index 1387cedd..ab5c1a5b 100644 --- a/src/components/footer/footer-bar.vue +++ b/src/components/footer/footer-bar.vue @@ -9,12 +9,14 @@ import { useAppStore } from '@/stores/app.store' const { t, i18next } = useTranslation() const appStore = useAppStore() -const { setLayersOpen, setDrawToolbarOpen, toggleMyMapsOpen } = appStore +const { setLayersOpen, setDrawToolbarOpen, toggleMyMapsOpen, toggleInfoOpen } = + appStore const { layersOpen, drawToolbarOpen, styleEditorOpen, myMapsOpen, + infoOpen, themeGridOpen, } = storeToRefs(appStore) @@ -25,6 +27,7 @@ function onClickLayersIcon() { if (open) { styleEditorOpen.value = false myMapsOpen.value = false + infoOpen.value = false } themeGridOpen.value = false @@ -61,11 +64,12 @@ function onClickLayersIcon() { > -
  • +
    • diff --git a/src/components/info/info-panel.vue b/src/components/info/info-panel.vue new file mode 100644 index 00000000..f828a2dd --- /dev/null +++ b/src/components/info/info-panel.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts index 0dc86218..23c3d9c2 100644 --- a/src/stores/app.store.ts +++ b/src/stores/app.store.ts @@ -8,6 +8,7 @@ export const DEFAULT_LAYER_PANEL_OPENED = true export const DEFAULT_MY_LAYERS_TAB_OPENED = false export const DEFAULT_THEME_GRID_OPENED = false export const DEFAULT_MYMAPS_OPENED = false +export const DEFAULT_INFO_OPENED = false export const DEFAULT_FEEDBACK_OPENED = false export const DEFAULT_FEEDBACKANF_OPENED = false export const DEFAULT_FEEDBACKAGE_OPENED = false @@ -23,6 +24,7 @@ export const useAppStore = defineStore( const themeGridOpen = ref(DEFAULT_THEME_GRID_OPENED) const mapId: Ref = ref() // => MyMaps map id const myMapsOpen = ref(DEFAULT_MYMAPS_OPENED) + const infoOpen = ref(DEFAULT_INFO_OPENED) const feedbackOpen = ref(DEFAULT_FEEDBACK_OPENED) const feedbackanfOpen = ref(DEFAULT_FEEDBACKANF_OPENED) const feedbackageOpen = ref(DEFAULT_FEEDBACKAGE_OPENED) @@ -101,6 +103,7 @@ export const useAppStore = defineStore( myMapsOpen.value = true layersOpen.value = false themeGridOpen.value = false + infoOpen.value = false } } @@ -111,6 +114,18 @@ export const useAppStore = defineStore( styleEditorOpen.value = false layersOpen.value = false themeGridOpen.value = false + infoOpen.value = false + } + } + + function toggleInfoOpen(open?: boolean) { + infoOpen.value = open ?? !infoOpen.value + + if (infoOpen.value) { + styleEditorOpen.value = false + layersOpen.value = false + themeGridOpen.value = false + myMapsOpen.value = false } } @@ -122,6 +137,7 @@ export const useAppStore = defineStore( themeGridOpen, mapId, myMapsOpen, + infoOpen, feedbackOpen, feedbackanfOpen, feedbackageOpen, @@ -143,6 +159,7 @@ export const useAppStore = defineStore( closeStyleEditorPanel, setDrawToolbarOpen, toggleMyMapsOpen, + toggleInfoOpen, toggleThemeGrid, } },