MAJ des boutons de copy d'URL #1461
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <script lang="ts" setup> | ||
| import { templateRef } from "@vueuse/core"; | ||
| import { onMounted, ref } from "vue"; | ||
| import { RouteLocationRaw } from "vue-router"; | ||
| import router from "../../router"; | ||
|
|
||
| const props = defineProps<{ | ||
| icon: string; | ||
| label: string; | ||
| successLabel: string; | ||
| contentToCopy: string | RouteLocationRaw; | ||
| isWithinBtnGroup?: boolean; | ||
| }>(); | ||
|
|
||
| const showSuccess = ref(false); | ||
|
|
||
| function copyContentToClipboard() { | ||
| const content = typeof props.contentToCopy === "string" | ||
| ? props.contentToCopy | ||
| : window.location.origin + router.resolve(props.contentToCopy).fullPath; | ||
|
|
||
| navigator.clipboard.writeText(content).then(() => { | ||
| showSuccess.value = true; | ||
| }); | ||
|
|
||
| setTimeout(() => { | ||
|
Collaborator
There was a problem hiding this comment. Attention le comportement est étrange si on clic alors que le message de succès est déjà affiché et que le délai ( Après la sélection du bouton "Copier le lien de partage", changer le
Collaborator
Author
There was a problem hiding this comment. Dans la méthode, j'ai rajouté ça pour ne rien faire si on montre déjà le succès. Et du coup ça relance pas un nouveau if (showSuccess.value) return; |
||
| showSuccess.value = false; | ||
| }, 3500); | ||
| } | ||
|
|
||
| const initialButtonWidth = ref<string>(); | ||
| const copyButtonRef = templateRef("copyButtonRef"); | ||
| onMounted(() => { | ||
| initialButtonWidth.value = `${copyButtonRef.value?.offsetWidth}px`; | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <button | ||
| ref="copyButtonRef" | ||
| type="button" | ||
| :class="[`fr-btn fr-btn--secondary fr-btn--icon-left ${showSuccess ? 'fr-icon-check-line copy-button--success' : icon} copy-button`, { | ||
| 'copy-button--within-btn-group fr-mb-0': isWithinBtnGroup | ||
| }]" | ||
| @click="copyContentToClipboard" | ||
| > | ||
| {{ showSuccess ? successLabel : label }} | ||
| </button> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .copy-button { | ||
| &:not(.copy-button--within-btn-group) { | ||
| width: v-bind(initialButtonWidth) !important; | ||
|
Collaborator
There was a problem hiding this comment. Super le Attention ça casse le côté responsive sur petits écrans, côté rapport ("within btn group"). Rajouter ici : max-width: 100%;Et sur flex-wrap: wrap;
max-width: 100%;
Collaborator
Author
There was a problem hiding this comment. Bien vu ! D'ailleurs, j'ai l'impression que seul le |
||
| justify-content: center !important; | ||
| } | ||
| } | ||
|
|
||
| .copy-button--success { | ||
| color: var(--text-default-success) !important; | ||
| box-shadow: inset 0 0 0 1px var(--text-default-success) !important; | ||
| } | ||
| </style> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Et si on mettait ces 2 props
labeletsuccess-labelen valeurs par défaut dans le composant CopyButton à "Copier le lien de partage" et "Lien de partage copié" ? Comme ça pas besoin de répéter à chaque fois ces même textes. (En gardant la possibilité de spécifier d’autres labels au cas où…)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oui effectivement, surtout que ça sera souvent ces labels là.