Tutorial 2x WhatsXFessenger - Cuộc trò chuyện theo style Messenger cho XenForo 2.2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,803
Được Like
11,095
WhatsXFessenger - Cuộc trò chuyện theo style Messenger cho XenForo 2.2

Bạn cảm thấy mệt mỏi với những cuộc trò chuyện giống hệt như những chủ đề?

Đã bao giờ bạn cảm thấy rằng các cuộc trò chuyện XF sẽ tốt hơn nếu chúng giống với một trong những ứng dụng nhắn tin nổi tiếng?

Với ý nghĩ đó, bài viết này sẽ hướng dẫn các bạn chỉnh sửa bố cục cuộc trò chuyện theo style messenger tuyệt vời nhất.

cta_whatsXFessenger_default_wide.png


cta_whatsXFessenger_default_narrow.png

Chỉ với một vài thay đổi nhanh chóng đối với các biến và thuộc tính (sẽ nói thêm về điều đó ở phần sau), và nếu bạn không có ý thức về style hoặc sự tinh tế, nó có thể trông như thế này.

cta_whatsXFessenger_custom_narrow.png

Cấu hình tùy chỉnh trong ảnh chụp màn hình ở trên đã được thực hiện bằng cách sử dụng các giá trị sau:
Less:
<xf:set var="$ctaMessageSelfSide" value="left" /> // side for own messages - right or left
<xf:set var="$ctaMessageSelfAvatar" value="no" /> // 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="none" /> // pointer location for the message containers - top, bottom, or none
<xf:set var="$ctaMessageOnline" value="no" /> // display the online now indicator - yes or no
@__ctaMessageRadius: 10px; // radius of message containers - between 10px and 30px works best
@__ctaMessageWidth: 50%; // width of messages - between 50% and 85% works best
@__ctaMessageSelfColour: @xf-successBg; // colour of your messages
@__ctaMessageOtherColour: @xf-paletteAccent1; // colour of the messages of other participants

Văn bản kèm theo giải thích những gì code làm và những giá trị có thể được sử dụng.
Bạn có thể sử dụng các giá trị khác nếu muốn, nhưng chúng có thể sẽ không hoạt động.

Cần làm gì để sửa đổi bố cục cuộc trò chuyện theo style messenger tuyệt vời nhất trên diễn đàn?

Thật dễ dàng.
Chỉ có 2 3 bước đơn giản.

Bước 1
Chỉnh sửa template conversation_message_macros.

Thay đổi điều này:
HTML:
<article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">

Thành:
HTML:
<article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} {{ $message.user_id == $xf.visitor.user_id ? 'ctaConversationMessageSelf' : 'ctaConversationMessageOther' }} js-message" data-author="{{ $message.User.username ?: $message.username }}">

Bước 2
Thực hiện bước 1 ^ lên đó.
Đừng quên bước này - nó khá quan trọng.

Bước 3
Thêm code LESS (cũng đừng quên bước 1 và 2).
Có hai cách để làm điều đó.

Lựa chọn 1
Thêm đoạn code sau vào template extra.less:
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="no" /> // 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;
                    &-main
                    {
                        float: right;
                        margin-left: 4px;
                    }
            }

            &-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;
                }
            }
 
            &--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-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

Lựa chọn 2
Tạo một template mới và đặt tên là cta_whatsXFessenger.less.
Dán đoạn code trên vào đó.

Thêm đoạn code sau vào template extra.less:
Less:
{{ include('cta_whatsXFessenger.less') }}

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom