Retour d'information sur le composant thème "Mode Lecteur"

[jordan.vidrine]

J’ai récemment installé un composant de thème ici sur Meta qui introduit un « mode lecteur » lors de la visualisation d’un sujet.

Le bouton pour activer cette fonctionnalité se trouve en haut des contrôles de la chronologie du sujet :

Cliquer dessus mettra le sujet en « mode lecture », couvrant la majeure partie de l’interface utilisateur avec une couverture légèrement opaque afin de minimiser les distractions.

D’autres choses se produisent, comme un filtre appliqué à tous les avatars et images, les transformant en une image en niveaux de gris.

Voici un enregistrement d’écran de son utilisation.

---

Le composant est disponible sur les thèmes suivants installés ici sur meta :

• Air Theme
• Default
• Default (Full Width)
• Fully
• Meta Branded
• Redditish
• Sam’s Simple Theme

Ceci est toujours en cours de développement et j’apprécierais que tout rapport de bug ou commentaire soit publié ici

[david (David Taylor)]

Très cool !

Une chose que j’ai remarquée est que certains changements de style font “sauter” la mise en page lorsque je clique sur le bouton. Je suppose que certains éléments sont mis en display: none; ? Ou que certaines tailles de police changent ?

Serait-il possible de simplement “griser” le bouton (ou de mettre visibility: hidden; sur) les éléments inutiles, sans causer de changement de mise en page ?

[jordan.vidrine]

@david

Une chose que j’ai remarquée est que certains changements de style font « sauter » la mise en page lorsque je clique sur le bouton. Je suppose que certains éléments sont mis à display: none; ? Ou que certaines tailles de police changent ?

Serait-il possible de faire en sorte que le bouton se contente de « griser » les éléments inutiles, sans provoquer de changement de mise en page ?

Oui, c’est une difficulté que j’ai rencontrée.

Idéalement, la barre latérale se fermerait en animation, comme elle le fait lorsque vous cliquez normalement sur le bouton de basculement de la barre latérale.

Comme mon composant ferme la barre latérale, mais ne l’anime pas, cela provoque une secousse.

Je pourrais soit :

• animer la fermeture de la barre latérale
  • Je ne sais pas comment faire cela, car je pense que c’est fait via JS + CSS ?
• ne pas fermer la barre latérale

[david (David Taylor)]

Et visibility: hidden; ? Ou opacity: 0; ? Ainsi, il serait toujours là et inclus dans la mise en page, mais invisible ? Je suppose qu’il faudrait aussi quelque chose pour empêcher les clics/focus dessus ? Ou peut-être le rendre à nouveau visible au survol/focus ?

@jordan.vidrine

animer la barre latérale pour la fermer

• je ne suis pas sûr de la façon de faire, car je pense que cela se fait via JS + Css ?

Une façon relativement sûre serait d’imiter l’interaction de l’utilisateur :

if(document.body.classList.contains("has-sidebar-page")){ // La barre latérale est visible
  document.querySelector(".btn-sidebar-toggle").click()
}

[jordan.vidrine]

@david

Que diriez-vous de visibility: hidden; ? Ou opacity: 0; ? Ainsi, il est toujours là et inclus dans la mise en page, mais invisible ?

Parlez-vous de la barre latérale ?

Si oui, je la ferme en fait avec mon composant, donc elle utilise la même méthode principale comme ceci :

  @action
  toggleReaderMode() {
    if (this.sidebarIsOpen && !this.isActive) {
      getOwner(this).lookup("controller:application").set("showSidebar", false);
      this.readerModeActive = !this.readerModeActive;
    } else {
      getOwner(this).lookup("controller:application").set("showSidebar", true);
      this.readerModeActive = false;
    }
  }

Il n’y a rien sur la page que je supprime réellement, à part fermer cette barre latérale.

[david (David Taylor)]

@jordan.vidrine

Je suis en train de le fermer

C’est vrai, mais cela provoque un décalage de mise en page. Je me disais donc que nous pourrions le laisser ouvert, mais le rendre invisible ?

[jordan.vidrine]

@david

D’accord, mais cela provoque un décalage de mise en page. Alors je pense que nous pourrions le laisser ouvert, mais le rendre invisible ?

Ok oui, désolé pour la confusion. Je vous comprends maintenant. Puisque le mode lecteur n’est pas connu pour être un interrupteur pour la barre latérale, il pourrait être déroutant qu’il soit activé, provoquant le décalage alors que vous ne le vouliez pas.

Je suppose que j’ai supposé que si l’interrupteur de la barre latérale provoque un décalage, alors le mode lecteur faisant la même chose n’aurait pas d’importance.

Je peux essayer de ne pas activer la barre latérale et poster une vidéo ici pour vous montrer.

[Moin]

Lorsque la barre latérale est fermée avant que vous n’utilisiez le bouton du mode lecteur, la barre latérale s’ouvre, et ensuite, le bouton ne fait rien.

[Jagster (Jakke Lehtonen)]

Je me demandais bien à quoi servait cette nouvelle icône. Maintenant je sais. Merci.

Mais.

DiscourseHub, iPad et thème par défaut : tout ce que ça fait, c’est d’agrandir la barre latérale.

Modifier.

