Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-12-22 21:40:08 +00:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'origin/frontendImprovements'

Browse Source
This commit is contained in:
Tim Düsterhus 2013-06-23 20:44:37 +02:00
commit b3bf01e017
4 changed files with 143 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
file/js/be.bastelstu.Chat.litcoffee
View File

@ -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></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></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`.

120
file/style/be.bastelstu.wcf.chat.less
View File

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

4
template/chat.tpl
View File

@ -61,7 +61,7 @@
//]]>
</script>
<style type="text/css">
<!--<style type="text/css">
/*<![CDATA[*/
.timsChatMessage::before {
content: "";
@ -80,7 +80,7 @@
content: "\f05a";
}
/*]]>*/
</style>
</style>-->
</head>
<body id="tpl{$templateName|ucfirst}">

49
template/message.tpl
View File

@ -1,24 +1,31 @@
{literal}
<time>{@$formattedTime}</time>
<span class="usernameContainer">
<span class="username">{*
*}{if $type != 7}{*
*}{@$formattedUsername}{*
*}{else}
{if $receiver == WCF.User.userID}
{@$formattedUsername}
{/if}
<div class="innerMessageContainer{if $type == 0 || $type == 7} bubble{/if}">
<div class="userAvatar framed">
{if $type == 0 || $type == 7}
{@$avatar[32]}
{else}
{@$avatar[16]}
{/if}
</div>
<div class="innerMessage">
<span class="username">
{@$formattedUsername}
{if $type == 7}
<span class="icon icon16 icon-double-angle-right jsTooltip" title="{/literal}{lang}chat.ui.whispers{/lang}{literal}" onclick="be.bastelstu.Chat.insertText('/whisper {if $receiver == WCF.User.userID}{$username.replace("\\", "\\\\").replace("'", "\\'")}{else}{$additionalData.receiverUsername.replace("\\", "\\\\").replace("'", "\\'")}{/if}, ', { append: false });"></span>
{if $receiver != WCF.User.userID}
{$additionalData.receiverUsername}{/if}{*
*}{/if}{*
*}</span>{*
*}{if $receiver != WCF.User.userID}{*
*}<span class="separator">{$separator}</span>
{/if}
</span>
<span class="text">{@$formattedMessage}</span>
<span class="markContainer">
<input type="checkbox" value="{@$messageID}" />
</span>
{$additionalData.receiverUsername}
{/if}
</span>
<time>{@$formattedTime}</time>
{if $type == 0 || $type == 7}
<ul>
<li class="text">{@$formattedMessage}</li>
</ul>
{else}
<span class="text">{@$formattedMessage}</span>
{/if}
</div>
<span class="markContainer">
<input type="checkbox" value="{@$messageID}" />
</span>
</div>
{/literal}