github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Use template elements for file uploaders, and i18n

Browse source
This commit is contained in:
Shane Kilkelly 2017-11-27 12:06:18 +00:00
parent 57d0bab354
commit 661041a35d
5 changed files with 70 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/project/editor.pug
View file

@ -169,5 +169,3 @@ block requirejs
data-ace-base=buildJsPath(lib('ace'), {fingerprint:false}),
src=buildJsPath('libs/require.js')
)

33
services/web/app/views/project/editor/file-tree.pug
View file

@ -364,6 +364,38 @@ script(type='text/ng-template', id='newFolderModalTemplate')
span(ng-hide="state.inflight") #{translate("create")}
span(ng-show="state.inflight") #{translate("creating")}...
script(type="text/template", id="qq-file-uploader-template").
<div class="qq-uploader-selector">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector">#{translate('drop_files_here_to_upload')}</span>
</div>
<div class="qq-upload-button-selector btn btn-primary btn-lg">
<div>#{translate('upload')}</div>
</div>
<span class="or btn-lg"> #{translate('or')} </span>
<span class="drag-here btn-lg">#{translate('drag_here')}</span>
<span class="qq-drop-processing-selector"><span>#{translate('processing')}</span><span class="qq-drop-processing-spinner-selector"></span></span>
<ul class="qq-upload-list-selector">
<li>
<div class="qq-progress-bar-container-selector">
<div
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
class="qq-progress-bar-selector qq-progress-bar">
</div>
</div>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<a type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">#{translate('cancel')}</a>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">#{translate('retry')}</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
script(type="text/ng-template", id="uploadFileModalTemplate")
.modal-header
h3 #{translate("upload_files")}
@ -385,6 +417,7 @@ script(type="text/ng-template", id="uploadFileModalTemplate")
.modal-body(
fine-upload
endpoint="/project/{{ project_id }}/upload"
template-id="qq-file-uploader-template"
multiple="true"
auto-upload="false"
on-complete-callback="onComplete"

1
services/web/app/views/project/list.pug
View file

@ -6,6 +6,7 @@ block content
script#data(type="application/json").
!{JSON.stringify({ projects: projects, tags: tags, notifications: notifications }).replace(/\//g, '\\/')}
script(type="text/javascript").
window.data = JSON.parse($("#data").text());
window.algolia = {

36
services/web/app/views/project/list/modals.pug
View file

@ -213,6 +213,37 @@ script(type='text/ng-template', id='deleteProjectsModalTemplate')
ng-click="delete()"
) #{translate("confirm")}
script(type="text/template", id="qq-project-uploader-template").
<div class="qq-uploader-selector">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector">#{translate('drop_files_here_to_upload')}</span>
</div>
<div class="qq-upload-button-selector btn btn-primary btn-lg">
<div>#{translate('select_a_zip_file')}</div>
</div>
<span class="or btn-lg"> #{translate('or')} </span>
<span class="drag-here btn-lg">#{translate('drag_a_zip_file')}</span>
<span class="qq-drop-processing-selector"><span>#{translate('creating_project')}</span><span class="qq-drop-processing-spinner-selector"></span></span>
<ul class="qq-upload-list-selector">
<li>
<div class="qq-progress-bar-container-selector">
<div
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
class="qq-progress-bar-selector qq-progress-bar">
</div>
</div>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<a type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">#{translate('cancel')}</a>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">#{translate('retry')}</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
script(type="text/ng-template", id="uploadProjectModalTemplate")
.modal-header
button.close(
@ -224,10 +255,7 @@ script(type="text/ng-template", id="uploadProjectModalTemplate")
.modal-body(
fine-upload
endpoint="/project/new/upload"
waiting-for-response-text="Creating project..."
failed-upload-text="Upload failed. Is it a valid zip file?"
upload-button-text="Select a .zip file"
drag-area-text="drag .zip file"
template-id="qq-project-uploader-template"
multiple="false"
allowed-extensions="['zip']"
on-complete-callback="onComplete"

52
services/web/public/coffee/directives/fineUpload.coffee
View file

@ -7,11 +7,7 @@ define [
scope: {
multiple: "="
endpoint: "@"
waitingForResponseText: "@"
failedUploadText: "@"
uploadButtonText: "@"
dragAreaText: "@"
hintText: "@"
templateId: "@"
allowedExtensions: "="
onCompleteCallback: "="
onUploadCallback: "="
@ -26,17 +22,12 @@ define [
link: (scope, element, attrs) ->
multiple = scope.multiple or false
endpoint = scope.endpoint
templateId = scope.templateId
if scope.allowedExtensions?
validation =
validation =
allowedExtensions: scope.allowedExtensions
else
validation = {}
text =
waitingForResponse: scope.waitingForResponseText or "Processing..."
failUpload: scope.failedUploadText or "Failed :("
uploadButton: scope.uploadButtonText or "Upload"
dragAreaText = scope.dragAreaText or "drag here"
hintText = scope.hintText or ""
maxConnections = scope.maxConnections or 1
onComplete = scope.onCompleteCallback or () ->
onUpload = scope.onUploadCallback or () ->
@ -50,39 +41,6 @@ define [
autoUpload = scope.autoUpload
params = scope.params or {}
params._csrf = window.csrfToken
templateElement = document.createElement('div')
templateElement.innerHTML = """
<div class="qq-uploader-selector">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector">Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector btn btn-primary btn-lg">
<div>#{text.uploadButton}</div>
</div>
<span class="or btn-lg"> or </span>
<span class="drag-here btn-lg">#{dragAreaText}</span>
<span class="qq-drop-processing-selector"><span>#{text.waitingForResponse}</span><span class="qq-drop-processing-spinner-selector"></span></span>
<div class="small">#{hintText}</div>
<ul class="qq-upload-list-selector">
<li>
<div class="qq-progress-bar-container-selector">
<div
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
class="qq-progress-bar-selector qq-progress-bar">
</div>
</div>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<a type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</a>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<\li>
</ul>
</div>
"""
q = new qq.FineUploader
element: element[0]
@ -103,9 +61,7 @@ define [
onError: onError
onSubmit: onSubmit
onCancel: onCancel
text: text
# template: "qq-uploader"
template: templateElement
template: templateId
window.q = q
scope.control?.q = q
return q