"Reader Mode"主题组件反馈

我最近在 Meta 上安装了一个主题组件,该组件在查看帖子时会引入“阅读模式”。

用于切换此功能的按钮位于帖子时间线控件的顶部:

单击它会将帖子置于“阅读模式”,用略带半透明的覆盖层覆盖大部分用户界面,以最大程度地减少干扰。

其他一些发生的事情是,对所有头像和图像应用了滤镜,将它们变成灰度图像。

这是它使用中的屏幕录像。


该组件在 Meta 上安装的以下主题中可用:

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

这仍然是一个 WIP(在制品),非常感谢在此处发布的任何错误报告或反馈 :smile:

28 个赞

太棒了!

我注意到一些样式更改会导致单击按钮时布局“跳转”。我猜有些元素被设置为 display: none; 了?或者一些字体大小发生了变化?

能否将按钮设置为纯粹地“灰色”显示(或 visibility: hidden;)不必要的元素,而不会引起任何布局变化?

4 个赞

是的,这是我遇到的一个痛点。

理想情况下,侧边栏会像单击侧边栏切换按钮时一样正常关闭并带有动画效果。

由于我的组件关闭了侧边栏,但没有为其添加动画,因此会出现抖动。

我可以:

  • 为侧边栏添加关闭动画
    • 我不确定如何做到这一点,因为我认为这是通过 JavaScript + CSS 完成的?
  • 不关闭侧边栏
1 个赞

visibility: hidden; 怎么样?或者 opacity: 0;?这样它仍然存在并且包含在布局中,但不可见?我想我们还需要一些东西来阻止点击/聚焦它?或者也许我们在悬停/聚焦时让它再次可见?:face_with_monocle:

一种相对安全的方法是模拟用户交互:

if(document.body.classList.contains("has-sidebar-page")){ // Sidebar is visible
  document.querySelector(".btn-sidebar-toggle").click()
}
1 个赞

你说的是侧边栏吗?

如果是的话,我实际上是用我的组件来切换它的关闭状态,所以它使用的是与此相同核心方式:

  @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 个赞

对了,但这会导致布局移动。所以我在想我们可以让它保持打开状态,但让它不可见?

4 个赞

好的,是的,抱歉造成了困惑。我现在明白了。由于读者模式并不为人所知是侧边栏的切换器,因此切换它可能会令人困惑,导致您不希望发生的偏移。

我猜我以为如果侧边栏切换器会导致偏移,那么读者模式做同样的事情也没关系。

我可以尝试切换侧边栏,然后在此处发布一个视频向您展示。

2 个赞

当在reader模式按钮之前关闭侧边栏时,侧边栏会打开,之后,该按钮将不起作用。

5 个赞

我之前还在想那个新图标到底是什么。现在我知道了。谢谢。

但是。

DiscourseHub、iPad 和主题默认:它所做的只是展开侧边栏。

编辑。

好的,我必须先打开侧边栏。之后就会发生神奇的事情。除非……我在这里不使用侧边栏 :smirking_face:

2 个赞

看起来很棒!

不确定难度如何,但我想如果用户可以按 ESC 退出阅读模式会很不错。由于该按钮被视为时间线的一部分,如果您滚动到主题的最底部,该按钮可能会消失在屏幕外。

5 个赞

这是一个非常酷的功能。干得好,乔丹! :+1:

正如大卫所说,我想知道是否可以不移动内容。
另外,缩减原始宽度是否有特别的原因?尽管我可能不知道一些限制。

我的意思是有点像这样:

chrome_oW7GzSDCWw

3 个赞

功能上,这似乎只是隐藏了时间线和通知栏,因为侧边栏本身就可以折叠。我不认为这种体验的改变或改进足以在每个主题中再增加一个按钮。

如果它能以某种有意义的方式改变阅读体验,比如在阅读模式下使其全屏显示,那会更有意义。就目前而言,我可能永远不会使用这个功能,所以讽刺的是,它对我来说只是给时间线增加了更多的视觉干扰。

2 个赞

我有一些长期目标,比如添加字体、文本大小、内容宽度等选项。但目前,这只是一个小实验,还在进行中。

3 个赞

此组件已合并最新的更改以限制移动并实现更好的过渡 :smile:

4 个赞

我非常喜欢这个!

隐藏主题地图在 OP 和第一个回复之间造成了一个很大的空白。我想知道灰度主题地图会是什么样子。

我可以在阅读模式下回复 OP,或者直接回复帖子。也许也应该可以从主题底部回复?

1 个赞

是的,也许我也可以让它有点透明。我尝试过平滑过渡来隐藏它,但由于我们渲染列表项的方式,有时看不到,并且尝试隐藏它会很麻烦。

这同样适用于所有小的帖子通知和时间间隔。我唯一能想到的方法是使用元素观察器 API,但即使那样,移动也略微不可预测,并且我注意到随机发生的抖动。

这对我来说很有意义 :+1:

1 个赞

键盘快捷键(CTRL-某个键)在这里切换会很棒(我们可以在您悬停在按钮上时进行教学)

我不喜欢黑白处理图像,我觉得我丢失了信息。

我赞成移除很多界面元素,比如“点赞数”、回复按钮,甚至可能还有头像。

6 个赞

Jordan,改进得很棒!现在看不到任何移动变化,而且一些动画使过渡更流畅,体验好多了。:+1:

我同意 Sam 的建议;如果我们隐藏非必要信息,恢复颜色将是一个很好的折衷方案。不过,这也可以作为一个选项。:thinking:

3 个赞

是的,是的,是的!!!

1 个赞

进入阅读模式后,您必须点击才能转到另一页,然后,如果您想要阅读模式,您必须再次点击才能重新开启它。也许让其他导航链接稍微不那么隐藏,让它们可以工作,并在我们转到下一个主题时保持开启状态。

另一个想法是,当您到达主题末尾时自动关闭它。

或者,自动导航到您上次访问的主题列表中的下一个主题!

1 个赞