Merge pull request #2241 from overleaf/ta-file-preview-footer

Move File Preview Footer to Header

GitOrigin-RevId: b6c8d09f82520ceaebf0c6ee414445e4487e8894

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

@@ -0,0 +1,60 @@
+div.binary-file-header
+  // Linked Files: URL
+  div(ng-if="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 }}
+
+  // Linked Files: Project File
+  div(ng-if="openFile.linkedFileData.provider == 'project_file'")
+    p
+      i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
+      | Imported from
+      |
+      a(ng-if='!openFile.linkedFileData.v1_source_doc_id'
+        ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank")
+        | Another project
+      span(ng-if='openFile.linkedFileData.v1_source_doc_id')
+        | Another project
+      | /{{ openFile.linkedFileData.source_entity_path.slice(1) }},
+      |
+      | at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}
+
+  // Linked Files: Project Output File
+  div(ng-if="openFile.linkedFileData.provider == 'project_output_file'")
+    p
+      i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
+      | Imported from the output of
+      |
+      a(ng-if='!openFile.linkedFileData.v1_source_doc_id'
+        ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank")
+        | Another project
+      span(ng-if='openFile.linkedFileData.v1_source_doc_id')
+        | Another project
+      | : {{ openFile.linkedFileData.source_output_file_path }},
+      |
+      | at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}
+
+  != moduleIncludes("binaryFile:linkedFileInfo", locals)
+
+  // Bottom Controls
+  span(ng-if="openFile.linkedFileData.provider")
+    button.btn.btn-success(
+      href, ng-click="refreshFile(openFile)",
+      ng-disabled="refreshing"
+    )
+      i.fa.fa-fw.fa-refresh(ng-class={'fa-spin': refreshing})
+      |
+      span(ng-show="!refreshing") Refresh
+      span(ng-show="refreshing") Refreshing...
+    |  
+  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/binary-file.pug

@@ -3,6 +3,9 @@ div.binary-file.full-size(
 	ng-show="ui.view == 'file'"
 	ng-if="openFile"
 )
+
+	include ./binary-file-header
+
 	img(
 		ng-show="!failedLoad"
 		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}"
@@ -36,71 +39,3 @@ div.binary-file.full-size(
 	p.no-preview(
 		ng-if="failedLoad || textPreview.error || isUnpreviewableFile()"
 	) #{translate("no_preview_available")}
-
-	div.binary-file-footer
-		// Linked Files: URL
-		div(ng-if="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 }}
-
-		// Linked Files: Project File
-		div(ng-if="openFile.linkedFileData.provider == 'project_file'")
-			p
-				i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
-				| Imported from
-				|
-				a(ng-if='!openFile.linkedFileData.v1_source_doc_id'
-					ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank")
-					| Another project
-				span(ng-if='openFile.linkedFileData.v1_source_doc_id')
-					| Another project
-				| /{{ openFile.linkedFileData.source_entity_path.slice(1) }},
-				|
-				| at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}
-
-		// Linked Files: Project Output File
-		div(ng-if="openFile.linkedFileData.provider == 'project_output_file'")
-			p
-				i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
-				| Imported from the output of
-				|
-				a(ng-if='!openFile.linkedFileData.v1_source_doc_id'
-					ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank")
-					| Another project
-				span(ng-if='openFile.linkedFileData.v1_source_doc_id')
-					| Another project
-				| : {{ openFile.linkedFileData.source_output_file_path }},
-				|
-				| at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}
-
-		!= moduleIncludes("binaryFile:linkedFileInfo", locals)
-
-		// Bottom Controls
-		span(ng-if="openFile.linkedFileData.provider")
-			button.btn.btn-success(
-				href, ng-click="refreshFile(openFile)",
-				ng-disabled="refreshing"
-			)
-				i.fa.fa-fw.fa-refresh(ng-class={'fa-spin': refreshing})
-				|
-				span(ng-show="!refreshing") Refresh
-				span(ng-show="refreshing") Refreshing...
-			|  
-		a.btn.btn-info(
-			ng-href="/project/{{ project_id }}/file/{{ openFile.id }}"
-		)
-			i.fa.fa-fw.fa-download
-			|
-			| #{translate("download")}
-
-		// Refresh Error
-		div(ng-if="refreshError").row
-			br
-			.alert.alert-danger.col-md-6.col-md-offset-3
-				| Error: {{ refreshError}}
-				!= moduleIncludes("binaryFile:linkedFileRefreshError", locals)

services/web/public/src/ide/binary-files/controllers/BinaryFileController.js

@@ -184,8 +184,8 @@ define(['base', 'moment'], (App, moment) =>
 
     function setPreviewHeight() {
       const $preview = $element.find('.text-preview .scroll-container')
-      const $footer = $element.find('.binary-file-footer')
+      const $header = $element.find('.binary-file-header')
-      const maxHeight = $element.height() - $footer.height() - 14 // borders + margin
+      const maxHeight = $element.height() - $header.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

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

@@ -8,7 +8,7 @@
 		max-height: 90%;
 		display: block;
 		margin: auto;
-		margin-bottom: @line-height-computed / 2;
+		margin-top: @line-height-computed / 2;
 		border: 1px solid @gray;
 		.box-shadow(0 2px 3px @gray;);
 		background-color: white;
@@ -19,16 +19,17 @@
 		min-height: 200px;
 	}
 	p.no-preview {
+		margin-top: @line-height-computed / 2;
 		font-size: 24px;
 		color: @gray;
 	}
 	.text-loading {
+		margin-top: @line-height-computed / 2;
 		font-size: 24px;
 		color: @gray;
-		margin-bottom: 12px;
 	}
 	.text-preview {
-		margin-bottom: 12px;
+		margin-top: @line-height-computed / 2;
 		.scroll-container {
 			background-color: white;
 			font-size: 0.8em;