github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-12-29 08:52:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Move File Preview Footer to Header

GitOrigin-RevId: b6c8d09f82520ceaebf0c6ee414445e4487e8894
This commit is contained in:
Simon Detheridge 2019-10-18 10:32:06 +01:00 committed by sharelatex
parent e502b80116
commit 8a46a385f7
4 changed files with 70 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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")}

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

@ -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 }}"
@ -32,75 +35,7 @@ div.binary-file.full-size(
| {{ textPreview.data }}
p(ng-show="textPreview.shouldShowDots")
| ...
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)

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

@ -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 maxHeight = $element.height() - $footer.height() - 14 // borders + margin
const $header = $element.find('.binary-file-header')
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

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

@ -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;