mirror of
https://github.com/wbbaddons/Tims-Chat.git
synced 2024-10-31 14:10:08 +00:00
Improve selection of chat messages
This commit is contained in:
Maximilian Mader
parent
63dda62662
commit
20bce575bb
@ -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
|
||||
|
||||
@ -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,40 +296,85 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.markEnabled {
|
||||
> ul {
|
||||
> .timsChatMessage {
|
||||
&.jsMarked {
|
||||
> .timsChatInnerMessageContainer {
|
||||
.timsChatInnerMessage {
|
||||
background-color: @wcfSelectedBackgroundColor;
|
||||
color: @wcfSelectedColor;
|
||||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.markEnabled {
|
||||
.timsChatText {
|
||||
ul + .timsChatMessageMarker {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timsChatMessage {
|
||||
&.checked {
|
||||
> .timsChatInnerMessageContainer {
|
||||
&.bubble {
|
||||
.timsChatInnerMessage {
|
||||
> .timsChatInnerMessage {
|
||||
background-color: @wcfSelectedBackgroundColor;
|
||||
color: @wcfSelectedColor;
|
||||
|
||||
&:after {
|
||||
border-color: transparent @wcfSelectedBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.timsChatInnerMessage {
|
||||
> .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 {
|
||||
.timsChatMessageMarker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.timsChatMessageBlockMarker {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||||
position: absolute;
|
||||
right: -@wcfGapLarge ;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.bubble {
|
||||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||||
right: -@wcfGapLarge - 1;
|
||||
}
|
||||
|
||||
&.right {
|
||||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||||
// maybe find a better way, will do it for now
|
||||
right: -@wcfGapLarge - @wcfGapMedium - 32 - 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user