Comentarios sobre el componente del tema 'Modo Lectura'

Característica
, ,
1

Recientemente instalé un componente de tema aquí en Meta que introduce un “modo lector” al ver un tema.

El botón para activar esta función se encuentra en la parte superior de los controles de la línea de tiempo del tema:

image
image1920×923 128 KB

Al hacer clic en él, el tema entrará en “modo de lectura”, cubriendo la mayor parte de la interfaz de usuario con una cubierta ligeramente opaca para minimizar las distracciones.

Otras cosas que suceden son un filtro aplicado a todos los avatares e imágenes, convirtiéndolos en una imagen en escala de grises.

Aquí hay una grabación de pantalla de su uso.

El componente está disponible en los siguientes temas instalados aquí en meta:

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

Esto todavía está en desarrollo y agradecería que cualquier informe de errores o comentarios se publicara aquí :smile:

28 Me gusta
2

¡Muy bueno!

Una cosa que noté es que algunos cambios de estilo hacen que el diseño “salte” cuando hago clic en el botón. ¿Supongo que algunos elementos se están display: none;? ¿O cambian algunos tamaños de fuente?

¿Sería factible hacer que el botón simplemente “se ponga gris” (o visibility: hidden;) en los elementos innecesarios, sin causar ningún cambio en el diseño?

4 Me gusta
3

Sí, este fue un problema que encontré.

Idealmente, la barra lateral se animaría para cerrarse, como lo hace cuando haces clic en el interruptor de la barra lateral normalmente.

Dado que mi componente cierra la barra lateral, pero no la anima, resulta en un sobresalto.

Podría:

  • animar la barra lateral para que se cierre
    • No estoy seguro de cómo hacer esto, ya que creo que se hace a través de JS + Css?
  • no cerrar la barra lateral
1 me gusta
4

¿Qué tal visibility: hidden;? ¿O opacity: 0;? ¿Para que siga ahí y se incluya en el diseño, pero invisible? Supongo que también necesitaríamos algo para evitar clics/enfoques en él. ¿O quizás lo volvemos a hacer visible al pasar el ratón por encima/enfocar? :face_with_monocle:

Una forma relativamente segura sería imitar la interacción del usuario:

if(document.body.classList.contains("has-sidebar-page")){ // La barra lateral es visible
  document.querySelector(".btn-sidebar-toggle").click()
}
1 me gusta
5

¿Te refieres a la barra lateral?

Si es así, en realidad la estoy cerrando con mi componente, así que está usando la misma forma central como esta:

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

No hay nada en la página que esté eliminando realmente, aparte de cerrar esta barra lateral.

2 Me gusta
6

Correcto, pero eso provoca un cambio en el diseño. Así que estoy pensando que podríamos dejarlo abierto, pero hacerlo invisible.

4 Me gusta
7

Ok, sí, disculpa la confusión. Ahora te entiendo. Dado que el modo lector no se conoce como un interruptor para la barra lateral, podría ser confuso que se active, causando el cambio cuando no querías que eso sucediera.

Supongo que asumí que si el interruptor de la barra lateral causa un cambio, entonces que el modo lector hiciera lo mismo no importaría.

Puedo intentar no activar la barra lateral y publicar un video aquí para mostrártelo.

2 Me gusta
8

Cuando la barra lateral está cerrada antes de usar el botón del modo lector, la barra lateral se abre y, después, el botón no hace nada.

5 Me gusta
9

Me preguntaba qué demonios era ese nuevo icono. Ahora lo sé. Gracias.

Pero.

DiscourseHub, iPad y tema predeterminado: todo lo que hace es expandir la barra lateral.

Editar.

Ok, primero tengo que abrir la barra lateral. Después de eso ocurre la magia. Excepto… que no uso la barra lateral aquí :smirking_face:

2 Me gusta
10

¡Se ve genial!

No estoy seguro de qué tan difícil sería, pero pensé que sería bueno si el usuario pudiera presionar ESC para salir del modo lector. Dado que el botón se considera parte de la línea de tiempo, si te desplazas hasta el final del tema, el botón puede desaparecer de la pantalla.

image
image1877×933 49.3 KB

5 Me gusta
11

Es una característica muy buena. ¡Excelente trabajo, Jordan! :+1:

Como dijo David, me pregunto si es posible no desplazar el contenido.
Además, ¿hay alguna razón en particular para reducir el ancho original? Puede que no sea consciente de algunas limitaciones, sin embargo.

Lo que quiero decir es algo así:

chrome_oW7GzSDCWw

3 Me gusta
12

Funcionalidad, todo lo que parece hacer es ocultar la línea de tiempo y la barra de notificaciones, ya que la barra lateral ya es colapsable. Realmente no veo que la experiencia cambie o mejore lo suficiente como para tener otro botón en cada tema.

Tendría más sentido si cambiara la experiencia de lectura de alguna manera significativa, como hacerla de ancho completo en el Modo Lectura. Tal como está ahora, probablemente nunca usaría esta función, por lo que, irónicamente, todo lo que está haciendo por mí es agregar más ruido visual a la línea de tiempo.

2 Me gusta
13

Tengo algunos objetivos a más largo plazo para agregar opciones de fuente, tamaño de texto, ancho del contenido, etc. Pero por ahora, esto es solo un pequeño experimento y un trabajo en progreso.

3 Me gusta
14

Los últimos cambios para limitar el movimiento y tener una mejor transición se han fusionado en este componente. Gracias por los comentarios hasta ahora :smile:

4 Me gusta
15

¡Me gusta mucho esto!

Ocultar el mapa del tema crea un gran espacio entre el OP y la primera respuesta. Me pregunto cómo se vería un mapa del tema en escala de grises.

image
image675×421 18.4 KB

Puedo responder al OP o responder directamente a las publicaciones en el Modo Lector. Quizás también debería ser posible responder desde la parte inferior del tema.

image
image622×279 21.8 KB

1 me gusta
16

Sí, tal vez pueda hacerlo un poco transparente también. Intenté ocultarlo con una transición suave, pero debido a la forma en que renderizamos los elementos en nuestra lista, a veces no es visible, y tratar de ocultarlo se convierte en una molestia.

Es lo mismo con todas las pequeñas notificaciones de publicaciones y huecos de tiempo. La única forma en que pude pensar es usar una API de observador de elementos, pero incluso entonces, el movimiento es ligeramente impredecible y noté que ocurrían saltos aleatorios.

Esto tiene sentido para mí :+1:

1 me gusta
17

Un atajo de teclado (CTRL-algo) para alternar sería genial aquí (y podemos enseñar sobre él cuando pases el ratón por encima del botón)

No me gusta poner las imágenes en blanco y negro, siento que pierdo información.

Sin embargo, estoy a favor de eliminar mucho “cromo” como los “recuentos de me gusta”, el botón de respuesta, quizás incluso los avatares.

6 Me gusta
18

¡Buena mejora, Jordan! Es una experiencia mucho mejor no ver ningún cambio de movimiento ahora y algo de animación para suavizar la transición. :+1:

Estoy de acuerdo con las sugerencias de Sam; si ocultamos información no esencial, recuperar el color sería un buen compromiso. Sin embargo, esa podría ser una opción. :thinking:

3 Me gusta
19

¡Sí, sí, sí!

1 me gusta
20

Una vez que estés en modo lectura, tienes que hacer clic para pasar a otra página y, luego, si quieres el modo lectura, tienes que hacer clic de nuevo para volver a activarlo. Quizás haz que los otros enlaces de navegación sean un poco menos ocultos y deja que funcionen y déjalo activado cuando pasemos al siguiente tema.

Otra idea, desactívalo automáticamente cuando llegues al final del tema.

¡O navega automáticamente al siguiente tema en la última lista de temas que visitaste!

1 me gusta