github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Group messages from the same person together

Browse source
This commit is contained in:
James Allen 2014-07-04 15:46:21 +01:00
parent 97065e8547
commit 773b457d24
3 changed files with 49 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
services/web/app/views/project/editor/chat.jade
View file

@ -12,11 +12,12 @@ aside.chat(
.infinite-scroll-inner
ul.list-unstyled
li.message(
ng-repeat="message in chat.messages | orderBy:'timestamp':true"
ng-repeat="message in chat.groupedMessages | orderBy:'timestamp':false"
ng-controller="ChatMessageController"
ng-class="{'self': message.user.id == user.id }"
)
div.date(ng-if="$index == 0 || (message.timestamp - chat.groupedMessages[$index - 1].timestamp) > 5 * 60 * 1000")
{{ message.timestamp | formatDate:'h:MMa' }} {{ message.timestamp | relativeDate }}
span.avatar
img(ng-src="{{gravatarUrl(message.user)}}")
div.message-wrapper
@ -28,7 +29,7 @@ aside.chat(
}"
)
.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 60%, 80%)'}")
{{ message.content }}
p(ng-repeat="content in message.contents") {{ content }}
.new-message
textarea(

34
services/web/public/coffee/app/ide/chat/controllers/ChatController.coffee
View file

@ -23,11 +23,41 @@ define [
$scope.chat.messages = [
{ content: "Hello world", timestamp: Date.now() - 2000, user: james2 }
{ content: "Hello, this is the new chat", timestamp: Date.now() - 4000, user: james }
{ content: "Here are some longer messages to show what ti looks like when I say a lot!", timestamp: Date.now() - 20000, user: henry }
{ content: "Here are some longer messages to show what it looks like when I say a lot!", timestamp: Date.now() - 20000, user: henry }
{ content: "What about some maths? $x^2 = 1$?", timestamp: Date.now() - 22000, user: james2 }
{ content: "Nope, that doesn't work yet!", timestamp: Date.now() - 45000, user: henry }
{ content: "I'm running out of things to say.", timestamp: Date.now() - 56000, user: henry }
{ content: "Yep, me too", timestamp: Date.now() - 100000, user: james }
{ content: "Hmm, looks like we've had this conversation backwards", timestamp: Date.now() - 120000, user: james }
]
{ content: "Hello world", timestamp: Date.now() - 202000, user: james2 }
{ content: "Hello, this is the new chat", timestamp: Date.now() - 204000, user: james }
{ content: "Here are some longer messages to show what it looks like when I say a lot!", timestamp: Date.now() - 2020000, user: henry }
{ content: "What about some maths? $x^2 = 1$?", timestamp: Date.now() - 12022000, user: james2 }
{ content: "Nope, that doesn't work yet!", timestamp: Date.now() - 12045000, user: henry }
{ content: "I'm running out of things to say.", timestamp: Date.now() - 22056000, user: henry }
{ content: "Yep, me too", timestamp: Date.now() - 220100000, user: james }
{ content: "Hmm, looks like we've had this conversation backwards", timestamp: Date.now() - 520120000, user: james }
].reverse()
$scope.$watch "chat.messages", (messages) ->
if messages?
$scope.chat.groupedMessages = groupMessages(messages)
TIMESTAMP_GROUP_SIZE = 5 * 60 * 1000 # 5 minutes
groupMessages = (messages) ->
previousMessage = null
groupedMessages = []
for message in messages
shouldGroup = previousMessage? and
previousMessage.user == message.user
if shouldGroup
previousMessage.timestamp = message.timestamp
previousMessage.contents.push message.content
else
groupedMessages.push(previousMessage = {
user: message.user
timestamp: message.timestamp
contents: [message.content]
})
return groupedMessages
]

13
services/web/public/stylesheets/app/editor/chat.less
View file

@ -10,6 +10,13 @@
overflow-x: hidden;
li.message {
margin: @line-height-computed / 2;
.date {
font-size: 12px;
color: @gray-light;
border-bottom: 1px solid @gray-lightest;
margin-bottom: @line-height-computed / 2;
text-align: center;
}
.avatar {
margin-top: 14px;
float: left;
@ -49,6 +56,12 @@
border-width: 10px;
}
}
p {
margin-bottom: @line-height-computed / 4;
&:last-child {
margin-bottom: 0;
}
}
}
&:not(.self) {