Кастомный компонент спиннера загрузки

Настройка Компонент темы
1

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

Этот компонент позволяет сотрудникам кастомизировать стандартную вращающуюся иконку. Через настройки темы доступны три варианта настройки:

  • имя иконки
  • размер иконки
  • цвет иконки

Компонент принимает только имя иконки из FontAwesome, и я рекомендую выбрать одну из этих иконок, чтобы получить отличный эффект вращения.

Наслаждайтесь, и дайте знать, как можно улучшить этот компонент. :slight_smile:
:sunglasses: Предпросмотр Предпросмотр в конструкторе тем
:link: Репозиторий GitHub discourse-custom-loading-spinner
:hammer_and_wrench: Руководство по установке Как установить тему или компонент темы
25 лайков
Horizontal loading slider
How to use Font Awesome pulse as the loading icon?
2

Привет, только что установил это! Можно было бы улучшить, добавив ещё один цвет для тёмной темы, так как цвет, который вы выбрали для светлой темы, например #000000, не будет виден на тёмной теме.

6 лайков
3

Именно поэтому цвет можно настроить через параметр темы «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

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

Мой фон в светлой теме — #F0F0F0, а в тёмной — #000000.

Поэтому сложно подобрать цвет, который хорошо контрастирует. Я хочу, чтобы в тёмной теме иконка была белой, а в светлой — чёрной.
Спасибо :wink:

4 лайка
5

Для автоматической смены цвета иконки в зависимости от темы не указывайте никакого значения в настройке темы «custom icon color».

Теперь это поведение установлено по умолчанию через:

12 лайков
6

Великолепно! Спасибо @meghna :heart_eyes:

9 лайков
7

Мне очень нравится этот компонент темы, и он отлично работает на главной странице. Однако в некоторых частях моего экземпляра Discourse отображается стандартный индикатор загрузки. Например, когда я нахожусь в панели администратора или настройках пользователя. @meghna, есть ли способ это исправить?

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, и его шаблон нельзя переопределить. Переопределение игнорируется.

На производственном сайте, также тестируя с последним браузером Chrome на Ubuntu, я не получаю ошибок, но и не вижу индикатор загрузки.

Кажется, что с момента выпуска этого компонента темы были внесены изменения в то, как шаблоны переопределяются в темах: (not recommended) Overriding Discourse templates from a Theme or Plugin. Также, похоже, изменился способ реализации индикатора загрузки в 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 лайка