Show linked file status in front end

This commit is contained in:
James Allen 2018-02-20 10:37:55 +00:00
parent 01d84bd983
commit 9733223840
7 changed files with 117 additions and 46 deletions

View file

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

View file

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

View file

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

View file

@ -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()
]

View file

@ -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 []

View file

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

View file

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