Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

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

Afficher la table des matières de la même façon en édition collaborative comme en edition solo #1088

Closed
ggrossetie opened this issue Nov 6, 2024 · 6 comments

Comments

@ggrossetie
Copy link
Collaborator

ggrossetie commented Nov 6, 2024

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

image

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

image

ggrossetie added a commit to ggrossetie/stylo that referenced this issue Nov 7, 2024
ggrossetie added a commit to ggrossetie/stylo that referenced this issue Nov 7, 2024
@RochDLY RochDLY modified the milestones: v3.x Mettre à jour la documentation et ses fonctionnalités, v3.x Organisation des informations dans Stylo Nov 8, 2024
@ggrossetie
Copy link
Collaborator Author

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
Copy link
Collaborator

maiwann commented Nov 13, 2024

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
Copy link
Collaborator

maiwann commented Nov 13, 2024

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
Copy link
Collaborator Author

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.

@ggrossetie ggrossetie changed the title Afficher la table des matières au clique sur l'icone à gauche du titre Afficher la table des matières de la même façon en édition collaborative comme en edition solo Nov 13, 2024
@maiwann
Copy link
Collaborator

maiwann commented Nov 14, 2024

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

editeur_menu1

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

Export et Preview emmènent à une autre page.

editeur_menu2

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.

editeur_menu3

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
Copy link
Collaborator

RochDLY commented Nov 15, 2024

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

@EcrituresNumeriques EcrituresNumeriques locked and limited conversation to collaborators Nov 15, 2024
@ggrossetie ggrossetie converted this issue into discussion #1101 Nov 15, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants