From e870d7190bf66531bd1bbf5327973166a028ab35 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Wed, 2 Jul 2014 16:41:29 +0100
Subject: [PATCH 01/10] Improve reconnecting message

---
 .../coffee/app/ide/connection/ConnectionManager.coffee     | 1 +
 services/web/public/stylesheets/app/editor.less            | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee b/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee
index de6981a5d7..0d3d8b5be9 100644
--- a/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee
+++ b/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee
@@ -79,6 +79,7 @@ define [], () ->
 				countdown = 3 + Math.floor(Math.random() * 7)
 
 			@$scope.$apply () =>
+				@$scope.connection.reconnecting = false
 				@$scope.connection.reconnection_countdown = countdown
 
 			setTimeout(=>
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index e12012e9f5..3076b2113c 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -17,10 +17,15 @@
 .global-alerts {
 	position: absolute;
 	z-index: 20;
-	top: (@line-height-computed / 4);
+	top: 2px;
 	width: 400px;
 	left: 50%;
 	margin-left: -200px;
+	.alert {
+		padding: (@line-height-computed / 4);
+		font-size: 14px;
+		margin-bottom: (@line-height-computed / 4);
+	}
 }
 
 #chat-wrapper {

From b61da1a9f087fcf8c8ce5ddc98d049ef4d688db9 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Wed, 2 Jul 2014 17:04:29 +0100
Subject: [PATCH 02/10] Handle out of sync errors with a pop-up

---
 services/web/app/views/project/editor.jade    | 11 +++++++++
 .../app/ide/editor/EditorManager.coffee       | 24 +++++++------------
 .../public/coffee/app/ide/services/ide.coffee | 19 ++++++++++++++-
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade
index 9242a2b9b3..63fc12d3df 100644
--- a/services/web/app/views/project/editor.jade
+++ b/services/web/app/views/project/editor.jade
@@ -61,6 +61,17 @@ block content
 			.ui-layout-east
 				include ./editor/chat
 
+	script(type="text/ng-template", id="genericMessageModalTemplate")
+		.modal-header
+			button.close(
+				type="button"
+				data-dismiss="modal"
+				ng-click="done()"
+			) &times;
+			h3 {{ title }}
+		.modal-body {{ message }}
+		.modal-footer
+			button.btn.btn-info(ng-click="done()") OK
 
 	script(src='/socket.io/socket.io.js')
 
diff --git a/services/web/public/coffee/app/ide/editor/EditorManager.coffee b/services/web/public/coffee/app/ide/editor/EditorManager.coffee
index 93b72212bf..2906ca4f98 100644
--- a/services/web/public/coffee/app/ide/editor/EditorManager.coffee
+++ b/services/web/public/coffee/app/ide/editor/EditorManager.coffee
@@ -77,25 +77,17 @@ define [
 
 		_bindToDocumentEvents: (doc, sharejs_doc) ->
 			sharejs_doc.on "error", (error) =>
-				console.error "DOC ERROR", error
 				@openDoc(doc, forceReopen: true)
-
-				#TODO!!!
-				# Modal.createModal
-				# 	title: "Out of sync"
-				# 	message: "Sorry, this file has gone out of sync and we need to do a full refresh. Please let us know if this happens frequently."
-				# 	buttons:[
-				# 		text: "Ok"
-				# 	]
+				@ide.showGenericMessageModal(
+					"Out of sync"
+					"Sorry, this file has gone out of sync and we need to do a full refresh. Please let us know if this happens frequently."
+				)
 
 			sharejs_doc.on "externalUpdate", () =>
-				#TODO!!!
-				# Modal.createModal
-				# 	title: "Document Updated Externally"
-				# 	message: "This document was just updated externally. Any recent changes you have made may have been overwritten. To see previous versions please look in the history."
-				# 	buttons:[
-				# 		text: "Ok"
-				# 	]
+				@ide.showGenericMessageModal(
+					"Document Updated Externally"
+					"This document was just updated externally. Any recent changes you have made may have been overwritten. To see previous versions please look in the history."
+				)
 
 		_unbindFromDocumentEvents: (document) ->
 			document.off()
diff --git a/services/web/public/coffee/app/ide/services/ide.coffee b/services/web/public/coffee/app/ide/services/ide.coffee
index 6240dce580..a0d724dbfd 100644
--- a/services/web/public/coffee/app/ide/services/ide.coffee
+++ b/services/web/public/coffee/app/ide/services/ide.coffee
@@ -3,7 +3,7 @@ define [
 ], (App) ->
 	# We create and provide this as service so that we can access the global ide
 	# from within other parts of the angular app.
-	App.factory "ide", ["$http", ($http) ->
+	App.factory "ide", ["$http", "$modal", ($http, $modal) ->
 		ide = {}
 		ide.$http = $http
 
@@ -16,5 +16,22 @@ define [
 		ide.showGenericServerErrorMessage = () ->
 			console.error "GENERIC SERVER ERROR MESSAGE STUB"
 
+		ide.showGenericMessageModal = (title, message) ->
+			$modal.open {
+				templateUrl: "genericMessageModalTemplate"
+				controller:  "GenericMessageModalController"
+				resolve:
+					title:   -> title
+					message: -> message
+			}
+
 		return ide
 	]
+
+	App.controller "GenericMessageModalController", ["$scope", "$modalInstance", "title", "message", ($scope, $modalInstance, title, message) ->
+		$scope.title = title
+		$scope.message = message
+
+		$scope.done = () ->
+			$modalInstance.close()
+	]

From a4afc70f9b35a217853139e216b5886948923503 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Wed, 2 Jul 2014 17:41:07 +0100
Subject: [PATCH 03/10] Show saving notifications

---
 services/web/app/views/project/editor.jade    |  8 +++++
 .../coffee/app/ide/editor/Document.coffee     |  4 +++
 .../app/ide/editor/EditorManager.coffee       |  1 +
 .../SavingNotificationController.coffee       | 33 +++++++++++++++++++
 4 files changed, 46 insertions(+)
 create mode 100644 services/web/public/coffee/app/ide/editor/controllers/SavingNotificationController.coffee

diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade
index 63fc12d3df..16df2f6262 100644
--- a/services/web/app/views/project/editor.jade
+++ b/services/web/app/views/project/editor.jade
@@ -33,6 +33,14 @@ block content
 			.alert.alert-warning.small(ng-if="connection.reconnecting")
 				strong Reconnecting...
 
+			.div(ng-controller="SavingNotificationController")
+				.alert.alert-warning.small(
+					ng-repeat="(doc_id, state) in docSavingStatus"
+					ng-if="state.unsavedSeconds > 3"
+				)
+					| Saving {{ state.doc.name }}... ({{ state.unsavedSeconds }} seconds of unsaved changes)
+
+
 		include ./editor/left-menu
 
 		#chat-wrapper(
diff --git a/services/web/public/coffee/app/ide/editor/Document.coffee b/services/web/public/coffee/app/ide/editor/Document.coffee
index f65d45e265..4b7347b520 100644
--- a/services/web/public/coffee/app/ide/editor/Document.coffee
+++ b/services/web/public/coffee/app/ide/editor/Document.coffee
@@ -149,6 +149,10 @@ define [
 				@ide.connectionManager.disconnect()
 				return
 
+			if Math.random() < (@ide.ignoreRate or 0)
+				console.log "Simulating lost update"
+				return
+
 			if update?.doc == @doc_id and @doc?
 				@doc.processUpdateFromServer update
 
diff --git a/services/web/public/coffee/app/ide/editor/EditorManager.coffee b/services/web/public/coffee/app/ide/editor/EditorManager.coffee
index 2906ca4f98..86052d1f29 100644
--- a/services/web/public/coffee/app/ide/editor/EditorManager.coffee
+++ b/services/web/public/coffee/app/ide/editor/EditorManager.coffee
@@ -1,6 +1,7 @@
 define [
 	"ide/editor/Document"
 	"ide/editor/directives/aceEditor"
+	"ide/editor/controllers/SavingNotificationController"
 ], (Document) ->
 	class EditorManager
 		constructor: (@ide, @$scope) ->
diff --git a/services/web/public/coffee/app/ide/editor/controllers/SavingNotificationController.coffee b/services/web/public/coffee/app/ide/editor/controllers/SavingNotificationController.coffee
new file mode 100644
index 0000000000..edefe07ea9
--- /dev/null
+++ b/services/web/public/coffee/app/ide/editor/controllers/SavingNotificationController.coffee
@@ -0,0 +1,33 @@
+define [
+	"base"
+	"ide/editor/Document"
+], (App, Document) ->
+	App.controller "SavingNotificationController", ["$scope", "$interval", "ide", ($scope, $interval, ide) ->
+		$interval () ->
+			pollSavedStatus()
+		, 1000
+
+		$(window).bind 'beforeunload', () =>
+			warnAboutUnsavedChanges()
+
+		$scope.docSavingStatus = {}
+		pollSavedStatus = () ->
+			oldStatus = $scope.docSavingStatus
+			$scope.docSavingStatus = {}
+
+			for doc_id, doc of Document.openDocs
+				saving = doc.pollSavedStatus()
+				if !saving
+					if oldStatus[doc_id]?
+						$scope.docSavingStatus[doc_id] = oldStatus[doc_id]
+						$scope.docSavingStatus[doc_id].unsavedSeconds += 1
+					else
+						$scope.docSavingStatus[doc_id] = {
+							unsavedSeconds: 0
+							doc: ide.fileTreeManager.findEntityById(doc_id)
+						}
+
+		warnAboutUnsavedChanges = () ->
+			if Document.hasUnsavedChanges()
+				return "You have unsaved changes. If you leave now they will not be saved."
+	]
\ No newline at end of file

From a13ee00e91ad03ea650b2082e7aeae201480c536 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 11:01:41 +0100
Subject: [PATCH 04/10] Allow dragging into the root folder

---
 .../web/app/views/project/editor/file-tree.jade     |  8 ++++++--
 .../coffee/app/ide/file-tree/FileTreeManager.coffee | 10 +++++++---
 .../controllers/FileTreeRootFolderController.coffee | 13 +++++++++++++
 .../app/ide/file-tree/directives/droppable.coffee   |  1 +
 4 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 services/web/public/coffee/app/ide/file-tree/controllers/FileTreeRootFolderController.coffee

diff --git a/services/web/app/views/project/editor/file-tree.jade b/services/web/app/views/project/editor/file-tree.jade
index a9ceaca2ff..67fa6c5574 100644
--- a/services/web/app/views/project/editor/file-tree.jade
+++ b/services/web/app/views/project/editor/file-tree.jade
@@ -39,8 +39,12 @@ aside#file-tree(ng-controller="FileTreeController")
 			)
 				i.fa.fa-trash-o
 
-	.file-tree-inner
-		ul.list-unstyled.file-tree-list
+	.file-tree-inner(ng-if="rootFolder", ng-controller="FileTreeRootFolderController")
+		ul.list-unstyled.file-tree-list(
+			droppable
+			accept=".entity-name"
+			on-drop-callback="onDrop"
+		)
 			file-entity(
 				entity="entity",
 				ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']"
diff --git a/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee b/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee
index 26aeb03853..838f9db1aa 100644
--- a/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee
+++ b/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee
@@ -5,6 +5,7 @@ define [
 	"ide/file-tree/controllers/FileTreeController"
 	"ide/file-tree/controllers/FileTreeEntityController"
 	"ide/file-tree/controllers/FileTreeFolderController"
+	"ide/file-tree/controllers/FileTreeRootFolderController"
 ], () ->
 	class FileTreeManager
 		constructor: (@ide, @$scope) ->
@@ -59,6 +60,7 @@ define [
 			@ide.socket.on "reciveEntityMove", (entity_id, folder_id) =>
 				entity = @findEntityById(entity_id)
 				folder = @findEntityById(folder_id)
+				console.log "Got recive ENTITY", entity_id, folder_id, entity, folder
 				@$scope.$apply () =>
 					@_moveEntityInScope(entity, folder)
 
@@ -69,6 +71,8 @@ define [
 			entity.selected = true
 
 		findEntityById: (id, options = {}) ->
+			return @$scope.rootFolder if @$scope.rootFolder.id == id
+
 			entity = @_findEntityByIdInFolder @$scope.rootFolder, id
 			return entity if entity?
 
@@ -250,7 +254,7 @@ define [
 				_csrf: window.csrfToken
 			}
 
-		_deleteEntityFromScope: (entity) ->
+		_deleteEntityFromScope: (entity, options = { moveToDeleted: true }) ->
 			parent_folder = null
 			@forEachEntity (possible_entity, folder) ->
 				if possible_entity == entity
@@ -261,11 +265,11 @@ define [
 				if index > -1
 					parent_folder.children.splice(index, 1)
 
-			if entity.type == "doc"
+			if entity.type == "doc" and options.moveToDeleted
 				entity.deleted = true
 				@$scope.deletedDocs.push entity
 
 		_moveEntityInScope: (entity, parent_folder) ->
 			return if entity in parent_folder.children
-			@_deleteEntityFromScope(entity)
+			@_deleteEntityFromScope(entity, moveToDeleted: false)
 			parent_folder.children.push(entity)
diff --git a/services/web/public/coffee/app/ide/file-tree/controllers/FileTreeRootFolderController.coffee b/services/web/public/coffee/app/ide/file-tree/controllers/FileTreeRootFolderController.coffee
new file mode 100644
index 0000000000..8e3fe5e8bb
--- /dev/null
+++ b/services/web/public/coffee/app/ide/file-tree/controllers/FileTreeRootFolderController.coffee
@@ -0,0 +1,13 @@
+define [
+	"base"
+], (App) ->
+	App.controller "FileTreeRootFolderController", ["$scope", "ide", ($scope, ide) ->
+		console.log "CREATING FileTreeRootFolderController"
+		rootFolder = $scope.rootFolder
+		console.log "ROOT FOLDER", rootFolder
+		$scope.onDrop = (events, ui) ->
+			source = $(ui.draggable).scope().entity
+			console.log "DROPPED INTO ROOT", source, rootFolder
+			return if !source?
+			ide.fileTreeManager.moveEntity(source, rootFolder)
+	]
diff --git a/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee b/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee
index ba087aa49a..5c3bdefc35 100644
--- a/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee
+++ b/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee
@@ -7,6 +7,7 @@ define [
 				onDropCallback: "="
 			}
 			link: (scope, element, attrs) ->
+				console.log "DROPPABLE", element, scope.onDropCallback
 				element.droppable
 					greedy: true
 					hoverClass: "droppable-hover"

From 58e4e92d84b6ab31422a33dd0201dfc9e2305bd7 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 11:18:15 +0100
Subject: [PATCH 05/10] Add in upgrade pop up to history

---
 .../views/project/editor/track-changes.jade   |  13 ++
 .../stylesheets/app/editor/track-changes.less | 130 +++---------------
 2 files changed, 32 insertions(+), 111 deletions(-)

diff --git a/services/web/app/views/project/editor/track-changes.jade b/services/web/app/views/project/editor/track-changes.jade
index f66a7bbbc2..38e3cb890e 100644
--- a/services/web/app/views/project/editor/track-changes.jade
+++ b/services/web/app/views/project/editor/track-changes.jade
@@ -1,4 +1,17 @@
 div#trackChanges(ng-show="ui.view == 'track-changes'")
+	.upgrade-prompt(ng-show="!project.features.versioning")
+		.message(ng-show="project.owner._id == user.id")
+			p You need to upgrade your account to use the History feature.
+			p
+				a.btn.btn-info(
+					href="/user/subscription/plans"
+					target="_blank"
+					ng-click="startedFreeTrial = true"
+				) Start Free Trial
+			p.small(ng-show="startedFreeTrial") Please refresh the page after starting your free trial.
+		.message(ng-show="project.owner._id != user.id")
+			p Please ask the project owner to upgrade to use the History feature.
+
 	aside.change-list(
 		ng-controller="TrackChangesListController"
 		infinite-scroll="loadMore()"
diff --git a/services/web/public/stylesheets/app/editor/track-changes.less b/services/web/public/stylesheets/app/editor/track-changes.less
index 1c533b584d..af349090ff 100644
--- a/services/web/public/stylesheets/app/editor/track-changes.less
+++ b/services/web/public/stylesheets/app/editor/track-changes.less
@@ -9,117 +9,25 @@
 @range-bar-selected-offset: 14px;
 
 #trackChanges {
-	// .track-changes-diff {
-	// 	position: absolute;
-	// 	right: @changesListWidth + 1px;
-	// 	left: 0;
-	// 	top: 0;
-	// 	bottom: 0;
-	// 	height: 100%;
-	// 	.ace_editor {
-	// 		position: absolute;
-	// 		top: 42px;
-	// 		left: 0;
-	// 		right: 0;
-	// 		bottom: 0;
-	// 		.ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
-	// 			display: none;
-	// 		}
-	// 	}
-	// 	.track-changes-diff-toolbar {
-	// 		position: absolute;
-	// 		top: 0;
-	// 		left: 0;
-	// 		right: -1px;
-	// 		height: 32px;
-	// 		padding: 5px 5px 5px 5px;
-	// 		margin: 0;
-	// 		background-color: #282828;
-	// 		color: white;
-	// 		border-right: 1px solid white;
-	// 		.number-of-changes, .restore {
-	// 			position: absolute;
-	// 		}
-	// 		.number-of-changes {
-	// 			left: 10px;
-	// 			bottom: 7px;
-	// 		}
-	// 		.restore {
-	// 			right: 10px;
-	// 			bottom: 5px;
-	// 			padding: 3px 9px;
-	// 		}
-	// 	}
-	// }
-
-
-	// .track-changes-upgrade-control, .track-changes-upgrade-popup {
-	// 	position: absolute;
-	// 	top: 0;
-	// 	bottom: 0;
-	// 	left: 0;
-	// 	right: 0;
-	// 	z-index: 100;
-	// }
-
-	// .track-changes-upgrade-popup {
-	// 	background-color: rgba(128,128,128,0.4);
-	// 	.message {
-	// 		margin: auto;
-	// 		margin-top: 200px;
-	// 		padding: 10px 10px 14px 10px;
-	// 		width: 400px;
-	// 		font-weight: bold;
-	// 		text-align: center;
-	// 		background-color: white;
-	// 		.border-radius(8px);
-	// 	}
-	// }
-
-	// .track-changes-upgrade-control {
-	// 	background-color: #eeeeee;
-	// 	text-align: center;
-	// 	.message {
-	// 		font-size: 18px;
-	// 		margin: 12px;
-	// 		margin-top: 36px;
-	// 	}
-	// }
-
-	// .deleted-background,
-	// .deleted-foreground,
-	// .inserted-background,
-	// .name-marker,
-	// .changes-before,
-	// .changes-after {
-	// 	position: absolute;
-	// 	z-index: 2;
-	// }
-
-	// .name-marker {
-	// 	font-size: 0.8em;
-	// 	padding: 2px 6px;
-	// 	.border-radius(3px 3px 3px 3px);
-	// 	position: absolute;
-	// 	border: 1px solid #999;
-	// 	left: 0;
-	// 	white-space: pre;
-	// }
-
-	// .changes-before {
-	// 	top: 6px;
-	// 	right: 6px;
-	// }
-	// .changes-after {
-	// 	bottom: 6px;
-	// 	right: 6px;
-	// }
-	// .changes-before, .changes-after {
-	// 	padding: 4px 8px;
-	// 	background-color: #eee;
-	// 	border: 1px solid #999;
-	// 	.border-radius(3px);
-	// }
+	.upgrade-prompt {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 100;
+		background-color: rgba(128,128,128,0.4);
+		.message {
+			margin: auto;
+			margin-top: 100px;
+			padding: 10px 10px 14px 10px;
+			width: 500px;
+			font-weight: bold;
+			text-align: center;
+			background-color: white;
+			border-radius: 8px;
+		}
+	}
 
 	.diff {
 		margin-right: @changesListWidth;

From a8d371d2f63202ca13e80b112f7b094a82beeff1 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 15:05:35 +0100
Subject: [PATCH 06/10] Sort out permissions and displaying anonymous users

---
 .../web/app/views/project/editor/editor.jade  |  3 +-
 .../app/views/project/editor/file-tree.jade   | 48 ++++++++++++++-----
 .../web/app/views/project/editor/header.jade  |  1 +
 .../web/app/views/project/editor/share.jade   | 14 +++---
 .../views/project/editor/track-changes.jade   |  5 +-
 services/web/public/coffee/app/ide.coffee     |  3 ++
 .../ide/connection/ConnectionManager.coffee   |  1 +
 .../highlights/HighlightsManager.coffee       |  8 ++--
 .../ide/file-tree/directives/draggable.coffee | 12 +++--
 .../ide/file-tree/directives/droppable.coffee | 13 ++---
 .../file-tree/directives/fileEntity.coffee    | 10 +++-
 .../online-users/OnlineUsersManager.coffee    |  2 +-
 .../ide/permissions/PermissionsManager.coffee | 19 ++++++++
 .../track-changes/TrackChangesManager.coffee  | 11 +++--
 .../stylesheets/app/editor/file-tree.less     |  4 ++
 15 files changed, 111 insertions(+), 43 deletions(-)
 create mode 100644 services/web/public/coffee/app/ide/permissions/PermissionsManager.coffee

diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade
index 117854654a..1bff22a46d 100644
--- a/services/web/app/views/project/editor/editor.jade
+++ b/services/web/app/views/project/editor/editor.jade
@@ -25,7 +25,8 @@ div.full-size(
 			cursor-position="editor.cursorPosition",
 			goto-line="editor.gotoLine",
 			resize-on="layout:main:resize,layout:pdf:resize",
-			annotations="pdf.logEntryAnnotations[editor.open_doc_id]"
+			annotations="pdf.logEntryAnnotations[editor.open_doc_id]",
+			read-only="!permissions.write"
 		)
 
 	.ui-layout-east
diff --git a/services/web/app/views/project/editor/file-tree.jade b/services/web/app/views/project/editor/file-tree.jade
index 67fa6c5574..d54af53327 100644
--- a/services/web/app/views/project/editor/file-tree.jade
+++ b/services/web/app/views/project/editor/file-tree.jade
@@ -1,5 +1,5 @@
 aside#file-tree(ng-controller="FileTreeController")
-	.toolbar.toolbar-small
+	.toolbar.toolbar-small(ng-if="permissions.write")
 		a(
 			href,
 			ng-click="openNewDocModal()",
@@ -39,14 +39,19 @@ aside#file-tree(ng-controller="FileTreeController")
 			)
 				i.fa.fa-trash-o
 
-	.file-tree-inner(ng-if="rootFolder", ng-controller="FileTreeRootFolderController")
+	.file-tree-inner(
+		ng-if="rootFolder", 
+		ng-controller="FileTreeRootFolderController",
+		ng-class="{ 'no-toolbar': !permissions.write }"
+	)
 		ul.list-unstyled.file-tree-list(
-			droppable
+			droppable="permissions.write"
 			accept=".entity-name"
 			on-drop-callback="onDrop"
 		)
 			file-entity(
 				entity="entity",
+				permissions="permissions",
 				ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']"
 			)
 
@@ -76,11 +81,12 @@ script(type='text/ng-template', id='entityListItemTemplate')
 		.entity(ng-if="entity.type != 'folder'")
 			.entity-name(
 				ng-click="select()"
-				ng-dblclick="startRenaming()"
-				draggable
+				ng-dblclick="permissions.write && startRenaming()"
+				draggable="permissions.write"
 				context-menu
 				data-target="context-menu-{{ entity.id }}"
 				context-menu-container="body"
+				context-menu-disabled="!permissions.write"
 			)
 				//- Just a spacer to align with folders
 				i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'")
@@ -92,6 +98,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 					ng-hide="entity.renaming"
 				)  {{ entity.name }}
 				input(
+					ng-if="permissions.write",
 					ng-show="entity.renaming",
 					ng-model="inputs.name",
 					ng-blur="finishRenaming()",
@@ -99,7 +106,10 @@ script(type='text/ng-template', id='entityListItemTemplate')
 					on-enter="finishRenaming()"
 				)
 
-				span.dropdown(ng-show="entity.selected")
+				span.dropdown(
+					ng-show="entity.selected",
+					ng-if="permissions.write"
+				)
 					a.dropdown-toggle(href)
 						i.fa.fa-chevron-down
 
@@ -117,7 +127,10 @@ script(type='text/ng-template', id='entityListItemTemplate')
 								ng-click="openDeleteModal()"
 							) Delete
 
-				div.dropdown.context-menu(id="context-menu-{{ entity.id }}")
+				div.dropdown.context-menu(
+					id="context-menu-{{ entity.id }}",
+					ng-if="permissions.write"
+				)
 					ul.dropdown-menu
 						li
 							a(
@@ -138,9 +151,9 @@ script(type='text/ng-template', id='entityListItemTemplate')
 		.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
 			.entity-name(
 				ng-click="select()"
-				ng-dblclick="startRenaming()"
-				draggable
-				droppable
+				ng-dblclick="permissions.write && startRenaming()"
+				draggable="permissions.write"
+				droppable="permissions.write"
 				accept=".entity-name"
 				on-drop-callback="onDrop"
 			)
@@ -148,6 +161,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 					context-menu
 					data-target="context-menu-{{ entity.id }}"
 					context-menu-container="body"
+					context-menu-disabled="!permissions.write"
 				)
 					i.fa.fa-fw.toggle(
 						ng-if="entity.type == 'folder'"
@@ -168,6 +182,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 						ng-hide="entity.renaming"
 					)  {{ entity.name }}
 					input(
+						ng-if="permissions.write",
 						ng-show="entity.renaming",
 						ng-model="inputs.name",
 						ng-blur="finishRenaming()",
@@ -175,7 +190,10 @@ script(type='text/ng-template', id='entityListItemTemplate')
 						on-enter="finishRenaming()"
 					)
 
-					span.dropdown(ng-show="entity.selected")
+					span.dropdown(
+						ng-if="permissions.write"
+						ng-show="entity.selected"
+					)
 						a.dropdown-toggle(href)
 							i.fa.fa-chevron-down
 
@@ -212,7 +230,10 @@ script(type='text/ng-template', id='entityListItemTemplate')
 									ng-click="openUploadFileModal()"
 								) Upload File
 
-					.dropdown.context-menu(id="context-menu-{{ entity.id }}")
+					.dropdown.context-menu(
+						ng-if="permissions.write"
+						id="context-menu-{{ entity.id }}"
+					)
 						ul.dropdown-menu
 							li
 								a(
@@ -254,12 +275,13 @@ script(type='text/ng-template', id='entityListItemTemplate')
 			ul.list-unstyled(
 				ng-if="entity.type == 'folder'"
 				ng-show="expanded"
-				droppable
+				droppable="permissions.write"
 				accept=".entity-name"
 				on-drop-callback="onDrop"
 			)
 				file-entity(
 					entity="child",
+					permissions="permissions",
 					ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
 				)
 			
diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade
index b9184fca4f..cb1dfed94d 100644
--- a/services/web/app/views/project/editor/header.jade
+++ b/services/web/app/views/project/editor/header.jade
@@ -15,6 +15,7 @@ header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
 	.toolbar-right
 		a.btn.btn-full-height(
 			href,
+			ng-if="permissions.admin",
 			tooltip="Share",
 			tooltip-placement="bottom",
 			ng-click="openShareProjectModal()",
diff --git a/services/web/app/views/project/editor/share.jade b/services/web/app/views/project/editor/share.jade
index a6a6df8f9a..de1968b35e 100644
--- a/services/web/app/views/project/editor/share.jade
+++ b/services/web/app/views/project/editor/share.jade
@@ -9,7 +9,7 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
 	.modal-body.modal-body-share
 		.container-fluid
 			.row.public-access-level(ng-show="project.publicAccesLevel == 'private'")
-				.col-md-12.text-center
+				.col-xs-12.text-center
 					| This project is private and can only be accessed by the people below.
 					| &nbsp;&nbsp;
 					a(
@@ -17,7 +17,7 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
 						ng-click="openMakePublicModal()"
 					) Make Public
 			.row.public-access-level(ng-show="project.publicAccesLevel != 'private'")
-				.col-md-12.text-center
+				.col-xs-12.text-center
 					strong(ng-if="project.publicAccesLevel == 'readAndWrite'") This project is public and can be edited by anyone with the URL.
 					strong(ng-if="project.publicAccesLevel == 'readOnly'") This project is public and can be viewed by anyone with the URL.
 					| &nbsp;&nbsp;
@@ -26,16 +26,16 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
 						ng-click="openMakePrivateModal()"
 					) Make Private
 			.row.project-member
-				.col-md-8 {{ project.owner.email }}
+				.col-xs-8 {{ project.owner.email }}
 				.text-right(
-					ng-class="{'col-md-3': project.members.length > 0, 'col-md-4': project.members.length == 0}"
+					ng-class="{'col-xs-3': project.members.length > 0, 'col-xs-4': project.members.length == 0}"
 				) Owner
 			.row.project-member(ng-repeat="member in project.members")
-				.col-md-8 {{ member.email }}
-				.col-md-3.text-right
+				.col-xs-8 {{ member.email }}
+				.col-xs-3.text-right
 					span(ng-show="member.privileges == 'readAndWrite'") Can Edit
 					span(ng-show="member.privileges == 'readOnly'") Read Only
-				.col-md-1
+				.col-xs-1
 					a(
 						href
 						tooltip="Remove collaborator"
diff --git a/services/web/app/views/project/editor/track-changes.jade b/services/web/app/views/project/editor/track-changes.jade
index 38e3cb890e..29fbb747e2 100644
--- a/services/web/app/views/project/editor/track-changes.jade
+++ b/services/web/app/views/project/editor/track-changes.jade
@@ -70,8 +70,11 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 						div.users
 							div.user(ng-repeat="update_user in update.meta.users")
 								.color-square(ng-style="{'background-color': 'hsl({{ update_user.hue }}, 100%, 50%)'}")
-								span(ng-if="update_user.id != user.id") {{user.first_name}} {{user.last_name}}
+								span(ng-if="update_user.id != user.id") {{update_user.first_name}} {{update_user.last_name}}
 								span(ng-if="update_user.id == user.id") You
+							div.user(ng-if="update.meta.users.length == 0")
+								.color-square(style="background-color: hsl(100, 100%, 50%)")
+								span Anonymous
 
 			.loading(ng-show="trackChanges.loading")
 				i.fa.fa-spin.fa-refresh
diff --git a/services/web/public/coffee/app/ide.coffee b/services/web/public/coffee/app/ide.coffee
index e7c1e33db4..bd9b15258e 100644
--- a/services/web/public/coffee/app/ide.coffee
+++ b/services/web/public/coffee/app/ide.coffee
@@ -5,6 +5,7 @@ define [
 	"ide/editor/EditorManager"
 	"ide/online-users/OnlineUsersManager"
 	"ide/track-changes/TrackChangesManager"
+	"ide/permissions/PermissionsManager"
 	"ide/pdf/PdfManager"
 	"ide/settings/index"
 	"ide/share/index"
@@ -22,6 +23,7 @@ define [
 	EditorManager
 	OnlineUsersManager
 	TrackChangesManager
+	PermissionsManager
 	PdfManager
 ) ->
 	App.controller "IdeController", ["$scope", "$timeout", "ide", ($scope, $timeout, ide) ->
@@ -59,6 +61,7 @@ define [
 		ide.onlineUsersManager = new OnlineUsersManager(ide, $scope)
 		ide.trackChangesManager = new TrackChangesManager(ide, $scope)
 		ide.pdfManager = new PdfManager(ide, $scope)
+		ide.permissionsManager = new PermissionsManager(ide, $scope)
 	]
 
 	angular.bootstrap(document.body, ["SharelatexApp"])
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee b/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee
index 0d3d8b5be9..9d5f29983a 100644
--- a/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee
+++ b/services/web/public/coffee/app/ide/connection/ConnectionManager.coffee
@@ -57,6 +57,7 @@ define [], () ->
 				@$scope.$apply () =>
 					@$scope.protocolVersion = protocolVersion
 					@$scope.project = project
+					@$scope.permissionsLevel = permissionsLevel
 					@$scope.state.load_progress = 100
 					@$scope.state.loading = false
 					@$scope.$emit "project:joined"
diff --git a/services/web/public/coffee/app/ide/editor/highlights/HighlightsManager.coffee b/services/web/public/coffee/app/ide/editor/highlights/HighlightsManager.coffee
index 18d205c448..a8b7699407 100644
--- a/services/web/public/coffee/app/ide/editor/highlights/HighlightsManager.coffee
+++ b/services/web/public/coffee/app/ide/editor/highlights/HighlightsManager.coffee
@@ -204,16 +204,16 @@ define [
 		_getColorScheme: (hue) ->
 			if @_isDarkTheme()
 				return {
-					cursor: "hsl(#{hue}, 100%, 50%)"
-					labelBackgroundColor: "hsl(#{hue}, 100%, 50%)"
+					cursor: "hsl(#{hue}, 70%, 50%)"
+					labelBackgroundColor: "hsl(#{hue}, 70%, 50%)"
 					highlightBackgroundColor: "hsl(#{hue}, 100%, 28%);"
 					strikeThroughBackgroundColor: "hsl(#{hue}, 100%, 20%);"
 					strikeThroughForegroundColor: "hsl(#{hue}, 100%, 60%);"
 				}
 			else
 				return {
-					cursor: "hsl(#{hue}, 100%, 50%)"
-					labelBackgroundColor: "hsl(#{hue}, 100%, 50%)"
+					cursor: "hsl(#{hue}, 70%, 50%)"
+					labelBackgroundColor: "hsl(#{hue}, 70%, 50%)"
 					highlightBackgroundColor: "hsl(#{hue}, 70%, 85%);"
 					strikeThroughBackgroundColor: "hsl(#{hue}, 70%, 95%);"
 					strikeThroughForegroundColor: "hsl(#{hue}, 70%, 40%);"
diff --git a/services/web/public/coffee/app/ide/file-tree/directives/draggable.coffee b/services/web/public/coffee/app/ide/file-tree/directives/draggable.coffee
index 1fd3b4a253..4b08a0daf6 100644
--- a/services/web/public/coffee/app/ide/file-tree/directives/draggable.coffee
+++ b/services/web/public/coffee/app/ide/file-tree/directives/draggable.coffee
@@ -4,9 +4,11 @@ define [
 	App.directive "draggable", () ->
 		return {
 			link: (scope, element, attrs) ->
-				element.draggable
-					delay: 250
-					opacity: 0.7
-					helper: "clone"
-					scroll: true
+				scope.$watch attrs.draggable, (draggable) ->
+					if draggable
+						element.draggable
+							delay: 250
+							opacity: 0.7
+							helper: "clone"
+							scroll: true
 		}
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee b/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee
index 5c3bdefc35..ea68630a21 100644
--- a/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee
+++ b/services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee
@@ -7,10 +7,11 @@ define [
 				onDropCallback: "="
 			}
 			link: (scope, element, attrs) ->
-				console.log "DROPPABLE", element, scope.onDropCallback
-				element.droppable
-					greedy: true
-					hoverClass: "droppable-hover"
-					accept: attrs.accept
-					drop: scope.onDropCallback
+				scope.$watch attrs.droppable, (droppable) ->
+					if droppable
+						element.droppable
+							greedy: true
+							hoverClass: "droppable-hover"
+							accept: attrs.accept
+							drop: scope.onDropCallback
 		}
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/file-tree/directives/fileEntity.coffee b/services/web/public/coffee/app/ide/file-tree/directives/fileEntity.coffee
index ea58980d81..9f3fcd2407 100644
--- a/services/web/public/coffee/app/ide/file-tree/directives/fileEntity.coffee
+++ b/services/web/public/coffee/app/ide/file-tree/directives/fileEntity.coffee
@@ -6,10 +6,18 @@ define [
 			restrict: "E"
 			scope: {
 				entity: "="
+				permissions: "="
 			}
 			templateUrl: "entityListItemTemplate"
 			compile: (element) ->
 				RecursionHelper.compile element, (scope, element, attrs, ctrl) ->
-					# Link function here if needed
+					# Don't freak out if we're already in an apply callback
+					scope.$originalApply = scope.$apply
+					scope.$apply = (fn = () ->) ->
+						phase = @$root.$$phase
+						if (phase == '$apply' || phase == '$digest')
+							fn()
+						else
+							@$originalApply(fn);
 		}
 	]
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/online-users/OnlineUsersManager.coffee b/services/web/public/coffee/app/ide/online-users/OnlineUsersManager.coffee
index ef4a343bda..5e73a6446b 100644
--- a/services/web/public/coffee/app/ide/online-users/OnlineUsersManager.coffee
+++ b/services/web/public/coffee/app/ide/online-users/OnlineUsersManager.coffee
@@ -56,7 +56,7 @@ define [
 		OWN_HUE: 200 # We will always appear as this color to ourselves
 		ANONYMOUS_HUE: 100
 		getHueForUserId: (user_id) ->
-			if !user_id?
+			if !user_id? or user_id == "anonymous-user"
 				return @ANONYMOUS_HUE
 
 			if window.user.id == user_id
diff --git a/services/web/public/coffee/app/ide/permissions/PermissionsManager.coffee b/services/web/public/coffee/app/ide/permissions/PermissionsManager.coffee
new file mode 100644
index 0000000000..b52ab933e4
--- /dev/null
+++ b/services/web/public/coffee/app/ide/permissions/PermissionsManager.coffee
@@ -0,0 +1,19 @@
+define [], () ->
+	class PermissionsManager
+		constructor: (@ide, @$scope) ->
+			@$scope.$watch "permissionsLevel", (permissionsLevel) =>
+				@$scope.permissions =
+					read:  false
+					write: false
+					admin: false
+				if permissionsLevel?
+					if permissionsLevel == "readOnly"
+						@$scope.permissions.read = true
+					else if permissionsLevel == "readAndWrite"
+						@$scope.permissions.read = true
+						@$scope.permissions.write = true
+					else if permissionsLevel == "owner"
+						@$scope.permissions.read = true
+						@$scope.permissions.write = true
+						@$scope.permissions.admin = true
+
diff --git a/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee b/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee
index 6339eb0457..13e9c8ad0d 100644
--- a/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee
+++ b/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee
@@ -157,21 +157,24 @@ define [
 				}
 
 				if entry.i? or entry.d?
-					name = "#{entry.meta.user.first_name} #{entry.meta.user.last_name}"
-					if entry.meta.user.id == @$scope.user.id
+					if entry.meta.user?
+						name = "#{entry.meta.user.first_name} #{entry.meta.user.last_name}"
+					else
+						name = "Anonymous"
+					if entry.meta.user?.id == @$scope.user.id
 						name = "you"
 					date = moment(entry.meta.end_ts).format("Do MMM YYYY, h:mm a")
 					if entry.i?
 						highlights.push {
 							label: "Added by #{name} on #{date}"
 							highlight: range
-							hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user.id)
+							hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user?.id)
 						}
 					else if entry.d?
 						highlights.push {
 							label: "Deleted by #{name} on #{date}"
 							strikeThrough: range
-							hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user.id)
+							hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user?.id)
 						}
 
 			return {text, highlights}
diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less
index 55361e394f..cafdd995cd 100644
--- a/services/web/public/stylesheets/app/editor/file-tree.less
+++ b/services/web/public/stylesheets/app/editor/file-tree.less
@@ -9,6 +9,10 @@ aside#file-tree {
 		left: 0;
 		right: 0;
 		overflow-y: auto;
+
+		&.no-toolbar {
+			top: 0;
+		}
 	}
 
 	h3 {

From af870c82691fea2cdfe9009863d38ccd4efe5f8f Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 16:18:49 +0100
Subject: [PATCH 07/10] Style project name and allow renaming

---
 .../web/app/views/project/editor/header.jade  | 26 +++++++++++++++--
 .../controllers/ProjectNameController.coffee  | 26 +++++++++++++++++
 .../coffee/app/ide/settings/index.coffee      |  2 ++
 .../web/public/stylesheets/app/editor.less    | 29 +++++++++++++++++++
 .../stylesheets/app/editor/toolbar.less       | 11 +++++++
 5 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee

diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade
index cb1dfed94d..cff127cfda 100644
--- a/services/web/app/views/project/editor/header.jade
+++ b/services/web/app/views/project/editor/header.jade
@@ -7,10 +7,30 @@ header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
 	)
 		i.fa.fa-fw.fa-bars
 
-	span.name {{ project.name }}
+	.toolbar-center.project-name(ng-controller="ProjectNameController")
+		span.name(
+			ng-dblclick="startRenaming()",
+			ng-show="!state.renaming"
+		) {{ project.name }}
 
-	a(href='#', data-toggle="tooltip", title="Rename")
-		i.fa.fa-pencil
+		input.form-control(
+			type="text"
+			ng-model="inputs.name",
+			ng-show="state.renaming",
+			on-enter="finishRenaming()",
+			ng-blur="finishRenaming()",
+			select-name-when="state.renaming"
+		)
+
+		a.rename(
+			href='#',
+			tooltip-placement="bottom",
+			tooltip="Rename",
+			tooltip-append-to-body="true",
+			ng-click="startRenaming()",
+			ng-show="!state.renaming"
+		)
+			i.fa.fa-pencil
 
 	.toolbar-right
 		a.btn.btn-full-height(
diff --git a/services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee b/services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee
new file mode 100644
index 0000000000..2285f8f029
--- /dev/null
+++ b/services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee
@@ -0,0 +1,26 @@
+define [
+	"base"
+], (App) ->
+	App.controller "ProjectNameController", ["$scope", "settings", "ide", ($scope, settings, ide) ->
+		$scope.state =
+			renaming: false
+		$scope.inputs = {}
+
+		$scope.startRenaming = () ->
+			$scope.inputs.name = $scope.project.name
+			$scope.state.renaming = true
+			$scope.$emit "project:rename:start"
+
+		$scope.finishRenaming = () ->
+			$scope.project.name = $scope.inputs.name
+			settings.saveProjectSettings({name: $scope.inputs.name})
+			$scope.state.renaming = false
+
+		ide.socket.on "projectNameUpdated", (name) ->
+			$scope.$apply () ->
+				$scope.project.name = name
+
+		$scope.$watch "project.name", (name) ->
+			if name?
+				window.document.title = name + " - Online LaTeX Editor ShareLaTeX"
+	]
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/settings/index.coffee b/services/web/public/coffee/app/ide/settings/index.coffee
index ae5f6a9c66..8ed64432d1 100644
--- a/services/web/public/coffee/app/ide/settings/index.coffee
+++ b/services/web/public/coffee/app/ide/settings/index.coffee
@@ -1,5 +1,7 @@
 define [
 	"ide/settings/services/settings"
 	"ide/settings/controllers/SettingsController"
+	"ide/settings/controllers/ProjectNameController"
+
 ], () ->
 			
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 3076b2113c..18b0684eb0 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -62,6 +62,35 @@
 	}
 }
 
+.project-name {
+	.name {
+		display: inline-block;
+		max-width: 250px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		vertical-align: top;
+		padding: 6px;
+		color: @gray;
+		font-weight: 700;
+		white-space: nowrap;
+	}
+	input {
+		height: 30px;
+		margin-top: 4px;
+		text-align: center;
+		padding: 6px;
+		font-weight: 700;
+	}
+	a.rename {
+		visibility: hidden;
+	}
+	&:hover {
+		a.rename {
+			visibility: visible;
+		}
+	}
+}
+
 // The internal components of the aceEditor directive
 .ace-editor-wrapper {
 	.full-size;
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index ba3f667d9a..0bc4d0b1cf 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -47,6 +47,17 @@
 		}
 	}
 
+	.toolbar-center {
+		width: 300px;
+		position: absolute;
+		top: 0;
+		left: 50%;
+		margin-left: -150px;
+		text-align: center;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
 	&.toolbar-header {
 		box-shadow: 0 0 2px #ccc;
 		position: absolute;

From ac0f05a9e4d5830cceec75da1a6ba63fd76c90ce Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 17:05:50 +0100
Subject: [PATCH 08/10] Create binary file preview

---
 services/web/app/views/project/editor.jade    |  1 +
 .../app/views/project/editor/binary-file.jade | 19 +++++++++++++++++++
 services/web/public/coffee/app/ide.coffee     |  3 +++
 .../binary-files/BinaryFilesManager.coffee    | 12 ++++++++++++
 .../controllers/BinaryFileController.coffee   |  7 +++++++
 .../app/ide/editor/EditorManager.coffee       |  2 +-
 .../web/public/stylesheets/app/editor.less    |  1 +
 .../stylesheets/app/editor/binary-file.less   | 19 +++++++++++++++++++
 8 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 services/web/app/views/project/editor/binary-file.jade
 create mode 100644 services/web/public/coffee/app/ide/binary-files/BinaryFilesManager.coffee
 create mode 100644 services/web/public/coffee/app/ide/binary-files/controllers/BinaryFileController.coffee
 create mode 100644 services/web/public/stylesheets/app/editor/binary-file.less

diff --git a/services/web/app/views/project/editor.jade b/services/web/app/views/project/editor.jade
index 16df2f6262..2f0665b2f0 100644
--- a/services/web/app/views/project/editor.jade
+++ b/services/web/app/views/project/editor.jade
@@ -64,6 +64,7 @@ block content
 
 					.ui-layout-center
 						include ./editor/editor
+						include ./editor/binary-file
 						include ./editor/track-changes
 
 			.ui-layout-east
diff --git a/services/web/app/views/project/editor/binary-file.jade b/services/web/app/views/project/editor/binary-file.jade
new file mode 100644
index 0000000000..015724288f
--- /dev/null
+++ b/services/web/app/views/project/editor/binary-file.jade
@@ -0,0 +1,19 @@
+div.binary-file.full-size(
+	ng-controller="BinaryFileController"
+	ng-show="ui.view == 'file'"
+	ng-if="openFile"
+)
+	img(
+		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}"
+		ng-if="['png', 'jpg', 'jpeg', 'gif'].indexOf(extension(openFile)) > -1"
+	)
+	img(
+		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}?format=png"
+		ng-if="['pdf', 'eps'].indexOf(extension(openFile)) > -1"
+	)
+	p.no-preview(
+		ng-if="['png', 'jpg', 'jpeg', 'gif', 'pdf', 'eps'].indexOf(extension(openFile)) == -1"
+	) Sorry, no preview is available.
+	a.btn.btn-info(
+		ng-href="/project/{{ project_id }}/file/{{ openFile.id }}"
+	) Download {{ openFile.name }}
diff --git a/services/web/public/coffee/app/ide.coffee b/services/web/public/coffee/app/ide.coffee
index bd9b15258e..393b77219c 100644
--- a/services/web/public/coffee/app/ide.coffee
+++ b/services/web/public/coffee/app/ide.coffee
@@ -7,6 +7,7 @@ define [
 	"ide/track-changes/TrackChangesManager"
 	"ide/permissions/PermissionsManager"
 	"ide/pdf/PdfManager"
+	"ide/binary-files/BinaryFilesManager"
 	"ide/settings/index"
 	"ide/share/index"
 	"ide/chat/index"
@@ -25,6 +26,7 @@ define [
 	TrackChangesManager
 	PermissionsManager
 	PdfManager
+	BinaryFilesManager
 ) ->
 	App.controller "IdeController", ["$scope", "$timeout", "ide", ($scope, $timeout, ide) ->
 		# Don't freak out if we're already in an apply callback
@@ -62,6 +64,7 @@ define [
 		ide.trackChangesManager = new TrackChangesManager(ide, $scope)
 		ide.pdfManager = new PdfManager(ide, $scope)
 		ide.permissionsManager = new PermissionsManager(ide, $scope)
+		ide.binaryFilesManager = new BinaryFilesManager(ide, $scope)
 	]
 
 	angular.bootstrap(document.body, ["SharelatexApp"])
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/binary-files/BinaryFilesManager.coffee b/services/web/public/coffee/app/ide/binary-files/BinaryFilesManager.coffee
new file mode 100644
index 0000000000..9b80c0e0dc
--- /dev/null
+++ b/services/web/public/coffee/app/ide/binary-files/BinaryFilesManager.coffee
@@ -0,0 +1,12 @@
+define [
+	"ide/binary-files/controllers/BinaryFileController"
+], () ->
+	class BinaryFilesManager
+		constructor: (@ide, @$scope) ->
+			@$scope.$on "entity:selected", (event, entity) =>
+				if (@$scope.ui.view != "track-changes" and entity.type == "file")
+					@openFile(entity)
+
+		openFile: (file) ->
+			@$scope.ui.view = "file"
+			@$scope.openFile = file
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/binary-files/controllers/BinaryFileController.coffee b/services/web/public/coffee/app/ide/binary-files/controllers/BinaryFileController.coffee
new file mode 100644
index 0000000000..5dcabe8000
--- /dev/null
+++ b/services/web/public/coffee/app/ide/binary-files/controllers/BinaryFileController.coffee
@@ -0,0 +1,7 @@
+define [
+	"base"
+], (App) ->
+	App.controller "BinaryFileController", ["$scope", ($scope) ->
+		$scope.extension = (file) ->
+			return file.name.split(".").pop()?.toLowerCase()
+	]
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/editor/EditorManager.coffee b/services/web/public/coffee/app/ide/editor/EditorManager.coffee
index 86052d1f29..4d0f965d93 100644
--- a/services/web/public/coffee/app/ide/editor/EditorManager.coffee
+++ b/services/web/public/coffee/app/ide/editor/EditorManager.coffee
@@ -15,7 +15,7 @@ define [
 			}
 
 			@$scope.$on "entity:selected", (event, entity) =>
-				if (@$scope.ui.view == "editor" and entity.type == "doc")
+				if (@$scope.ui.view != "track-changes" and entity.type == "doc")
 					@openDoc(entity)
 
 			initialized = false
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 18b0684eb0..ae195f6351 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -5,6 +5,7 @@
 @import "./editor/pdf.less";
 @import "./editor/share.less";
 @import "./editor/chat.less";
+@import "./editor/binary-file.less";
 
 .full-size {
 	position: absolute;
diff --git a/services/web/public/stylesheets/app/editor/binary-file.less b/services/web/public/stylesheets/app/editor/binary-file.less
new file mode 100644
index 0000000000..a767d039bd
--- /dev/null
+++ b/services/web/public/stylesheets/app/editor/binary-file.less
@@ -0,0 +1,19 @@
+.binary-file {
+	padding: @line-height-computed / 2;
+	background-color: @gray-lightest;
+	text-align: center;
+	img {
+		max-width: 100%;
+		max-height: 90%;
+		display: block;
+		margin: auto;
+		margin-bottom: @line-height-computed / 2;
+		border: 1px solid @gray;
+		.box-shadow(0 2px 3px @gray;)
+	}
+	p.no-preview {
+		font-size: 24px;
+		color: @gray;
+	}
+
+}
\ No newline at end of file

From 5dd3f828e332ea3d832593fad158c98800c6ab53 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 17:12:23 +0100
Subject: [PATCH 09/10] Open current selection when leaving track changes

---
 .../app/ide/file-tree/FileTreeManager.coffee     |  6 ++++++
 .../ide/track-changes/TrackChangesManager.coffee | 16 +++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee b/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee
index 838f9db1aa..812b5d3fb6 100644
--- a/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee
+++ b/services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee
@@ -70,6 +70,12 @@ define [
 				entity.selected = false
 			entity.selected = true
 
+		findSelectedEntity: () ->
+			selected = null
+			@forEachEntity (entity) ->
+				selected = entity if entity.selected
+			return selected
+
 		findEntityById: (id, options = {}) ->
 			return @$scope.rootFolder if @$scope.rootFolder.id == id
 
diff --git a/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee b/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee
index 13e9c8ad0d..cdc425c356 100644
--- a/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee
+++ b/services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee
@@ -9,10 +9,9 @@ define [
 
 			@$scope.toggleTrackChanges = () =>
 				if @$scope.ui.view == "track-changes"
-					@$scope.ui.view = "editor"
+					@hide()
 				else
-					@$scope.ui.view = "track-changes"
-					@onShow()
+					@show()
 
 			@$scope.$watch "trackChanges.selection.updates", (updates) =>
 				if updates? and updates.length > 0
@@ -24,11 +23,14 @@ define [
 					@$scope.trackChanges.selection.doc = entity
 					@reloadDiff()
 
-		onShow: () ->
+		show: () ->
+			@$scope.ui.view = "track-changes"
 			@reset()
-			# @fetchNextBatchOfChanges()
-			# 	.success () =>
-			# 		@autoSelectRecentUpdates()
+
+		hide: () ->
+			@$scope.ui.view = "editor"
+			# Make sure we run the 'open' logic for whatever is currently selected
+			@$scope.$emit "entity:selected", @ide.fileTreeManager.findSelectedEntity()
 
 		reset: () ->
 			@$scope.trackChanges = {

From 97065e854779cdf687a0651db379254cf5a325be Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 17:19:57 +0100
Subject: [PATCH 10/10] CSS tweaks

---
 .../stylesheets/app/editor/binary-file.less   |  3 +-
 .../public/stylesheets/app/editor/pdf.less    | 30 ++++++++++++-------
 .../stylesheets/app/editor/toolbar.less       |  5 ----
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/binary-file.less b/services/web/public/stylesheets/app/editor/binary-file.less
index a767d039bd..8e04d2112d 100644
--- a/services/web/public/stylesheets/app/editor/binary-file.less
+++ b/services/web/public/stylesheets/app/editor/binary-file.less
@@ -9,7 +9,8 @@
 		margin: auto;
 		margin-bottom: @line-height-computed / 2;
 		border: 1px solid @gray;
-		.box-shadow(0 2px 3px @gray;)
+		.box-shadow(0 2px 3px @gray;);
+		background-color: white;
 	}
 	p.no-preview {
 		font-size: 24px;
diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index 269f67b6f6..778d600b40 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -73,18 +73,26 @@
 	}
 }
 
-.log-btn {
-	position: relative;
-	.label {
-		position: absolute;
-		top: 0;
-		right: 0;
-		padding: .15em .6em .2em;
-		font-size: 60%;
-	}
-	&.active, &:active {
+.toolbar {
+	.log-btn {
+		position: relative;
 		.label {
-			display: none;
+			position: absolute;
+			top: 0;
+			right: 0;
+			padding: .15em .6em .2em;
+			font-size: 60%;
+		}
+		&.active, &:active {
+			.label {
+				display: none;
+			}
+			color: white;
+			background-color: @link-color;
+			.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
+			&:hover {
+				color: white;
+			}
 		}
 	}
 }
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 0bc4d0b1cf..d443e20f6d 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -13,11 +13,6 @@
 			color: @gray-dark;
 			text-decoration: none;
 		}
-		&.active, &:active {
-			color: white;
-			background-color: @link-color;
-			.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
-		}
 	}
 
 	.btn-full-height {