diff --git a/file/js/be.bastelstu.Chat.litcoffee b/file/js/be.bastelstu.Chat.litcoffee index 74e9894..92d275f 100644 --- a/file/js/be.bastelstu.Chat.litcoffee +++ b/file/js/be.bastelstu.Chat.litcoffee @@ -35,6 +35,8 @@ exposed by a function if necessary. chatSession = Date.now() errorVisible = false + lastMessage = null + remainingFailures = 3 events = @@ -411,16 +413,28 @@ Insert the given messages into the chat stream. for message in messages events.newMessage.fire message - output = v.messageTemplate.fetch message - li = $ '
  • ' - li.addClass 'timsChatMessage' - li.addClass "timsChatMessage#{message.type}" - li.addClass "user#{message.sender}" - li.addClass 'ownMessage' if message.sender is WCF.User.userID - li.append output + createNewMessage = yes + if $('.timsChatMessage:last-child .text').is('ul') and lastMessage isnt null and lastMessage.type in [ 0, 7 ] + if lastMessage.type is message.type and lastMessage.sender is message.sender and lastMessage.receiver is message.receiver + createNewMessage = no - li.appendTo $ '#timsChatMessageContainer > ul' - + if createNewMessage + message.isFollowUp = no + output = v.messageTemplate.fetch message + li = $ '
  • ' + li.addClass 'timsChatMessage' + li.addClass "timsChatMessage#{message.type}" + li.addClass "user#{message.sender}" + li.addClass 'ownMessage' if message.sender is WCF.User.userID + li.append output + + li.appendTo $ '#timsChatMessageContainer > ul' + else + message.isFollowUp = yes + output = v.messageTemplate.fetch message + $('.timsChatMessage:last-child .text').append $(output).find('.text li:last-child') + + lastMessage = message $('#timsChatMessageContainer').scrollTop $('#timsChatMessageContainer').prop('scrollHeight') if $('#timsChatAutoscroll').data('status') is 1 Rebuild the userlist based on the given `users`. diff --git a/file/style/be.bastelstu.wcf.chat.less b/file/style/be.bastelstu.wcf.chat.less index 86ebcb7..aea7aef 100644 --- a/file/style/be.bastelstu.wcf.chat.less +++ b/file/style/be.bastelstu.wcf.chat.less @@ -38,7 +38,7 @@ } .timsChatMessageContainer { - height: 200px; + height: 320px; overflow-y: scroll; overflow-x: hidden; display: none; @@ -84,40 +84,100 @@ } &:nth-child(even) { - background-color: @wcfContainerAccentBackgroundColor; + > .innerMessageContainer.normal .innerMessage { + background-color: @wcfContainerAccentBackgroundColor; + + &:after { + border-color: transparent @wcfContainerAccentBackgroundColor; + } + } } - > { - time, .usernameContainer, .text, .markContainer { - display: table-cell; - vertical-align: top; - padding: @wcfGapTiny 0; + > .innerMessageContainer { + padding: 5px 20px 5px 5px; + + .userAvatar { + float: left; + margin-left: 16px; } - .markContainer { + .innerMessage { + margin-left: 46px; + padding: 2px 5px 5px; + + time { + float: right; + font-weight: bold; + } + } + + &.bubble { + .userAvatar { + margin-left: 0; + } + + .innerMessage { + border-width: 1px; + border-style: solid; + border-color: @wcfContainerBorderColor; + border-radius: @wcfContainerBorderRadius; + background-color: @wcfContainerBackgroundColor; + position: relative; + + .username { + font-weight: bold; + } + + > ul.text { + li { + .clearfix; + border-style: solid; + border-width: 0 0 1px 0; + border-color: @wcfContainerBorderColor; + padding: 3px 0 4px; + + &:last-child { + border-style: none; + padding: 3px 0 0 0; + } + + > time { + font-weight: normal; + } + } + } + + &:before { + border-color: transparent @wcfContainerBorderColor; + border-style: solid; + border-width: 6px 6px 6px 0; + content: ""; + display: block; + left: -6px; + position: absolute; + top: 5px; + width: 0; + } + + &:after { + border-color: transparent @wcfContainerBackgroundColor;; + border-style: solid; + border-width: 5px 5px 5px 0; + content: ""; + display: block; + left: -5px; + position: absolute; + top: 6px; + width: 0; + } + } + } + + > .markContainer { display: none; - padding: 0; - } - - time { - &::before { - content: "["; - } - &::after { - content: "]"; - } - } - - .usernameContainer { - text-align: right; - min-width: 100px; - padding-right: @wcfGapSmall; - white-space: nowrap; - font-weight: bold; - } - - .text { - width: 100%; + position: absolute; + right: 0px; + top: 6px; } } } diff --git a/template/chat.tpl b/template/chat.tpl index 0725ec9..e1c5003 100644 --- a/template/chat.tpl +++ b/template/chat.tpl @@ -61,7 +61,7 @@ //]]> - + --> diff --git a/template/message.tpl b/template/message.tpl index 398341c..6fecbe9 100644 --- a/template/message.tpl +++ b/template/message.tpl @@ -1,24 +1,31 @@ {literal} - - - {* - *}{if $type != 7}{* - *}{@$formattedUsername}{* - *}{else} - {if $receiver == WCF.User.userID} - {@$formattedUsername} - {/if} +
    +
    + {if $type == 0 || $type == 7} + {@$avatar[32]} + {else} + {@$avatar[16]} + {/if} +
    +
    + + {@$formattedUsername} + {if $type == 7} - {if $receiver != WCF.User.userID} - {$additionalData.receiverUsername}{/if}{* - *}{/if}{* - *}{* - *}{if $receiver != WCF.User.userID}{* - *}{$separator} - {/if} - - {@$formattedMessage} - - - + {$additionalData.receiverUsername} + {/if} + + + {if $type == 0 || $type == 7} +
      +
    • {@$formattedMessage}
      • +
    + {else} + {@$formattedMessage} + {/if} +
    + + + +
    {/literal}