Merge branch 'master-redesign' into master-redesign-templates-and-blog

services/web/app/views/project/editor.jade

@@ -59,7 +59,7 @@ block content
 						include ./editor/track-changes
 
 			.ui-layout-east
-				| Chat!
+				include ./editor/chat
 
 
 	script(src='/socket.io/socket.io.js')

services/web/app/views/project/editor/chat.jade

@@ -0,0 +1,38 @@
+aside.chat(
+	ng-controller="ChatController"
+	infinite-scroll="loadMore()"
+	infinite-scroll-disabled="chat.loading || chat.atEnd"
+	infinite-scroll-initialize="ui.chatOpen"
+)
+	.messages(
+		infinite-scroll="loadMore()"
+		infinite-scroll-disabled="chat.loading || chat.atEnd"
+		infinite-scroll-initialize="ui.chatOpen"
+	)
+		.infinite-scroll-inner
+			ul.list-unstyled
+				li.message(
+					ng-repeat="message in chat.messages | orderBy:'timestamp':true"
+					ng-controller="ChatMessageController"
+					ng-class="{'self': message.user.id == user.id }"
+				)
+
+					span.avatar
+						img(ng-src="{{gravatarUrl(message.user)}}")
+					div.message-wrapper
+						.name(ng-if="message.user.id != user.id") {{ message.user.first_name }}
+						.message(
+							ng-style="{\
+								'border-color': 'hsl({{ hue(message.user) }}, 60%, 80%)',\
+								'background-color': 'hsl({{ hue(message.user) }}, 60%, 97%)'\
+							}"
+						)
+							.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 60%, 80%)'}")
+							{{ message.content }}
+
+	.new-message
+		textarea(
+			placeholder="Your message..."
+		)
+
+

services/web/app/views/project/editor/left-menu.jade

@@ -15,7 +15,7 @@ aside#left-menu.full-size(
 				| Source
 		li
 			a(
-				ng-href="/project/{{project_id}}/{{pdf.url}}"
+				ng-href="{{pdf.url}}"
 				target="_blank"
 				ng-if="pdf.url"
 			)

services/web/app/views/project/editor/pdf.jade

@@ -96,7 +96,7 @@ div.full-size(ng-controller="PdfController")
 				div.dropdown(style="display: inline-block;")
 					a.btn.btn-default.btn-sm(
 						href
-						data-toggle="dropdown"
+						dropdown-toggle
 					)
 						| Other logs & files 
 						span.caret

services/web/public/coffee/app/ide.coffee

@@ -46,6 +46,8 @@ define [
 		$scope.user = window.user
 		$scope.settings = window.userSettings
 
+		$scope.chat = {}
+
 		window._ide = ide
 
 		ide.project_id = $scope.project_id = window.project_id

services/web/public/coffee/app/ide/chat/controllers/ChatController.coffee

@@ -0,0 +1,33 @@
+define [
+	"base"
+], (App) ->
+	App.controller "ChatController", ["$scope", ($scope) ->
+		james = {
+			id: $scope.user.id
+			first_name: "James"
+			last_name: "Allen"
+			email: "james@sharelatex.com"
+		}
+		james2 = {
+			id: "james2-id"
+			first_name: "James"
+			last_name: "Allen"
+			email: "jamesallen0108@gmail.com"
+		}
+		henry = {
+			id: "henry-id"
+			first_name: "Henry"
+			last_name: "Oswald"
+			email: "henry.oswald@sharelatex.com"
+		}
+		$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: "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 }
+		]
+	]

services/web/public/coffee/app/ide/chat/controllers/ChatMessageController.coffee

@@ -0,0 +1,12 @@
+define [
+	"base"
+], (App) ->
+	App.controller "ChatMessageController", ["$scope", "ide", ($scope, ide) ->
+		$scope.gravatarUrl = (user) ->
+			email = user.email.trim().toLowerCase()
+			hash = CryptoJS.MD5(email).toString()
+			return "//www.gravatar.com/avatar/#{hash}?d=mm&s=50"
+
+		$scope.hue = (user) ->
+			ide.onlineUsersManager.getHueForUserId(user.id)
+	]

services/web/public/coffee/app/ide/chat/index.coffee

@@ -1,3 +1,5 @@
 define [
 	"ide/chat/controllers/ChatButtonController"
+	"ide/chat/controllers/ChatController"
+	"ide/chat/controllers/ChatMessageController"
 ], () ->

services/web/public/stylesheets/app/editor.less

@@ -4,6 +4,7 @@
 @import "./editor/left-menu.less";
 @import "./editor/pdf.less";
 @import "./editor/share.less";
+@import "./editor/chat.less";
 
 .full-size {
 	position: absolute;

services/web/public/stylesheets/app/editor/chat.less

@@ -0,0 +1,97 @@
+@new-message-height: 80px;
+
+.chat {
+	.messages {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: @new-message-height;
+		overflow-x: hidden;
+		li.message {
+			margin: @line-height-computed / 2;
+			.avatar {
+				margin-top: 14px;
+				float: left;
+				width: 50px;
+				height: 50px;
+				border-radius: 50%;
+				overflow: hidden;
+				img {
+					width: 100%;
+				}
+			}
+			.message-wrapper {
+				margin-left: 50px + @line-height-computed/2;
+				.name {
+					font-size: 12px;
+					color: @gray-light;
+					margin-bottom: 4px;
+				}
+				.message {
+					padding: @line-height-computed / 2;
+					border-left: 3px solid transparent;
+					position: relative;
+					font-size: 14px;
+					box-shadow: -1px 2px 3px #ddd;
+					border-raduis: @border-radius-base;
+					.arrow {
+						right: 100%;
+						top: @line-height-computed / 4;
+						border: solid;
+						content: " ";
+						height: 0;
+						width: 0;
+						position: absolute;
+						pointer-events: none;
+						border-top-color: transparent !important;
+						border-bottom-color: transparent !important;
+						border-width: 10px;
+					}
+				}
+			}
+
+			&:not(.self) {
+				.message {
+					.arrow {
+						border-left-color: transparent !important;
+					}
+				}
+			}
+
+			&.self {
+				margin-top: @line-height-computed;
+				.avatar {
+					display: none;
+				}
+				.message-wrapper .message {
+					border-left: none;
+					border-right: 3px solid transparent;
+					.arrow {
+						left: 100%;
+						right: auto;
+						border-right-color: transparent !important;
+					}
+				}
+			}
+		}
+	}
+
+	.new-message {
+		.full-size;
+		top: auto;
+		height: @new-message-height;
+		background-color: @gray-lightest;
+		padding: @line-height-computed / 4;
+		border-top: 1px solid @toolbar-border-color;
+		textarea {
+			border-radius: @border-radius-base;
+			border: 1px solid @toolbar-border-color;
+			height: 100%;
+			width: 100%;
+			color: @gray-dark;
+			font-size: 14px;
+			padding: @line-height-computed / 4;
+		}
+	}
+}