Обратная связь по компоненту темы "Режим чтения"

Внести вклад Функция
, ,
1

Недавно я установил здесь на Meta компонент темы, который добавляет «режим чтения» при просмотре темы.

Кнопка для включения этой функции находится в верхней части элементов управления хронологией темы:

image
image1920×923 128 KB

При нажатии на неё тема переходит в «режим чтения»: большая часть интерфейса покрывается слегка прозрачным слоем, чтобы минимизировать отвлекающие факторы.

Также применяются фильтры ко всем аватарам и изображениям, превращая их в черно-белые.

Ниже представлена запись экрана с демонстрацией работы функции.

Компонент доступен в следующих темах, установленных здесь на Meta:

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

Это всё ещё черновая версия (WIP), поэтому буду рад любым сообщениям об ошибках или отзывам, которые можно оставить здесь :smile:

28 лайков
Fullscreen reader – More usability, less zooming
Inconsistent marking of Topics as ☑️ Solved, Completed, or Fixed here on meta.discourse.org
2

Отлично!

Я заметил одну вещь: некоторые изменения в стилях вызывают «скачок» макета при нажатии на кнопку. Похоже, что какие-то элементы получают display: none;? Или меняются размеры шрифтов?

Возможно ли сделать так, чтобы кнопка просто «отключала» (или применяла visibility: hidden;) ненужные элементы, не вызывая при этом сдвигов макета?

4 лайка
3

Да, это была проблема, с которой я столкнулся.

В идеале боковая панель должна плавно закрываться, как это происходит при обычном нажатии на переключатель боковой панели.

Поскольку мой компонент закрывает боковую панель, но не анимирует это, получается резкий скачок.

Я могу либо:

  • анимировать закрытие боковой панели
    • не уверен, как это сделать, так как, думаю, это реализовано через JS + CSS?
  • не закрывать боковую панель
1 лайк
4

Как насчет visibility: hidden;? Или opacity: 0;? Чтобы элемент оставался в DOM и участвовал в верстке, но был невидим? Думаю, нам также понадобится что-то, чтобы блокировать клики и фокус на нём? Или, может быть, сделать его видимым снова при наведении или фокусе? :face_with_monocle:

Один относительно безопасный способ — имитировать взаимодействие пользователя:

if(document.body.classList.contains("has-sidebar-page")){ // Боковая панель видима
  document.querySelector(".btn-sidebar-toggle").click()
}
1 лайк
5

Вы имеете в виду боковую панель?

Если да, то я фактически закрываю её с помощью своего компонента, используя тот же базовый механизм, что и здесь:

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

На странице я ничего не удаляю, кроме как закрываю эту боковую панель.

2 лайка
6

Верно, но это вызывает сдвиг макета. Поэтому я думаю, что мы могли бы оставить его открытым, но сделать невидимым?

4 лайка
7

Да, хорошо, извините за путаницу. Теперь я вас понимаю. Поскольку режим чтения не известен как переключатель для боковой панели, может быть непонятно, что он переключен, что вызывает сдвиг, когда вы этого не хотели.

Кажется, я предположил, что если переключатель боковой панели вызывает сдвиг, то то же самое с режимом чтения не будет иметь значения.

Я могу попробовать не переключать боковую панель и опубликовать здесь видео, чтобы показать вам.

2 лайка
8

Если боковая панель закрыта до нажатия кнопки режима чтения, она открывается, но после этого кнопка перестает работать.

5 лайков
9

Я гадал, что это за новый значок. Теперь я знаю. Спасибо.

Но.

DiscourseHub, iPad и тема по умолчанию: всё, что они делают, — это разворачивают боковую панель.

Редактировать.

Ладно, сначала нужно открыть боковую панель. После этого происходит магия. За исключением… я здесь не использую боковую панель :smirking_face:

2 лайка
10

Выглядит отлично!

Не уверен, насколько это сложно, но мне показалось бы удобным, если бы пользователь мог нажать ESC, чтобы выйти из режима чтения. Поскольку кнопка считается частью ленты, если прокрутить тему до самого низа, кнопка может уйти за пределы экрана.

image
image1877×933 49.3 KB

5 лайков
11

Это очень крутая функция. Отличная работа, Джордан! :+1:

Как уже сказал Дэвид, я wondering, можно ли не сдвигать содержимое.
Также, есть ли какая-то особая причина для уменьшения исходной ширины? Возможно, я не в курсе некоторых ограничений.

То, что я имею в виду, немного похоже на это:

chrome_oW7GzSDCWw

3 лайка
12

Функциональность: судя по всему, это просто скрывает ленту и панель уведомлений, поскольку боковая панель уже сворачивается. Я не вижу, чтобы пользовательский опыт менялся или улучшался настолько, чтобы добавлять ещё одну кнопку в каждой теме.

Более логичным было бы, если бы это как-то существенно меняло процесс чтения, например, делая контент на всю ширину в режиме чтения. В текущем виде я, вероятно, никогда не буду использовать эту функцию, и, что иронично, она лишь добавляет визуальный шум в ленту.

2 лайка
13

В долгосрочной перспективе я планирую добавить настройки шрифта, размера текста, ширины контента и т. д. Но пока это всего лишь небольшой эксперимент и работа в процессе.

3 лайка
14

Последние изменения для ограничения перемещения и обеспечения более плавного перехода были объединены в этот компонент. Спасибо за обратную связь до сих пор :smile:

4 лайка
15

Мне это очень нравится!

Скрытие карты темы создаёт большой разрыв между первым сообщением и первым ответом. Интересно, как бы выглядела карта темы в оттенках серого.

image
image675×421 18.4 KB

Я могу ответить на первое сообщение или напрямую ответить на сообщения в режиме чтения. Возможно, также стоит добавить возможность отвечать внизу темы?

image
image622×279 21.8 KB

1 лайк
16

Да, возможно, я могу также сделать её немного прозрачной. Я пытался скрыть её с помощью плавного перехода, но из-за способа рендеринга элементов в нашем списке иногда это не заметно, и попытка скрыть её становится проблемой.

То же самое касается всех небольших уведомлений о сообщениях и временных разрывов. Единственный способ, который я мог придумать — использовать API наблюдателя за элементами, но даже в этом случае движение немного непредсказуемо, и я замечал случайные подёргивания.

Для меня это имеет смысл :+1:

1 лайк
17

Было бы здорово добавить сочетание клавиш (Ctrl+что-то) для переключения (а мы можем показать подсказку при наведении на кнопку)

Мне не нравится ч/б для изображений, я чувствую, что теряю информацию.

Однако я за удаление многих элементов интерфейса, таких как «количество лайков», кнопка ответа, возможно, даже аватары.

6 лайков
18

Отличное улучшение, Джордан! Теперь гораздо приятнее, что нет сдвига при движении, а анимация делает переход плавным. :+1:

Я согласен с предложениями Сэма: если мы скроем неосновную информацию, возвращение цвета станет хорошим компромиссом. Это может быть вариантом, хотя. :thinking:

3 лайка
19

Да, да, да!!!

1 лайк
20

Как только вы включите режим чтения, вам нужно будет кликнуть, чтобы перейти на другую страницу, а затем, если вы хотите снова включить режим чтения, придётся кликнуть ещё раз, чтобы активировать его. Возможно, стоит сделать другие ссылки навигации чуть более заметными, чтобы они работали, и оставлять режим чтения включённым при переходе к следующей теме.

Другая идея: автоматически отключать его, когда вы дойдёте до конца темы.

Или автоматически переходить к следующей теме в последнем посещённом списке тем!

1 лайк