Feedback zum "Reader Mode" Theme-Komponenten

[jordan.vidrine]

Ich habe kürzlich eine Theme-Komponente hier auf Meta installiert, die beim Betrachten eines Themas einen „Reader-Modus“ einführt.

Die Schaltfläche zum Umschalten dieser Funktion befindet sich oben in den Steuerelementen der Themenzeitleiste:

Wenn Sie darauf klicken, wird das Thema in den „Lesemodus“ versetzt, wobei der Großteil der Benutzeroberfläche mit einer leicht undurchsichtigen Abdeckung versehen wird, um Ablenkungen zu minimieren.

Einige andere Dinge, die passieren, sind ein Filter, der auf alle Avatare und Bilder angewendet wird und diese in Graustufen umwandelt.

Hier ist eine Bildschirmaufnahme davon in Aktion.

---

Die Komponente ist in den folgenden hier auf Meta installierten Themes verfügbar:

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

Dies ist noch in Arbeit und ich würde mich über Fehlerberichte oder Feedback freuen, die hier gepostet werden

[david (David Taylor)]

Sehr cool!

Mir ist aufgefallen, dass einige der Styling-Änderungen dazu führen, dass das Layout beim Klicken auf die Schaltfläche “springt”. Ich nehme an, einige Elemente werden auf display: none; gesetzt? Oder ändern sich einige Schriftgrößen?

Wäre es machbar, die Schaltfläche rein “grau zu machen” (oder unnötige Elemente auf visibility: hidden; zu setzen), ohne dass es zu einer Layoutverschiebung kommt?

[jordan.vidrine]

@david

Eine Sache, die mir aufgefallen ist, ist, dass einige der Stiländerungen dazu führen, dass das Layout beim Klicken auf die Schaltfläche „springt“. Ich schätze, einige Elemente werden auf display: none; gesetzt? Oder ändern sich einige Schriftgrößen?

Wäre es machbar, die Schaltfläche einfach unnötige Elemente „grau auszublenden“, ohne eine Layoutverschiebung zu verursachen?

Ja, das war ein Problem, auf das ich gestoßen bin.

Idealerweise würde sich die Seitenleiste animiert schließen, so wie sie es tut, wenn man normalerweise auf den Seitenleisten-Umschalter klickt.

Da meine Komponente die Seitenleiste schließt, sie aber nicht animiert, kommt es zu einem Ruck.

Ich könnte entweder:

• die Seitenleiste animiert schließen
  • Ich bin mir nicht sicher, wie das geht, da ich denke, dass es über JS + CSS gemacht wird?
• die Seitenleiste nicht schließen

[david (David Taylor)]

Wie wäre es mit visibility: hidden;? Oder opacity: 0;? Damit es noch da ist und im Layout enthalten ist, aber unsichtbar? Ich schätze, wir bräuchten auch etwas, um Klicks/Fokus darauf zu verhindern? Oder vielleicht machen wir es beim Hover/Fokus wieder sichtbar?

@jordan.vidrine

die Seitenleiste animiert schließen

• Ich bin mir nicht sicher, wie das geht, da ich denke, dass es über JS + CSS gemacht wird?

Eine relativ sichere Methode wäre, die Benutzerinteraktion zu imitieren:

if(document.body.classList.contains("has-sidebar-page")){ // Sidebar ist sichtbar
  document.querySelector(".btn-sidebar-toggle").click()
}

[jordan.vidrine]

@david

Wie wäre es mit visibility: hidden;? Oder opacity: 0;? Damit es noch da ist und im Layout enthalten ist, aber unsichtbar?

Meinst du die Seitenleiste?

Wenn ja, schalte ich sie gerade mit meiner Komponente aus, also wird die gleiche Kernmethode wie diese verwendet:

  @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;
    }
  }

Es gibt nichts auf der Seite, das ich tatsächlich entferne, außer dem Schließen dieser Seitenleiste.

