채팅 – WhatsApp 말풍선

:warning: 채팅은 아직 활성 개발 단계에 있으므로 이 컴포넌트는 현재 불안정하며 베타 상태입니다. 피드백과 버그 리포트를 환영합니다.

:information_source: 요약 모바일용 WhatsApp에서 영감을 받은 채팅 스킨
:eyeglasses: 미리보기 Theme Creator (모바일 뷰 전용)
:hammer_and_wrench: 리포지토리 GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile) · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스커스 테마를 처음 사용하시나요? 디스커스 테마 사용 입문가이드

이 테마 컴포넌트 설치

미리보기 안내

  1. 작은 화면에서 이 내용을 확인하고 있는지 확인하세요.
  2. 올바른 뷰를 보려면 URL 끝에 ?mobile_view=1을 추가하는 것을 잊지 마세요.
  3. 채팅에 접근하려면 로그인하세요.

설명

버블 메시지 스타일이며, 모바일에만 적용됩니다.

설정

이 컴포넌트에는 위에 표시된 내장 배경이 포함되어 있습니다. 설정에서 이를 변경할 수 있습니다. svg 패턴을 사용하는 것이 좋습니다. 이 웹사이트에서 무료로 사용할 수 있는 패턴이 있습니다.

버블 색상과 패턴 뒤의 배경색을 선택하거나 패턴을 완전히 비활성화할 수도 있습니다.

라이트 모드나 다크 모드 설정 중 하나를 비워 두면 버블은 기본적으로 secondary와 tertiary-low로 설정됩니다. 배경색을 비워 두면 기본적으로 primary-high로 설정됩니다.

전체 이미지를 배경으로 사용하는 것도 가능하지만, 모바일 뷰포트에 최적화된 크기인지 확인해야 합니다.

다크 모드

다크 모드용 배경색과 버블 색상을 다르게 선택할 수 있습니다.
배경 패턴을 변경하지 않기 위해 다크 모드에서는 background-blend를 사용합니다.

최상의 결과를 얻으려면 라이트 모드에서 잘 어울리는 밝은 색상의 패턴을 선택하세요. 그러면 다크 모드에서는 자동으로 음영 처리가 되어야 합니다(불행히도 모든 기기에서 작동하지는 않습니다 – 아래 참고).

알려진 문제

  • 내 메시지 타임스탬프 위치가 다른 사용자의 메시지 타임스탬프 위치와 다릅니다.
  • 다크 모드가 없습니다 (아직)
  • 일부 기기에서 다크 모드가 이상하게 작동합니다.
  • 스레딩이 활성화되어 있으면 제대로 작동하지 않습니다.
23개의 좋아요

정말 좋습니다!

하나의 제안이 있습니다.
모두가 자신의 배경 이미지를 변경할 수 있도록 하는 것이 가능할까요?

그리고 기본 회로 SVG가 아이폰과 안드로이드의 다크 모드에서 다르게 렌더링됩니다.
아이폰에서는 선이 더 밝게 보이며, 문서 게시물의 예시와 같지 않네요… 왜 그런지 확실하지 않습니다…

2개의 좋아요

배경 패턴을 완전히 비활성화할 수 있나요?

그것은 정말로 어려울 것 같고, 가능하다면 플러그인이 필요할 것입니다. 하지만 사용자가 이러한 설정을 조정할 수 있게 해주는 플러그인을 기억하지 못합니다. 그래도 그런 기능이 있다면 좋겠지만, 설정 사항이 여기저기 흩어져 있으면 사용자 경험(UX)의 악몽이 될 수도 있습니다.

사용자는 작성도구의 도구창조차 조정할 수 없는데, 그건 중요한 기능입니다.

아쉽게도 그건 완전히 다른 차원의 문제입니다. 이 스킨에 대한 관심이 충분히 크다면 이 부분을 확장하고 싶지만, 지금은 그럴 계획이 없습니다.

아, 그건 충분히 쉽습니다. 그 부분을 업데이트로 만들 수 있습니다. :+1:

3개의 좋아요

@chapoi 아이폰에서 다크 테마를 테스트해 볼 수 있을까요? 대부분의 패턴이 아이폰에서 이상하게 렌더링됩니다.

예를 들어, 기본 패턴의 경우 아이폰 다크 모드에서 링크가 흰색이라 너무 번잡해 보입니다.

안드로이드 다크 테마에서는 괜찮아 보이는데…

감사합니다.

1개의 좋아요

