Add in restore button for diffs

services/web/app/views/project/editor/file-tree.jade

@@ -1,5 +1,5 @@
 aside#file-tree(ng-controller="FileTreeController")
-	.toolbar.toolbar-small(ng-if="permissions.write")
+	.toolbar.toolbar-small.toolbar-alt(ng-if="permissions.write")
 		a(
 			href,
 			ng-click="openNewDocModal()",
@@ -40,7 +40,7 @@ aside#file-tree(ng-controller="FileTreeController")
 				i.fa.fa-trash-o
 
 	.file-tree-inner(
-		ng-if="rootFolder", 
+		ng-if="rootFolder",
 		ng-controller="FileTreeRootFolderController",
 		ng-class="{ 'no-toolbar': !permissions.write }"
 	)
@@ -284,7 +284,7 @@ script(type='text/ng-template', id='entityListItemTemplate')
 					permissions="permissions",
 					ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
 				)
-			
+
 script(type='text/ng-template', id='newDocModalTemplate')
 	.modal-header
 		h3 New File

services/web/app/views/project/editor/track-changes.jade

@@ -80,22 +80,31 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 				i.fa.fa-spin.fa-refresh
 				|   Loading...
 
-	.diff.full-size(ng-controller="TrackChangesDiffController")
-		.diff-editor.hide-ace-cursor(
-			ace-editor="track-changes",
-			ng-show="!!trackChanges.diff && !trackChanges.diff.loading && !trackChanges.diff.deleted && !trackChanges.diff.error",
-			theme="settings.theme",
-			font-size="settings.fontSize",
-			text="trackChanges.diff.text",
-			highlights="trackChanges.diff.highlights",
-			read-only="true",
-			resize-on="layout:main:resize"
+	.diff-panel.full-size(ng-controller="TrackChangesDiffController")
+		.diff(
+			ng-show="!!trackChanges.diff && !trackChanges.diff.loading && !trackChanges.diff.deleted && !trackChanges.diff.error"
 		)
+			.toolbar.toolbar-alt
+				span.name Changes to <strong>{{trackChanges.diff.doc.name}}</strong>
+				.toolbar-right
+					a.btn.btn-danger.btn-sm(
+						href,
+						ng-click="openRestoreDiffModal()"
+					) Restore to before these changes
+			.diff-editor.hide-ace-cursor(
+				ace-editor="track-changes",
+				theme="settings.theme",
+				font-size="settings.fontSize",
+				text="trackChanges.diff.text",
+				highlights="trackChanges.diff.highlights",
+				read-only="true",
+				resize-on="layout:main:resize"
+			)
 		.diff-deleted.text-centered(
 			ng-show="trackChanges.diff.deleted"
 		)
 			p.text-serif {{ trackChanges.diff.doc.name }} has been deleted.
-			p 
+			p
 				a.btn.btn-primary.btn-lg(
 					href,
 					ng-click="restoreDeletedDoc()"
@@ -104,4 +113,26 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 			i.fa.fa-spin.fa-refresh
 			| &nbsp;&nbsp;Loading...
 		.error-panel(ng-show="trackChanges.diff.error")
-			.alert.alert-danger Sorry, something went wrong :(
+			.alert.alert-danger Sorry, something went wrong :(
+
+script(type="text/ng-template", id="trackChangesRestoreDiffModalTemplate")
+	.modal-header
+		button.close(
+			type="button"
+			data-dismiss="modal"
+			ng-click="cancel()"
+		) &times;
+		h3 Restore {{diff.doc.name}}
+	.modal-body.modal-body-share
+		p Are you sure you want to restore <strong>{{diff.doc.name}}</strong> to before the changes on {{diff.start_ts | formatDate}}?
+	.modal-footer
+		button.btn.btn-default(
+			ng-click="cancel()",
+			ng-disabled="state.inflight"
+		) Cancel
+		button.btn.btn-danger(
+			ng-click="restore()",
+			ng-disabled="state.inflight"
+		)
+			span(ng-show="!state.inflight") Restore
+			span(ng-show="state.inflight") Restoring...

services/web/public/coffee/ide/track-changes/TrackChangesManager.coffee

@@ -81,7 +81,7 @@ define [
 		reloadDiff: () ->
 			diff = @$scope.trackChanges.diff
 			{updates, doc} = @$scope.trackChanges.selection
-			{fromV, toV}   = @_calculateRangeFromSelection()
+			{fromV, toV, start_ts, end_ts}   = @_calculateRangeFromSelection()
 
 			return if !doc?
 
@@ -91,10 +91,12 @@ define [
 				diff.toV   == toV
 
 			@$scope.trackChanges.diff = diff = {
-				fromV:   fromV
-				toV:     toV
-				doc:     doc
-				error:   false
+				fromV:    fromV
+				toV:      toV
+				start_ts: start_ts
+				end_ts:   end_ts
+				doc:      doc
+				error:    false
 			}
 
 			if !doc.deleted
@@ -117,10 +119,12 @@ define [
 				diff.deleted = true
 
 		restoreDeletedDoc: (doc) ->
-			@ide.$http.post "/project/#{@$scope.project_id}/doc/#{doc.id}/restore", {
-				name: doc.name
-				_csrf: window.csrfToken
-			}
+			url = "/project/#{@$scope.project_id}/doc/#{doc.id}/restore"
+			@ide.$http.post(url, name: doc.name, _csrf: window.csrfToken)
+
+		restoreDiff: (diff) ->
+			url = "/project/#{@$scope.project_id}/doc/#{diff.doc.id}/version/#{diff.fromV}/restore"
+			@ide.$http.post(url, _csrf: window.csrfToken)
 
 		_parseDiff: (diff) ->
 			row    = 0

services/web/public/coffee/ide/track-changes/controllers/TrackChangesDiffController.coffee

@@ -1,9 +1,34 @@
 define [
 	"base"
 ], (App) ->
-	App.controller "TrackChangesDiffController", ["$scope", "ide", ($scope, ide) ->
+	App.controller "TrackChangesDiffController", ($scope, $modal, ide) ->
 		$scope.restoreDeletedDoc = () ->
 			ide.trackChangesManager.restoreDeletedDoc(
 				$scope.trackChanges.diff.doc
 			)
-	]
+
+		$scope.openRestoreDiffModal = () ->
+			$modal.open {
+				templateUrl: "trackChangesRestoreDiffModalTemplate"
+				controller: "TrackChangesRestoreDiffModalController"
+				resolve:
+					diff: () -> $scope.trackChanges.diff
+			}
+
+	App.controller "TrackChangesRestoreDiffModalController", ($scope, $modalInstance, diff, ide) ->
+		$scope.state =
+			inflight: false
+
+		$scope.diff = diff
+
+		$scope.restore = () ->
+			$scope.state.inflight = true
+			ide.trackChangesManager
+				.restoreDiff(diff)
+				.success () ->
+					$scope.state.inflight = false
+					$modalInstance.close()
+					ide.editorManager.openDoc(diff.doc)
+
+		$scope.cancel = () ->
+			$modalInstance.dismiss()

services/web/public/stylesheets/app/editor/file-tree.less

@@ -1,7 +1,5 @@
 
 aside#file-tree {
-	background-color: #fafafa;
-
 	.file-tree-inner {
 		position: absolute;
 		top: 32px;
@@ -93,4 +91,4 @@ aside#file-tree {
 	ul.droppable-hover {
 		background-color: @file-tree-droppable-background-color;
 	}
-}
+}

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

@@ -84,4 +84,8 @@
 			padding: 4px 10px 5px;
 		}
 	}
+
+	&.toolbar-alt {
+		background-color: #fafafa;
+	}
 }

services/web/public/stylesheets/app/editor/track-changes.less

@@ -29,8 +29,25 @@
 		}
 	}
 
-	.diff {
+	.diff-panel {
+		.full-size;
 		margin-right: @changesListWidth;
+	}
+
+	.diff {
+		.full-size;
+		.toolbar {
+			padding: 3px;
+			.name {
+				float: left;
+				padding: 3px @line-height-computed / 4;
+				display: inline-block;
+			}
+		}
+		.diff-editor {
+			.full-size;
+			top: 40px;
+		}
 		.hide-ace-cursor {
 			.ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
 				display: none;
@@ -245,4 +262,4 @@
 			}
 		}
 	}
-}
+}