Affichage cohérent des informations dans l'éditeur de texte (collaboratif et non collaboratif)

[ggrossetie]

En édition collaborative on affiche la table des matières de façon contextuelle (affichage dans une info-bulle au dessus du texte):

En édition solo, on affiche la table des matières dans le panneau latéral gauche :

[ggrossetie]

On a quelques craintes concernant le fait que les utilisateurs puissent passer à côté de cette fonctionnalité.

Quelques pistes :

• Utiliser l'icone menu plutôt que celle utilisé actuellement
• Avoir un effet au survol (comme sur les autres bouton de l'entête avec la couleur qui s'éclaircit)
• Avoir un tooltip au survol indiquant "Table des matières"
• Ajouter une bordure pour que les utilisateurs identifient l'icone comme un "bouton"

[maiwann]

Normalement une icône sans label n'est pas une bonne pratique, sauf si on est vraiment sur.es que les utilisateurices savent identifier l'action associée à l'icone.

Là je pense qu'il faut être bien + explicite, et y rajouter un label, la déplacer, permettre qu'on identifie bien que c'est un bouton. J'aurai besoin d'une petite discussion sur les boutons de cette entête pour faire un peu de réorganisation selon les usages qu'ils entrainent et homogénéiser le tout.

[maiwann]

Je me lance sur une réflexion plus générale sur cet en-tête, je me note des choses liées à l'appel avec @RochDLY

Dans le header de l'éditeur il y aura à terme :

• Titre
• Auteur.ice
• Date dernière sauvegarde
• Table des matières
• Versions
• Biblio
• Export
• Preview
• (collaborative) Qui est connecté
• (collaborative) Indication de connexion
• (collaborative) Bouton "Fin de session" (p-e autre comportement à venir / disparition du bouton)
• Métadonnées

[ggrossetie]

Suite à une discussion avec @maiwann et @RochDLY, on pense que la table des matières doit rester visible afin de permettre de naviguer rapidement. Il faut donc que la table des matières puissent être visible à côté du texte.

Je vais modifier le titre du ticket pour qu'on ait quelque chose de similaire entre l'édition collaborative et l'édition solo.

[maiwann]

Voilà mes premières ébauches :

• Dans l'entête, je garde à gauche :

  • Le titre
  • Auteur.ice
  • Date dernière sauvegarde

• On met à droite l'indicateur de qui est connecté, pour les sessions collaboratives.

• On transforme l'indicateur "Connecté" :

  • Si je suis connecté, rien de spécial n'est écrit
  • Si je suis "déconnecté" ou "en cours de connexion", un bandeau "rouge-rose" apparait pour me prévenir qu'il y a un souci.

