From a71e1ec00eeac487d2859636f9bfa66d519d22cf Mon Sep 17 00:00:00 2001 From: Maximilian Mader Date: Sun, 23 Jun 2013 18:48:48 +0200 Subject: [PATCH 1/6] Improve frontend according to http://ux.stackexchange.com/a/41142/32862 --- file/style/be.bastelstu.wcf.chat.less | 88 +++++++++++++++++++-------- template/chat.tpl | 4 +- template/message.tpl | 49 ++++++++------- 3 files changed, 94 insertions(+), 47 deletions(-) diff --git a/file/style/be.bastelstu.wcf.chat.less b/file/style/be.bastelstu.wcf.chat.less index 86ebcb7..bf2fb78 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,80 @@ } &: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; + position: relative; + + .userAvatar { + float: left; + margin-left: 16px; } - .markContainer { - display: none; - padding: 0; + .innerMessage { + margin-left: 46px; + padding: 2px 5px 5px; } time { - &::before { - content: "["; + float: right; + } + + &.normal { + .userAvatar { + margin-left: 0; } - &::after { - content: "]"; + + .innerMessage { + border-width: 1px; + border-style: solid; + border-color: @wcfContainerBorderColor; + border-radius: @wcfContainerBorderRadius; + background-color: @wcfContainerBackgroundColor; + + .username { + font-weight: bold; + } + + &:before { + border-color: transparent @wcfContainerBorderColor; + border-style: solid; + border-width: 6px 6px 6px 0; + content: ""; + display: block; + left: 46px; + position: absolute; + top: 12px; + width: 0; + } + + &:after { + border-color: transparent @wcfContainerBackgroundColor;; + border-style: solid; + border-width: 5px 5px 5px 0; + content: ""; + display: block; + left: 47px; + position: absolute; + top: 13px; + width: 0; + } } } - .usernameContainer { - text-align: right; - min-width: 100px; - padding-right: @wcfGapSmall; - white-space: nowrap; - font-weight: bold; - } - - .text { - width: 100%; + > .markContainer { + display: none; + 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..6634208 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} From f313dde2c343189c004b114e316b0f208c850f26 Mon Sep 17 00:00:00 2001 From: Maximilian Mader Date: Sun, 23 Jun 2013 19:45:20 +0200 Subject: [PATCH 2/6] Prepare for message merging --- file/style/be.bastelstu.wcf.chat.less | 16 +++++++++++++++- template/message.tpl | 2 +- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/file/style/be.bastelstu.wcf.chat.less b/file/style/be.bastelstu.wcf.chat.less index bf2fb78..6794207 100644 --- a/file/style/be.bastelstu.wcf.chat.less +++ b/file/style/be.bastelstu.wcf.chat.less @@ -111,7 +111,7 @@ float: right; } - &.normal { + &.bubble { .userAvatar { margin-left: 0; } @@ -127,6 +127,20 @@ font-weight: bold; } + > ul.text { + li { + 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; + } + } + } + &:before { border-color: transparent @wcfContainerBorderColor; border-style: solid; diff --git a/template/message.tpl b/template/message.tpl index 6634208..6fecbe9 100644 --- a/template/message.tpl +++ b/template/message.tpl @@ -1,5 +1,5 @@ {literal} -
+
{if $type == 0 || $type == 7} {@$avatar[32]} From 42ef646685a5f88808e22843172b71286ac5617b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20D=C3=BCsterhus?= Date: Sun, 23 Jun 2013 19:46:50 +0200 Subject: [PATCH 3/6] Merge similar messages together --- file/js/be.bastelstu.Chat.litcoffee | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/file/js/be.bastelstu.Chat.litcoffee b/file/js/be.bastelstu.Chat.litcoffee index 74e9894..e130464 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,25 @@ 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' - + output = v.messageTemplate.fetch message + if createNewMessage + 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 + $('.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`. From 9f8f7b31e0a4ea7def796a2006c7803c43f5ac60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20D=C3=BCsterhus?= Date: Sun, 23 Jun 2013 19:54:39 +0200 Subject: [PATCH 4/6] Set isFollowUp to allow checking whether a completely new message is wanted --- file/js/be.bastelstu.Chat.litcoffee | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/file/js/be.bastelstu.Chat.litcoffee b/file/js/be.bastelstu.Chat.litcoffee index e130464..92d275f 100644 --- a/file/js/be.bastelstu.Chat.litcoffee +++ b/file/js/be.bastelstu.Chat.litcoffee @@ -418,8 +418,9 @@ Insert the given messages into the chat stream. if lastMessage.type is message.type and lastMessage.sender is message.sender and lastMessage.receiver is message.receiver createNewMessage = no - output = v.messageTemplate.fetch message if createNewMessage + message.isFollowUp = no + output = v.messageTemplate.fetch message li = $ '
  • ' li.addClass 'timsChatMessage' li.addClass "timsChatMessage#{message.type}" @@ -429,6 +430,8 @@ Insert the given messages into the chat stream. 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 From 9b6ee4afb48cca11dc4497c92fa246f7bf8d6eae Mon Sep 17 00:00:00 2001 From: Maximilian Mader Date: Sun, 23 Jun 2013 20:11:10 +0200 Subject: [PATCH 5/6] Further improvements --- file/style/be.bastelstu.wcf.chat.less | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/file/style/be.bastelstu.wcf.chat.less b/file/style/be.bastelstu.wcf.chat.less index 6794207..d91dcd8 100644 --- a/file/style/be.bastelstu.wcf.chat.less +++ b/file/style/be.bastelstu.wcf.chat.less @@ -95,7 +95,6 @@ > .innerMessageContainer { padding: 5px 20px 5px 5px; - position: relative; .userAvatar { float: left; @@ -105,10 +104,11 @@ .innerMessage { margin-left: 46px; padding: 2px 5px 5px; - } - - time { - float: right; + + time { + float: right; + font-weight: bold; + } } &.bubble { @@ -122,7 +122,8 @@ border-color: @wcfContainerBorderColor; border-radius: @wcfContainerBorderRadius; background-color: @wcfContainerBackgroundColor; - + position: relative; + .username { font-weight: bold; } @@ -138,6 +139,10 @@ border-style: none; padding: 3px 0 0 0; } + + > time { + font-weight: normal; + } } } @@ -147,9 +152,9 @@ border-width: 6px 6px 6px 0; content: ""; display: block; - left: 46px; + left: -6px; position: absolute; - top: 12px; + top: 5px; width: 0; } @@ -159,9 +164,9 @@ border-width: 5px 5px 5px 0; content: ""; display: block; - left: 47px; + left: -5px; position: absolute; - top: 13px; + top: 6px; width: 0; } } From 06021791251a4625fa5db26896cc401c8fa89e0d Mon Sep 17 00:00:00 2001 From: Maximilian Mader Date: Sun, 23 Jun 2013 20:40:00 +0200 Subject: [PATCH 6/6] Add clearfix --- file/style/be.bastelstu.wcf.chat.less | 1 + 1 file changed, 1 insertion(+) diff --git a/file/style/be.bastelstu.wcf.chat.less b/file/style/be.bastelstu.wcf.chat.less index d91dcd8..aea7aef 100644 --- a/file/style/be.bastelstu.wcf.chat.less +++ b/file/style/be.bastelstu.wcf.chat.less @@ -130,6 +130,7 @@ > ul.text { li { + .clearfix; border-style: solid; border-width: 0 0 1px 0; border-color: @wcfContainerBorderColor;