커스텀 로딩 스피너 컴포넌트

Grogu 테마 작업을 진행하면서 해당 테마에 맞춤 로딩 아이콘을 구현했고, 로딩 스피너 아이콘을 커스터마이징할 수 있는 독립형 컴포넌트를 만들면 좋겠다고 생각했습니다.

이 컴포넌트는 스태프가 기본 회전 아이콘을 커스터마이징할 수 있게 해줍니다. 테마 설정을 통해 사용할 수 있는 세 가지 커스터마이징 옵션이 있습니다:

  • 아이콘 이름
  • 아이콘 크기
  • 아이콘 색상

이 컴포넌트는 FontAwesome 아이콘 이름만 허용하며, 멋진 회전 효과를 얻으려면 이 아이콘들 중 하나를 선택하는 것을 권장합니다.

즐기시고, 이 컴포넌트를 어떻게 더 개선할 수 있을지 알려주시면 좋겠습니다. :slight_smile:

26개의 좋아요

안녕하세요, 방금 설치했습니다! 개선할 수 있는 점으로, 라이트 테마에서 선택한 색상(예: #000000)은 다크 테마에서는 보이지 않으므로 다크 테마용 별도의 색상을 추가하는 것이 좋습니다.

6개의 좋아요

그래서 테마 설정 custom icon color을 통해 색상을 사용자 지정할 수 있습니다.

4개의 좋아요

아니, 제가 말하려는 건 아이콘 색상이 라이트 테마인지 다크 테마인지에 따라 자동으로 반전되어야 한다는 거예요.

제 라이트 테마 배경색은 #F0F0F0이고, 다크 테마 배경색은 #000000입니다.

따라서 대비가 잘 되는 색을 찾기가 어렵습니다. 다크 테마에서는 흰색 아이콘, 라이트 테마에서는 검은색 아이콘으로 표시되길 원합니다.
감사합니다 :wink:

4개의 좋아요

테마 색상에 기반한 자동 아이콘 색상 전환을 위해 – custom icon color 테마 설정에 값을 지정하지 마세요.

현재 이 동작을 기본값으로 설정했습니다:

12개의 좋아요

최고네요! @meghna님 감사합니다 :heart_eyes:

9개의 좋아요

이 테마 컴포넌트를 정말 좋아하는데, 홈 페이지에서는 아주 잘 작동합니다. 하지만 내 디스코urs 인스턴스의 일부 영역에서는 기본 로딩 스피너가 표시됩니다. 예를 들어, 관리자 패널이나 사용자 설정 화면에 있을 때 말이죠. @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 was authored using gjs and its template cannot be overridden. Ignoring override.

Ubuntu에서 최신 Chrome 브라우저를 사용하여 테스트한 프로덕션 사이트에서는 오류가 발생하지 않지만, 로딩 스피너도 표시되지 않습니다.

이 테마 컴포넌트가 출시된 이후 테마에서 템플릿을 오버라이드하는 방식에 몇 가지 변경 사항이 적용된 것 같습니다: (not recommended) Overriding Discourse templates from a Theme or Plugin. 또한, 그 이후로 Discourse가 로딩 스피너를 구현하는 방식도 변경되었을 것이라고 생각합니다.

3개의 좋아요

@meghna 이거 수정될 거야, 아니면 지금 고장 난 거야? :thinking:

1개의 좋아요

조금만 기다려 주세요. 팀이 연례 회의에 참석 중이었기 때문에, 이번 주에 업무에 복귀하면 다른 우선순위가 있을 수 있습니다.

3개의 좋아요

수정은 코어에 몇 가지 변경 사항이 필요합니다. 현재 작업을 진행 중이며 곧 수정될 예정입니다.

3개의 좋아요

수고 많으셨어요 :smiley: :heart:

이 테마 구성 요소는 최신 Discourse 버전에서 작동하도록 업데이트되었습니다 (@cvx님의 도움으로).

4개의 좋아요

그래도 내 환경에서는 작동하지 않습니다. :confused:

수정; 오늘 discourse를 업데이트한 후 이제 작동합니다.

FontAwesome 대신 svg-icon을 사용하는 것에 대해 궁금합니다. 어쨌든 감사합니다.

최신 버전 3.2.0.beta4-dev에서 작동이 중단되었습니다.

(24532653e6)

최신 버전에서는 이거 괜찮아 보이네 :thinking:

1개의 좋아요

네, 몇몇 곳에서는 작동하지만, 다른 게시글을 클릭해서 볼 때 게시글 안에서는 작동하지 않습니다. 지금은 작동하지 않습니다.

2개의 좋아요