Merge pull request #845 from geoadmin/develop

New Release v1.17.0 - #minor

src/modules/i18n/components/LangButton.vue

@@ -1,5 +1,36 @@
+<script setup>
+import { computed, toRefs } from 'vue'
+import { useStore } from 'vuex'
+
+import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
+import log from '@/utils/logging'
+
+const dispatcher = { dispatcher: 'LangButton.vue' }
+
+const store = useStore()
+
+const props = defineProps({
+    lang: {
+        type: String,
+        required: true,
+    },
+    showAsLinks: {
+        type: Boolean,
+        default: false,
+    },
+})
+const { lang, showAsLinks } = toRefs(props)
+
+const currentLang = computed(() => store.state.i18n.lang)
+
+function changeLang() {
+    log.debug('switching locale', lang.value)
+    store.dispatch('setLang', { lang: lang.value, ...dispatcher })
+}
+</script>
+
 <template>
-    <HeaderLink v-if="isDesktopMode" :primary="currentLang === lang" @click="changeLang">
+    <HeaderLink v-if="showAsLinks" :primary="currentLang === lang" @click="changeLang">
         {{ lang.toUpperCase() }}
     </HeaderLink>
     <button
@@ -16,35 +47,3 @@
         {{ lang.toUpperCase() }}
     </button>
 </template>
-
-<script>
-import { mapActions, mapGetters, mapState } from 'vuex'
-
-import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
-import log from '@/utils/logging'
-
-const dispatcher = { dispatcher: 'LangButton.vue' }
-
-export default {
-    components: { HeaderLink },
-    props: {
-        lang: {
-            type: String,
-            required: true,
-        },
-    },
-    computed: {
-        ...mapGetters(['isDesktopMode']),
-        ...mapState({
-            currentLang: (state) => state.i18n.lang,
-        }),
-    },
-    methods: {
-        ...mapActions(['setLang']),
-        changeLang() {
-            log.debug('switching locale', this.lang)
-            this.setLang({ lang: this.lang, ...dispatcher })
-        },
-    },
-}
-</script>

src/modules/i18n/components/LangSwitchToolbar.vue

@@ -1,35 +1,36 @@
+<script setup>
+import { ref, toRefs } from 'vue'
+
+import { languages as availableLanguages } from '../index'
+import LangButton from './LangButton.vue'
+
+const props = defineProps({
+    showAsLinks: {
+        type: Boolean,
+        default: false,
+    },
+})
+const { showAsLinks } = toRefs(props)
+
+const languages = ref(Object.keys(availableLanguages))
+</script>
+
 <template>
     <div
         :class="{
-            'lang-switch-menu p-1': !isDesktopMode,
-            'lang-switch-header me-2': isDesktopMode,
+            'lang-switch-menu p-1': !showAsLinks,
+            'lang-switch-header me-2': showAsLinks,
         }"
     >
-        <LangButton v-for="lang in languages" :key="lang" :lang="lang" />
+        <LangButton
+            v-for="lang in languages"
+            :key="lang"
+            :lang="lang"
+            :show-as-links="showAsLinks"
+        />
     </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { languages } from '../index'
-import LangButton from './LangButton.vue'
-
-export default {
-    components: {
-        LangButton,
-    },
-    data() {
-        return {
-            languages: Object.keys(languages),
-        }
-    },
-    computed: {
-        ...mapGetters(['isDesktopMode']),
-    },
-}
-</script>
-
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
 

src/modules/map/components/LocationPopup.vue

