自定义加载动画组件

主题组件
1

While working on the Grogu theme I implemented a custom loading icon for that theme and thought it would be cool to have a standalone component to customize the loading spinner icon.

This component allows staff to customize the default spinning icon. There are three customization options available via theme settings:

  • icon name
  • icon size
  • icon color

The component only accepts FontAwesome icon name and I recommend picking one of these icons to get awesome spinning effect.

Enjoy, and do let me know how to further improve this component. :slight_smile:
:sunglasses: Preview Preview on theme creator
:link: Github Repo discourse-custom-loading-spinner
:hammer_and_wrench: Install Guide How to install a theme or theme component
25 个赞
2

Hello just installed this! An improvement that you could make is to add another colour for dark theme as the colour you choose for light such as #000000 will not be seen on a dark theme.

6 个赞
3

That’s exactly why the color is customizable via theme setting custom icon color.

Screenshot 2021-01-02 at 8.26.49 PM
Screenshot 2021-01-02 at 8.26.49 PM1336×516 20.8 KB

4 个赞
4

No what I mean is that is that the icon colour should invert depending on whether you are on a light or dark theme automatically.

My light theme background is #F0F0F0 and my dark theme background is #000000

Therefore it is difficult to find a colour that contrasts well. I want it to be a white icon on dark theme and a black one on light theme.
Thanks :wink:

4 个赞
5

For automatic icon colour switching based on theme colours – do not specify any value in custom icon color theme setting.

I have now made this default behaviour via:

12 个赞
6

Brilliant! Thank you @meghna :heart_eyes:

9 个赞
7

I love this theme-component, and it works great on the home page. However, in some areas of my discourse instance, it shows the default loading spinner. For example, whenever I’m in the admin panel or user settings. @meghna Any way this can be fixed?

1 个赞
8

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

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

9

我在 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 个赞
10

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

1 个赞
11

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

2 个赞
12

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

3 个赞
13

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

14

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

4 个赞
15

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

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

16

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

17

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

(24532653e6)

18

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

19

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

2 个赞