Chat – whatsapp bubbles

:warning: Chat is still in active development so this component is likely unstable and in beta for now. Feedback and bug reports welcome.

:information_source: Summary A whatsapp-inspired skin for chat (mobile)
:eyeglasses: Preview Theme Creator (mobile view only)
:hammer_and_wrench: Repository GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Instructions for preview

  1. Make sure you view this on a small screen.
  2. Don’t forget to append ?mobile_view=1 to the url to get the correct view.
  3. Login to get access to chat.

Description

A bubble message-style, applied to mobile only.

Settings

The component comes with an embedded background shown above. This can be changed in the settings. It’s recommend to use an svg pattern. This website has some for free.

You can also choose the bubble colours and the background behind the pattern, or disable the pattern altogether.

If you leave either light or dark setting empty, the bubbles will default to secondary and tertiary-low. If you leave the background colour empty, it will default to primary-high.

Using a full image as background can also work, but you’ll need to make sure it’s an optimised size for the mobile viewport.

Dark Mode

You can choose different background and bubble colours for dark mode.
To avoid having to change the background-pattern it’s using a background-blend in dark mode.

For best results, choose a light-coloured pattern which works nicely in light mode, and it should be automatically muted in dark mode (unfortunately not on all devices – see below).

Known issues

  • The timestamps for your own messages are differently placed than for other peoples messages
  • Doesn’t have a dark mode (yet)
  • dark mode acts weird on some devices
  • doesn’t work well with threading enabled
20 Likes

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…

2 Likes

Can I disable background pattern totally?

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.

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.

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

3 Likes

@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

1 Like

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

2 Likes

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.

5 Likes

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

4 Likes

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. :stuck_out_tongue_winking_eye:

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?

Not specifically with this theme component, no.

You could follow something like this

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.

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.

1 Like

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.

4 Likes

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

2 Likes

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

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!

6 Likes

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.

2 Likes

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

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.

A new bug Instagram link

1 Like