@@ -87,7 +87,7 @@ onMounted(() => {
     copyTooltipInstance = tippy(shareTabButton.value, {
         content: i18n.t('copy_success'),
         arrow: true,
-        placement: 'right',
+        placement: 'top',
         trigger: 'manual',
         onShow(instance) {
             setTimeout(() => {
@@ -237,4 +237,8 @@ function clearClick() {
 
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
+
+.location-popup {
+    width: $overlay-width;
+}
 </style>

src/modules/map/components/LocationPopupPosition.vue

@@ -108,7 +108,7 @@ async function updateHeight() {
 
 <template>
     <div id="nav-local" class="tab-pane fade" role="tabpanel" aria-labelledby="nav-local-tab">
-        <div class="pb-2 location-popup-coordinates">
+        <div class="pb-2 location-popup-coordinates align-items-center">
             <CoordinateCopySlot
                 identifier="location-popup-lv95"
                 :value="coordinate"

src/modules/map/components/LocationPopupShare.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import { useStore } from 'vuex'
 
 import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import MenuShareSocialNetworks from '@/modules/menu/components/share/MenuShareSocialNetworks.vue'
@@ -11,6 +12,10 @@ const props = defineProps({
     },
 })
 const { shareLinkUrlShorten } = toRefs(props)
+
+const store = useStore()
+
+const isDesktopMode = computed(() => store.getters.isDesktopMode)
 </script>
 
 <template>
@@ -30,6 +35,7 @@ const { shareLinkUrlShorten } = toRefs(props)
             :copied-text="'copy_success'"
             class="px-0 py-2"
             data-cy="location-popup-link-bowl-crosshair"
+            :small="isDesktopMode"
         />
     </div>
 </template>

src/modules/map/components/toolbox/TimeSlider.vue

@@ -76,22 +76,16 @@ const innerBarStyle = computed(() => {
     return { width: `${sliderWidth.value}px` }
 })
 const yearPositionOnSlider = computed(
-    () => (1 + ALL_YEARS.indexOf(currentYear.value)) * distanceBetweenLabels.value
+    () => (1 + ALL_YEARS.indexOf(currentYear.value)) * distanceBetweenLabels.value + 42
 )
 const cursorPosition = computed(() => {
     const yearCursorWidth = yearCursor.value?.clientWidth || 0
-    let left = yearPositionOnSlider.value - yearCursorWidth / 2
-    // we give an overlap of 12px as there is some space between the play button and the end
-    // of the slider
-    if (left > sliderWidth.value - (yearCursorWidth - 12)) {
-        left = sliderWidth.value - (yearCursorWidth - 12)
-    }
-    if (left < 0) {
-        left = 0
-    }
-    return {
-        left: `${left}px`,
-    }
+    // we need to add 4.5 pixels which is half the size of the arrow for the slider to
+    // really be in the middle of the arrow
+    // make sure it doesn't go below 0
+    const left = Math.max(yearPositionOnSlider.value - yearCursorWidth / 2 + 4.5, 0)
+
+    return `${left}px`
 })
 const cursorArrowPosition = computed(() => {
     return {
@@ -213,9 +207,10 @@ function setCurrentYearAndDispatchToStore(year, removePristineStatus = false) {
 }
 
 function setSliderWidth() {
-    // 19px of padding (7.5 on both side of the container with p-2 class and 4 with px-1)
-
-    sliderWidth.value = sliderContainer.value.clientWidth - 19 - PLAY_BUTTON_SIZE
+    // the padding of the slider container (4px each side) + the padding of the
+    // slider bar (48px each side) = 112
+    const padding = 112
+    sliderWidth.value = sliderContainer.value.clientWidth - padding - PLAY_BUTTON_SIZE
 }
 
 function positionNodeLabel(year) {
@@ -339,12 +334,12 @@ function setYearToInputIfValid() {
         :class="{ grabbed: yearCursorIsGrabbed }"
     >
         <div class="p-2 d-flex">
-            <div class="time-slider-bar">
+            <div class="time-slider-bar px-5">
                 <div
                     ref="yearCursor"
                     data-cy="times-slider-cursor"
                     class="time-slider-bar-cursor py-1 user-select-none d-flex gap-1 bg-body border rounded"
-                    :style="cursorPosition"
+                    :style="{ left: cursorPosition }"
                 >
                     <div
                         class="px-2 border-end d-flex align-items-center"
@@ -381,7 +376,7 @@ function setYearToInputIfValid() {
                 />
                 <div
                     v-if="yearsShownAsLabel.length > 0"
-                    class="time-slider-bar-inner d-flex mt-5 mx-1"
+                    class="time-slider-bar-inner d-flex mt-5"
                     :style="innerBarStyle"
                 >
                     <span

src/modules/menu/components/header/HeaderWithSearch.vue

@@ -26,7 +26,7 @@
         </div>
         <div class="header-settings-section" data-cy="header-settings-section">
             <LinksToolbar id="menu-links" :show-as-links="true" />
-            <LangSwitchToolbar id="menu-lang-selector" />
+            <LangSwitchToolbar id="menu-lang-selector" :show-as-links="true" />
         </div>
         <!-- eslint-disable vue/no-v-html-->
         <div

src/modules/menu/components/menu/MenuTray.vue

@@ -12,7 +12,11 @@
         >
             <MenuSettings />
         </MenuSection>
-        <MenuShareSection ref="shareSection" @open-menu-section="onOpenMenuSection" />
+        <MenuShareSection
+            ref="shareSection"
+            :compact="compact"
+            @open-menu-section="onOpenMenuSection"
+        />
         <MenuPrintSection
             v-if="!is3dMode"
             ref="printSection"

src/modules/menu/components/settings/HelpLink.vue

@@ -20,7 +20,7 @@ function openCmsLink() {
     <HeaderLink v-if="isDesktopMode" @click="openCmsLink">
         {{ i18n.t('help_label') }}
     </HeaderLink>
-    <button v-else class="btn btn-sm btn-light m-1" @click="openCmsLink">
+    <button v-else class="btn btn-light m-1" @click="openCmsLink">
         {{ i18n.t('help_label') }}
     </button>
 </template>

src/modules/menu/components/settings/MoreInfo.vue

@@ -20,7 +20,7 @@ function openCmsLink() {
     <HeaderLink v-if="isDesktopMode" @click="openCmsLink">
         {{ i18n.t('cms_link_button_title') }}
     </HeaderLink>
-    <button v-else class="btn btn-sm btn-light m-1" @click="openCmsLink">
+    <button v-else class="btn btn-light m-1" @click="openCmsLink">
         {{ i18n.t('cms_link_button_title') }}
     </button>
 </template>

src/modules/menu/components/settings/ReportProblemButton.vue

@@ -9,7 +9,7 @@ import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
 import SendActionButtons from '@/modules/menu/components/settings/common/SendActionButtons.vue'
 import EmailInput from '@/utils/components/EmailInput.vue'
 import FileInput from '@/utils/components/FileInput.vue'
-import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
+import SimpleWindow from '@/utils/components/SimpleWindow.vue'
 import TextAreaInput from '@/utils/components/TextAreaInput.vue'
 import log from '@/utils/logging'
 
@@ -169,22 +169,16 @@ function toggleDrawingOverlay() {
     >
         <strong>{{ i18n.t('problem_announcement') }}</strong>
     </HeaderLink>
-    <button
-        v-else
-        class="btn btn-primary btn-sm m-1"
-        data-cy="report-problem-button"
-        @click="openForm"
-    >
+    <button v-else class="btn btn-primary m-1" data-cy="report-problem-button" @click="openForm">
         {{ i18n.t('problem_announcement') }}
     </button>
-    <ModalWithBackdrop
+    <SimpleWindow
         v-if="showReportProblemForm"
-        :title="request.completed ? '' : i18n.t('problem_announcement')"
-        fluid
+        :title="request.completed ? '' : 'problem_announcement'"
         :hide="showDrawingOverlay"
         @close="closeAndCleanForm"
     >
-        <div v-if="!request.completed" class="p-" data-cy="report-problem-form">
+        <div v-if="!request.completed" class="report-problem" data-cy="report-problem-form">
             <div class="my-3">
                 <TextAreaInput
                     ref="feedbackMessageTextArea"
@@ -286,7 +280,7 @@ function toggleDrawingOverlay() {
                 {{ i18n.t('close') }}
             </button>
         </div>
-    </ModalWithBackdrop>
+    </SimpleWindow>
 </template>
 
 <style lang="scss" scoped>

src/modules/menu/components/settings/feedback/FeedbackButton.vue

@@ -8,7 +8,7 @@ import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
 import SendActionButtons from '@/modules/menu/components/settings/common/SendActionButtons.vue'
 import FeedbackRating from '@/modules/menu/components/settings/feedback/FeedbackRating.vue'
 import EmailInput from '@/utils/components/EmailInput.vue'
-import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
+import SimpleWindow from '@/utils/components/SimpleWindow.vue'
 import TextAreaInput from '@/utils/components/TextAreaInput.vue'
 import log from '@/utils/logging'
 
@@ -110,16 +110,15 @@ function onEmailValidate(valid) {
     </HeaderLink>
     <button
         v-else
-        class="btn btn-primary btn-sm m-1"
+        class="btn btn-primary m-1"
         data-cy="feedback-button"
         @click="showFeedbackForm = true"
     >
         {{ i18n.t('test_map_give_feedback') }}
     </button>
-    <ModalWithBackdrop
+    <SimpleWindow
         v-if="showFeedbackForm"
-        :title="request.completed ? '' : i18n.t('test_map_give_feedback')"
-        fluid
+        :title="request.completed ? '' : 'test_map_give_feedback'"
         @close="closeAndCleanForm"
     >
         <div v-if="!request.completed" class="p-2" data-cy="feedback-form">
@@ -196,7 +195,7 @@ function onEmailValidate(valid) {
                 {{ i18n.t('close') }}
             </button>
         </div>
-    </ModalWithBackdrop>
+    </SimpleWindow>
 </template>
 
 <style lang="scss" scoped>