Messenger style conversations anyone?

[Paul B]

I've seen some discussion whereby members get confused between threads and conversations.

Would something like this help?

General convention appears to have own messages on the right (WhatsApp, Twitter, Facebook, etc.) and messages by others on the left.

 

[Ozzy47]

I like the look of the first screenshot, your eyes don’t have to travel left/right to get to the message.

 

[SyTry]

Very nice yes!

 

[Paul B]

It's done using a width percentage so will change based on the screen width and break points.

 

[webbouk]

IMHO it looks messy and disjointed

 

[Paul B]

I doubt I'll be using it on my own site but it was an interesting exercise nonetheless.

A simple toggle in the LESS code allows it be easily flipped from left to right, the borders and radii are correct at all width (which is harder than it sounds due to inheritance and media queries), the avatars and member content flip, attribution arrows line up correctly, and the editor avatar flips.

All done in extra.less, other than for one template edit which is required on the conversation template, to add the different classes for own and other messages.

 

[frm]

Will you by chance be releasing this code as a resource, @Brogan?

I too like the first approach at it.

 

[Paul B]

I'm not sure what you mean by first approach.

It's the same code in all screenshots - the layout changes based on how XF alters it due to screen width.

 

[frm]

I'm not sure what you mean by first approach.

I liked the first screenshot version better.

It's the same code in all screenshots

It's as simple as this? I figured there's got to be more as the background changes to a blue as well.

 

[Paul B]

It only appears like that on a wide screen.

Yes, there's a lot more code than that.

 

[frm]

Yes, there's a lot more code than that.

Thought so. Are you going to make this publicly available? I sure hope you will (as is even).

 

[Faust]

Instead of having whole full peofile block, remove it and leave only the user avatar. Will look much better, more professional and easy for the eyes. Otherwise all examples looks messy to me. And very distracted.

 

[Paul B]

Instead of having whole full peofile block, remove it and leave only the user avatar.

That would be my preference and it's how I did it in XF1.

In fact, I stripped away most things in XF1 including the title, banners, etc. and it more closely resembled a messaging app.

 

[Paul B]

Thought so. Are you going to make this publicly available? I sure hope you will (as is even).

I need to do a bit more work on it and then I'll publish a guide.

Or maybe even package it as an add-on ...

 

[Kirby]

IMHO it looks messy and disjointed

Yep. IMHO its difficult to read/follow.

 

[StarArmy]

Not entirely related but it would be hugely beneficial if you added a "close conversation" option for moderators to end squabbling.

 

[Paul B]

That's outside the scope of this which is just styling.

That would require core code changes.

 

[Paul B]

Things look a lot better with all the superfluous stuff stripped away.

 

[Paul B]

I'm okay with how this looks now so I'll post a guide soon.

This is the desktop/wide view from the Admin account's perspective:


This is the mobile/narrow view from the Tester account's perspective:


Configurable options are:

<xf:set var="$ctaMessageSelfSide" value="right" /> // side for own messages - right or left
<xf:set var="$ctaMessageAttribution" value="no" /> // display the message date and time and [New] badge - yes or no
@__ctaMessageRadius: 20px; // radius of message containers - a value between 10px and 30px works best
@__ctaMessageWidth: 80%; // width of messages
@__ctaMessageOtherColour: @xf-paletteColor1; // colour of the messages of other participants

 

[beerForo]

I like your last iteration.