Show linked file status in front end

services/web/app/coffee/Features/Project/ProjectEditorHandler.coffee

@@ -76,6 +76,8 @@ module.exports = ProjectEditorHandler =
 	buildFileModelView: (file) ->
 		_id  : file._id
 		name : file.name
+		linkedFileData: file.linkedFileData
+		created: file.created
 
 	buildDocModelView: (doc) ->
 		_id   : doc._id

services/web/app/views/project/editor/binary-file.pug

@@ -6,7 +6,7 @@ div.binary-file.full-size(
 	img(
 		ng-show="!failedLoad"
 		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}"
-		ng-if="['png', 'jpg', 'jpeg', 'gif'].indexOf(extension(openFile)) > -1"
+		ng-if="isImageFile()"
 		ng-class="{'img-preview': !imgLoaded}"
 		onerror="sl_binaryFilePreviewError()"
 		onabort="sl_binaryFilePreviewError()"
@@ -16,29 +16,48 @@ div.binary-file.full-size(
 	img(
 		ng-show="!failedLoad"
 		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}?format=png"
-		ng-if="['pdf', 'eps'].indexOf(extension(openFile)) > -1"
+		ng-if="isPreviewableFile()"
 		ng-class="{'img-preview': !imgLoaded}"
 		onerror="sl_binaryFilePreviewError()"
 		onabort="sl_binaryFilePreviewError()"
 		onload="sl_binaryFilePreviewLoaded()"
 	)
 	
-	div(ng-if="(['bib'].indexOf(extension(openFile)) > -1) && !bibtexPreview.error")
-
-		div.bib-loading(ng-show="bibtexPreview.loading && !bibtexPreview.error")
+	div(ng-if="isTextFile() && !textPreview.error")
+		div.text-loading(ng-show="textPreview.loading && !textPreview.error")
 			| #{translate('loading')}...
-
-		div.bib-preview(ng-show="bibtexPreview.data && !bibtexPreview.loading && !bibtexPreview.error")
+		div.text-preview(ng-show="textPreview.data && !textPreview.loading && !textPreview.error")
 			div.scroll-container
 				p
-					| {{ bibtexPreview.data }}
-				p(ng-show="bibtexPreview.shouldShowDots")
+					| {{ textPreview.data }}
+				p(ng-show="textPreview.shouldShowDots")
 					| ...
 	
 	p.no-preview(
-		ng-if="failedLoad || bibtexPreview.error || ['bib', 'png', 'jpg', 'jpeg', 'gif', 'pdf', 'eps'].indexOf(extension(openFile)) == -1"
+		ng-if="failedLoad || textPreview.error || isUnpreviewableFile()"
 	) #{translate("no_preview_available")}
 
-	a.btn.btn-info(
-		ng-href="/project/{{ project_id }}/file/{{ openFile.id }}"
-	) #{translate("download")} {{ openFile.name }}
+	div.binary-file-footer
+		div(ng-show="openFile.linkedFileData.provider == 'url'")
+			p
+				i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
+				| Imported from
+				|
+				a(ng-href='{{openFile.linkedFileData.url}}') {{ displayUrl(openFile.linkedFileData.url) }}
+				|
+				| at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}
+
+		span(ng-show="openFile.linkedFileData.provider == 'url'")
+			a.btn.btn-success(
+				href
+			)
+				i.fa.fa-fw.fa-refresh
+				|
+				| Refresh
+			|  
+		a.btn.btn-info(
+			ng-href="/project/{{ project_id }}/file/{{ openFile.id }}"
+		)
+			i.fa.fa-fw.fa-download
+			|
+			| #{translate("download")}

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

@@ -108,6 +108,9 @@ script(type='text/ng-template', id='entityListItemTemplate')
 				i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'")
 
 				i.fa.fa-fw(ng-if="entity.type != 'folder'", ng-class="'fa-' + iconTypeFromName(entity.name)")
+					i.fa.fa-external-link-square.fa-rotate-180.linked-file-highlight(
+						ng-if="entity.linkedFileData.provider"
+					)
 				span(
 					ng-hide="entity.renaming"
 				)  {{ entity.renamingToName || entity.name }}

services/web/public/coffee/ide/binary-files/controllers/BinaryFileController.coffee

@@ -1,16 +1,47 @@
 define [
 	"base"
-], (App) ->
-	App.controller "BinaryFileController", ["$scope", "$rootScope", "$http", "$timeout", ($scope, $rootScope, $http, $timeout) ->
+	"moment"
+], (App, moment) ->
+	App.controller "BinaryFileController", ["$scope", "$rootScope", "$http", "$timeout", "$element", ($scope, $rootScope, $http, $timeout, $element) ->
 
 		TWO_MEGABYTES = 2 * 1024 * 1024
 
-		$scope.bibtexPreview =
+		textExtensions = ['bib', 'tex', 'txt', 'cls', 'sty']
+		imageExtentions = ['png', 'jpg', 'jpeg', 'gif']
+		previewableExtensions = ['eps', 'pdf']
+
+		extension = (file) ->
+			return file.name.split(".").pop()?.toLowerCase()
+
+		$scope.isTextFile = () =>
+			textExtensions.indexOf(extension($scope.openFile)) > -1
+		$scope.isImageFile = () =>
+			imageExtentions.indexOf(extension($scope.openFile)) > -1
+		$scope.isPreviewableFile = () =>
+			previewableExtensions.indexOf(extension($scope.openFile)) > -1
+		$scope.isUnpreviewableFile = () ->
+			!$scope.isTextFile() and
+			!$scope.isImageFile() and
+			!$scope.isPreviewableFile()
+
+		$scope.textPreview =
 			loading: false
 			shouldShowDots: false
 			error: false
 			data: null
 
+		MAX_URL_LENGTH = 60
+		FRONT_OF_URL_LENGTH = 35
+		FILLER = '...'
+		TAIL_OF_URL_LENGTH = MAX_URL_LENGTH - FRONT_OF_URL_LENGTH - FILLER.length
+		$scope.displayUrl = (url) ->
+			if url.length > MAX_URL_LENGTH
+				front = url.slice(0, FRONT_OF_URL_LENGTH)
+				tail = url.slice(url.length - TAIL_OF_URL_LENGTH)
+				return front + FILLER + tail
+			else
+				return url
+
 		# Callback fired when the `img` tag fails to load,
 		# `failedLoad` used to show the "No Preview" message
 		$scope.failedLoad = false
@@ -25,47 +56,39 @@ define [
 			$scope.imgLoaded = true
 			$scope.$apply()
 
-		$scope.extension = (file) ->
-			return file.name.split(".").pop()?.toLowerCase()
-
-		$scope.loadBibtexFilePreview = () ->
+		loadTextFileFilePreview = () ->
 			url = "/project/#{project_id}/file/#{$scope.openFile.id}?range=0-#{TWO_MEGABYTES}"
-			$scope.bibtexPreview.loading = true
-			$scope.bibtexPreview.shouldShowDots = false
+			$scope.textPreview.loading = true
+			$scope.textPreview.shouldShowDots = false
 			$scope.$apply()
 			$http.get(url)
 				.then (response) ->
 					{ data } = response
-					$scope.bibtexPreview.loading = false
-					$scope.bibtexPreview.error = false
+					$scope.textPreview.error = false
 					# show dots when payload is closs to cutoff
 					if data.length >= (TWO_MEGABYTES - 200)
-						$scope.bibtexPreview.shouldShowDots = true
+						$scope.textPreview.shouldShowDots = true
 					try
 						# remove last partial line
 						data = data.replace(/\n.*$/, '')
 					finally
-						$scope.bibtexPreview.data = data
-					$timeout($scope.setHeight, 0)
+						$scope.textPreview.data = data
+					$timeout(setHeight, 0)
 				.catch () ->
-					$scope.bibtexPreview.error = true
-					$scope.bibtexPreview.loading = false
+					$scope.textPreview.error = true
+					$scope.textPreview.loading = false
 
-		$scope.setHeight = () ->
-			# Behold, a ghastly hack
-			guide = document.querySelector('.file-tree-inner')
-			table_wrap = document.querySelector('.bib-preview .scroll-container')
-			if table_wrap
-				desired_height = guide.offsetHeight - 44
-				if table_wrap.offsetHeight > desired_height
-					table_wrap.style.height = desired_height + 'px'
-					table_wrap.style['max-height'] = desired_height + 'px'
+		setHeight = () ->
+			$preview = $element.find('.text-preview .scroll-container')
+			$footer = $element.find('.binary-file-footer')
+			maxHeight = $element.height() - $footer.height() - 14 # borders + margin
+			$preview.css('max-height': maxHeight)
+			# Don't show the preview until we've set the height, otherwise we jump around
+			$scope.textPreview.loading = false
 
-		$scope.loadBibtexIfRequired = () ->
-			if $scope.extension($scope.openFile) == 'bib'
-				$scope.bibtexPreview.data = null
-				$scope.loadBibtexFilePreview()
-
-		$scope.loadBibtexIfRequired()
+		do loadTextFileIfRequired = () ->
+			if $scope.isTextFile()
+				$scope.textPreview.data = null
+				loadTextFileFilePreview()
 
 	]

services/web/public/coffee/ide/file-tree/FileTreeManager.coffee

@@ -252,6 +252,8 @@ define [
 					id:   file._id
 					type: "file"
 					selected: (file._id == @selected_entity_id)
+					linkedFileData: file.linkedFileData
+					created: file.created
 				}
 
 			for childFolder in rawFolder.folders or []

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

@@ -22,14 +22,15 @@
 		font-size: 24px;
 		color: @gray;
 	}
-	.bib-loading {
+	.text-loading {
 		font-size: 24px;
 		color: @gray;
 		margin-bottom: 12px;
 	}
-	.bib-preview {
+	.text-preview {
 		margin-bottom: 12px;
 		.scroll-container {
+			background-color: white;
 			font-size: 0.8em;
 			line-height: 1.1em;
 			overflow: auto;
@@ -43,5 +44,8 @@
 			font-family: monospace;
 		}
 	}
+	.linked-file-icon {
+		color: @blue
+	}
 
 }

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

@@ -101,6 +101,18 @@
 			i.fa {
 				color: @file-tree-item-icon-color;
 				font-size: 14px;
+				&.linked-file-highlight {
+					&when (@is-overleaf = true) {
+						color: white;
+					}
+					&when (@is-overleaf = false) {
+						color: @blue;
+					}
+					position: relative;
+					top: 4px;
+					left: -8px;
+					font-size: 12px;
+				}
 			}
 
 			i.fa-folder-open, i.fa-folder {
@@ -129,6 +141,9 @@
 						.entity-menu-toggle i.fa {
 							color: #FFF;
 						}
+						> i.fa i.linked-file-highlight {
+							color: @blue;
+						}
 						color: #FFF;
 						font-weight: bold;
 						background-color: @file-tree-multiselect-bg;
@@ -191,6 +206,9 @@
 					.entity-menu-toggle i.fa {
 						color: #FFF;
 					}
+					> i.fa i.linked-file-highlight {
+						color: @blue;
+					}
 					background-color: @file-tree-item-selected-bg;
 					font-weight: bold;
 					padding-right: 32px;