From a71e1ec00eeac487d2859636f9bfa66d519d22cf Mon Sep 17 00:00:00 2001 From: Maximilian Mader Date: Sun, 23 Jun 2013 18:48:48 +0200 Subject: [PATCH] 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}