F NAV - 主题组件概念

你好 :waving_hand:

我正在基于 Discourse Tab Bar for Mobile 开发一个新的主题组件。

该主题组件增加了使用函数到选项卡的功能。这些函数现在可以是汉堡菜单、通知、搜索。

  • 汉堡菜单:选项卡打开汉堡菜单
  • 通知:将通知添加到选项卡
  • 搜索:打开基于上下文的 /search

它还修改了标题图标。移除了汉堡菜单、用户菜单、搜索,并添加了一个新的 DMenu 头像,其中包含用户菜单配置文件内容。向下滚动时,除主题外,标题会在所有地方隐藏,以最大化视图。


它将通知选项卡的铃铛图标更改为斜杠铃铛,如果“请勿打扰”处于活动状态,则会添加时间。它还会动态更改路由,如果有可审核项,则重定向到 /review,否则转到 /notifications 页面。


这是演示:https://discourse.theme-creator.io/theme/Don/f-nav

目前就是这样……

你觉得怎么样?谢谢 :slightly_smiling_face:

14 个赞

我喜欢它。再次做得好。

聊天按钮会在哪里?

4 个赞

这看起来真不错! :clap:

分离通知很有意义。Central 主题也做了同样的事情,使菜单更容易访问和舒适(感觉不那么突兀)。它很直接,并且有必要的链接。我认为这是一个很大的用户体验改进,我很喜欢。

关于菜单中的链接:

  • 我会用“个人资料”替换“摘要”;在这个上下文中更容易理解。
  • “活动”不是非常有帮助;我会用“消息”替换它。直接访问收件箱是必备的。
  • 我认为添加一个“书签”也会很受欢迎。

我不确定底部的面板。 :thinking:
我猜我不太习惯看底部。

  • 通知按钮应该打开右侧面板,而不是转到个人资料。当你想要快速查看时,这个视图更合适,而且没有与通知无关的额外内容。

汉堡菜单打开时有一个短暂的闪烁效果。

希望这些反馈有帮助。 :+1:

3 个赞

感谢您的反馈 :hugs:

嗯,我想在 F NAV 中创建一个多标签页,其中包含消息和聊天。就像手机应用程序文件夹一样。这样您就可以看到里面的内容,并可以例如在 DMenu 中打开它。它会单独显示未读徽章,否则您会看到一个合并的未读指示器。正如 Arkshine 所提到的,消息应该优先,因此它会以模态框的形式打开以查看消息。


很棒的主意!我认为正如我上面提到的,消息应该放在 F NAV 中,但我认为这将是可自定义的。:thinking:


最初的想法是,如果有未读通知,则将用户重定向到带有未读过滤器的通知,如果没有未读通知,则转到所有通知,如果有可审查的通知,则转到审查页面。但我忘了添加它 :sweat_smile: 我认为在手机上重定向页面更方便……但也许我错了 :thinking:

编辑:我已添加。现在,如果存在未读通知,它将重定向到 /u/username/notifications?filter=unread


嗯,是的,似乎如果您通过单击外部关闭汉堡菜单,它不会正确添加动画。通过滑动关闭可以正常工作,我认为这就是我没有注意到它的原因。:thinking:

谢谢 :slightly_smiling_face:

4 个赞

太棒了,感谢这个组件,我会试试的。

它看起来更简洁了,尤其是在移动设备上的标题部分。我喜欢这样,那里拥挤的感觉消失了,看起来更简洁了。现在大多数知名应用程序都这样使用,例如:x.com。我认为可以添加的功能有:

  • 可以在小部件中添加“新话题”按钮
  • 当我点击一篇帖子并进入时,可以用一个返回图标代替主页按钮。当用户点击这个图标时,他们可以回到他们离开的最后一个地方。
  • 当我点击一篇帖子时,主页选中的活动按钮可以改变。它可以是透明的。
  • 主页图标上可以显示未读消息的数量。我不确定这一点,这可能会让它看起来更拥挤,或者作为替代:

@Don

2 个赞

是否可以为类别定义快捷方式?
我很想尝试为底部的特殊类别设置图标。
它们应该能够像侧边栏中的类别快捷方式一样显示有关已更新或新主题的指示器。