Ok, je dois d’abord ouvrir la barre latérale. Après ça, la magie opère. Sauf… que je n’utilise pas la barre latérale ici

[bryce (Bryce Huhtala)]

Ça a l’air super !

Je ne suis pas sûr de la difficulté, mais je pensais que ce serait bien si l’utilisateur pouvait appuyer sur ESC pour quitter le mode lecture. Comme le bouton fait partie de la chronologie, si vous faites défiler jusqu’en bas du sujet, le bouton peut disparaître de l’écran.

[Arkshine]

C’est une fonctionnalité très intéressante. Excellent travail, Jordan !

Comme David l’a dit, je me demande s’il est possible de ne pas décaler le contenu.
Y a-t-il également une raison particulière pour laquelle la largeur d’origine a été réduite ? Je ne suis peut-être pas au courant de certaines limitations, cependant.

Ce que je veux dire, c’est un peu comme ceci :

[piffy]

Fonctionnalité, tout ce que cela semble faire est de masquer la barre de chronologie et de notification, étant donné que la barre latérale est déjà rétractable. Je ne vois pas vraiment l’expérience être suffisamment modifiée ou améliorée pour avoir un autre bouton dans chaque sujet.

Il serait plus logique que cela change l’expérience de lecture d’une manière significative, comme la rendre pleine largeur en mode Lecteur. Tel qu’il est, je n’utiliserais probablement jamais cette fonctionnalité, donc ironiquement, tout ce qu’elle fait pour moi est d’ajouter plus de bruit visuel à la chronologie.

[jordan.vidrine]

@piffy

Cela aurait plus de sens si cela changeait l’expérience de lecture de manière significative, par exemple en la passant en pleine largeur en mode Lecteur. Tel qu’il est, je n’utiliserais probablement jamais cette fonctionnalité, donc ironiquement, tout ce qu’elle fait pour moi, c’est d’ajouter plus de bruit visuel à la chronologie.

J’ai des objectifs à plus long terme pour ajouter des options de police, de taille de texte, de largeur de contenu, etc. Mais pour l’instant, il ne s’agit que d’une petite expérience et d’un travail en cours.

[jordan.vidrine]

Les derniers changements pour limiter le mouvement et avoir une meilleure transition ont été fusionnés dans ce composant. Merci pour vos retours jusqu’à présent

[simon]

J’aime beaucoup ça !

@jordan.vidrine

Ceci est toujours en cours de développement et j’apprécierais tout rapport de bug ou commentaire posté ici

Cacher la carte du sujet crée un grand espace entre le message original et la première réponse. Je me demande à quoi ressemblerait une carte de sujet en niveaux de gris.

Je peux répondre au message original, ou répondre directement aux messages en mode lecture. Peut-être qu’il devrait également être possible de répondre depuis le bas du sujet ?

[jordan.vidrine]

@simon

Cacher la carte du sujet crée un grand écart entre l’OP et la première réponse. Je me demande à quoi ressemblerait une carte du sujet en niveaux de gris.

Oui, peut-être que je peux le rendre un peu transparent aussi. J’ai essayé de le cacher avec une transition douce, mais à cause de la façon dont nous rendons les éléments dans notre liste, parfois ce n’est pas visible, et essayer de le cacher devient une corvée.

C’est la même chose avec toutes les petites notifications de publication et les écarts de temps. La seule façon à laquelle j’ai pu penser est d’utiliser une API d’observation d’éléments, mais même dans ce cas, le mouvement est légèrement imprévisible et j’ai remarqué des saccades aléatoires.

@simon

Je peux répondre à l’OP, ou répondre directement aux messages en mode Lecteur. Peut-être qu’il devrait également être possible de répondre depuis le bas du sujet ?

Cela me semble logique

[sam (Sam Saffron)]

Raccourci clavier (CTRL-quelque chose) pour basculer serait génial ici (et nous pourrons en parler lorsque vous passerez la souris sur le bouton)

Je ne suis pas fan de la conversion des images en noir et blanc, j’ai l’impression de perdre des informations.

Je suis pour la suppression de beaucoup d’éléments superflus comme les « nombre de likes », le bouton de réponse, peut-être même les avatars.

[Arkshine]

Belle amélioration, Jordan ! C’est une bien meilleure expérience de ne plus voir de décalage de mouvement et d’avoir une animation pour fluidifier la transition.

Je suis d’accord avec les suggestions de Sam ; si nous masquons les informations non essentielles, le retour de la couleur serait un bon compromis. Ce pourrait être une option, cependant.

[denvergeeks]

@jordan.vidrine

J’ai des objectifs à plus long terme pour ajouter des options pour la police, la taille du texte, la largeur du contenu, etc.

Oui, oui, oui !!!

[pfaffman (Jay Pfaffman)]

Une fois en mode lecture, vous devez cliquer pour passer à une autre page, puis, si vous voulez le mode lecture, vous devez cliquer à nouveau pour le réactiver. Peut-être rendre les autres liens de navigation un tout petit peu moins cachés et les laisser fonctionner et les laisser activés lorsque nous passons au sujet suivant.

Une autre idée, désactivez-le automatiquement lorsque vous arrivez à la fin du sujet.

Ou, naviguez automatiquement vers le sujet suivant dans la dernière liste de sujets que vous avez visitée !