mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Create unified new file modal with linked files
This commit is contained in:
James Allen
Shane Kilkelly
parent
2da1d57948
commit
5717496685
5 changed files with 363 additions and 363 deletions
|
|
@ -308,183 +308,10 @@ script(type='text/ng-template', id='entityListItemTemplate')
|
||||||
ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
|
ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
|
||||||
)
|
)
|
||||||
|
|
||||||
script(type='text/ng-template', id='newDocModalTemplate')
|
|
||||||
.modal-header
|
|
||||||
h3 #{translate("new_file")}
|
|
||||||
.modal-body
|
|
||||||
form(novalidate, name="newDocForm")
|
|
||||||
div.alert.alert-danger(ng-if="error")
|
|
||||||
div(ng-switch="error")
|
|
||||||
span(ng-switch-when="already exists") #{translate("file_already_exists")}
|
|
||||||
span(ng-switch-default) {{error}}
|
|
||||||
input.form-control(
|
|
||||||
type="text",
|
|
||||||
placeholder="File Name",
|
|
||||||
required,
|
|
||||||
ng-model="inputs.name",
|
|
||||||
on-enter="create()",
|
|
||||||
select-name-on="open",
|
|
||||||
valid-file,
|
|
||||||
name="name"
|
|
||||||
)
|
|
||||||
.text-danger.row-spaced-small(ng-show="newDocForm.name.$error.validFile")
|
|
||||||
| #{translate('files_cannot_include_invalid_characters')}
|
|
||||||
.modal-footer
|
|
||||||
button.btn.btn-default(
|
|
||||||
ng-disabled="state.inflight"
|
|
||||||
ng-click="cancel()"
|
|
||||||
) #{translate("cancel")}
|
|
||||||
button.btn.btn-primary(
|
|
||||||
ng-disabled="newDocForm.$invalid || state.inflight"
|
|
||||||
ng-click="create()"
|
|
||||||
)
|
|
||||||
span(ng-hide="state.inflight") #{translate("create")}
|
|
||||||
span(ng-show="state.inflight") #{translate("creating")}...
|
|
||||||
|
|
||||||
|
|
||||||
// Project Linked Files Modal
|
|
||||||
script(type='text/ng-template', id='projectLinkedFileModalTemplate')
|
|
||||||
.modal-header
|
|
||||||
h3
|
|
||||||
span(ng-if="!isOutputFilesMode") New file from Project
|
|
||||||
span(ng-if="isOutputFilesMode") New file from Project output
|
|
||||||
|
|
||||||
.modal-body
|
|
||||||
div
|
|
||||||
div.alert.alert-danger(ng-if="state.error") Error, something went wrong!
|
|
||||||
div
|
|
||||||
form
|
|
||||||
.form-controls
|
|
||||||
label(for="project-select") Select a Project
|
|
||||||
span(ng-show="state.inFlight.projects")
|
|
||||||
|
|
|
||||||
i.fa.fa-spinner.fa-spin
|
|
||||||
select.form-control(
|
|
||||||
name="project-select"
|
|
||||||
ng-model="data.selectedProjectId"
|
|
||||||
ng-disabled="!shouldEnableProjectSelect()"
|
|
||||||
)
|
|
||||||
option(value="" disabled selected) - Please Select a Project
|
|
||||||
option(
|
|
||||||
ng-repeat="project in data.projects"
|
|
||||||
value="{{ project._id }}"
|
|
||||||
) {{ project.name }}
|
|
||||||
|
|
||||||
br
|
|
||||||
.form-controls(ng-if="!isOutputFilesMode")
|
|
||||||
label(for="project-entity-select") Select a File
|
|
||||||
span(ng-show="state.inFlight.entities")
|
|
||||||
|
|
|
||||||
i.fa.fa-spinner.fa-spin
|
|
||||||
select.form-control(
|
|
||||||
name="project-entity-select"
|
|
||||||
ng-model="data.selectedProjectEntity"
|
|
||||||
ng-disabled="!shouldEnableProjectEntitySelect()"
|
|
||||||
)
|
|
||||||
option(value="" disabled selected) - Please Select a File
|
|
||||||
option(
|
|
||||||
ng-repeat="projectEntity in data.projectEntities"
|
|
||||||
value="{{ projectEntity.path }}"
|
|
||||||
) {{ projectEntity.path.slice(1) }}
|
|
||||||
|
|
||||||
.form-controls(ng-if="isOutputFilesMode")
|
|
||||||
label(for="project-entity-select") Select an Output File
|
|
||||||
span(ng-show="state.inFlight.compile")
|
|
||||||
|
|
|
||||||
i.fa.fa-spinner.fa-spin
|
|
||||||
select.form-control(
|
|
||||||
name="project-output-file-select"
|
|
||||||
ng-model="data.selectedProjectOutputFile"
|
|
||||||
ng-disabled="!shouldEnableProjectOutputFileSelect()"
|
|
||||||
)
|
|
||||||
option(value="" disabled selected) - Please Select an Output File
|
|
||||||
option(
|
|
||||||
ng-repeat="outputFile in data.projectOutputFiles"
|
|
||||||
value="{{ outputFile.path }}"
|
|
||||||
) {{ outputFile.path }}
|
|
||||||
br
|
|
||||||
|
|
||||||
.form-controls
|
|
||||||
label(for="name") File Name In This Project
|
|
||||||
input.form-control(
|
|
||||||
type="text"
|
|
||||||
placeholder="example.tex"
|
|
||||||
required
|
|
||||||
ng-model="data.name"
|
|
||||||
name="name"
|
|
||||||
)
|
|
||||||
br
|
|
||||||
|
|
||||||
.modal-footer
|
|
||||||
span(ng-show="state.inFlight.create")
|
|
||||||
i.fa.fa-spinner.fa-spin
|
|
||||||
|
|
|
||||||
button.btn.btn-default(
|
|
||||||
ng-disabled="state.inflight"
|
|
||||||
ng-click="cancel()"
|
|
||||||
) #{translate("cancel")}
|
|
||||||
button.btn.btn-primary(
|
|
||||||
ng-disabled="!shouldEnableCreateButton()"
|
|
||||||
ng-click="create()"
|
|
||||||
)
|
|
||||||
span(ng-hide="state.inflight") #{translate("create")}
|
|
||||||
span(ng-show="state.inflight") #{translate("creating")}...
|
|
||||||
|
|
||||||
|
|
||||||
script(type='text/ng-template', id='linkedFileModalTemplate')
|
|
||||||
.modal-header
|
|
||||||
h3 New file from URL
|
|
||||||
.modal-body
|
|
||||||
form(novalidate, name="newLinkedFileForm")
|
|
||||||
div.alert.alert-danger(ng-if="error")
|
|
||||||
div(ng-switch="error")
|
|
||||||
span(ng-switch-when="already exists") #{translate("file_already_exists")}
|
|
||||||
span(ng-switch-default) {{error}}
|
|
||||||
label(for="url") URL to fetch the file from
|
|
||||||
input.form-control(
|
|
||||||
type="text",
|
|
||||||
placeholder="www.example.com/my_file",
|
|
||||||
required,
|
|
||||||
ng-model="inputs.url",
|
|
||||||
focus-on="open",
|
|
||||||
on-enter="create()",
|
|
||||||
name="url"
|
|
||||||
)
|
|
||||||
.row-spaced
|
|
||||||
label(for="name") File name in this project
|
|
||||||
input.form-control(
|
|
||||||
type="text",
|
|
||||||
placeholder="my_file",
|
|
||||||
required,
|
|
||||||
ng-model="inputs.name",
|
|
||||||
ng-change="nameChangedByUser = true"
|
|
||||||
valid-file,
|
|
||||||
on-enter="create()",
|
|
||||||
name="name"
|
|
||||||
)
|
|
||||||
.text-danger.row-spaced-small(ng-show="newDocForm.name.$error.validFile")
|
|
||||||
| #{translate('files_cannot_include_invalid_characters')}
|
|
||||||
.modal-footer
|
|
||||||
button.btn.btn-default(
|
|
||||||
ng-disabled="state.inflight"
|
|
||||||
ng-click="cancel()"
|
|
||||||
) #{translate("cancel")}
|
|
||||||
button.btn.btn-primary(
|
|
||||||
ng-disabled="newLinkedFileForm.$invalid || state.inflight"
|
|
||||||
ng-click="create()"
|
|
||||||
)
|
|
||||||
span(ng-hide="state.inflight") #{translate("create")}
|
|
||||||
span(ng-show="state.inflight") #{translate("creating")}...
|
|
||||||
|
|
||||||
|
|
||||||
script(type='text/ng-template', id='newFolderModalTemplate')
|
script(type='text/ng-template', id='newFolderModalTemplate')
|
||||||
.modal-header
|
.modal-header
|
||||||
h3 #{translate("new_folder")}
|
h3 #{translate("new_folder")}
|
||||||
.modal-body
|
.modal-body
|
||||||
div.alert.alert-danger(ng-if="error")
|
|
||||||
div(ng-switch="error")
|
|
||||||
span(ng-switch-when="already exists") #{translate("file_already_exists")}
|
|
||||||
span(ng-switch-default) {{error}}
|
|
||||||
form(novalidate, name="newFolderForm")
|
form(novalidate, name="newFolderForm")
|
||||||
input.form-control(
|
input.form-control(
|
||||||
type="text",
|
type="text",
|
||||||
|
|
@ -496,8 +323,12 @@ script(type='text/ng-template', id='newFolderModalTemplate')
|
||||||
valid-file,
|
valid-file,
|
||||||
name="name"
|
name="name"
|
||||||
)
|
)
|
||||||
.text-danger.row-spaced-small(ng-show="newFolderForm.name.$error.validFile")
|
div.alert.alert-danger.row-spaced-small(ng-show="newFolderForm.name.$error.validFile")
|
||||||
| #{translate('files_cannot_include_invalid_characters')}
|
| #{translate('files_cannot_include_invalid_characters')}
|
||||||
|
div.alert.alert-danger.row-spaced-small(ng-if="error")
|
||||||
|
div(ng-switch="error")
|
||||||
|
span(ng-switch-when="already exists") #{translate("file_already_exists")}
|
||||||
|
span(ng-switch-default) {{error}}
|
||||||
.modal-footer
|
.modal-footer
|
||||||
button.btn.btn-default(
|
button.btn.btn-default(
|
||||||
ng-disabled="state.inflight"
|
ng-disabled="state.inflight"
|
||||||
|
|
@ -510,70 +341,7 @@ script(type='text/ng-template', id='newFolderModalTemplate')
|
||||||
span(ng-hide="state.inflight") #{translate("create")}
|
span(ng-hide="state.inflight") #{translate("create")}
|
||||||
span(ng-show="state.inflight") #{translate("creating")}...
|
span(ng-show="state.inflight") #{translate("creating")}...
|
||||||
|
|
||||||
|
include ./new-file-modal
|
||||||
script(type="text/template", id="qq-file-uploader-template")
|
|
||||||
div.qq-uploader-selector
|
|
||||||
div(qq-hide-dropzone="").qq-upload-drop-area-selector.qq-upload-drop-area
|
|
||||||
span.qq-upload-drop-area-text-selector #{translate('drop_files_here_to_upload')}
|
|
||||||
div.qq-upload-button-selector.btn.btn-primary.btn-lg
|
|
||||||
div #{translate('upload')}
|
|
||||||
span.or.btn-lg #{translate('or')}
|
|
||||||
span.drag-here.btn-lg #{translate('drag_here')}
|
|
||||||
span.qq-drop-processing-selector
|
|
||||||
span #{translate('processing')}
|
|
||||||
span.qq-drop-processing-spinner-selector
|
|
||||||
ul.qq-upload-list-selector
|
|
||||||
li
|
|
||||||
div.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"
|
|
||||||
)
|
|
||||||
span.qq-upload-file-selector.qq-upload-file
|
|
||||||
span.qq-upload-size-selector.qq-upload-size
|
|
||||||
a(type="button").qq-btn.qq-upload-cancel-selector.qq-upload-cancel #{translate('cancel')}
|
|
||||||
button(type="button").qq-btn.qq-upload-retry-selector.qq-upload-retry #{translate('retry')}
|
|
||||||
span(role="status").qq-upload-status-text-selector.qq-upload-status-text
|
|
||||||
|
|
||||||
script(type="text/ng-template", id="uploadFileModalTemplate")
|
|
||||||
.modal-header
|
|
||||||
h3 #{translate("upload_files")}
|
|
||||||
.alert.alert-warning.small.modal-alert(ng-if="tooManyFiles") #{translate("maximum_files_uploaded_together", {max:"{{max_files}}"})}
|
|
||||||
.alert.alert-warning.small.modal-alert(ng-if="rateLimitHit") #{translate("too_many_files_uploaded_throttled_short_period")}
|
|
||||||
.alert.alert-warning.small.modal-alert(ng-if="notLoggedIn") #{translate("session_expired_redirecting_to_login", {seconds:"{{secondsToRedirect}}"})}
|
|
||||||
.alert.alert-warning.small.modal-alert(ng-if="conflicts.length > 0")
|
|
||||||
p.text-center
|
|
||||||
| The following files already exist in this project:
|
|
||||||
ul.text-center.list-unstyled.row-spaced-small
|
|
||||||
li(ng-repeat="conflict in conflicts"): strong {{ conflict }}
|
|
||||||
p.text-center.row-spaced-small
|
|
||||||
| Do you want to overwrite them?
|
|
||||||
p.text-center
|
|
||||||
a(href, ng-click="doUpload()").btn.btn-primary Overwrite
|
|
||||||
|
|
|
||||||
a(href, ng-click="cancel()").btn.btn-default Cancel
|
|
||||||
|
|
||||||
.modal-body(
|
|
||||||
fine-upload
|
|
||||||
endpoint="/project/{{ project_id }}/upload"
|
|
||||||
template-id="qq-file-uploader-template"
|
|
||||||
multiple="true"
|
|
||||||
auto-upload="false"
|
|
||||||
on-complete-callback="onComplete"
|
|
||||||
on-upload-callback="onUpload"
|
|
||||||
on-validate-batch="onValidateBatch"
|
|
||||||
on-error-callback="onError"
|
|
||||||
on-submit-callback="onSubmit"
|
|
||||||
on-cancel-callback="onCancel"
|
|
||||||
control="control"
|
|
||||||
params="{'folder_id': parent_folder_id}"
|
|
||||||
)
|
|
||||||
.modal-footer
|
|
||||||
button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
|
|
||||||
|
|
||||||
|
|
||||||
script(type='text/ng-template', id='deleteEntityModalTemplate')
|
script(type='text/ng-template', id='deleteEntityModalTemplate')
|
||||||
.modal-header
|
.modal-header
|
||||||
|
|
|
||||||
209
services/web/app/views/project/editor/new-file-modal.pug
Normal file
209
services/web/app/views/project/editor/new-file-modal.pug
Normal file
|
|
@ -0,0 +1,209 @@
|
||||||
|
script(type='text/ng-template', id='newFileModalTemplate')
|
||||||
|
.modal-header
|
||||||
|
h3 Add Files
|
||||||
|
.modal-body.modal-new-file
|
||||||
|
table
|
||||||
|
tr
|
||||||
|
td.modal-new-file--list
|
||||||
|
ul.list-unstyled
|
||||||
|
li(ng-class="type == 'doc' ? 'active' : null")
|
||||||
|
a(href, ng-click="type = 'doc'")
|
||||||
|
i.fa.fa-fw.fa-file
|
||||||
|
|
|
||||||
|
| New File
|
||||||
|
li(ng-class="type == 'upload' ? 'active' : null")
|
||||||
|
a(href, ng-click="type = 'upload'")
|
||||||
|
i.fa.fa-fw.fa-upload
|
||||||
|
|
|
||||||
|
| Upload
|
||||||
|
li(ng-class="type == 'project' ? 'active' : null")
|
||||||
|
a(href, ng-click="type = 'project'")
|
||||||
|
i.fa.fa-fw.fa-folder-open
|
||||||
|
|
|
||||||
|
| From Another Project
|
||||||
|
li(ng-class="type == 'url' ? 'active' : null")
|
||||||
|
a(href, ng-click="type = 'url'")
|
||||||
|
i.fa.fa-fw.fa-globe
|
||||||
|
|
|
||||||
|
| From External URL
|
||||||
|
td(class="modal-new-file--body modal-new-file--body-{{type}}")
|
||||||
|
div(ng-if="type == 'doc'", ng-controller="NewDocModalController")
|
||||||
|
form(novalidate, name="newDocForm")
|
||||||
|
label(for="name") File Name
|
||||||
|
input.form-control(
|
||||||
|
type="text",
|
||||||
|
placeholder="File Name",
|
||||||
|
required,
|
||||||
|
ng-model="inputs.name",
|
||||||
|
on-enter="create()",
|
||||||
|
select-name-on="open",
|
||||||
|
valid-file,
|
||||||
|
name="name"
|
||||||
|
)
|
||||||
|
div.alert.alert-danger.row-spaced-small(ng-if="error")
|
||||||
|
div(ng-switch="error")
|
||||||
|
span(ng-switch-when="already exists") #{translate("file_already_exists")}
|
||||||
|
span(ng-switch-default) {{error}}
|
||||||
|
div.alert.alert-danger.row-spaced-small(ng-show="newDocForm.name.$error.validFile")
|
||||||
|
| #{translate('files_cannot_include_invalid_characters')}
|
||||||
|
div(ng-if="type == 'upload'", ng-controller="UploadFileModalController")
|
||||||
|
.alert.alert-warning.small.modal(ng-if="tooManyFiles") #{translate("maximum_files_uploaded_together", {max:"{{max_files}}"})}
|
||||||
|
.alert.alert-warning.small.modal(ng-if="rateLimitHit") #{translate("too_many_files_uploaded_throttled_short_period")}
|
||||||
|
.alert.alert-warning.small.modal(ng-if="notLoggedIn") #{translate("session_expired_redirecting_to_login", {seconds:"{{secondsToRedirect}}"})}
|
||||||
|
.alert.alert-warning.small.modal(ng-if="conflicts.length > 0")
|
||||||
|
p.text-center
|
||||||
|
| The following files already exist in this project:
|
||||||
|
ul.text-center.list-unstyled.row-spaced-small
|
||||||
|
li(ng-repeat="conflict in conflicts"): strong {{ conflict }}
|
||||||
|
p.text-center.row-spaced-small
|
||||||
|
| Do you want to overwrite them?
|
||||||
|
p.text-center
|
||||||
|
a(href, ng-click="doUpload()").btn.btn-primary Overwrite
|
||||||
|
|
|
||||||
|
a(href, ng-click="cancel()").btn.btn-default Cancel
|
||||||
|
div(
|
||||||
|
fine-upload
|
||||||
|
endpoint="/project/{{ project_id }}/upload"
|
||||||
|
template-id="qq-file-uploader-template"
|
||||||
|
multiple="true"
|
||||||
|
auto-upload="false"
|
||||||
|
on-complete-callback="onComplete"
|
||||||
|
on-upload-callback="onUpload"
|
||||||
|
on-validate-batch="onValidateBatch"
|
||||||
|
on-error-callback="onError"
|
||||||
|
on-submit-callback="onSubmit"
|
||||||
|
on-cancel-callback="onCancel"
|
||||||
|
control="control"
|
||||||
|
params="{'folder_id': parent_folder_id}"
|
||||||
|
)
|
||||||
|
div(ng-if="type == 'project'", ng-controller="ProjectLinkedFileModalController")
|
||||||
|
div
|
||||||
|
form
|
||||||
|
.form-controls
|
||||||
|
label(for="project-select") Select a Project
|
||||||
|
span(ng-show="state.inFlight.projects")
|
||||||
|
|
|
||||||
|
i.fa.fa-spinner.fa-spin
|
||||||
|
select.form-control(
|
||||||
|
name="project-select"
|
||||||
|
ng-model="data.selectedProjectId"
|
||||||
|
ng-disabled="!shouldEnableProjectSelect()"
|
||||||
|
)
|
||||||
|
option(value="" disabled selected) - Please Select a Project
|
||||||
|
option(
|
||||||
|
ng-repeat="project in data.projects"
|
||||||
|
value="{{ project._id }}"
|
||||||
|
) {{ project.name }}
|
||||||
|
|
||||||
|
.form-controls.row-spaced-small(ng-if="!isOutputFilesMode")
|
||||||
|
label(for="project-entity-select") Select a File
|
||||||
|
span(ng-show="state.inFlight.entities")
|
||||||
|
|
|
||||||
|
i.fa.fa-spinner.fa-spin
|
||||||
|
select.form-control(
|
||||||
|
name="project-entity-select"
|
||||||
|
ng-model="data.selectedProjectEntity"
|
||||||
|
ng-disabled="!shouldEnableProjectEntitySelect()"
|
||||||
|
)
|
||||||
|
option(value="" disabled selected) - Please Select a File
|
||||||
|
option(
|
||||||
|
ng-repeat="projectEntity in data.projectEntities"
|
||||||
|
value="{{ projectEntity.path }}"
|
||||||
|
) {{ projectEntity.path.slice(1) }}
|
||||||
|
|
||||||
|
.form-controls.row-spaced-small(ng-if="isOutputFilesMode")
|
||||||
|
label(for="project-entity-select") Select an Output File
|
||||||
|
span(ng-show="state.inFlight.compile")
|
||||||
|
|
|
||||||
|
i.fa.fa-spinner.fa-spin
|
||||||
|
select.form-control(
|
||||||
|
name="project-output-file-select"
|
||||||
|
ng-model="data.selectedProjectOutputFile"
|
||||||
|
ng-disabled="!shouldEnableProjectOutputFileSelect()"
|
||||||
|
)
|
||||||
|
option(value="" disabled selected) - Please Select an Output File
|
||||||
|
option(
|
||||||
|
ng-repeat="outputFile in data.projectOutputFiles"
|
||||||
|
value="{{ outputFile.path }}"
|
||||||
|
) {{ outputFile.path }}
|
||||||
|
|
||||||
|
.form-controls.row-spaced-small
|
||||||
|
label(for="name") File Name In This Project
|
||||||
|
input.form-control(
|
||||||
|
type="text"
|
||||||
|
placeholder="example.tex"
|
||||||
|
required
|
||||||
|
ng-model="data.name"
|
||||||
|
name="name"
|
||||||
|
)
|
||||||
|
div.alert.alert-danger.row-spaced-small(ng-if="state.error") Error, something went wrong!
|
||||||
|
div(ng-if="type == 'url'", ng-controller="UrlLinkedFileModalController")
|
||||||
|
form(novalidate, name="newLinkedFileForm")
|
||||||
|
label(for="url") URL to fetch the file from
|
||||||
|
input.form-control(
|
||||||
|
type="text",
|
||||||
|
placeholder="www.example.com/my_file",
|
||||||
|
required,
|
||||||
|
ng-model="inputs.url",
|
||||||
|
focus-on="open",
|
||||||
|
on-enter="create()",
|
||||||
|
name="url"
|
||||||
|
)
|
||||||
|
.row-spaced.small
|
||||||
|
label(for="name") File name in this project
|
||||||
|
input.form-control(
|
||||||
|
type="text",
|
||||||
|
placeholder="my_file",
|
||||||
|
required,
|
||||||
|
ng-model="inputs.name",
|
||||||
|
ng-change="nameChangedByUser = true"
|
||||||
|
valid-file,
|
||||||
|
on-enter="create()",
|
||||||
|
name="name"
|
||||||
|
)
|
||||||
|
.text-danger.row-spaced-small(ng-show="newDocForm.name.$error.validFile")
|
||||||
|
| #{translate('files_cannot_include_invalid_characters')}
|
||||||
|
div.alert.alert-danger.row-spaced-small(ng-if="error")
|
||||||
|
div(ng-switch="error")
|
||||||
|
span(ng-switch-when="already exists") #{translate("file_already_exists")}
|
||||||
|
span(ng-switch-default) {{error}}
|
||||||
|
.modal-footer
|
||||||
|
button.btn.btn-default(
|
||||||
|
ng-disabled="state.inflight"
|
||||||
|
ng-click="cancel()"
|
||||||
|
) #{translate("cancel")}
|
||||||
|
button.btn.btn-primary(
|
||||||
|
ng-disabled="state.inflight || !state.valid"
|
||||||
|
ng-click="create()"
|
||||||
|
ng-hide="type == 'upload'"
|
||||||
|
)
|
||||||
|
span(ng-hide="state.inflight") #{translate("create")}
|
||||||
|
span(ng-show="state.inflight") #{translate("creating")}...
|
||||||
|
|
||||||
|
script(type="text/template", id="qq-file-uploader-template")
|
||||||
|
div.qq-uploader-selector
|
||||||
|
div(qq-hide-dropzone="").qq-upload-drop-area-selector.qq-upload-drop-area
|
||||||
|
span.qq-upload-drop-area-text-selector #{translate('drop_files_here_to_upload')}
|
||||||
|
div Drag here
|
||||||
|
div.row-spaced-small.small #{translate('or')}
|
||||||
|
div.row-spaced-small
|
||||||
|
div.qq-upload-button-selector.btn.btn-primary
|
||||||
|
| Select from your computer
|
||||||
|
span.qq-drop-processing-selector
|
||||||
|
span #{translate('processing')}
|
||||||
|
span.qq-drop-processing-spinner-selector
|
||||||
|
ul.qq-upload-list-selector
|
||||||
|
li
|
||||||
|
div.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"
|
||||||
|
)
|
||||||
|
span.qq-upload-file-selector.qq-upload-file
|
||||||
|
span.qq-upload-size-selector.qq-upload-size
|
||||||
|
a(type="button").qq-btn.qq-upload-cancel-selector.qq-upload-cancel #{translate('cancel')}
|
||||||
|
button(type="button").qq-btn.qq-upload-retry-selector.qq-upload-retry #{translate('retry')}
|
||||||
|
span(role="status").qq-upload-status-text-selector.qq-upload-status-text
|
||||||
|
|
@ -4,10 +4,12 @@ define [
|
||||||
App.controller "FileTreeController", ["$scope", "$modal", "ide", "$rootScope", ($scope, $modal, ide, $rootScope) ->
|
App.controller "FileTreeController", ["$scope", "$modal", "ide", "$rootScope", ($scope, $modal, ide, $rootScope) ->
|
||||||
$scope.openNewDocModal = () ->
|
$scope.openNewDocModal = () ->
|
||||||
$modal.open(
|
$modal.open(
|
||||||
templateUrl: "newDocModalTemplate"
|
templateUrl: "newFileModalTemplate"
|
||||||
controller: "NewDocModalController"
|
controller: "NewFileModalController"
|
||||||
|
size: 'lg'
|
||||||
resolve: {
|
resolve: {
|
||||||
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
|
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
|
||||||
|
type: () -> 'doc'
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
@ -22,52 +24,12 @@ define [
|
||||||
|
|
||||||
$scope.openUploadFileModal = () ->
|
$scope.openUploadFileModal = () ->
|
||||||
$modal.open(
|
$modal.open(
|
||||||
templateUrl: "uploadFileModalTemplate"
|
templateUrl: "newFileModalTemplate"
|
||||||
controller: "UploadFileModalController"
|
controller: "NewFileModalController"
|
||||||
scope: $scope
|
size: 'lg'
|
||||||
resolve: {
|
resolve: {
|
||||||
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
|
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
|
||||||
}
|
type: () -> 'upload'
|
||||||
)
|
|
||||||
|
|
||||||
$scope.openLinkedFileModal = window.openLinkedFileModal = () ->
|
|
||||||
unless 'url' in window.data.enabledLinkedFileTypes
|
|
||||||
console.warn("Url linked files are not enabled")
|
|
||||||
return
|
|
||||||
$modal.open(
|
|
||||||
templateUrl: "linkedFileModalTemplate"
|
|
||||||
controller: "LinkedFileModalController"
|
|
||||||
scope: $scope
|
|
||||||
resolve: {
|
|
||||||
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
$scope.openProjectLinkedFileModal = window.openProjectLinkedFileModal = () ->
|
|
||||||
unless 'project_file' in window.data.enabledLinkedFileTypes
|
|
||||||
console.warn("Project linked files are not enabled")
|
|
||||||
return
|
|
||||||
$modal.open(
|
|
||||||
templateUrl: "projectLinkedFileModalTemplate"
|
|
||||||
controller: "ProjectLinkedFileModalController"
|
|
||||||
scope: $scope
|
|
||||||
resolve: {
|
|
||||||
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
|
|
||||||
isOutputFilesMode: () -> false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
$scope.openProjectOutputLinkedFileModal = window.openProjectOutputLinkedFileModal = () ->
|
|
||||||
unless 'project_output_file' in window.data.enabledLinkedFileTypes
|
|
||||||
console.warn("Project linked output files are not enabled")
|
|
||||||
return
|
|
||||||
$modal.open(
|
|
||||||
templateUrl: "projectLinkedFileModalTemplate"
|
|
||||||
controller: "ProjectLinkedFileModalController"
|
|
||||||
scope: $scope
|
|
||||||
resolve: {
|
|
||||||
parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
|
|
||||||
isOutputFilesMode: () -> true
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
@ -82,42 +44,10 @@ define [
|
||||||
$scope.$broadcast "delete:selected"
|
$scope.$broadcast "delete:selected"
|
||||||
]
|
]
|
||||||
|
|
||||||
App.controller "NewDocModalController", [
|
|
||||||
"$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
|
|
||||||
($scope, ide, $modalInstance, $timeout, parent_folder) ->
|
|
||||||
$scope.inputs =
|
|
||||||
name: "name.tex"
|
|
||||||
$scope.state =
|
|
||||||
inflight: false
|
|
||||||
|
|
||||||
$modalInstance.opened.then () ->
|
|
||||||
$timeout () ->
|
|
||||||
$scope.$broadcast "open"
|
|
||||||
, 200
|
|
||||||
|
|
||||||
$scope.create = () ->
|
|
||||||
name = $scope.inputs.name
|
|
||||||
if !name? or name.length == 0
|
|
||||||
return
|
|
||||||
$scope.state.inflight = true
|
|
||||||
ide.fileTreeManager
|
|
||||||
.createDoc(name, parent_folder)
|
|
||||||
.then () ->
|
|
||||||
$scope.state.inflight = false
|
|
||||||
$modalInstance.close()
|
|
||||||
.catch (response)->
|
|
||||||
{ data } = response
|
|
||||||
$scope.error = data
|
|
||||||
$scope.state.inflight = false
|
|
||||||
|
|
||||||
$scope.cancel = () ->
|
|
||||||
$modalInstance.dismiss('cancel')
|
|
||||||
]
|
|
||||||
|
|
||||||
App.controller "NewFolderModalController", [
|
App.controller "NewFolderModalController", [
|
||||||
"$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
|
"$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
|
||||||
($scope, ide, $modalInstance, $timeout, parent_folder) ->
|
($scope, ide, $modalInstance, $timeout, parent_folder) ->
|
||||||
$scope.inputs =
|
$scope.inputs =
|
||||||
name: "name"
|
name: "name"
|
||||||
$scope.state =
|
$scope.state =
|
||||||
inflight: false
|
inflight: false
|
||||||
|
|
@ -133,10 +63,10 @@ define [
|
||||||
return
|
return
|
||||||
$scope.state.inflight = true
|
$scope.state.inflight = true
|
||||||
ide.fileTreeManager
|
ide.fileTreeManager
|
||||||
.createFolder(name, parent_folder)
|
.createFolder(name, $scope.parent_folder)
|
||||||
.then () ->
|
.then () ->
|
||||||
$scope.state.inflight = false
|
$scope.state.inflight = false
|
||||||
$modalInstance.close()
|
$modalInstance.dismiss('done')
|
||||||
.catch (response)->
|
.catch (response)->
|
||||||
{ data } = response
|
{ data } = response
|
||||||
$scope.error = data
|
$scope.error = data
|
||||||
|
|
@ -146,10 +76,60 @@ define [
|
||||||
$modalInstance.dismiss('cancel')
|
$modalInstance.dismiss('cancel')
|
||||||
]
|
]
|
||||||
|
|
||||||
|
App.controller "NewFileModalController", [
|
||||||
|
"$scope", "type", "parent_folder", "$modalInstance"
|
||||||
|
($scope, type, parent_folder, $modalInstance) ->
|
||||||
|
$scope.type = type
|
||||||
|
$scope.parent_folder = parent_folder
|
||||||
|
$scope.state = {
|
||||||
|
inflight: false
|
||||||
|
valid: true
|
||||||
|
}
|
||||||
|
$scope.cancel = () ->
|
||||||
|
$modalInstance.dismiss('cancel')
|
||||||
|
$scope.create = () ->
|
||||||
|
$scope.$broadcast 'create'
|
||||||
|
$scope.$on 'done', () ->
|
||||||
|
$modalInstance.dismiss('done')
|
||||||
|
]
|
||||||
|
|
||||||
|
App.controller "NewDocModalController", [
|
||||||
|
"$scope", "ide", "$timeout"
|
||||||
|
($scope, ide, $timeout) ->
|
||||||
|
$scope.inputs =
|
||||||
|
name: "name.tex"
|
||||||
|
|
||||||
|
validate = () ->
|
||||||
|
name = $scope.inputs.name
|
||||||
|
$scope.state.valid = (name? and name.length > 0)
|
||||||
|
$scope.$watch 'inputs.name', validate
|
||||||
|
|
||||||
|
$timeout () ->
|
||||||
|
$scope.$broadcast "open"
|
||||||
|
, 200
|
||||||
|
|
||||||
|
$scope.$on 'create', () ->
|
||||||
|
name = $scope.inputs.name
|
||||||
|
if !name? or name.length == 0
|
||||||
|
return
|
||||||
|
$scope.state.inflight = true
|
||||||
|
ide.fileTreeManager
|
||||||
|
.createDoc(name, $scope.parent_folder)
|
||||||
|
.then () ->
|
||||||
|
$scope.state.inflight = false
|
||||||
|
$scope.$emit 'done'
|
||||||
|
.catch (response)->
|
||||||
|
{ data } = response
|
||||||
|
$scope.error = data
|
||||||
|
$scope.state.inflight = false
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
App.controller "UploadFileModalController", [
|
App.controller "UploadFileModalController", [
|
||||||
"$scope", "$rootScope", "ide", "$modalInstance", "$timeout", "parent_folder", "$window"
|
"$scope", "$rootScope", "ide", "$timeout", "$window"
|
||||||
($scope, $rootScope, ide, $modalInstance, $timeout, parent_folder, $window) ->
|
($scope, $rootScope, ide, $timeout, $window) ->
|
||||||
$scope.parent_folder_id = parent_folder?.id
|
$scope.parent_folder_id = $scope.parent_folder?.id
|
||||||
|
$scope.project_id = ide.project_id
|
||||||
$scope.tooManyFiles = false
|
$scope.tooManyFiles = false
|
||||||
$scope.rateLimitHit = false
|
$scope.rateLimitHit = false
|
||||||
$scope.secondsToRedirect = 10
|
$scope.secondsToRedirect = 10
|
||||||
|
|
@ -177,7 +157,7 @@ define [
|
||||||
if response.success
|
if response.success
|
||||||
$rootScope.$broadcast 'file:upload:complete', response
|
$rootScope.$broadcast 'file:upload:complete', response
|
||||||
if uploadCount == 0 and response? and response.success
|
if uploadCount == 0 and response? and response.success
|
||||||
$modalInstance.close("done")
|
$scope.$emit 'done'
|
||||||
), 250
|
), 250
|
||||||
|
|
||||||
$scope.onValidateBatch = (files)->
|
$scope.onValidateBatch = (files)->
|
||||||
|
|
@ -225,14 +205,11 @@ define [
|
||||||
$scope.doUpload = () ->
|
$scope.doUpload = () ->
|
||||||
$scope.control?.q?.uploadStoredFiles()
|
$scope.control?.q?.uploadStoredFiles()
|
||||||
|
|
||||||
$scope.cancel = () ->
|
|
||||||
$modalInstance.dismiss('cancel')
|
|
||||||
]
|
]
|
||||||
|
|
||||||
App.controller "ProjectLinkedFileModalController", [
|
App.controller "ProjectLinkedFileModalController", [
|
||||||
"$scope", "ide", "$modalInstance", "$timeout", "parent_folder", "isOutputFilesMode",
|
"$scope", "ide", "$timeout",
|
||||||
($scope, ide, $modalInstance, $timeout, parent_folder, isOutputFilesMode) ->
|
($scope, ide, $timeout) ->
|
||||||
$scope.isOutputFilesMode = isOutputFilesMode
|
|
||||||
|
|
||||||
$scope.data =
|
$scope.data =
|
||||||
projects: null # or []
|
projects: null # or []
|
||||||
|
|
@ -242,13 +219,11 @@ define [
|
||||||
selectedProjectEntity: null
|
selectedProjectEntity: null
|
||||||
selectedProjectOutputFile: null
|
selectedProjectOutputFile: null
|
||||||
name: null
|
name: null
|
||||||
$scope.state =
|
$scope.state.inFlight =
|
||||||
inFlight:
|
projects: false
|
||||||
projects: false
|
entities: false
|
||||||
entities: false
|
compile: false
|
||||||
compile: false
|
$scope.state.error = false
|
||||||
create: false
|
|
||||||
error: false
|
|
||||||
|
|
||||||
$scope.$watch 'data.selectedProjectId', (newVal, oldVal) ->
|
$scope.$watch 'data.selectedProjectId', (newVal, oldVal) ->
|
||||||
return if !newVal
|
return if !newVal
|
||||||
|
|
@ -278,7 +253,8 @@ define [
|
||||||
_reset = (opts) ->
|
_reset = (opts) ->
|
||||||
isError = opts.err == true
|
isError = opts.err == true
|
||||||
inFlight = $scope.state.inFlight
|
inFlight = $scope.state.inFlight
|
||||||
inFlight.projects = inFlight.entities = inFlight.compile = inFlight.create = false
|
inFlight.projects = inFlight.entities = inFlight.compile = false
|
||||||
|
$scope.state.inflight = false
|
||||||
$scope.state.error = isError
|
$scope.state.error = isError
|
||||||
|
|
||||||
$scope.shouldEnableProjectSelect = () ->
|
$scope.shouldEnableProjectSelect = () ->
|
||||||
|
|
@ -293,10 +269,11 @@ define [
|
||||||
{ state, data } = $scope
|
{ state, data } = $scope
|
||||||
return !state.inFlight.projects && !state.inFlight.compile && data.projects && data.selectedProjectId
|
return !state.inFlight.projects && !state.inFlight.compile && data.projects && data.selectedProjectId
|
||||||
|
|
||||||
$scope.shouldEnableCreateButton = () ->
|
|
||||||
|
validate = () ->
|
||||||
state = $scope.state
|
state = $scope.state
|
||||||
data = $scope.data
|
data = $scope.data
|
||||||
return !state.inFlight.projects &&
|
$scope.state.valid = !state.inFlight.projects &&
|
||||||
!state.inFlight.entities &&
|
!state.inFlight.entities &&
|
||||||
data.projects &&
|
data.projects &&
|
||||||
data.selectedProjectId &&
|
data.selectedProjectId &&
|
||||||
|
|
@ -313,6 +290,8 @@ define [
|
||||||
)
|
)
|
||||||
) &&
|
) &&
|
||||||
data.name
|
data.name
|
||||||
|
$scope.$watch 'state', validate, true
|
||||||
|
$scope.$watch 'data', validate, true
|
||||||
|
|
||||||
$scope.getUserProjects = () ->
|
$scope.getUserProjects = () ->
|
||||||
_setInFlight('projects')
|
_setInFlight('projects')
|
||||||
|
|
@ -362,7 +341,7 @@ define [
|
||||||
$scope.getUserProjects()
|
$scope.getUserProjects()
|
||||||
$timeout($scope.init, 0)
|
$timeout($scope.init, 0)
|
||||||
|
|
||||||
$scope.create = () ->
|
$scope.$on 'create', () ->
|
||||||
projectId = $scope.data.selectedProjectId
|
projectId = $scope.data.selectedProjectId
|
||||||
name = $scope.data.name
|
name = $scope.data.name
|
||||||
if isOutputFilesMode
|
if isOutputFilesMode
|
||||||
|
|
@ -379,34 +358,39 @@ define [
|
||||||
}
|
}
|
||||||
_setInFlight('create')
|
_setInFlight('create')
|
||||||
ide.fileTreeManager
|
ide.fileTreeManager
|
||||||
.createLinkedFile(name, parent_folder, provider, payload)
|
.createLinkedFile(name, $scope.parent_folder, provider, payload)
|
||||||
.then () ->
|
.then () ->
|
||||||
_reset(err: false)
|
_reset(err: false)
|
||||||
$modalInstance.close()
|
$scope.$emit 'done'
|
||||||
.catch (response)->
|
.catch (response)->
|
||||||
{ data } = response
|
{ data } = response
|
||||||
_reset(err: true)
|
_reset(err: true)
|
||||||
|
|
||||||
$scope.cancel = () ->
|
|
||||||
$modalInstance.dismiss('cancel')
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
# TODO: rename all this to UrlLinkedFilModalController
|
App.controller "UrlLinkedFileModalController", [
|
||||||
App.controller "LinkedFileModalController", [
|
"$scope", "ide", "$timeout"
|
||||||
"$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
|
($scope, ide, $timeout) ->
|
||||||
($scope, ide, $modalInstance, $timeout, parent_folder) ->
|
|
||||||
$scope.inputs =
|
$scope.inputs =
|
||||||
name: ""
|
name: ""
|
||||||
url: ""
|
url: ""
|
||||||
$scope.nameChangedByUser = false
|
$scope.nameChangedByUser = false
|
||||||
$scope.state =
|
|
||||||
inflight: false
|
|
||||||
|
|
||||||
$modalInstance.opened.then () ->
|
$timeout () ->
|
||||||
$timeout () ->
|
$scope.$broadcast "open"
|
||||||
$scope.$broadcast "open"
|
, 200
|
||||||
, 200
|
|
||||||
|
validate = () ->
|
||||||
|
{name, url} = $scope.inputs
|
||||||
|
if !name? or name.length == 0
|
||||||
|
$scope.state.valid = false
|
||||||
|
else if !url? or url.length == 0
|
||||||
|
$scope.state.valid = false
|
||||||
|
else
|
||||||
|
$scope.state.valid = true
|
||||||
|
$scope.$watch 'inputs.name', validate
|
||||||
|
$scope.$watch 'inputs.url', validate
|
||||||
|
|
||||||
$scope.$watch "inputs.url", (url) ->
|
$scope.$watch "inputs.url", (url) ->
|
||||||
if url? and url != "" and !$scope.nameChangedByUser
|
if url? and url != "" and !$scope.nameChangedByUser
|
||||||
|
|
@ -415,7 +399,7 @@ define [
|
||||||
if parts.length > 1 # Wait for at one /
|
if parts.length > 1 # Wait for at one /
|
||||||
$scope.inputs.name = parts[0]
|
$scope.inputs.name = parts[0]
|
||||||
|
|
||||||
$scope.create = () ->
|
$scope.$on 'create', () ->
|
||||||
{name, url} = $scope.inputs
|
{name, url} = $scope.inputs
|
||||||
if !name? or name.length == 0
|
if !name? or name.length == 0
|
||||||
return
|
return
|
||||||
|
|
@ -423,15 +407,13 @@ define [
|
||||||
return
|
return
|
||||||
$scope.state.inflight = true
|
$scope.state.inflight = true
|
||||||
ide.fileTreeManager
|
ide.fileTreeManager
|
||||||
.createLinkedFile(name, parent_folder, 'url', {url})
|
.createLinkedFile(name, $scope.parent_folder, 'url', {url})
|
||||||
.then () ->
|
.then () ->
|
||||||
$scope.state.inflight = false
|
$scope.state.inflight = false
|
||||||
$modalInstance.close()
|
$scope.$emit 'done'
|
||||||
.catch (response)->
|
.catch (response)->
|
||||||
{ data } = response
|
{ data } = response
|
||||||
$scope.error = data
|
$scope.error = data
|
||||||
$scope.state.inflight = false
|
$scope.state.inflight = false
|
||||||
|
|
||||||
$scope.cancel = () ->
|
|
||||||
$modalInstance.dismiss('cancel')
|
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -261,3 +261,40 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-new-file {
|
||||||
|
padding: 0;
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
td {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-new-file--list {
|
||||||
|
background-color: @modal-footer-background-color;
|
||||||
|
width: 220px;
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
padding: (@line-height-computed / 4);
|
||||||
|
a {
|
||||||
|
color: @text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.active {
|
||||||
|
background-color: white;
|
||||||
|
a {
|
||||||
|
color: @link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-new-file--body {
|
||||||
|
padding: 20px;
|
||||||
|
padding-top: (@line-height-computed / 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-new-file--body-upload {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,13 +10,17 @@
|
||||||
}
|
}
|
||||||
.qq-uploader-selector {
|
.qq-uploader-selector {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.drag-here {
|
border: 1px dashed #666;
|
||||||
border: 1px dashed #666;
|
border-radius: 6px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
|
||||||
.help {
|
.help {
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
min-height: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
/*.qq-upload-button-selector {
|
/*.qq-upload-button-selector {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue