Feedback sobre o componente de tema "Modo Leitor"

Funcionalidade
, ,
1

Recentemente instalei um componente de tema aqui no Meta que introduz um “modo leitor” ao visualizar um tópico.

O botão para alternar este recurso está localizado no topo dos controles da linha do tempo do tópico:

image
image1920×923 128 KB

Clicar nele colocará o tópico em “modo de leitura”, cobrindo a maior parte da interface do usuário com uma capa ligeiramente opaca para minimizar distrações.

Algumas outras coisas que acontecem são um filtro aplicado a todos os avatares e imagens, transformando-os em uma imagem em tons de cinza.

Aqui está uma gravação de tela dele em uso.

O componente está disponível nos seguintes temas instalados aqui no meta:

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

Isto ainda é um trabalho em andamento e agradeceria quaisquer relatórios de bugs ou feedback postados aqui :smile:

28 curtidas
2

Muito legal!

Uma coisa que notei é que algumas mudanças de estilo fazem o layout “pular” quando clico no botão. Imagino que alguns elementos estejam sendo display: none;? Ou alguns tamanhos de fonte estão mudando?

Seria viável apenas “desativar” o botão (ou visibility: hidden;) elementos desnecessários, sem causar nenhuma mudança de layout?

4 curtidas
3

Sim, essa foi uma dificuldade que encontrei.

Idealmente, a barra lateral animaria para fechar, como acontece quando você clica no alternador da barra lateral normalmente.

Como meu componente fecha a barra lateral, mas não a anima, acaba sendo um solavanco.

Eu poderia:

  • animar a barra lateral para fechar
    • não tenho certeza de como fazer isso, pois acho que é feito via JS + Css?
  • não fechar a barra lateral
1 curtida
4

E quanto a visibility: hidden;? Ou opacity: 0;? Assim, ele ainda está lá e incluído no layout, mas invisível? Acho que precisaríamos de algo para impedir cliques/foco nele também? Ou talvez o tornemos visível novamente ao passar o mouse/focar? :face_with_monocle:

Uma maneira relativamente segura seria imitar a interação do usuário:

if(document.body.classList.contains("has-sidebar-page")){ // A barra lateral está visível
  document.querySelector(".btn-sidebar-toggle").click()
}
1 curtida
5

Você está falando da barra lateral?

Se sim, eu na verdade a estou fechando com meu componente, então ele está usando a mesma forma principal 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;
    }
  }

Não há nada na página que eu esteja realmente removendo, além de fechar esta barra lateral.

2 curtidas
6

Certo, mas isso causa uma mudança de layout. Então estou pensando que poderíamos deixá-lo aberto, mas torná-lo invisível?

4 curtidas
7

Ok, sim, desculpe pela confusão. Estou te entendendo agora. Como o modo leitor não é conhecido por ser um alternador para a barra lateral, pode ser confuso que ele seja alternado, causando a mudança quando você não queria que isso acontecesse.

Eu acho que presumi que se o alternador da barra lateral causa uma mudança, então o modo leitor fazendo a mesma coisa não importaria.

Posso tentar não alternar a barra lateral e postar um vídeo aqui para te mostrar.

2 curtidas
8

Quando a barra lateral está fechada antes de você usar o botão do modo leitor, a barra lateral é aberta e, depois disso, o botão não faz nada.

5 curtidas
9

Eu estava me perguntando o que diabos era aquele novo ícone. Agora eu sei. Obrigado.

Mas.

DiscourseHub, iPad e tema padrão: tudo o que ele faz é expandir a barra lateral.

Editar.

Ok, eu tenho que abrir a barra lateral primeiro. Depois disso, a mágica acontece. Exceto… eu não uso a barra lateral aqui :smirking_face:

2 curtidas
10

Parece ótimo!

Não tenho certeza da dificuldade, mas pensei que seria bom se o usuário pudesse pressionar ESC para sair do modo de leitura. Como o botão é considerado parte da linha do tempo, se você rolar até o final do tópico, o botão pode sair da tela.

image
image1877×933 49.3 KB

5 curtidas
11

É um recurso muito legal. Excelente trabalho, Jordan! :+1:

Como David disse, estou me perguntando se é possível não deslocar o conteúdo.
Além disso, há alguma razão particular para reduzir a largura original? Talvez eu não esteja ciente de algumas limitações, no entanto.

O que eu quero dizer é mais ou menos assim:

chrome_oW7GzSDCWw

3 curtidas
12

Funcionalidade, tudo o que isso parece fazer é ocultar a linha do tempo e a barra de notificações, já que a barra lateral já é recolhível. Eu realmente não vejo a experiência sendo alterada ou melhorada o suficiente para ter outro botão em cada tópico.

Faria mais sentido se mudasse a experiência de leitura de alguma forma significativa, como torná-la em tela cheia no Modo Leitor. Como está agora, eu provavelmente nunca usaria esse recurso, então, ironicamente, tudo o que ele está fazendo para mim é adicionar mais ruído visual à linha do tempo.

2 curtidas
13

Tenho alguns objetivos de longo prazo para adicionar opções de fonte, tamanho do texto, largura do conteúdo, etc. Mas, por enquanto, este é apenas um pequeno experimento e um trabalho em andamento.

3 curtidas
14

As últimas alterações para limitar o movimento e ter uma transição melhor foram mescladas neste componente. Obrigado pelo feedback até agora :smile:

4 curtidas
15

Eu gosto muito disso!

Ocultar o mapa do tópico cria uma grande lacuna entre o OP e a primeira resposta. Eu me pergunto como seria um mapa de tópico em escala de cinza.

image
image675×421 18.4 KB

Posso responder ao OP ou responder diretamente às postagens no Modo Leitor. Talvez também devesse ser possível responder a partir do final do tópico?

image
image622×279 21.8 KB

1 curtida
16

Sim, talvez eu possa torná-lo um pouco transparente também. Tentei escondê-lo com uma transição suave, mas devido à forma como renderizamos os itens em nossa lista, às vezes isso não é visível, e tentar escondê-lo se torna uma dor.

É o mesmo com todos os pequenos avisos de postagem e lacunas de tempo. A única maneira que eu poderia pensar é usar uma API de observador de elementos, mas mesmo assim, o movimento é ligeiramente imprevisível e eu estava notando instabilidade acontecendo aleatoriamente.

Isso faz sentido para mim :+1:

1 curtida
17

Atalho de teclado (CTRL-algo) para alternar seria ótimo aqui (e podemos ensinar sobre isso quando você pairar o mouse sobre o botão)

Não sou fã de tornar as imagens em preto e branco, sinto que estou perdendo informações.

Sou a favor, no entanto, de remover muito do “chrome” como “contagens de curtidas”, botão de resposta, talvez até avatares.

6 curtidas
18

Ótima melhoria, Jordan! É uma experiência muito melhor não ver mais nenhuma mudança de movimento e alguma animação para suavizar a transição. :+1:

Concordo com as sugestões do Sam; se ocultarmos informações não essenciais, ter a cor de volta seria um bom compromisso. Isso poderia ser uma opção, no entanto. :thinking:

3 curtidas
19

Sim, sim, sim!!!

1 curtida
20

Quando você estiver no modo de leitura, terá que clicar para ir para outra página e, em seguida, se quiser o modo de leitura, terá que clicar novamente para ativá-lo. Talvez torne os outros links de navegação um pouco menos ocultos e deixe-os funcionar e mantê-los ativados quando chegarmos ao próximo tópico.

Outra ideia, desative-o automaticamente quando chegar ao final do tópico.

Ou, navegue automaticamente para o próximo tópico na última lista de tópicos que você visitou!

1 curtida