Merge pull request #452 from geoadmin/feat-BGDIINF_SB-2430-share-menu

BGDIINF_SB-2430: Improved sharing embed previzualization
geoadmin · Oct 13, 2023 · a20f47d · a20f47d
2 parents 165573f + bfec254
commit a20f47d
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 68 deletions.
diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -39,14 +39,11 @@
             fluid
             @close="togglePreviewModal"
         >
-            <div class="embed-preview-modal">
-                <div
-                    class="d-flex embed-preview-modal-tools mb-1"
-                    :class="{ 'custom-size': isPreviewSizeCustom }"
-                >
+            <div class="embed-preview-modal" :style="embedPreviewModalWidth">
+                <div class="d-flex flex-row mb-2" :class="{ 'custom-size': isPreviewSizeCustom }">
                     <select
                         v-model="currentPreviewSize"
-                        class="embed-preview-modal-size-selector form-select w-auto"
+                        class="embed-preview-modal-size-selector form-select"
                         data-cy="menu-share-embed-iframe-size-selector"
                     >
                         <option
@@ -59,44 +56,39 @@
                             {{ $t(size.i18nKey) }}
                         </option>
                     </select>
-                    <MenuShareShortLinkInput
-                        class="flex-grow-1 ms-1"
-                        :with-text="false"
+                    <MenuShareInputCopyButton
+                        class="ms-1 flex-grow-1"
                         :small="false"
-                        :short-link="iFrameLink"
-                        :copy-text="'copy_cta'"
-                        :copied-text="'copy_done'"
+                        :input-text="iFrameLink"
                         data-cy="menu-share-embed-iframe-snippet"
                     />
                 </div>
-                <div v-if="isPreviewSizeCustom" class="row mb-1">
-                    <div class="col-sm-7">
-                        <div class="input-group">
-                            <input
-                                v-if="!customSize.fullWidth"
-                                v-model="customSize.width"
-                                type="number"
-                                class="form-control"
-                                data-cy="menu-share-embed-iframe-custom-width"
-                            />
-                            <input
-                                v-else
-                                class="form-control form-control-plaintext text-center"
-                                type="text"
-                                value="100%"
-                                readonly
-                                data-cy="menu-share-embed-iframe-custom-width"
-                            />
-                            <span class="input-group-text">x</span>
-                            <input
-                                v-model="customSize.height"
-                                type="number"
-                                class="form-control"
-                                data-cy="menu-share-embed-iframe-custom-height"
-                            />
-                        </div>
-                    </div>
-                    <div class="col-sm-5 align-self-center">
+                <div v-if="isPreviewSizeCustom" class="d-flex flex-row mb-2">
+                    <input
+                        v-if="!customSize.fullWidth"
+                        v-model="customSize.width"
+                        type="number"
+                        class="form-control text-center custom-preview-input"
+                        data-cy="menu-share-embed-iframe-custom-width"
+                    />
+                    <input
+                        v-else
+                        class="form-control form-control-plaintext custom-preview-input text-center"
+                        type="text"
+                        value="100 %"
+                        readonly
+                        data-cy="menu-share-embed-iframe-custom-width"
+                    />
+                    <span class="p-2">
+                        <font-awesome-icon :icon="['fas', 'xmark']" />
+                    </span>
+                    <input
+                        v-model="customSize.height"
+                        type="number"
+                        class="form-control custom-preview-input text-center"
+                        data-cy="menu-share-embed-iframe-custom-height"
+                    />
+                    <div class="align-self-center ps-2">
                         <div class="form-check">
                             <input
                                 id="fullWidthCheckbox"
@@ -122,16 +114,17 @@
                     :style="iFrameStyle"
                     allow="geolocation"
                 ></iframe>
+
                 <!-- eslint-disable vue/no-v-html-->
-                <div class="small" v-html="$t('share_disclaimer')"></div>
+                <div class="small text-wrap" v-html="$t('share_disclaimer')"></div>
                 <!-- eslint-enable vue/no-v-html-->
             </div>
         </ModalWithBackdrop>
     </div>
 </template>
 
 <script>
