Skip to content

MAJ des boutons de copy d'URL#1461

Open
bellangerq wants to merge 12 commits intomainfrom
1441-maj-le-bouton-de-copie-de-lien-de-livrable
Open

MAJ des boutons de copy d'URL#1461
bellangerq wants to merge 12 commits intomainfrom
1441-maj-le-bouton-de-copie-de-lien-de-livrable

Conversation

@bellangerq
Copy link
Copy Markdown
Collaborator

closes #1441

@hissalht hissalht temporarily deployed to ara-1441-maj-le-bouton--bf03fv April 2, 2026 15:25 Inactive
Copy link
Copy Markdown
Collaborator

@yaaax yaaax left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Effet visuel au top ! Restitution aux aides techniques OK.

  • 1 proposition de rework mineur de code
  • 1 bug CSS (responsive)
  • 1 bug JS (<button> vs <div> et setTimeout)

</div>
<div class="fr-btns-group fr-btns-group--icon-left">
<CopyButton
label="Copier le lien de partage"
Copy link
Copy Markdown
Collaborator

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 label et success-label en 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ù…)

Copy link
Copy Markdown
Collaborator Author

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à.

<style scoped>
.copy-button {
&:not(.copy-button--within-btn-group) {
width: v-bind(initialButtonWidth) !important;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super le width qui se met à jour !

Attention ça casse le côté responsive sur petits écrans, côté rapport ("within btn group").

Rajouter ici :

max-width: 100%;

Et sur .heading-action :

flex-wrap: wrap;
max-width: 100%;

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bien vu !

D'ailleurs, j'ai l'impression que seul le flex-wrap suffit sur .heanding-action.

showSuccess.value = true;
});

setTimeout(() => {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Attention le comportement est étrange si on clic alors que le message de succès est déjà affiché et que le délai (setTimeout) est en cours.

Après la sélection du bouton "Copier le lien de partage", changer le <button> par une <div> ? Ainsi il ne sera plus possible de cliquer dessus ! Attention à la restitution aux aides techniques.
Aussi, pour aller jusqu’au bout, on peut vérifier l’id retourné par le setTimeout : ne pas relancer de setTimeout tant qu’un délai est en cours.

Copy link
Copy Markdown
Collaborator Author

@bellangerq bellangerq Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 setTimeout().

if (showSuccess.value) return;

@hissalht hissalht temporarily deployed to ara-1441-maj-le-bouton--bf03fv April 8, 2026 08:48 Inactive
Copy link
Copy Markdown
Contributor

@benoitdequick benoitdequick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nickel !
C'est possible de distinguer les différents lien de partage pour les aides techniques ?
"Lien de partage de la déclaration copié" et "Lien de partage du rapport copié"

@hissalht hissalht temporarily deployed to ara-1441-maj-le-bouton--bf03fv April 8, 2026 09:40 Inactive
@bellangerq
Copy link
Copy Markdown
Collaborator Author

Nickel ! C'est possible de distinguer les différents lien de partage pour les aides techniques ? "Lien de partage de la déclaration copié" et "Lien de partage du rapport copié"

En effet, j'ai rajouté une prop hiddenLabelSuffix pour rajouter genre "du rapport", "de la déclaration"...

@AdrienMuzyczka
Copy link
Copy Markdown
Collaborator

AdrienMuzyczka commented Apr 13, 2026

Retours suite à test du 13/04 :

Pages "Tableau de bord de l'audit" et "Livrables"

  • Bloc "Grille d'audit" : passer le bouton "Télécharger" en secondaire quand l'audit n'est pas terminé
  • Blocs "Rapport d'audit" et "Audit" : utiliser le libellé "Lien copié" pour le feedback du bouton
  • Bloc "Audit" : afficher le bouton "Accéder" en pleine largeur quand l'audit est terminé

Page "Rapport d'audit"

  • Afficher le libellé du bouton "Copier le lien du rapport" sur une seule ligne

@benoitdequick
Copy link
Copy Markdown
Contributor

@AdrienMuzyczka je pense qu'il est tout à fait possible de partager le rapport si l'audit n'est pas terminé !

@hissalht hissalht temporarily deployed to ara-1441-maj-le-bouton--bf03fv April 15, 2026 13:13 Inactive
@hissalht hissalht temporarily deployed to ara-1441-maj-le-bouton--bf03fv April 15, 2026 15:37 Inactive
@hissalht hissalht temporarily deployed to ara-1441-maj-le-bouton--bf03fv April 16, 2026 08:06 Inactive
const copyButtonRef = useTemplateRef("copyButtonRef");

onMounted(() => {
// FIXME: `setTimeout()` used to force computing element's width after prop is assigned
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fonctionne pas à tous les coups.

Je suis preneur de solutions pour les reviewers !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MAJ le bouton de copie de lien de livrable

5 participants