Allow history view to be closed

app/views/templates.jade

@@ -426,6 +426,10 @@
 	script(type='text/template')#trackChangesPanelTemplate
 		#trackChangesPanel
 			.track-changes-side-bar
+				.track-changes-header
+					h3 Recent changes
+					a(href="#").track-changes-close
+						i.icon-remove
 				.change-list-area
 			.track-changes-diff
 

public/coffee/track-changes/TrackChangesManager.coffee

@@ -12,6 +12,13 @@ define [
 			$("#editorWrapper").append(@$el)
 			@hideEl()
 
+			@ide.editor.on "change:doc", () =>
+				@hideEl()
+
+			@$el.find(".track-changes-close").on "click", (e) =>
+				e.preventDefault
+				@hideEl()
+
 		show: () ->
 			@project_id = window.userSettings.project_id
 			@doc_id = @ide.editor.current_doc_id

public/stylesheets/less/trackchanges.less

@@ -26,6 +26,21 @@
 		position: absolute;
 		right: 0;
 		background-color: white;
+
+		.track-changes-header {
+			background-color: black;
+			h3 {
+				color: white;
+				padding-left: 8px;
+				font-size: 1.2em;
+			}
+			a {
+				color: white;
+				position: absolute;
+				top: 6px;
+				right: 8px;
+			}
+			height: 30px;
 		}
 
 		.change-list-area {
@@ -33,9 +48,10 @@
 			position: absolute;
 			left: 0px;
 			right: 0px;
-		top: 0px;
+			top: 30px;
 			bottom: 0px;
 		}
+	}
 
 	.deleted-change-background, .deleted-change-foreground, .inserted-change, .change-name-marker {
 		position: absolute;