自定义加载动画组件

在开发 Grogu 主题 时,我为该主题实现了一个自定义加载图标,并认为将其作为一个独立组件来定制加载旋转图标会非常酷。

该组件允许工作人员自定义默认的旋转图标。通过主题设置,提供以下三种自定义选项:

  • 图标名称
  • 图标大小
  • 图标颜色

该组件仅接受 FontAwesome 图标名称,我建议选择 这些图标 之一,以获得出色的旋转效果。

祝您使用愉快,并欢迎提出如何进一步改进该组件的建议。:slight_smile:

25 个赞

你好,刚刚安装了这个!一个可以改进的地方是为深色主题添加另一种颜色,因为浅色主题中使用的颜色(如 #000000)在深色主题下将无法显示。

6 个赞

这正是可以通过主题设置中的“自定义图标颜色”来自定义颜色的原因。

4 个赞

不,我的意思是,图标的颜色应根据当前是浅色主题还是深色主题自动反转。

我的浅色主题背景色为 #F0F0F0,深色主题背景色为 #000000。

因此,很难找到一个对比度良好的颜色。我希望在深色主题下图标为白色,在浅色主题下图标为黑色。

谢谢;)

4 个赞

若要根据主题颜色自动切换图标颜色,请在“自定义图标颜色”主题设置中不指定任何值。

我现在已通过以下方式将其设为默认行为:

12 个赞

太棒了!谢谢你 @meghna :heart_eyes:

9 个赞

我特别喜欢这个主题组件,它在首页上运行得很完美。不过,在我的 Discourse 实例的一些区域,它会显示默认的加载旋转图标。例如,每当我进入管理面板或用户设置时就会出现这种情况。@meghna 有什么办法可以修复这个问题吗?

1 个赞

请更新,它在 3.2.0.beta2-dev 中不再工作。

它在 Chrome 控制台中给出错误 @meghna

我在 Ubuntu 上使用最新的 Chrome 浏览器进行测试时,在我的本地开发站点上遇到了以下错误:

component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] conditional-loading-spinner 是使用 gjs 编写的,其模板无法被覆盖。忽略覆盖。

在我的生产站点上,同样使用 Ubuntu 上的最新 Chrome 浏览器进行测试,我没有遇到错误,但也没有看到加载微调器。

我认为自此主题组件发布以来,Discourse 在主题中覆盖模板的方式发生了一些变化:https://meta.discourse.org/t/overriding-discourse-templates-from-a-theme-or-plugin/247487。我认为自那时以来,Discourse 实现加载微调器的方式也发生了变化。

3 个赞

@meghna 这个会修复还是现在就坏了?:thinking:

1 个赞

请稍等。团队一直在参加年度会议,本周开始恢复工作时可能还有其他优先事项。

2 个赞

修复需要对核心进行一些更改。我们正在努力,并将尽快修复。

3 个赞

谢谢你的辛勤工作 :smiley: :heart:

此主题组件已更新,可在最新版本的 Discourse 上运行(由 @cvx 提供)。

4 个赞

对我来说还是不行。:confused:

编辑;今天更新了 discourse 后现在可以了。

想知道是否可以用 svg 图标替换 FontAwesome。无论如何都感谢。

与最新版本 3.2.0.beta4-dev 停止工作

(24532653e6)

在我看来,最新版本看起来没问题 :thinking:

是的,它在某些地方有效,但在帖子中无效,当你点击其他帖子查看时,它现在无效。

2 个赞