[david (David Taylor)]

@jordan.vidrine

Ich schalte es tatsächlich geschlossen

Stimmt, aber das verursacht eine Layoutverschiebung. Ich dachte also, wir könnten es offen lassen, aber unsichtbar machen?

[jordan.vidrine]

@david

Stimmt, aber das verursacht eine Layoutverschiebung. Ich dachte also, wir könnten es offen lassen, aber unsichtbar machen?

Okay, ja, Entschuldigung für die Verwirrung. Ich verstehe Sie jetzt. Da der Lesemodus nicht als Umschalter für die Seitenleiste bekannt ist, könnte es verwirrend sein, dass er umgeschaltet wird, was die Verschiebung verursacht, obwohl Sie das nicht wollten.

Ich nehme an, ich ging davon aus, dass es keine Rolle spielt, wenn der Seitenleisten-Umschalter eine Verschiebung verursacht, wenn der Lesemodus dasselbe tut.

Ich kann versuchen, die Seitenleiste nicht umzuschalten und hier ein Video zu posten, um es Ihnen zu zeigen.

[Moin]

Wenn die Seitenleiste geschlossen ist, bevor Sie die Lesemodus-Schaltfläche verwenden, öffnet sich die Seitenleiste, und danach tut die Schaltfläche nichts mehr.

[Jagster (Jakke Lehtonen)]

Ich habe mich gefragt, was dieses neue Symbol verdammt noch mal ist. Jetzt weiß ich es. Danke.

Aber.

DiscourseHub, iPad und Theme-Standard: Alles, was es tut, ist, die Seitenleiste zu erweitern.

Bearbeiten.

Ok, ich muss zuerst die Seitenleiste öffnen. Danach geschieht die Magie. Außer… ich benutze die Seitenleiste hier nicht

[bryce (Bryce Huhtala)]

Sieht großartig aus!

Ich bin mir nicht sicher, wie schwierig das wäre, aber ich dachte, es wäre schön, wenn der Benutzer die Taste ESC drücken könnte, um den Lesermodus zu verlassen. Da die Schaltfläche Teil der Zeitleiste ist, kann sie aus dem Bild verschwinden, wenn Sie ganz nach unten zum Thema scrollen.

[Arkshine]

Es ist eine sehr coole Funktion. Ausgezeichnete Arbeit, Jordan!

Wie David sagte, frage ich mich, ob es möglich ist, den Inhalt nicht zu verschieben.
Gibt es auch einen bestimmten Grund, die ursprüngliche Breite zu reduzieren? Möglicherweise bin ich mir einiger Einschränkungen nicht bewusst.

Was ich meine, ist etwas so:

[piffy]

Funktionalität, all dies scheint nur die Zeitleiste und die Benachrichtigungsleiste auszublenden, da die Seitenleiste bereits einklappbar ist. Ich sehe nicht wirklich, dass sich die Erfahrung ausreichend verändert oder verbessert, um in jedem Thema eine weitere Schaltfläche zu haben.

Es wäre sinnvoller, wenn es das Leseerlebnis auf sinnvolle Weise verändern würde, z. B. indem es im Lesemodus auf die volle Breite erweitert wird. So wie es jetzt ist, würde ich diese Funktion wahrscheinlich nie nutzen, sodass sie ironischerweise nur mehr visuelles Rauschen in der Zeitleiste verursacht.

[jordan.vidrine]

@piffy

Es wäre sinnvoller, wenn es das Leseerlebnis auf sinnvolle Weise verändern würde, z. B. indem es im Lesemodus auf voller Breite angezeigt wird. So wie es jetzt ist, würde ich diese Funktion wahrscheinlich nie nutzen, sodass sie ironischerweise nur mehr visuelles Rauschen in der Zeitleiste hinzufügt.

