Chat – whatsapp bubbles

[chapoi (Charlie)]

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

	Summary	A whatsapp-inspired skin for chat (mobile)
	Preview	Theme Creator (mobile view only)
	Repository	GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
	Install Guide	How to install a theme or theme component
	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

[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 Lehtonen)]

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 (Charlie)]

@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 (Charlie)]

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

[chapoi (Charlie)]

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 (Charlie)]

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 I…

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 (Charlie)]

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 (Charlie)]

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 (Dreadwhole)]

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 (Dreadwhole)]

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

[Earnie_Baird]

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 (Dreadwhole)]

A new bug Instagram link