• Une icône "Menu" apparait à droite (on décale l'éditeur à gauche pour garder de la place pour déplier cette sidebar, et on le contraint à une longueur de ligne max de 100 caractères).

• Le Menu regroupe :
  • Table des matières
  • Biblio
  • Versions
  • Métadonnées
  • Export
  • Preview

Export et Preview emmènent à une autre page.

Là où le menu est différent de ce qui se passait précédemment, c'est qu'on ne "déplie" pas les sections, mais que lorsqu'on clique sur l'une des entrées du menu, on "entre" dans cette section. Ici l'exemple avec Table des matières. On ne peut donc pas ouvrir plusieurs sections en parallèle. On y gagne de la clarté, l'utilisateur saura plus précisément où il se trouve.

Les problèmes que cela résoud

• On homogénéise les types de boutons
• On regroupe les actions au même endroit
• On enlève les boutons de la vue initiale de l'éditeur, pour la garder épurée pour qu'elle soit dédiée à l'écriture sans que l'utilisateurice se sente encombré.e
• On met un label sur les icônes pour que leur action soit explicite (on peut garder l'oeil et l'imprimante si vous le souhaitez)

Les problèmes que ça ne résoud pas (encore)

• On ne peut pas pour l'instant comparer les versions des métadonnées, puisqu'on ne choisit qu'une section du Menu à la fois (donc pas Versions + Métadonnées). A voir 1. si c'est un usage important/courant; 2.si on place les versions ailleurs, à l'horizontale, pour qu'elles ressemblent à une timeline, ce qui permettrait peut-être de faire mieux comprendre leur utilité à celleux qui n'utilisent pas encore / du tout cette fonctionnalité
• La non-utilisation du bouton "Finir la session collaborative" mais j'imagine que ça peut être le contenu d'une autre issue. En profiter peut-être pour améliorer la découvrabilité des versions (ex : fermer son onglet "session collaborative" déclenche une pop-in demandant d'enregistrer une version ?

[RochDLY]

Merci @maiwann pour ces planches ! Ça me paraît être une très bonne base pour résoudre les problèmes que tu mentionnes !

Idée qui me vient en te lisant :

Admettons que le gestionnaire de versions soit à l'horizontale avec tous les X espaces une petite étiquette avec le numéro de version. Au clic sur cette étiquette, un menu apparait avec deux action : visualiser ou comparer.

L'action visualiser me donne accès à la version en lecture seule (je suis toujours dans l'interface d'édition mais je ne peux rien modifier, par contre je peux voir md, bibtex et yaml selon les volets).

L'action comparer me donne 3 possibilités (md, bibtex ou yaml) et affiche la comparaison avec la version sur laquelle je me trouvais avant de cliquer sur comparer (ainsi on récupère la comparaison avec la working copy).

Si je veux comparer la version 3 avec la version 1, je me mets en visualisation sur la version 3 et je clique sur la version 1 dans l'arbre des versions + le bouton comparer.

Note : en l'écrivant je me rends compte que ça fait un cheminement assez lourd ... (alors qu'une bonne ligne de commande avec un diff ...)

[ggrossetie]

Merci pour ce travail @maiwann !
On a ajouté la possibilité d'avoir une prévisualisation via Paged.js (sans sortir de la page de l'éditeur de texte) avec un bouton "Edit" qui permet de basculer en édition: #718
Comment est-ce qu'on peut faire pour intégrer cette fonctionnalité dans le nouveau menu unifié ?

[ggrossetie]

Une autre remarque concernant l'affichage. D'après ce que je comprends, le contenu du panneau latéral est remplacé par les informations d'une "section". Par exemple, si je clique sur "Tables de matières", j'affiche uniquement les informations de la table des matières et j'ai un bouton permettant de revenir au menu "principal" ? Autrement dit, on est pas dans un système d'onglets dépliables où je peux voir la table des matières ainsi que la liste des versions ?

Je pense que cela peut rendre compliqué la comparaison des métadonnées entre plusieurs versions. Cela dit, les versions sont actuellement sous utilisées/exploitées et je pense qu'on pourrait avoir une interface différente quand on compare des versions ?

[maiwann]

Autrement dit, on est pas dans un système d'onglets dépliables où je peux voir la table des matières ainsi que la liste des versions ?

Oui c'est ça, ça n'est plus un menu

Je pense que cela peut rendre compliqué la comparaison des métadonnées entre plusieurs versions. Cela dit, les versions sont actuellement sous utilisées/exploitées et je pense qu'on pourrait avoir une interface différente quand on compare des versions ?

Oui je pense que de toute façon il y a un travail à faire pour faciliter la comparaison entre 2 versions, que se soit 2 versions de 'larticle ou des métadonnées, et donc abandonner le fait de déplier me semblait ok

[maiwann]

Proposition de mettre un bouton Éditeur/Preview type https://geist-ui.dev/en-us/components/button-group

ToDo @maiwann Maquette à faire

[maiwann]

Voilà la proposition de bouton : Un "button group" qui permet soit d'être en mode "éditeur", soit en mode "aperçu" = la nouvelle preview cf #1101 (comment)
Ce qui me fait décaler les "bulles" indiquant qui se trouve sur cette page, en dessous du sous-titre.

[maiwann]

Discussion du 11/03, distinguer

• Éditeur
• Aperçu (= nouvelle preview)
• Annotation (= ancienne preview) qui reste pour les personnes extérieures à l'article