GSLUX-745: Print UI

cypress/e2e/footer-bar.cy.ts

@@ -113,4 +113,20 @@ describe('Footer bar', () => {
       })
     })
   })
+
+  describe('Print button', () => {
+    describe('When opening print panel', () => {
+      it('opens the print panel', () => {
+        cy.get('[data-cy="toolbarPrint"]').should('not.exist')
+        cy.get('button[data-cy="printButton"]').click()
+        cy.get('[data-cy="toolbarPrint"]').should('exist')
+      })
+
+      it('Other panels are closed', () => {
+        cy.get('[data-cy="styleSelector"]').should('not.exist')
+        cy.get('[data-cy="myMapsPanel"]').should('not.exist')
+        cy.get('[data-cy="infoPanel"]').should('be.hidden')
+      })
+    })
+  })
 })

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "^7.1.0",
     "@camptocamp/ogc-client": "^0.3.4",
+    "@geoblocks/mapfishprint": "0.2.18",
     "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",

src/assets/main.css

@@ -83,6 +83,10 @@
     @apply border-black;
   }
 
+  .lux-text-default {
+    @apply text-default;
+  }
+
   .lux-outlined {
     outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px;
@@ -139,6 +143,11 @@
     @apply bg-gray-400;
   }
 
+  .lux-btn.lux-btn-secondary {
+    color: var(--main-primary);
+    background-color: var(--color-secondary);
+  }
+
   .lux-close-cross {
     @apply after:content-['\e02c'];
   }
@@ -152,8 +161,12 @@
     @apply font-bold mb-[5px] inline-block;
   }
 
+  .lux-dropdown-btn {
+    @apply w-full;
+  }
+
   .lux-dropdown {
-    @apply inline-block;
+    @apply inline-block relative;
   }
 
   .lux-dropdown-inline .lux-dropdown-list:not(.hidden) {
@@ -165,6 +178,9 @@
     border: 1px solid rgba(0, 0, 0, 0.15);
     box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
   }
+  .lux-dropdown-list.up {
+    bottom: 100%;
+  }
 
   .lux-dropdown-list-item {
     @apply h-full w-full hover:bg-[#f5f5f5] py-[3px] px-5 cursor-pointer text-left;
@@ -225,7 +241,7 @@
 
   .lux-navbar-dropdown .lux-dropdown-list li {
     @apply h-16 w-16 bg-[color:var(--color-primary)]
-    hover:bg-white hover:[color:var(--color-primary)] 
+    hover:bg-white hover:[color:var(--color-primary)]
     [&.selected]:bg-white [&.selected]:[color:var(--color-primary)];
   }
 

src/bundle/lib.ts

@@ -1,79 +1,71 @@
-import {
-  h,
-  getCurrentInstance,
-  createApp,
-  watch,
-  // defineCustomElement, // TODO: Update vue package and use this defineCustomElement
-} from 'vue'
-import VueDOMPurifyHTML from 'vue-dompurify-html'
-import { createPinia, storeToRefs } from 'pinia'
-
-import { initProjections } from '@/services/projection.utils'
 import { defineCustomElement } from '@/bundle/runtime-dom/apiCustomElement'
+import { initProjections } from '@/services/projection.utils'
+import { createPinia, storeToRefs } from 'pinia'
+import { createApp, getCurrentInstance, h, watch } from 'vue'
+import VueDOMPurifyHTML from 'vue-dompurify-html'
 
 initProjections()
 
-import './lib.css' // Tell Vite to build the css
 import '../assets/main.css' // Tell Vite to build the css
+import './lib.css' // Tell Vite to build the css
 
 import AlertNotifications from '@/components/alert-notifications/alert-notifications.vue'
 import AuthForm from '@/components/auth/auth-form.vue'
-import DropdownList from '@/components/common/dropdown-list.vue'
-import MapContainer from '@/components/map/map-container.vue'
 import BackgroundSelector from '@/components/background-selector/background-selector.vue'
-import RemoteLayers from '@/components/remote-layers/remote-layers.vue'
-import LayerMetadata from '@/components/layer-metadata/layer-metadata.vue'
-import HeaderBar from '@/components/header-bar/header-bar.vue'
-import ProfileDraw from './components/profile_v3/profile-draw_v3.vue'
-import ProfileMeasures from './components/profile_v3/profile-measures_v3.vue'
-import ProfileRouting from './components/profile_v3/profile-routing_v3.vue'
-import ProfileInfos from './components/profile_v3/profile-infos_v3.vue'
+import DropdownList from '@/components/common/dropdown-list.vue'
 import FooterBar from '@/components/footer/footer-bar.vue'
 import ToolbarDraw from '@/components/footer/toolbar-draw.vue'
+import HeaderBar from '@/components/header-bar/header-bar.vue'
+import LocationInfoPanel from '@/components/info/location-info.vue'
+import LayerMetadata from '@/components/layer-metadata/layer-metadata.vue'
 import LayerPanel from '@/components/layer-panel/layer-panel.vue'
 import LegendsPanel from '@/components/legends/legends-panel.vue'
-import LocationInfoPanel from '@/components/info/location-info.vue'
+import MapContainer from '@/components/map/map-container.vue'
+import RemoteLayers from '@/components/remote-layers/remote-layers.vue'
 import SliderComparator from '@/components/slider/slider-comparator.vue'
+import StylePanel from '@/components/style-selector/style-panel.vue'
+import { themeSelectorService } from '@/components/theme-selector/theme-selector.service'
 import useBackgroundLayer from '@/composables/background-layer/background-layer.composable'
 import useLayers from '@/composables/layers/layers.composable'
 import useMap from '@/composables/map/map.composable'
-import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
 import useOpenLayers from '@/composables/map/ol.composable'
-import useThemes from '@/composables/themes/themes.composable'
-import useOffline from '@/composables/offline/offline.composable'
+import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
 import useOfflineLayers from '@/composables/offline/offline-layers.composable'
-import { useAppStore } from '@/stores/app.store'
-import { useMapStore } from '@/stores/map.store'
-import { useProfileDrawv3Store } from './stores/profile-draw_v3.store'
-import { useProfileMeasuresv3Store } from './stores/profile-measures_v3.store'
-import { useProfileRoutingv3Store } from './stores/profile-routing_v3.store'
-import { useProfileInfosv3Store } from './stores/profile-infos_v3.store'
-import { useDrawStore } from '@/stores/draw.store'
-import { useLocationInfoStore } from '@/stores/location-info.store'
-import { useStyleStore } from '@/stores/style.store'
-import { useThemeStore } from '@/stores/config.store'
-import { useUserManagerStore } from '@/stores/user-manager.store'
+import useOffline from '@/composables/offline/offline.composable'
+import useThemes from '@/composables/themes/themes.composable'
+import formatMeasureDirective from '@/directives/format-measure.directive'
+import MapLibreLayer from '@/lib/ol-mapbox-layer'
+import { Mask as MaskLayer } from '@/lib/ol-mask-layer'
 import { layerMetadataService } from '@/services/layer-metadata/layer-metadata.service'
-import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service'
-import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service'
-import { statePersistorThemeService } from '@/services/state-persistor/state-persistor-theme.service'
+import { proxyUrlHelper } from '@/services/proxyurl/proxyurl.helper'
 import { statePersistorAppService } from '@/services/state-persistor/state-persistor-app.service'
 import { statePersistorStyleService } from '@/services/state-persistor/state-persistor-bgstyle.service'
+import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service'
+import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service'
 import { statePersistorMyMapService } from '@/services/state-persistor/state-persistor-mymap.service'
-import { proxyUrlHelper } from '@/services/proxyurl/proxyurl.helper'
-import { styleUrlHelper } from '@/services/styleurl/styleurl.helper'
+import { statePersistorThemeService } from '@/services/state-persistor/state-persistor-theme.service'
 import { storageHelper } from '@/services/state-persistor/storage/storage.helper'
-import { themeSelectorService } from '@/components/theme-selector/theme-selector.service'
-import MapLibreLayer from '@/lib/ol-mapbox-layer'
-import StylePanel from '@/components/style-selector/style-panel.vue'
+import { styleUrlHelper } from '@/services/styleurl/styleurl.helper'
+import { useAppStore } from '@/stores/app.store'
+import { useThemeStore } from '@/stores/config.store'
+import { useDrawStore } from '@/stores/draw.store'
 import { clearLayersCache } from '@/stores/layers.cache'
-
+import { useLocationInfoStore } from '@/stores/location-info.store'
+import { useMapStore } from '@/stores/map.store'
+import { useStyleStore } from '@/stores/style.store'
+import { useUserManagerStore } from '@/stores/user-manager.store'
 import i18next, { InitOptions } from 'i18next'
 import backend from 'i18next-http-backend'
 import I18NextVue from 'i18next-vue'
-import formatMeasureDirective from '@/directives/format-measure.directive'
-
 import App from '../App.vue'
+import ProfileDraw from './components/profile_v3/profile-draw_v3.vue'
+import ProfileInfos from './components/profile_v3/profile-infos_v3.vue'
+import ProfileMeasures from './components/profile_v3/profile-measures_v3.vue'
+import ProfileRouting from './components/profile_v3/profile-routing_v3.vue'
+import { useProfileDrawv3Store } from './stores/profile-draw_v3.store'
+import { useProfileInfosv3Store } from './stores/profile-infos_v3.store'
+import { useProfileMeasuresv3Store } from './stores/profile-measures_v3.store'
+import { useProfileRoutingv3Store } from './stores/profile-routing_v3.store'
 
 type LuxLibOptions = {
   i18nextConfig?: InitOptions
@@ -126,67 +118,68 @@ export default function useLuxLib(options: LuxLibOptions) {
 }
 
 export {
+  AlertNotifications,
+  App,
+  AuthForm,
+  backend,
+  BackgroundSelector,
+  clearLayersCache,
   createApp,
+  createPinia,
+  defineCustomElement,
+  DropdownList,
+  FooterBar,
+  getCurrentInstance,
   h,
-  App,
+  HeaderBar,
   i18next,
-  getCurrentInstance,
-  defineCustomElement,
-  createPinia,
-  storeToRefs,
-  watch,
-  backend,
-  VueDOMPurifyHTML,
   I18NextVue,
-  AlertNotifications,
-  AuthForm,
-  DropdownList,
-  MapContainer,
-  BackgroundSelector,
-  RemoteLayers,
   LayerMetadata,
-  HeaderBar,
-  ProfileDraw,
-  ProfileMeasures,
-  ProfileRouting,
-  ProfileInfos,
-  FooterBar,
-  ToolbarDraw,
+  layerMetadataService,
   LayerPanel,
   LegendsPanel,
   LocationInfoPanel,
-  SliderComparator,
+  MapContainer,
+  MapLibreLayer,
+  MaskLayer,
+  ProfileDraw,
+  ProfileInfos,
+  ProfileMeasures,
+  ProfileRouting,
   proxyUrlHelper,
+  RemoteLayers,
+  SliderComparator,
+  statePersistorAppService,
+  statePersistorBgLayerService,
+  statePersistorLayersService,
+  statePersistorMyMapService,
+  statePersistorStyleService,
+  statePersistorThemeService,
+  storageHelper,
+  storeToRefs,
+  StylePanel,
   styleUrlHelper,
+  themeSelectorService,
+  ToolbarDraw,
+  useAppStore,
+  useBackgroundLayer,
+  useDrawStore,
   useLayers,
+  useLocationInfoStore,
   useMap,
+  useMapStore,
   useMvtStyles,
-  useOpenLayers,
-  useThemes,
   useOffline,
   useOfflineLayers,
-  useAppStore,
-  useBackgroundLayer,
-  useMapStore,
+  useOpenLayers,
   useProfileDrawv3Store,
+  useProfileInfosv3Store,
   useProfileMeasuresv3Store,
   useProfileRoutingv3Store,
-  useProfileInfosv3Store,
-  useDrawStore,
-  useLocationInfoStore,
   useStyleStore,
+  useThemes,
   useThemeStore,
   useUserManagerStore,
-  layerMetadataService,
-  statePersistorBgLayerService,
-  statePersistorLayersService,
-  statePersistorThemeService,
-  statePersistorAppService,
-  statePersistorStyleService,
-  statePersistorMyMapService,
-  themeSelectorService,
-  storageHelper,
-  MapLibreLayer,
-  StylePanel,
-  clearLayersCache,
+  VueDOMPurifyHTML,
+  watch,
 }