Ich habe einige längerfristige Ziele, um Optionen für Schriftart, Textgröße, Breite des Inhalts usw. hinzuzufügen. Aber im Moment ist dies nur ein kleines Experiment und ein WIP (Work in Progress).

[jordan.vidrine]

Die neuesten Änderungen zur Begrenzung der Bewegung und für einen besseren Übergang wurden in diese Komponente integriert. Danke für das bisherige Feedback

[simon]

Das gefällt mir sehr gut!

@jordan.vidrine

Dies ist noch in Arbeit und ich würde mich über Fehlerberichte oder Feedback freuen, das hier gepostet wird

Das Ausblenden der Themenübersicht erzeugt eine große Lücke zwischen dem OP und der ersten Antwort. Ich frage mich, wie eine Graustufen-Themenübersicht aussehen würde.

Ich kann auf den OP antworten oder direkt in der Reader-Ansicht auf Beiträge antworten. Vielleicht sollte es auch möglich sein, vom Ende des Themas aus zu antworten?

[jordan.vidrine]

@simon

Das Ausblenden der Themenübersicht erzeugt eine große Lücke zwischen dem OP und der ersten Antwort. Ich frage mich, wie eine Graustufen-Themenübersicht aussehen würde.

Ja, vielleicht kann ich sie auch ein wenig transparent machen. Ich habe versucht, sie mit einem sanften Übergang auszublenden, aber aufgrund der Art und Weise, wie wir Elemente in unserer Liste rendern, ist dies manchmal nicht sichtbar, und der Versuch, sie auszublenden, wird zu einer Qual.

Das Gleiche gilt für alle kleinen Beitragsbenachrichtigungen und Zeitlücken. Die einzige Möglichkeit, die mir einfiel, war die Verwendung einer Element-Observer-API, aber selbst dann ist die Bewegung leicht unvorhersehbar und ich bemerkte zufällige Ruckler.

@simon

Ich kann auf den OP antworten oder direkt auf Beiträge im Lesemodus antworten. Vielleicht sollte es auch möglich sein, vom Ende des Themas aus zu antworten?

Das ergibt für mich Sinn

[sam (Sam Saffron)]

Tastenkombination (STRG-etwas) zum Umschalten wäre hier super (und wir können es lehren, wenn man mit der Maus über dem Button schwebt)

Kein Fan davon, die Bilder schwarz-weiß zu machen, ich habe das Gefühl, Informationen zu verlieren.

Ich bin dafür, viel Chrome zu entfernen, wie “Gefällt mir”-Anzahl, Antwort-Button, vielleicht sogar Avatare.

[Arkshine]

Schöne Verbesserung, Jordan! Es ist eine viel bessere Erfahrung, keine Bewegungsverschiebungen mehr zu sehen und einige Animationen, um den Übergang zu glätten.

Ich stimme Sams Vorschlägen zu; wenn wir nicht wesentliche Informationen ausblenden, wäre die Rückkehr der Farbe ein guter Kompromiss. Das könnte jedoch eine Option sein.

[denvergeeks]

@jordan.vidrine

Ich habe einige längerfristige Ziele, um Optionen für Schriftart, Textgröße, Breite des Inhalts usw. hinzuzufügen.

Ja, ja, ja!!!

[pfaffman (Jay Pfaffman)]

Sobald Sie sich im Lesemodus befinden, müssen Sie klicken, um zu einer anderen Seite zu gelangen, und dann, wenn Sie den Lesemodus wünschen, müssen Sie erneut klicken, um ihn wieder einzuschalten. Machen Sie die anderen Navigationslinks vielleicht ein klein wenig weniger versteckt und lassen Sie sie funktionieren und eingeschaltet, wenn wir zum nächsten Thema gelangen.

Eine andere Idee: Schalten Sie ihn automatisch aus, wenn Sie das Ende des Themas erreichen.

Oder navigieren Sie automatisch zum nächsten Thema in der zuletzt besuchten Themenliste!