채팅 – WhatsApp 말풍선

[chapoi]

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

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

이 테마 컴포넌트 설치

미리보기 안내

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

설명

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

설정

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

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

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

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

다크 모드

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

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

알려진 문제

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

[fbpbdmin (deepblue)]

this is very nice !

one suggestion,
possible to let everyone to change their own background image ?

and the default circuit SVG is rendered differently on iphone and android dark theme
on iphone, the lines looks more bright, not as the example in the doc post… not sure why…

[Jagster (Jakke Flemming)]

Can I disable background pattern totally?

@fbpbdmin

possible to let everyone to change their own background image

I would guess that is really difficult and if it can be done it needs a plugin. But I don’t remember any plugin that gives an option to users adjust such things. It would be nice, though. But it could lead to UX nightmare too when preferences are here, there and everywhere.

An user can’t even tune toolbox of composer and that would be an important feature.

[chapoi]

@fbpbdmin

possible to let everyone to change their own background image ?

@Jagster

I would guess that is really difficult and if it can be done it needs a plugin.

Yes unfortunately that’s a whole other league. If the interest is ever big enough for this skin in general, I’d love to expand on this but for now that’s not happening.

@Jagster

Can I disable background pattern totally?

Oh yeah, that’s easy enough. Can make an update for that.

[fbpbdmin (deepblue)]

@chapoi could you try dark theme on iphone, most patterns are rendered weird there.

say, the default one, on iphone dark, the links are white, looks too busy

it looks ok on android dark theme tho…

thanks

[chapoi]

Oh wow! Thanks for that, Ill try to take a look at the dark mode over the weekend

[chapoi]

I’ve added a setting to disable the pattern completely.

The dark-mode issues on Iphone are due to a bug in safari, which prevents the background-mode-blend property from working when the background-repeat is used… Quite annoying and I don’t have a workaround yet.

It might come down to two separate uploads for dark/light mode, which isn’t elegant at all.

Either way, I’d recommend for now to use it without the pattern, if you’re on Iphone and use your device in dark mode.

[Falco]

@chapoi

@fbpbdmin

possible to let everyone to change their own background image ?

@Jagster

I would guess that is really difficult and if it can be done it needs a plugin.

Yes unfortunately that’s a whole other league. If the interest is ever big enough for this skin in general, I’d love to expand on this but for now that’s not happening.

Maybe an user option to use their existing “User Card Background” image as the chat background?

[Roi]

@chapoi

Quite annoying and I don’t have a workaround yet.

Yeah same here:

But looks great on Android:

Without a pattern it looks boring. I left it enabled for now, but Apple users started complaining.

[digitaldominica]

Hi @chapoi is there a way to change the chat reply icon to an actual left arrow instead of the shareicon that shows up of d-icon-share?

[chapoi]

Not specifically with this theme component, no.

You could follow something like this

Help replacing an icon

I am trying to replace the bars icon for opening/closing the sidebar following these instructions Replace Discourse's default SVG icons with custom icons in a theme but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) [image] Created a component and uploaded the spritesheet: [image] And used this code (I only want the change on desktop) [image] But I just get no icon: [image] Any ideas? I’m sure …

to replace all instances of the icon. (I don’t think we use the share-icon in any other place, so this could maybe work out).

To replace it only there would involve some more complexity, I’m just not sure what.

[digitaldominica]

Okay thanks I will attempt it, I use the Kodular Community Theme and it same icon show in topics I reply to, I wonder if this is part of the theme specifically. I’ll go ask the dev now.

[digitaldominica]

Thanks for this component.

I’ve made a minor adjustment to the mobile.scss on line 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;

The previous the background was applied to the .chat-messages-container and on scroll my background would move with the messages this way it stays in the back.

I notice there was two instances of .chat-messages-container in the mobile chat which caused this replication on the background.

[chapoi]

Thank you, excellent catch of a silly oversight. Fixed.

[digitaldominica]

Hi, it appears that the chat background is no longer visible in the chat, i’m not seeing the css being added to the chat container anymore. I’m currently using version 3.3.0.beta2

[chapoi]

Hi! Thanks for the report; there’s been a lot of chat changes and probably I need to update this component.

Will try to do soon!

[eisammy (Sammy)]

I tried taste this theme component a couple days ago if want can i post here the errors screenshots cause I wish to enable again.

[eisammy (Sammy)]

@chapoi Simply wonderful… errors is gone apparently. plans to implement this to desktop version?

[Earnie_Baird (Earnie)]

Just tested this out. It’s awesome but as others have reported it doesn’t look like it allows you to change the background color or pattern.

With the default light background the white bubbles really blend into the background.

[eisammy (Sammy)]

A new bug Instagram link