mirror of
https://github.com/wbbaddons/Tims-Chat.git
synced 2024-10-31 14:10:08 +00:00
Merge remote-tracking branch 'origin/frontendImprovements'
This commit is contained in:
Tim Düsterhus
commit
b3bf01e017
@ -35,6 +35,8 @@ exposed by a function if necessary.
|
|||||||
chatSession = Date.now()
|
chatSession = Date.now()
|
||||||
errorVisible = false
|
errorVisible = false
|
||||||
|
|
||||||
|
lastMessage = null
|
||||||
|
|
||||||
remainingFailures = 3
|
remainingFailures = 3
|
||||||
|
|
||||||
events =
|
events =
|
||||||
@ -411,16 +413,28 @@ Insert the given messages into the chat stream.
|
|||||||
for message in messages
|
for message in messages
|
||||||
events.newMessage.fire message
|
events.newMessage.fire message
|
||||||
|
|
||||||
output = v.messageTemplate.fetch message
|
createNewMessage = yes
|
||||||
li = $ '<li></li>'
|
if $('.timsChatMessage:last-child .text').is('ul') and lastMessage isnt null and lastMessage.type in [ 0, 7 ]
|
||||||
li.addClass 'timsChatMessage'
|
if lastMessage.type is message.type and lastMessage.sender is message.sender and lastMessage.receiver is message.receiver
|
||||||
li.addClass "timsChatMessage#{message.type}"
|
createNewMessage = no
|
||||||
li.addClass "user#{message.sender}"
|
|
||||||
li.addClass 'ownMessage' if message.sender is WCF.User.userID
|
|
||||||
li.append output
|
|
||||||
|
|
||||||
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
|
$('#timsChatMessageContainer').scrollTop $('#timsChatMessageContainer').prop('scrollHeight') if $('#timsChatAutoscroll').data('status') is 1
|
||||||
|
|
||||||
Rebuild the userlist based on the given `users`.
|
Rebuild the userlist based on the given `users`.
|
||||||
|
|||||||
@ -38,7 +38,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.timsChatMessageContainer {
|
.timsChatMessageContainer {
|
||||||
height: 200px;
|
height: 320px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
display: none;
|
display: none;
|
||||||
@ -84,40 +84,100 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(even) {
|
&:nth-child(even) {
|
||||||
background-color: @wcfContainerAccentBackgroundColor;
|
> .innerMessageContainer.normal .innerMessage {
|
||||||
|
background-color: @wcfContainerAccentBackgroundColor;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
border-color: transparent @wcfContainerAccentBackgroundColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> {
|
> .innerMessageContainer {
|
||||||
time, .usernameContainer, .text, .markContainer {
|
padding: 5px 20px 5px 5px;
|
||||||
display: table-cell;
|
|
||||||
vertical-align: top;
|
.userAvatar {
|
||||||
padding: @wcfGapTiny 0;
|
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;
|
display: none;
|
||||||
padding: 0;
|
position: absolute;
|
||||||
}
|
right: 0px;
|
||||||
|
top: 6px;
|
||||||
time {
|
|
||||||
&::before {
|
|
||||||
content: "[";
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
content: "]";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.usernameContainer {
|
|
||||||
text-align: right;
|
|
||||||
min-width: 100px;
|
|
||||||
padding-right: @wcfGapSmall;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -61,7 +61,7 @@
|
|||||||
//]]>
|
//]]>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style type="text/css">
|
<!--<style type="text/css">
|
||||||
/*<![CDATA[*/
|
/*<![CDATA[*/
|
||||||
.timsChatMessage::before {
|
.timsChatMessage::before {
|
||||||
content: "";
|
content: "";
|
||||||
@ -80,7 +80,7 @@
|
|||||||
content: "\f05a";
|
content: "\f05a";
|
||||||
}
|
}
|
||||||
/*]]>*/
|
/*]]>*/
|
||||||
</style>
|
</style>-->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="tpl{$templateName|ucfirst}">
|
<body id="tpl{$templateName|ucfirst}">
|
||||||
|
|||||||
@ -1,24 +1,31 @@
|
|||||||
{literal}
|
{literal}
|
||||||
<time>{@$formattedTime}</time>
|
<div class="innerMessageContainer{if $type == 0 || $type == 7} bubble{/if}">
|
||||||
<span class="usernameContainer">
|
<div class="userAvatar framed">
|
||||||
<span class="username">{*
|
{if $type == 0 || $type == 7}
|
||||||
*}{if $type != 7}{*
|
{@$avatar[32]}
|
||||||
*}{@$formattedUsername}{*
|
{else}
|
||||||
*}{else}
|
{@$avatar[16]}
|
||||||
{if $receiver == WCF.User.userID}
|
{/if}
|
||||||
{@$formattedUsername}
|
</div>
|
||||||
{/if}
|
<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>
|
<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}
|
||||||
{$additionalData.receiverUsername}{/if}{*
|
{/if}
|
||||||
*}{/if}{*
|
</span>
|
||||||
*}</span>{*
|
<time>{@$formattedTime}</time>
|
||||||
*}{if $receiver != WCF.User.userID}{*
|
{if $type == 0 || $type == 7}
|
||||||
*}<span class="separator">{$separator}</span>
|
<ul>
|
||||||
{/if}
|
<li class="text">{@$formattedMessage}</li>
|
||||||
</span>
|
</ul>
|
||||||
<span class="text">{@$formattedMessage}</span>
|
{else}
|
||||||
<span class="markContainer">
|
<span class="text">{@$formattedMessage}</span>
|
||||||
<input type="checkbox" value="{@$messageID}" />
|
{/if}
|
||||||
</span>
|
</div>
|
||||||
|
<span class="markContainer">
|
||||||
|
<input type="checkbox" value="{@$messageID}" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
{/literal}
|
{/literal}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user