感谢您的反馈 @ozkn :slight_smile:
我已为主题路由添加了主页图标更改以及新的或更新的主题点指示器。添加粘性新主题或更新主题组件可能是一个好主意……我还更改了通知徽章的位置和大小(使其更小,数字更粗)。

4 个赞

干得漂亮,@Don。非常棒的主题组件。我在 Android 上发现了一些问题,滑动效果不太好,尤其是在 PWA 中。这可能特定于手机而不是 Discourse,但无论如何都存在,所以这弥补了这一差距,尤其是在 iOS 上。似乎 F 导航栏上还有空间可以添加另一个导航项。

1 个赞

F 代表什么?

我猜是页脚:wink:

3 个赞

这是多标签页的想法。我想我会更改标签图标,但这只是它的第一个版本。它包含聊天和消息。聊天工作方式与标题聊天图标相同,消息会打开一个消息模态框。如果禁用聊天,DMenu也将被禁用,并且只有消息会显示在导航中。

如果启用聊天:

4 个赞

太好了。我迫不及待想开始使用它。

当用户未登录时,什么都不会改变,对吗?

1 个赞

你好 :wave: 有些进展… 我制作了通知气泡,对数字通知和其他一些内容进行了调整… :slightly_smiling_face:

多标签页现在会在聊天未启用或用户在用户设置中将其关闭时自动更改为消息标签页。但现在管理员也可以单独添加消息和聊天标签页。

通知气泡会根据是否紧急而变化。

多标签页的紧急通知是绿色的,看起来像这样。:arrow_down_small:

展开


个人消息始终是绿色的,但聊天可以是蓝色的,就像最初的未读频道消息通知一样。

展开


单条通知

5 个赞

你好 :wave:

这里还有一些更新……我重建了标签的活动状态,现在它能更好地与动态标签目的地配合使用。

我已经修复了……谢谢 :slightly_smiling_face:

现在这是一个选项,管理员可以选择他们偏好的方式。
notificationToRoute:重定向到通知页面
notificationMenu:打开通知菜单


我已经将这些更改添加到主题创建器中,所以现在它的工作方式如下。

2 个赞

干得好,@Don。我知道这不是你的 F NAV 主题组件,但如果有一个 x 来关闭搜索窗口,那就太好了。除非我错过了什么,这有可能,一旦你点击搜索图标,如果你决定不搜索,关闭窗口并不干净利落。

1 个赞

你好 Brian :wave: 我不太明白。当你点击搜索图标时,它会重定向到 /search 页面,所以你可以使用浏览器/移动导航或手势返回。


又是一些更新……我决定不删除标题图标,只用 CSS 隐藏它们。昨天,当我修复汉堡菜单打开动画时,我发现这样做会更容易、更干净、更安全,因为这样我们就可以触发默认的标题图标点击。现在汉堡菜单、通知菜单和搜索都是这样工作的。默认的标题聊天图标也只是用 CSS 隐藏了,因为在 /chat 页面上它会在标题中显示。

我尽量让设置尽可能简单。
它将包含 4 个字段,描述尚未添加。目标是可选的,因为如果你选择一个功能,它将包含必要的东西,而这个字段应该留空。

管理员可以轻松地创建/删除/更改选项卡,并从一个功能中选择或添加自定义目标到选项卡。
功能 :arrow_down_small:

例如,添加主题创建选项卡看起来就像这样。


Screenshot 2024-12-12 at 18.55.50

3 个赞

@Don 我的陈述相当混乱,:confused: 我的评论与你的组件无关。我认为如果你决定在打开或误点击后不搜索,有一个 x 来关闭搜索界面会很有帮助。我经常不小心退出页面或 Discourse。:exploding_head:

看起来很棒,迫不及待想试试!

2 个赞

主题组件已准备就绪 :tada:
感谢大家 :hugs:

3 个赞

与之前一个类似的问题相同:使用 DiscourseHub 真的很难。现在它仅适用于浏览器和 PWA。

对我来说,在 DiscourseHub 中运行正常。