와! 알려주셔서 감사합니다. 주말에 다크 모드 한번 살펴볼게요.

2개의 좋아요

패턴을 완전히 비활성화할 수 있는 설정을 추가했습니다.

아이폰에서 다크 모드 관련 문제가 발생하는 이유는 background-repeat를 사용할 때 background-mode-blend 속성이 작동하지 않도록 막는 사파리의 버그 때문입니다… 꽤 귀찮은 문제인데, 아직 해결책이 없습니다.

결국 다크/라이트 모드별로 두 번 업로드를 해야 하는 상황이 될 수 있는데, 이는 전혀 우아하지 않은 방법입니다.

어쨌든, 현재로서는 아이폰을 사용하고 기기를 다크 모드로 설정한 경우, 패턴 없이 사용하는 것을 권장합니다.

5개의 좋아요

기존의 “유저 카드 배경” 이미지를 채팅 배경으로 사용할 수 있는 사용자 옵션이 어떨까요?

4개의 좋아요

네, 저도 마찬가지예요:

하지만 안드로이드에서는 아주 멋져요:

패턴이 없으면 지루해 보여요. 당분간 활성화해 두었지만, 애플 사용자들이 불만을 제기하기 시작했어요. :winking_face_with_tongue:

Hi @chapoi, d-icon-share에 표시되는 공유 아이콘 대신 실제 왼쪽 화살표로 채팅 응답 아이콘을 변경하는 방법이 있을까요?

이 특정 테마 컴포넌트와는 관련이 없습니다.

아래 링크의 방법을 참고할 수 있습니다.

이 방법을 사용하면 아이콘의 모든 인스턴스를 교체할 수 있습니다. (다른 곳에서 share-icon을 사용하지 않는 것으로 보이므로, 이 방법이 통할 수 있을 것 같습니다.)

해당 위치에서만 교체하려면 좀 더 복잡한 작업이 필요할 텐데, 정확히 어떤 작업인지 잘 모르겠습니다.

네, 감사합니다. 시도해 보겠습니다. 저는 Kodular Community Theme을 사용하는데, 제가 답글을 남긴 주제에서도 동일한 아이콘이 표시됩니다. 이것이 특정 테마의 일부인 것인지 궁금합니다. 이제 개발자에게 문의해 보겠습니다.

1개의 좋아요

이 컴포넌트를 공유해 주셔서 감사합니다.

mobile.scss의 55~62행을 조금 수정했습니다.

.chat-messages-scroll {
  background-color: var(--bubble-bg);
  background-image: url(check-empty($background-pattern, $enable_pattern));
  background-blend-mode: var(--bubble-bg-mode);

}
.chat-messages-container {
  padding: 0;

이전에는 배경이 .chat-messages-container에 적용되어 있어 스크롤할 때 배경이 메시지와 함께 움직였습니다. 이번 수정으로 배경이 뒤쪽에 고정되어 있습니다.

모바일 채팅에서 .chat-messages-container가 두 번 정의되어 있어 배경이 중복 적용되는 문제가 발생했음을 확인했습니다.

4개의 좋아요

감사합니다. 단순한 실수를 잘 잡아주셨네요. 수정했습니다.

2개의 좋아요

안녕하세요, 채팅 배경이 더 이상 채팅 화면에 표시되지 않는 것 같습니다. 채팅 컨테이너에 CSS가 더 이상 적용되지 않는 것을 확인했습니다. 현재 3.3.0.beta2 버전을 사용 중입니다.

안녕하세요! 보고해 주셔서 감사합니다. 채팅 기능이 많이 변경되었기 때문에 이 컴포넌트를 업데이트해야 할 것 같습니다.

가급적 빨리 진행하겠습니다!

6개의 좋아요

며칠 전에 이 테마 컴포넌트를 사용해 봤는데, 다시 활성화하고 싶은데 에러 스크린샷을 여기에 올려도 될까요?

2개의 좋아요

@chapoi 정말 훌륭합니다… 오류가 apparently 사라진 것 같습니다. 데스크톱 버전에도 적용할 계획이 있나요?

방금 직접 테스트해 봤습니다. 정말 좋긴 한데, 다른 분들이 말씀하신 것처럼 배경색이나 패턴을 변경할 수 없는 것 같습니다.

기본적인 밝은 배경에서는 흰색 버블이 배경과 너무 잘 어우러져서 잘 안 보입니다.

새로운 Instagram 링크 버그

1개의 좋아요