Create binary file preview

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

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 }}

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"])

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

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()
+	]

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

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;

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;
+	}
+
+}