-import MenuShareShortLinkInput from '@/modules/menu/components/share/MenuShareShortLinkInput.vue'
+import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import ModalWithBackdrop from '@/utils/ModalWithBackdrop.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
@@ -173,7 +166,7 @@ const EmbedSizes = {
 export default {
     components: {
         FontAwesomeIcon,
-        MenuShareShortLinkInput,
+        MenuShareInputCopyButton,
         ModalWithBackdrop,
         CollapseTransition,
     },
@@ -197,6 +190,10 @@ export default {
         }
     },
     computed: {
+        embedPreviewModalWidth() {
+            // Uses the iframe's width as maximal width for the entire modal window
+            return { 'max-width': this.iFrameWidth }
+        },
         isPreviewSizeCustom() {
             return this.currentPreviewSize.i18nKey === EmbedSizes.CUSTOM.i18nKey
         },
@@ -255,7 +252,17 @@ export default {
         display: block;
     }
 }
+
+.embed-preview-modal {
+    min-width: 26rem;
+}
+
 .embed-preview-modal-size-selector {
     cursor: pointer;
+    max-width: 15rem;
+}
+
+.custom-preview-input {
+    max-width: 6rem;
 }
 </style>
diff --git a/...ponents/share/MenuShareShortLinkInput.vue → ...onents/share/MenuShareInputCopyButton.vue b/...ponents/share/MenuShareShortLinkInput.vue → ...onents/share/MenuShareInputCopyButton.vue
@@ -1,52 +1,51 @@
 <template>
-    <div v-if="shortLink">
-        <label v-if="withText">{{ $t('share_link') }}: </label>
+    <div v-if="inputText">
+        <label v-if="labelText">{{ $t(labelText) }}: </label>
         <div class="input-group" :class="{ 'input-group-sm': small }">
             <input
                 type="text"
-                class="form-control"
+                class="form-control input-text-to-copy"
                 readonly="readonly"
-                :value="shortLink"
-                data-cy="menu-share-shortlink-input"
+                :value="inputText"
+                data-cy="menu-share-input-copy-button"
                 @focus="$event.target.select()"
             />
             <button
                 class="btn btn-outline-secondary"
-                data-cy="menu-share-shortlink-copy-button"
-                @click="copyShortLinkInClipboard"
+                data-cy="menu-share-input-copy-button"
+                @click="copyInputToClipboard"
             >
-                {{ $t(copiedInClipboard ? copiedText : copyText) }}
+                {{ buttonText }}
             </button>
         </div>
     </div>
 </template>
 
 <script>
 /**
- * Simple input containing the current short link of the app, with a helper button to copy the short
- * link to the clipboard
+ * Simple input with a helper button to copy the input value to the clipboard
  */
 export default {
     props: {
-        shortLink: {
+        inputText: {
             type: String,
             default: null,
         },
-        withText: {
-            type: Boolean,
-            default: true,
-        },
         small: {
             type: Boolean,
             default: true,
         },
         copyText: {
             type: String,
-            default: 'copy_url',
+            default: 'copy_cta', // 'copy_url',
         },
         copiedText: {
             type: String,
-            default: 'copy_success',
+            default: 'copy_done', // 'copy_success',
+        },
+        labelText: {
+            type: String,
+            default: null,
         },
     },
     data() {
@@ -55,8 +54,15 @@ export default {
             timeoutCopied: null,
         }
     },
+    computed: {
+        buttonText() {
+            return this.$i18n
+                .t(this.copiedInClipboard ? this.copiedText : this.copyText)
+                .replace('&nbsp;', '\xa0')
+        },
+    },
     watch: {
-        shortLink() {
+        inputText() {
             this.clearIsCopiedInClipboard()
         },
     },
@@ -68,11 +74,17 @@ export default {
             this.copiedInClipboard = false
             clearTimeout(this.timeoutCopied)
         },
-        copyShortLinkInClipboard() {
-            navigator.clipboard.writeText(this.shortLink)
+        copyInputToClipboard() {
+            navigator.clipboard.writeText(this.inputText)
             this.copiedInClipboard = true
             this.timeoutCopied = setTimeout(this.clearIsCopiedInClipboard, 2500)
         },
     },
 }
 </script>
+
+<style lang="scss" scoped>
+.input-text-to-copy {
+    width: 0; // here we set the width to 0 in order to allow to shrink to the outer component
+}
+</style>
diff --git a/src/modules/menu/components/share/MenuShareSection.vue b/src/modules/menu/components/share/MenuShareSection.vue
@@ -11,7 +11,13 @@
         <FontAwesomeIcon v-if="!shortLink" icon="spinner" spin size="2x" class="p-2" />
         <div v-if="shortLink" class="p-2">
             <MenuShareSocialNetworks :short-link="shortLink" class="pt-1" />
-            <MenuShareShortLinkInput :short-link="shortLink" class="px-2 py-3" />
+            <MenuShareInputCopyButton
+                :input-text="shortLink"
+                :label-text="'share_link'"
+                :copy-text="'copy_url'"
+                :copied-text="'copy_success'"
+                class="px-2 py-3"
+            />
             <MenuShareEmbed :short-link="embeddedShortLink" class="pb-1" />
         </div>
     </MenuSection>
@@ -20,15 +26,15 @@
 <script>
 import MenuSection from '@/modules/menu/components/menu/MenuSection.vue'
 import MenuShareEmbed from '@/modules/menu/components/share/MenuShareEmbed.vue'
-import MenuShareShortLinkInput from '@/modules/menu/components/share/MenuShareShortLinkInput.vue'
+import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import MenuShareSocialNetworks from '@/modules/menu/components/share/MenuShareSocialNetworks.vue'
 import { mapActions, mapState } from 'vuex'
 
 /** Section of the main menu dedicated to sharing the state of the map/app via a short link */
 export default {
     components: {
         MenuShareEmbed,
-        MenuShareShortLinkInput,
+        MenuShareInputCopyButton,
         MenuShareSocialNetworks,
         MenuSection,
     },

diff --git a/src/setup-fontawesome.js b/src/setup-fontawesome.js
@@ -54,6 +54,7 @@ import {
     faTimesCircle,
     faUser,
     faWindowMinimize,
+    faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -102,6 +103,7 @@ library.add(
     faTimesCircle,
     faUser,
     faWindowMinimize,
+    faXmark,
     // Regular
     faCheckSquare,
     faClock,

diff --git a/tests/e2e-cypress/integration/shareShortLink.cy.js b/tests/e2e-cypress/integration/shareShortLink.cy.js
@@ -156,7 +156,7 @@ describe('Testing the share menu', () => {
         () => {
             const checkIFrameSnippetSize = (width, height) => {
                 cy.get(
-                    '[data-cy="menu-share-embed-iframe-snippet"] [data-cy="menu-share-shortlink-input"]'
+                    '[data-cy="menu-share-embed-iframe-snippet"] [data-cy="menu-share-input-copy-button"]'
                 )
                     .should('contain.value', `width: ${width}`)
                     .should('contain.value', `height: ${height}`)
@@ -225,7 +225,7 @@ describe('Testing the share menu', () => {
                     .click()
                 cy.get('[data-cy="menu-share-embed-iframe-custom-width"]')
                     .should('be.visible')
-                    .should('contain.value', '100%')
+                    .should('contain.value', '100 %')
                     .should('have.attr', 'readonly')
                 checkIFrameSnippetSize('100%', 300)
             })