WhatsXFessenger

WhatsXFessenger

securedme

Active member
WOW. This has always been one of my problems regarding conversation section. Sometimes I'm confused if I'm in a thread or a conversation...

Now I see this tip! It really makes a huge difference!

One thing to make it perfect, to move the time stamp towards the margin of screen (near the avatar) for each bubble. That makes it look more balanced.

1621476224901.png
 

Brogan

XenForo moderator
Staff member
One thing to make it perfect, to move the time stamp towards the margin of screen (near the avatar) for each bubble. That makes it look more balanced.
Use this modified code.

Less:
// 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
 

FrancescoL

Member
If you don't like it then don't use it and create your own layout.
I didn't say you did a bad job, I didn't mean to offend you.
Between finding it a masterpiece and finding it a worthless job, there are so many intermediate nuances.
My personal and modest opinion, which I expressed in the previous comment, is that we need to work on it a little more in my opinion and make some small changes. But you did a good job. It is a good starting point that you can work on.
 

Brogan

XenForo moderator
Staff member

FrancescoL

Member
You're right, I was vague and I apologize.
In my very humble opinion, one thing that could be useful is to create a sort of window like on Facebook in order to chat in that window and with a list of contacts to the right. Just like on Facebook Messenger.
 

Brogan

XenForo moderator
Staff member
That is completely out of scope for this guide.

This changes the layout of individual conversations.

It doesn't affect the conversation list at all, nor turn the conversation list into a messenger app.

You likely want to look into one of the chat add-ons.
 

Brogan

XenForo moderator
Staff member
Brogan updated WhatsXFessenger with a new update entry:

Modified code to display the attribution adjacent to the avatar

This tweak will align the attribution with the avatar/on the outside edge of the message on both sides, like so:

1621532960386-png.252202

Read the rest of this update entry...

The edited code is available in this post: https://xenforo.com/community/threads/whatsxfessenger.192632/page-4#post-1518426
 
Top