MAJ des boutons de copy d'URL#1461
Conversation
yaaax
left a comment
There was a problem hiding this comment.
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" |
There was a problem hiding this comment.
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ù…)
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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%;There was a problem hiding this comment.
Bien vu !
D'ailleurs, j'ai l'impression que seul le flex-wrap suffit sur .heanding-action.
| showSuccess.value = true; | ||
| }); | ||
|
|
||
| setTimeout(() => { |
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 (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.
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 setTimeout().
if (showSuccess.value) return;
benoitdequick
left a comment
There was a problem hiding this comment.
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 |
|
Retours suite à test du 13/04 : Pages "Tableau de bord de l'audit" et "Livrables"
Page "Rapport d'audit"
|
|
@AdrienMuzyczka je pense qu'il est tout à fait possible de partager le rapport si l'audit n'est pas terminé ! |
| const copyButtonRef = useTemplateRef("copyButtonRef"); | ||
|
|
||
| onMounted(() => { | ||
| // FIXME: `setTimeout()` used to force computing element's width after prop is assigned |
There was a problem hiding this comment.
Fonctionne pas à tous les coups.
Je suis preneur de solutions pour les reviewers !
closes #1441