Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Améliorer la saisie erreurs et recommandations #687

Open
22 of 45 tasks
AdrienMuzyczka opened this issue Mar 20, 2024 · 1 comment · May be fixed by #796
Open
22 of 45 tasks

Améliorer la saisie erreurs et recommandations #687

AdrienMuzyczka opened this issue Mar 20, 2024 · 1 comment · May be fixed by #796
Assignees
Labels
amélioration Proposition de nouvelle fonctionnalité ou amélioration de fonctionnalité

Comments

@AdrienMuzyczka
Copy link
Collaborator

AdrienMuzyczka commented Mar 20, 2024

  • L'éditeur enrichi est ajouté dans les "critères" et "annoter l'audit" et repris dans le rapport en mode "read only"
  • Pour "annoter l'audit" garder le composant d'ajout de fichier

==> MVP <==

Mise en forme du texte

  • WYSIWYG
  • Permettre les mises en formes du texte suivant :
    • Bold
    • Italic
    • Barré
    • Liste à puce
    • Liste numérotée
    • Titres (2 niveaux)
    • Citation de texte
    • Citation de code
    • Bloc de code
    • Lien
  • Ajouter une barre d'action pour la mise en forme du texte
    • Pour les boutons de titres, utiliser des boutons avec un rendu et une sémantique adaptée pour avoir une hiérarchie des titres cohérente dans le rapport et l'audit
    • 3 états pour un bouton : “défaut” / “hover” (identique pour un hover sur l’état “défaut” et “cliqué”) / “cliqué”
    • Lorsque l’usager sélectionne une saisie mise en forme, les boutons correspondant à la mise en forme passent en état “cliqué”

Ajout d'image

  • Image dans la zone de saisie
  • Drag and drop d'image
    • D'une image en local (ex : enregistrée sur le bureau ou preview type mac). Image uploadé sur notre serveur.
    • D'une data image (ex : URL décrivant l'image). Image uploadé sur notre serveur.
    • ⚠ toujours uploader les images sur notre serveur pour garder une trace du site audité. Éviter les liens rompus.
  • Coller d'image
    • D'une image en local (ex : enregistrée sur le bureau)
    • D'une data image (ex : URL décrivant l'image)
  • Ajouter une alternative aux ajouts d'image par drag and drop et copier-coller : bouton "insérer une image" dans la barre d'action

Raccourcis clavier

  • Prise en compte des raccourcis
  • Vérifier que les raccourcis clavier sont "habituels"

Redimensionnement du champ

  • Redimensionner automatiquement le champ de saisi en hauteur pour qu’il s’adapte à la longueur du contenu saisi

Message d'erreur (local et serveur)

  • Afficher un message personnalisé pour chaque type d'erreurs en utilisant la modale native du navigateur
    • erreur poids
    • erreur format fichier
    • erreur format fichier + poids
    • erreur time out
    • Reprendre les formats et poids des critères et annotation d'audit

Migration

  • Pour les audits "terminés" et "en cours", déplacer les images des critères dans le champ de saisie. Positionner ces images en bas du champ
  • Réaliser une série de tests sur les audits "terminés" pour s'assurer qu'il n'y aura aucune perte de données

Upload serveur

  • Upload au moment de l'import d'image dans l'éditeur
  • Delete server au moment de la suppression de l'image dans l'éditeur

Autre

  • Mettre le label de l'éditeur (accordéon) "Erreur et recommandation" au pluriel

UI

  • Personnaliser l'éditeur pour coller aux champs/zones de texte du DSFR
  • Laisser en blanc le fond de l'éditeur dans le rapport
  • Mode sombre, vérifier que les couleurs sont OK

==> V2 <==

UI

  • État des images : focus, hover etc...

Accessibilité et lisibilité

  • Éditeur accessible à 100% : navigation, actions et couleurs
  • Mode preview par défaut + mode MD en option

Ajout d'image

  • D'une image distante par coller et drop (ex : image hébergée sur un autre site). Image importée et uploadé sur notre serveur.

Redimensionnement du champ

  • Laisser la possibilité à l’usager de redimensionner le champ manuellement grâce à une poignée située en bas à droite du champ. Si le champ est plus petit que la longueur de la saisie, ajouter un scroll dans le champ

Message d'erreur (local et serveur)

  • Utiliser une modale "DSFR"

  • Permettre d’ajouter un fond sombre pour les images blanches sur fond transparent (ou alors le faire automatiquement ?)

QUESTIONS

  • Nécessaire de toujours avoir accès à la barre d'actions ? (Si le champ à une hauteur importante)
  • Nécessaire de limiter en hauteur le champ de saisie dans "annoter l'audit" pour toujours garder visible le composant "ajout de fichier" ?
  • Permettre tous les formats d'images dans un critère ? Ex : pour drag and drop une icône qui pose un problème sur le site audité
  • Pouvoir ajouter une alternative aux images
  • Permettre le redimensionnement des images dans le champ de saisie
@AdrienMuzyczka AdrienMuzyczka changed the title Améliorer la saisie erreurs et recommandations (fusion champs) Améliorer la saisie erreurs et recommandations Apr 24, 2024
@benoitdequick benoitdequick added the amélioration Proposition de nouvelle fonctionnalité ou amélioration de fonctionnalité label May 16, 2024
@benoitdequick benoitdequick added this to the Spring Summer 4 milestone May 16, 2024
@AdrienMuzyczka
Copy link
Collaborator Author

AdrienMuzyczka commented Jul 25, 2024

Constat

Pouvoir coller une image durant un audit ferait gagner du temps à l’auditeur en évitant de devoir enregistrer l’image avant de l’importer.

En plus du drag and drop que nous avons déjà identifié, ajouter la possibilité d’insérer une image par “coller” simplifierait le travail de l’auditeur, notamment lorsqu'il utilise des outils tiers pour des captures d’écran.

Recommandation

Réfléchir à la manière de permettre le coller d’images

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
amélioration Proposition de nouvelle fonctionnalité ou amélioration de fonctionnalité
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants