From 20bce575bbc2b94a83d2dd7dab74a78ffe3df345 Mon Sep 17 00:00:00 2001 From: Maximilian Mader Date: Sun, 2 Mar 2014 00:33:45 +0100 Subject: [PATCH] Improve selection of chat messages --- file/js/be.bastelstu.Chat.litcoffee | 46 +++++++++++++-- file/style/be.bastelstu.chat.less | 91 +++++++++++++++++++++-------- language/de.xml | 1 + template/message.tpl | 21 ++++--- 4 files changed, 120 insertions(+), 39 deletions(-) diff --git a/file/js/be.bastelstu.Chat.litcoffee b/file/js/be.bastelstu.Chat.litcoffee index 0c7b8dd..1e4bcaf 100644 --- a/file/js/be.bastelstu.Chat.litcoffee +++ b/file/js/be.bastelstu.Chat.litcoffee @@ -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 diff --git a/file/style/be.bastelstu.chat.less b/file/style/be.bastelstu.chat.less index 9875633..628c309 100644 --- a/file/style/be.bastelstu.chat.less +++ b/file/style/be.bastelstu.chat.less @@ -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; + } + } } } } diff --git a/language/de.xml b/language/de.xml index ea8352d..ffa6fac 100644 --- a/language/de.xml +++ b/language/de.xml @@ -161,6 +161,7 @@ Probieren Sie, den Chat neu zu laden