1
0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-12-22 21:40:08 +00:00

Improve selection of chat messages

This commit is contained in:
Maximilian Mader 2014-03-02 00:33:45 +01:00
parent 63dda62662
commit 20bce575bb
4 changed files with 120 additions and 39 deletions

View File

@ -51,6 +51,7 @@ exposed by a function if necessary.
remainingFailures = 3
overlaySmileyList = null
markedMessages = {}
events =
newMessage: $.Callbacks()
@ -357,11 +358,39 @@ Close private channels
Visibly mark the message once the associated checkbox is checked.
$(document).on 'click', '.timsChatMessage :checkbox', (event) ->
if $(@).is ':checked'
$(@).parents('.timsChatMessage').addClass 'jsMarked'
$(document).on 'click', '.timsChatMessage .timsChatMessageMarker', (event) ->
elem = $(event.target)
parent = elem.parent()
messageID = elem.attr('value')
if elem.is ':checked'
markedMessages[messageID] = messageID
checked = true
parent.addClass 'checked'
parent.siblings().each (key, value) ->
checked = $(value).find('.timsChatMessageMarker').is ':checked'
checked
if checked
elem.parents('.timsChatMessage').addClass 'checked'
elem.parents('.timsChatTextContainer').siblings('.timsChatMessageBlockMarker').prop 'checked', true
else
$(@).parents('.timsChatMessage').removeClass 'jsMarked'
delete markedMessages[messageID]
parent.removeClass 'checked'
elem.parents('.timsChatMessage').removeClass 'checked'
elem.parents('.timsChatTextContainer').siblings('.timsChatMessageBlockMarker').prop 'checked', false
$(document).on 'click', '.timsChatMessageBlockMarker', (event) ->
$(event.target).siblings('.timsChatTextContainer').children('li').each (key, value) ->
elem = $(value).find '.timsChatMessageMarker'
if $(event.target).is ':checked'
do elem.click unless elem.is ':checked'
else
do elem.click if elem.is ':checked'
Scroll down when autoscroll is being activated.
@ -575,7 +604,7 @@ Insert the given messages into the chat stream.
events.newMessage.fire message
createNewMessage = yes
if $('.timsChatMessage:last-child .timsChatText').is('ul') and lastMessage isnt null and lastMessage.type in [ v.config.messageTypes.NORMAL, v.config.messageTypes.WHISPER ]
if $('.timsChatMessage:last-child .timsChatTextContainer').is('ul') and lastMessage isnt null and lastMessage.type in [ v.config.messageTypes.NORMAL, v.config.messageTypes.WHISPER ]
if lastMessage.type is message.type and lastMessage.sender is message.sender and lastMessage.receiver is message.receiver and lastMessage.isInPrivateChannel is message.isInPrivateChannel
createNewMessage = no
@ -611,7 +640,7 @@ Insert the given messages into the chat stream.
else
messageContainerID = 0
$("#timsChatMessageContainer#{messageContainerID} .timsChatMessage:last-child .timsChatText").append $(output).find('.timsChatText li:last-child')
$("#timsChatMessageContainer#{messageContainerID} .timsChatMessage:last-child .timsChatTextContainer").append $(output).find('.timsChatTextContainer li:last-child')
lastMessage = message
@ -1185,6 +1214,11 @@ And finally export the public methods and variables.
Chat =
init: init
getMessages: getMessages
Return a copy of the object containing the IDs of the marked messages
getMarkedMessages: -> JSON.parse JSON.stringify markedMessages
refreshRoomList: refreshRoomList
insertText: insertText
freeTheFish: freeTheFish

View File

@ -151,10 +151,6 @@
overflow-x: hidden;
resize: vertical;
.timsChatMarkContainer {
display: none;
}
> ul {
> .timsChatMessage {
clear: both;
@ -213,8 +209,8 @@
border-width: 1px;
border-color: @wcfContainerBorderColor;
> .timsChatText {
> li {
> .timsChatTextContainer {
> li.timsChatText {
border-style: solid;
border-width: 0 0 1px 0;
border-color: @wcfContainerBorderColor;
@ -300,41 +296,86 @@
}
}
.timsChatMessageMarker, .timsChatMessageBlockMarker {
display: none;
}
&.markEnabled {
> ul {
> .timsChatMessage {
&.jsMarked {
> .timsChatInnerMessageContainer {
.timsChatInnerMessage {
.timsChatText {
ul + .timsChatMessageMarker {
top: 0;
}
}
.timsChatMessage {
&.checked {
> .timsChatInnerMessageContainer {
&.bubble {
> .timsChatInnerMessage {
background-color: @wcfSelectedBackgroundColor;
color: @wcfSelectedColor;
&:after {
border-color: transparent @wcfSelectedBackgroundColor;
}
}
&.bubble {
.timsChatInnerMessage {
&.right {
> .timsChatInnerMessage {
&:after {
border-color: transparent @wcfSelectedBackgroundColor;
}
}
&.right {
.timsChatInnerMessage {
&:after {
border-color: transparent @wcfSelectedBackgroundColor;
}
}
}
}
&:not(.bubble) {
.timsChatInnerMessage {
background-color: @wcfSelectedBackgroundColor;
color: @wcfSelectedColor;
}
}
}
}
&:not(.checked) {
> .timsChatInnerMessageContainer {
&.bubble {
.timsChatText {
&.checked {
background-color: @wcfSelectedBackgroundColor;
color: @wcfSelectedColor;
}
}
}
}
> .timsChatInnerMessageContainer {
.timsChatMarkContainer {
}
> .timsChatInnerMessageContainer {
.timsChatMessageMarker {
display: inline-block;
position: absolute;
right: -@wcfGapLarge;
}
.timsChatMessageBlockMarker {
top: 0;
}
.timsChatMessageMarker, .timsChatMessageBlockMarker {
position: absolute;
right: -@wcfGapLarge ;
}
&.bubble {
.timsChatMessageMarker, .timsChatMessageBlockMarker {
right: -@wcfGapLarge - 1;
}
&.right {
.timsChatMessageMarker, .timsChatMessageBlockMarker {
// maybe find a better way, will do it for now
right: -@wcfGapLarge - @wcfGapMedium - 32 - 1;
}
}
}
}
}

View File

@ -161,6 +161,7 @@ Probieren Sie, den Chat neu zu laden<!-- , bei Risiken und Nebenwirkungen fragen
<item name="chat.global.smilies"><![CDATA[Smileys]]></item>
<item name="chat.global.clear"><![CDATA[Chat leeren]]></item>
<item name="chat.global.mark"><![CDATA[Markieren]]></item>
<item name="chat.global.markAll"><![CDATA[Alle Einzelnachrichten markieren]]></item>
<item name="chat.global.fullscreen"><![CDATA[Vollbild]]></item>
<item name="chat.global.forceRefresh"><![CDATA[Räume neu laden]]></item>

View File

@ -37,20 +37,25 @@
{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.ATTACHMENT}
{if $message.type == $messageTypes.ATTACHMENT}<span>{lang}chat.message.{$messageTypes.ATTACHMENT}{/lang}</span>{/if}
<ul class="timsChatText">
<li>
<ul class="timsChatTextContainer">
<li class="timsChatText" data-message-id="{@$message.messageID}">
{if $message.isFollowUp} <time>{@$message.formattedTime}</time>{/if}
{@$message.formattedMessage}
<input type="checkbox" class="timsChatMessageMarker jsTooltip" value="{@$message.messageID}" title="{lang}chat.global.mark{/lang}"/>
</li>
</ul>
{elseif $message.type == $messageTypes.INFORMATION}
<div class="timsChatText">{@$message.formattedMessage}</div>
<input type="checkbox" class="timsChatMessageBlockMarker jsTooltip" value="{@$message.messageID}" title="{lang}chat.global.markAll{/lang}" />
{else}
<span class="timsChatText">{@$message.formattedMessage}</span>
<span class="timsChatTextContainer">
<span class="timsChatText" data-message-id="{@$message.messageID}">
{@$message.formattedMessage}
<input type="checkbox" class="timsChatMessageMarker jsTooltip" value="{@$message.messageID}" title="{lang}chat.global.mark{/lang}"/>
</span>
</span>
{/if}
</div>
<span class="timsChatMarkContainer">
<input type="checkbox" value="{@$message.messageID}" />
</span>
</div>
{/literal}