Merge pull request #380 from geoadmin/develop

New Release v1.1.0 - #minor
geoadmin · Feb 21, 2023 · 12d6e5b · 12d6e5b
2 parents 8774cac + 12e2ac1
commit 12d6e5b
Show file tree

Hide file tree

Showing 20 changed files with 331 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -161,7 +161,7 @@ The CI uses this file to ensure it will not stumble upon a minor version of a li
 
 The CI will use `npm ci`, which act like `npm install` but it ignores the file `package.json` and loads all libraries versions found in `package-lock.json` (which are not volatile, e.g. `^1.0.0` or `~1.0.0.`, but fixed).
 
-## Project deployement
+## Project deployment
 
 The application is deployed on three targets :  `dev|int|prod`
 

diff --git a/src/api/feedback.api.js b/src/api/feedback.api.js
@@ -9,13 +9,15 @@ import axios from 'axios'
  * @param {Number} rating Optional
  * @param {Number} maxRating Optional
  * @param {String} kmlFileUrl Optional
+ * @param {String} email Optional
  * @returns {Promise<Boolean>} True if successful, false otherwise
  */
 export default async function sendFeedback(
     text,
     rating = null,
     maxRating = null,
-    kmlFileUrl = null
+    kmlFileUrl = null,
+    email = null
 ) {
     try {
         let shortLink = null
@@ -57,6 +59,7 @@ export default async function sendFeedback(
             ua: navigator.userAgent,
             permalink: shortLink,
             kml,
+            email,
         }
         log.debug('sending feedback with', data)
         const response = await axios.post(`${API_SERVICES_BASE_URL}feedback`, data, {

diff --git a/src/modules/drawing/components/DrawingToolbox.vue b/src/modules/drawing/components/DrawingToolbox.vue
@@ -25,8 +25,7 @@
                         <button
                             v-if="isDrawingLineOrMeasure"
                             data-cy="drawing-delete-last-point-button"
-                            class="m-1"
-                            outline-danger
+                            class="btn btn-outline-danger m-1"
                             @click="$emit('deleteLastPoint')"
                         >
                             {{ $t('draw_button_delete_last_point') }}

diff --git a/src/modules/i18n/locales/de.json b/src/modules/i18n/locales/de.json
diff --git a/src/modules/i18n/locales/en.json b/src/modules/i18n/locales/en.json
diff --git a/src/modules/i18n/locales/fr.json b/src/modules/i18n/locales/fr.json
diff --git a/src/modules/i18n/locales/it.json b/src/modules/i18n/locales/it.json
diff --git a/src/modules/i18n/locales/rm.json b/src/modules/i18n/locales/rm.json
diff --git a/src/modules/map/components/WarningRibbon.vue b/src/modules/map/components/WarningRibbon.vue
@@ -20,20 +20,23 @@ export default {
 /* Corner ribbons, from http://codepen.io/eode9/pen/twkKm
 * mobile: ribbon top left, desktop: bottom left
 */
+$ribbon-halfwidth: 180px;
+$ribbon-halfheight: 25px;
+$dist-from-border: 50px; // Distance of the text's center from the border
 
 .corner-ribbon {
     position: absolute;
     /* top-left */
-    top: 78px;
+    top: calc(#{-$ribbon-halfheight + $dist-from-border} + #{$header_height});
     bottom: auto;
-    left: -50px;
-    width: 200px;
+    left: -$ribbon-halfwidth + $dist-from-border;
+    width: 2 * $ribbon-halfwidth;
     transform: rotate(-45deg);
     z-index: $zindex-warning;
     background: $danger;
     color: white;
     text-align: center;
-    line-height: 50px;
+    line-height: 2 * $ribbon-halfheight;
     letter-spacing: 1px;
     font-weight: bold;
 }
@@ -42,9 +45,8 @@ export default {
     .corner-ribbon {
         /* bottom-left */
         top: auto;
-        bottom: 50px; /* Under cesium inspectors */
-        left: -100px;
-        width: 300px;
+        // 25px is ca. the height of the footer
+        bottom: -$ribbon-halfheight + $dist-from-border + 25px; /* Under cesium inspectors */
         transform: rotate(45deg);
     }
 }

diff --git a/src/modules/map/components/footer/MapFooterAttribution.vue b/src/modules/map/components/footer/MapFooterAttribution.vue
@@ -38,10 +38,10 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
-import tippy from 'tippy.js'
-
+import { VECTOR_LIGHT_BASE_MAP_STYLE_ID } from '@/config'
 import ModalWithBackdrop from '@/utils/ModalWithBackdrop.vue'
+import tippy from 'tippy.js'
+import { mapGetters, mapState } from 'vuex'
 
 export default {
     components: { ModalWithBackdrop },
@@ -51,14 +51,37 @@ export default {
     computed: {
         ...mapState({
             lang: (state) => state.i18n.lang,
+            layersConfig: (state) => state.layers.config,
         }),
-        ...mapGetters(['visibleLayers', 'currentBackgroundLayer', 'hasDataDisclaimer']),
+        ...mapGetters([
+            'visibleLayers',
+            'currentBackgroundLayer',
+            'hasDataDisclaimer',
+            'isExtentOnlyWithinLV95Bounds',
+        ]),
         layers() {
             const layers = []
             // when the background is void, we receive `undefined` here
             if (this.currentBackgroundLayer) {
                 layers.push(this.currentBackgroundLayer)
             }
+            /*
+             Edge case that will be removed as soon as we have a proper VT pixelkarte layer.
+
+             As we are showing LightBaseMap layer behind pixelkarte-farbe whenever we are not
+             covering only Swiss grounds, we need to add the attribution of LightBaseMap depending
+             on the current extent of the app
+             */
+            if (
+                this.currentBackgroundLayer?.getID() === 'ch.swisstopo.pixelkarte-farbe' &&
+                !this.isExtentOnlyWithinLV95Bounds
+            ) {
+                layers.push(
+                    this.layersConfig.find(
+                        (layer) => layer.getID() === VECTOR_LIGHT_BASE_MAP_STYLE_ID
+                    )
+                )
+            }
             layers.push(...this.visibleLayers)
             return layers
         },

diff --git a/src/modules/map/components/openlayers/OpenLayersMap.vue b/src/modules/map/components/openlayers/OpenLayersMap.vue
@@ -101,7 +101,7 @@
 import { EditableFeatureTypes, LayerFeature } from '@/api/features.api'
 import LayerTypes from '@/api/layers/LayerTypes.enum'
 
-import { IS_TESTING_WITH_CYPRESS, LV95_EXTENT, VECTOR_LIGHT_BASE_MAP_STYLE_ID } from '@/config'
+import { IS_TESTING_WITH_CYPRESS, VECTOR_LIGHT_BASE_MAP_STYLE_ID } from '@/config'
 import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
 import FeatureList from '@/modules/infobox/components/FeatureList.vue'
 import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
@@ -182,7 +182,7 @@ export default {
         ...mapGetters([
             'visibleLayers',
             'currentBackgroundLayer',
-            'extent',
+            'isExtentOnlyWithinLV95Bounds',
             'resolution',
             'isCurrentlyDrawing',
             'backgroundLayers',
@@ -217,13 +217,7 @@ export default {
             if (this.currentBackgroundLayer?.getID() === 'ch.swisstopo.pixelkarte-farbe') {
                 // we only want LightBaseMap behind pixelkarte-farbe when the map is showing things outside
                 // LV95 extent (outside of Switzerland)
-                const [currentExtentBottomLeft, currentExtentTopRight] = this.extent
-                if (
-                    currentExtentBottomLeft[0] >= LV95_EXTENT[0] &&
-                    currentExtentBottomLeft[1] >= LV95_EXTENT[1] &&
-                    currentExtentTopRight[0] <= LV95_EXTENT[2] &&
-                    currentExtentTopRight[1] <= LV95_EXTENT[3]
-                ) {
+                if (this.isExtentOnlyWithinLV95Bounds) {
                     log.debug('no need to show MapLibre, we are totally within LV95 extent')
                 } else {
                     return this.backgroundLayers.find(

diff --git a/src/modules/menu/MenuModule.vue b/src/modules/menu/MenuModule.vue
@@ -7,7 +7,12 @@
             <BlackBackdrop v-if="isPhoneMode && isMenuShown" @click="toggleMenu" />
         </transition>
         <HeaderWithSearch v-if="isHeaderShown" class="header" />
-        <div class="toolbox-right">
+        <div
+            class="toolbox-right"
+            :class="{
+                'dev-disclaimer-present': hasDevSiteWarning,
+            }"
+        >
             <GeolocButton
                 v-if="!isFullscreenMode"
                 class="mb-1"
@@ -26,6 +31,7 @@
             class="menu-tray-container"
             :class="{
                 'desktop-mode': isDesktopMode,
+                'dev-disclaimer-present': hasDevSiteWarning,
             }"
         >
             <transition name="slide-up">
@@ -34,7 +40,7 @@
                     class="menu-tray"
                     :class="{
                         'desktop-mode': isDesktopMode,
-                        'desktop-menu-closed': isDesktopMode && !showMenu,
+                        'desktop-menu-closed': isDesktopMode && !isMenuShown,
                     }"
                     data-cy="menu-tray"
                 >
@@ -93,6 +99,7 @@ export default {
             'isDesktopMode',
             'isMenuShown',
             'isMenuTrayShown',
+            'hasDevSiteWarning',
         ]),
     },
     methods: {
@@ -131,6 +138,9 @@ $animation-time: 0.5s;
         float: right;
         position: relative;
         margin: $screen-padding-for-ui-elements;
+        &.dev-disclaimer-present {
+            margin-top: $screen-padding-for-ui-elements + $dev-disclaimer-height;
+        }
     }
     .menu-tray-container {
         pointer-events: none;
@@ -139,6 +149,9 @@ $animation-time: 0.5s;
         bottom: 0;
         left: 0;
         width: 100%;
+        &.dev-disclaimer-present {
+            top: $header-height + $dev-disclaimer-height;
+        }
         &.desktop-mode {
             bottom: 70px;
         }
@@ -186,6 +199,9 @@ $animation-time: 0.5s;
     .menu {
         .menu-tray-container {
             top: 2 * $header-height;
+            &.dev-disclaimer-present {
+                top: 2 * $header-height + $dev-disclaimer-height;
+            }
         }
     }
 }

diff --git a/src/modules/menu/components/header/HeaderWithSearch.vue b/src/modules/menu/components/header/HeaderWithSearch.vue
@@ -1,13 +1,15 @@
 <template>
-    <div class="header d-flex">
+    <div class="header">
         <LoadingBar v-if="showLoadingBar" />
-        <div class="header-content w-100 p-1 d-flex justify-content-start">
-            <div class="justify-content-start p-1 d-flex flex-shrink-0 flex-grow-0">
-                <SwissFlag
-                    class="ms-1 me-2 cursor-pointer"
+        <div class="header-content w-100 p-sm-0 p-md-1 d-flex align-items-center">
+            <div class="logo-section justify-content-start p-1 d-flex flex-shrink-0 flex-grow-0">
+                <div
+                    class="p-1 cursor-pointer text-center"
                     data-cy="menu-swiss-flag"
                     @click="resetApp"
-                />
+                >
+                    <SwissFlag />
+                </div>
                 <HeaderSwissConfederationText
                     :current-lang="currentLang"
                     class="mx-2 cursor-pointer search-header-swiss-confederation-text"
@@ -16,35 +18,34 @@
                 />
             </div>
             <div
-                class="search-bar-section mx-2 d-flex-column flex-grow-1"
+                class="search-bar-section d-flex-column flex-grow-1"
                 :class="{ 'align-self-center': !hasDevSiteWarning }"
             >
-                <span class="float-start search-title">{{ $t('search_title') }}</span>
                 <SearchBar />
-                <!-- eslint-disable vue/no-v-html-->
-                <div
-                    v-if="hasDevSiteWarning"
-                    class="header-warning-dev bg-danger rounded text-white text-center text-wrap text-truncate fw-bold overflow-hidden p-1"
-                    v-html="$t('test_host_warning')"
-                />
-                <!-- eslint-enable vue/no-v-html-->
-            </div>
-            <div class="header-settings-section d-flex flex-shrink-0 flex-grow-0 ms-auto" data-cy="header-settings-section">
-                <FeedbackToolbar id="menu-feedback" :show-as-links="true" />
-                <LangSwitchToolbar id="menu-lang-selector" />
             </div>
-            <HeaderMenuButton v-if="isPhoneMode" />
+            <HeaderMenuButton v-if="isPhoneMode" class="mx-1" />
+        </div>
+        <div class="header-settings-section" data-cy="header-settings-section">
+            <FeedbackToolbar id="menu-feedback" :show-as-links="true" />
+            <LangSwitchToolbar id="menu-lang-selector" />
         </div>
+        <!-- eslint-disable vue/no-v-html-->
+        <div
+            v-if="hasDevSiteWarning"
+            class="header-warning-dev bg-danger text-white text-center text-wrap text-truncate overflow-hidden fw-bold p-1"
+            v-html="$t('test_host_warning')"
+        />
+        <!-- eslint-enable vue/no-v-html-->
     </div>
 </template>
 
 <script>
+import LangSwitchToolbar from '@/modules/i18n/components/LangSwitchToolbar.vue'
 import HeaderMenuButton from '@/modules/menu/components/header/HeaderMenuButton.vue'
 import HeaderSwissConfederationText from '@/modules/menu/components/header/HeaderSwissConfederationText.vue'
 import SwissFlag from '@/modules/menu/components/header/SwissFlag.vue'
-import SearchBar from '@/modules/menu/components/search/SearchBar.vue'
-import LangSwitchToolbar from '@/modules/i18n/components/LangSwitchToolbar.vue'
 import FeedbackToolbar from '@/modules/menu/components/menu/feedback/FeedbackToolbar.vue'
+import SearchBar from '@/modules/menu/components/search/SearchBar.vue'
 
 import LoadingBar from '@/utils/LoadingBar.vue'
 import { mapGetters, mapState } from 'vuex'
@@ -57,7 +58,7 @@ export default {
         SwissFlag,
         LoadingBar,
         LangSwitchToolbar,
-        FeedbackToolbar
+        FeedbackToolbar,
     },
     computed: {
         ...mapState({
@@ -91,12 +92,12 @@ $animation-time: 0.5s;
         height: $header-height;
         transition: height $animation-time;
     }
-    &-warning-dev {
-        height: 1.5em;
-        line-height: 1.2;
-        &:hover {
-            height: auto;
-        }
+}
+.header-warning-dev {
+    height: $dev-disclaimer-height;
+    line-height: 1.1;
+    &:hover {
+        height: auto;
     }
 }
 
@@ -106,6 +107,18 @@ $animation-time: 0.5s;
     max-width: 800px;
 }
 
+.header-settings-section {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: auto;
+    display: flex;
+}
+
+.logo-section {
+    min-width: $menu-tray-width;
+}
+
 .search-header-swiss-confederation-text,
 .search-title {
     display: none;
@@ -116,6 +129,10 @@ $animation-time: 0.5s;
         // See MenuTray.vue where the settings section is enable above lg
         display: none !important;
     }
+
+    .logo-section {
+        min-width: auto;
+    }
 }
 
 @include respond-above(lg) {
@@ -133,18 +150,4 @@ $animation-time: 0.5s;
         display: block;
     }
 }
-
-// WARNING: We cannot use bootstrap img-fluid to automatically set the height of the swiss-flag
-// as it totally breaks the header and menu on Iphone !
-.swiss-flag {
-    height: 21px;
-    &.dev-site {
-        filter: hue-rotate(225deg);
-    }
-}
-@include respond-above(lg) {
-    .swiss-flag {
-        height: 34px;
-    }
-}
 </style>