mirror of
https://github.com/overleaf/overleaf.git
synced 2025-03-15 04:24:52 +00:00
Show linked file status in front end
This commit is contained in:
parent
01d84bd983
commit
9733223840
7 changed files with 117 additions and 46 deletions
|
@ -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
|
||||
|
|
|
@ -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")}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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()
|
||||
|
||||
]
|
||||
|
|
|
@ -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 []
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue