WhatsXFessenger

[trapped_soul]

The full code is a few posts up on this page.

Yep that worked. Thank you!

(FWIW & if anyone else slips - I had a double full stop separated inbetween two lines)

 

[Oblivion Knight]

Thanks for the update @Brogan. It's a small change, but it looks fantastic!

 

[beerForo]

// Begin Brogan's most splendiferous messenger style conversation layout modification thingy [data-t

Use this modified code.

// Begin Brogan's most splendiferous messenger style conversation layout modification thingy
[data-template="conversation_view"]
{
    <xf:set var="$ctaMessageSelfSide" value="right" /> // side for own messages - right or left
    <xf:set var="$ctaMessageSelfAvatar" value="yes" /> // display your own avatar - yes or no
    <xf:set var="$ctaMessageAttribution" value="yes" /> // display the message date and time and [New] indicator - yes or no
    <xf:set var="$ctaMessagePointer" value="top" /> // pointer location for the message containers - top, bottom, or none
    <xf:set var="$ctaMessageOnline" value="yes" /> // display the online now indicator - yes or no
    @__ctaMessageRadius: 25px; // radius of message containers - between 10px and 30px works best
    @__ctaMessageWidth: 80%; // width of messages - between 50% and 85% works best
    @__ctaMessageSelfColour: @xf-paletteNeutral1; // colour of your messages
    @__ctaMessageOtherColour: @xf-paletteColor1; // colour of the messages of other participants

    .block
    {
        & .message
        {
            border-radius: @__ctaMessageRadius;        

            &--conversationMessage
            {
                width: @__ctaMessageWidth;
            }
   
            &-cell--user
            {
                visibility: hidden;
                border: none;
                flex: 0 0 118px;
            }
   
            &-avatar
            {
                visibility: visible;
   
                &-wrapper
                {
                    margin-bottom: 0;
                }

                &-online
                {
                    <xf:if is="$ctaMessageOnline == 'no'">
                        display: none;
                    </xf:if>
                }
            }

            &-userDetails,
            &-userExtras,
            &-userArrow
            {
                display: none;
            }

            &--quickReply
            {
                border-radius: inherit;
            }

            &-attribution
            {
            <xf:if is="$ctaMessageAttribution == 'no'">
                display: none;
            </xf:if>
                border: none;
            }

            &-body
            {
                margin: 0;
            }

            &.ctaConversationMessageSelf
            {
                background: @__ctaMessageSelfColour;

                <xf:if is="$ctaMessageSelfAvatar == 'no'">
                    & .message-cell--user
                    {
                        display: none;
                    }
                </xf:if>
            }

            &.ctaConversationMessageOther
            {
                background: @__ctaMessageOtherColour;
            }

            @media (max-width: @xf-responsiveMedium)
            {
                border-right: 1px solid @xf-borderColor;
                border-left: 1px solid @xf-borderColor;

                &-cell--user
                {
                    padding-bottom: 0;
                }

                &-avatar .avatar
                {
                    width: 32px;
                    height: 32px;
                    font-size: 20px;                      
                }
            }

        <xf:if is="$ctaMessageSelfSide == 'right'">
            &.ctaConversationMessageSelf,
            &--quickReply
            {
                margin-left: (100% - @__ctaMessageWidth);
   
                & .message-inner
                {
                    flex-direction: row-reverse;
                }

                & .message-attribution-main
                {
                    float: right;
                    margin-left: 4px;
                }
            }
   
            &--quickReply
            {
                margin-left: 0;
            }

            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf,
                &--quickReply
                {
                    & .message-user
                    {
                        flex-direction: row-reverse;
                    }
                }

                &.ctaConversationMessageOther .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }              
            }

            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-right-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-top-left-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-right-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-bottom-left-radius: 0;
                    }
            </xf:if>
        <xf:else/>
            &.ctaConversationMessageOther
            {
                margin-left: (100% - @__ctaMessageWidth);

                & .message-attribution-main
                {
                    float: right;
                    margin-left: 4px;
                }
   
                & .message-inner
                {
                    flex-direction: row-reverse;
                }
            }

            @media (max-width: @xf-responsiveMedium)
            {
                &.ctaConversationMessageSelf .message-attribution-main
                {
                    float: left;
                    margin-left: 0;
                }

                &.ctaConversationMessageOther .message-user
                {
                    flex-direction: row-reverse;
                }
            }

            <xf:if is="$ctaMessagePointer == 'top'">
                &.ctaConversationMessageSelf
                    {
                        border-top-left-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-top-right-radius: 0;
                    }
            <xf:elseif is="$ctaMessagePointer == 'bottom'" />
                &.ctaConversationMessageSelf
                    {
                        border-bottom-left-radius: 0;
                    }

                &.ctaConversationMessageOther
                    {
                        border-bottom-right-radius: 0;
                    }
            </xf:if>
        </xf:if>
        }
    }
}
// End Brogan's most splendiferous messenger style conversation layout modification thingy - so say we all

nice one

 

[beerForo]

Wondering what I am doing wrong here.
It's working great on one site.
I tried to duplicate it on another. I created the template and called it in the extra.less.
But the bubbles are all on the left and none have the pointed edge.
I didn't change any settings, they are set the same as my other site. Right side for starter.
Rebuilt master data, no change.

 

[beerForo]

I tried to copy/paste the exact css from the post here too and same. Not sure what it up.

 

[Static-Xbox]

Wondering what I am doing wrong here.
It's working great on one site.
I tried to duplicate it on another. I created the template and called it in the extra.less.
But the bubbles are all on the left and none have the pointed edge.
I didn't change any settings, they are set the same as my other site. Right side for starter.
Rebuilt master data, no change.

Did you remember Step One? Methinks, based on the instructions in Step Two, that Step One might be important...

 

[beerForo]

Oh you mean the one that says don't forget it? I forgot it!
Step 2
Do step 1 ^ up there.
Don't forget this step - it's kind of important.
(Blame @tonmo and @Static-Xbox for this additional step )

 

[Static-Xbox]

Oh you mean the one that says don't forget it? I forgot it!
Step 2
Do step 1 ^ up there.
Don't forget this step - it's kind of important.
(Blame @tonmo and @Static-Xbox for this additional step )

Yep...I think I might know someone else who forgot it, too...

 

[MacSeah]

@Brogan , I just implemented the changes and I must say this layout is a huge improvement over the default Xenforo layout! This works great to show users the difference between threads and conversations.

I have 2 minor questions I'd like to ask you about editing the layout. If you could help, I'd be really appreciative!

1) Is there some way I can move the user avatar outside of the message block on narrow screens? Like how telegram does it?


2) If I can't move the avatar out, is there some way I can get the user details to be included within the message block instead of floating outside?


Thank you so very much for the effort to put together this tutorial. Do stay safe!

 

[Paul B]

Yes, it would be possible but it would need custom CSS and possibly template edits.

 

[MacSeah]

Yes, it would be possible but it would need custom CSS and possibly template edits.

Thank you for answering

 

[securedme]

Anyone can make it changed for UI.X?

 

[Silmarillion]

Hello Brogan,

i have a little problem with my avatar. As you can see it sticks out a bit and doesn't quite fit.



What do I have to change so that it fits?

Thank you in advance.

Chris

 

[Paul B]

No idea - it woks fine on the default style so it will be something related to your custom style or other changes you have made.

You will need to use the browser inspector to determine the cause and adjust the code to resolve it.

 

[Silmarillion]

All right, then I'll ask @Russ. I haven't changed anything myself.

 

[Wildcat Media]

I wanted to use a variation on our accent colors as backgrounds for the speech bubbles but as you'd expect, they would be too bright with the existing text. So...what about just a small amount of the accent colors to shade the backgrounds?

A LESS modifier, fade, can accomplish this. On our default XF theme and, based on our color selections, these changes are working well across multiple child styles where only the colors are changed. (Meaning, I don't have to edit multiple child styles to create the colors.) The effect is nice, as it uses our accent colors to add some life to the speech bubbles.

Original:

@__ctaMessageSelfColour: @xf-paletteNeutral1; // colour of your messages
@__ctaMessageOtherColour: @xf-paletteColor1; // colour of the messages of other participants

New:

@__ctaMessageSelfColour: fade(@xf-paletteAccent3, 20%); // colour of your messages
@__ctaMessageOtherColour: fade(@xf-paletteAccent1, 20%); // colour of the messages of other participants

20% is an opacity of 0.2. That can be adjusted, of course, depending on how much tint you want to your speech bubbles. You could also use just one accent color, with its 180° complementary color, using spin like this:

New, with complementary accent color:

@__ctaMessageSelfColour: fade(@xf-paletteAccent3, 20%); // colour of your messages
@__ctaMessageOtherColour: fade(spin(@xf-paletteAccent3, 180), 20%); // colour of the messages of other participants

I have other minor tweaking to do (such as removing borders from the speech bubbles), and I have to make it work with a UI.X-based theme (part of the speech bubble background color is hidden, but layout is OK). And given our preponderance of older forum participants, I may modify the code to add in the username. I have yet to try it on another theme I use elsewhere (from Pixel Exit).

All good, though! Working well here.

 

[Wildcat Media]

I thought of one improvement--an icon or badge to indicate the conversation starter. This is currently shown as a username at top of the conversation in a row beneath the conversation title; you can hover over the first username in the list where a tooltip shows that user is the conversation starter. I was testing this modification in a lengthy (150 message) conversation and realized there wasn't a way to tell who started it, without scrolling up to the top.

I have dumped the variables but I can't find anything suitable. (There are so many, I am probably overlooking it.)

I would probably use an icon next to the date in each conversation message posted by the conversation starter, as that would be easiest to do.

 

[Paul B]

You would have to edit the conversation_message_macros template and use a conditional statement to match the user ID of the message with the user ID of the conversation starter: <xf:if is="$message.user_id == $conversation.user_id">Starter</xf:if> .

 

[Wildcat Media]

You would have to edit the conversation_message_macros template and use a conditional statement to match the user ID of the message with the user ID of the conversation starter: <xf:if is="$message.user_id == $conversation.user_id">Starter</xf:if> .

Great minds... I have just figured that out while working on it a few moments ago. Although I used this:

<xf:if is="{$conversation.Starter.user_id} == {$message.user_id}">

They might be the same, though. I verified $conversation.Starter.user_id gives me the correct ID.

 

[Paul B]

Although I used this:

<xf:if is="{$conversation.Starter.user_id} == {$message.user_id}">

Noooooooo .......

The universe will explode if you use that statement.