Merge pull request #837 from geoadmin/bug-icon-size-mobile

PB-503: Several UI in menu improvements, especially on mobile

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/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

@@ -169,12 +169,7 @@ 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

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

@@ -110,7 +110,7 @@ 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"
     >

src/modules/menu/components/share/MenuShareSection.vue

@@ -16,6 +16,7 @@
                 :copy-text="'copy_url'"
                 :copied-text="'copy_success'"
                 class="p-2"
+                :small="compact"
             />
         </div>
         <MenuShareEmbed :short-link="embeddedShortLink" class="menu-share-embed border-top" />
@@ -40,6 +41,12 @@ export default {
         MenuShareSocialNetworks,
         MenuSection,
     },
+    props: {
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+    },
     emits: ['openMenuSection'],
     expose: ['close'],
     computed: {

src/modules/menu/components/share/MenuShareSocialNetworks.vue

@@ -51,7 +51,7 @@ const networks = ref([
     },
 ])
 
-const buttonClass = 'btn btn-sm btn-light share-network-button'
+const buttonClass = `btn btn-sm btn-light share-network-button m-1`
 const iconSize = '2x'
 
 function openQrcode() {
@@ -71,7 +71,7 @@ onUpdated(() => refreshTippyAttachment())
 </script>
 
 <template>
-    <div v-if="shortLink" class="d-flex">
+    <div v-if="shortLink" class="container text-center">
         <ShareNetwork
             v-for="network in networks"
             :key="network.id"
@@ -102,8 +102,4 @@ onUpdated(() => refreshTippyAttachment())
 
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
-
-.share-network-button {
-    margin-right: $button-spacer;
-}
 </style>

src/scss/variables.module.scss

@@ -34,7 +34,7 @@ $zindex-drawing-toolbox: 3;
 $header-height: 3rem;
 $dev-disclaimer-height: 24px;
 $footer-height: 30px;
-$overlay-width: 320px;
+$overlay-width: 340px;
 $menu-tray-width: 24rem;
 $drawing-tools-height-mobile: 121px;
 

src/utils/components/CoordinateCopySlot.vue

@@ -101,7 +101,7 @@ async function copyValue() {
     <div class="location-popup-label">
         <slot />
     </div>
-    <div class="location-popup-data gap-1">
+    <div class="location-popup-data gap-1 align-items-center">
         <div>
             <div :data-cy="`${identifier}`">
                 {{ display(value) }}
@@ -113,7 +113,7 @@ async function copyValue() {
         <button
             ref="copyButton"
             :data-cy="`${identifier}-button`"
-            class="location-popup-copy-button btn btn-light text-black-50"
+            class="location-popup-copy-button btn btn-sm btn-light text-black-50"
             type="button"
             @click="copyValue"
         >
@@ -128,13 +128,6 @@ async function copyValue() {
     display: grid;
     grid-template-columns: auto max-content;
 }
-.location-popup-copy-button {
-    // aligning to the top of the container, so that it doesn't spread down if there's an extra value
-    align-self: start;
-    margin-top: -0.1rem;
-    padding: 0 0.2rem;
-    font-size: inherit;
-}
 .location-popup-data {
     @extend .clear-no-ios-long-press;
 }