mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #2241 from overleaf/ta-file-preview-footer
Move File Preview Footer to Header GitOrigin-RevId: b6c8d09f82520ceaebf0c6ee414445e4487e8894
This commit is contained in:
parent
e502b80116
commit
8a46a385f7
4 changed files with 70 additions and 74 deletions
60
services/web/app/views/project/editor/binary-file-header.pug
Normal file
60
services/web/app/views/project/editor/binary-file-header.pug
Normal 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")}
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue