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

517 lines
15 KiB
Text
Raw Normal View History

aside.file-tree(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }", ng-show="ui.view != 'history' || !history.isV2").full-size
2017-11-23 10:21:06 -05:00
.toolbar.toolbar-filetree(ng-if="permissions.write")
2014-06-22 12:32:15 -04:00
a(
href,
ng-click="openNewDocModal()",
2017-01-31 09:57:22 -05:00
tooltip-html="'"+translate('new_file').replace(' ', '<br>')+"'",
2014-06-22 12:32:15 -04:00
tooltip-placement="bottom"
)
2018-02-08 09:41:39 -05:00
i.fa.fa-fw.fa-file
2014-06-22 12:32:15 -04:00
a(
href,
ng-click="openNewFolderModal()",
2017-01-31 09:57:22 -05:00
tooltip-html="'"+translate('new_folder').replace(' ', '<br>')+"'",
2014-06-22 12:32:15 -04:00
tooltip-placement="bottom"
)
2018-02-08 09:41:39 -05:00
i.fa.fa-fw.fa-folder
2014-06-22 12:32:15 -04:00
a(
href,
ng-click="openUploadFileModal()",
2017-01-31 09:57:22 -05:00
tooltip=translate('upload'),
2014-06-22 12:32:15 -04:00
tooltip-placement="bottom"
)
2018-02-08 09:41:39 -05:00
i.fa.fa-fw.fa-upload
2014-06-22 12:32:15 -04:00
.toolbar-right
2014-06-22 15:08:56 -04:00
a(
href,
ng-click="startRenamingSelected()",
2017-01-31 09:57:22 -05:00
tooltip=translate('rename'),
tooltip-placement="bottom",
ng-show="multiSelectedCount == 0"
2014-06-22 15:08:56 -04:00
)
2018-02-08 09:41:39 -05:00
i.fa.fa-fw.fa-pencil
2014-06-22 15:49:58 -04:00
a(
href,
ng-click="openDeleteModalForSelected()",
2017-01-31 09:57:22 -05:00
tooltip=translate('delete'),
2014-06-22 15:49:58 -04:00
tooltip-placement="bottom",
tooltip-append-to-body="true"
)
2018-02-08 09:41:39 -05:00
i.fa.fa-fw.fa-trash-o
2014-06-22 12:32:15 -04:00
.file-tree-inner(
2014-07-11 08:55:14 -04:00
ng-if="rootFolder",
ng-controller="FileTreeRootFolderController",
ng-class="{ 'no-toolbar': !permissions.write }"
)
2014-07-03 06:01:41 -04:00
ul.list-unstyled.file-tree-list(
droppable="permissions.write"
2014-07-03 06:01:41 -04:00
accept=".entity-name"
on-drop-callback="onDrop"
)
li(
ng-show="ui.pdfLayout == 'flat' && (ui.view == 'editor' || ui.view == 'pdf' || ui.view == 'file')"
ng-class="{ 'selected': ui.view == 'pdf' }"
ng-controller="PdfViewToggleController"
)
.entity
.entity-name(
ng-click="togglePdfView()"
)
i.fa.fa-fw.toggle
i.fa.fa-fw.fa-file-pdf-o
| PDF
2014-06-27 12:11:26 -04:00
file-entity(
entity="entity",
permissions="permissions",
2014-06-27 12:11:26 -04:00
ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']"
)
li(ng-show="deletedDocs.length > 0 && ui.view == 'history'")
h3 #{translate("deleted_files")}
li(
ng-class="{ 'selected': entity.selected }",
ng-repeat="entity in deletedDocs | orderBy:'name'",
ng-controller="FileTreeEntityController",
ng-show="ui.view == 'history'"
)
.entity
.entity-name(
ng-click="select($event)"
)
//- Just a spacer to align with folders
i.fa.fa-fw.toggle
i.fa.fa-fw.fa-file
2014-06-22 12:32:15 -04:00
span {{ entity.name }}
2014-06-22 12:32:15 -04:00
script(type='text/ng-template', id='entityListItemTemplate')
li(
ng-class="{ 'selected': entity.selected, 'multi-selected': entity.multiSelected }",
2014-06-22 12:32:15 -04:00
ng-controller="FileTreeEntityController"
)
2014-06-23 05:57:31 -04:00
.entity(ng-if="entity.type != 'folder'")
2014-06-22 15:08:56 -04:00
.entity-name(
ng-click="select($event)"
ng-dblclick="permissions.write && startRenaming()"
draggable="permissions.write"
draggable-helper="draggableHelper"
2014-06-23 12:25:45 -04:00
context-menu
data-target="context-menu-{{ entity.id }}"
context-menu-container="body"
context-menu-disabled="!permissions.write"
2014-06-22 15:08:56 -04:00
)
2014-06-22 12:32:15 -04:00
//- Just a spacer to align with folders
2014-06-22 15:21:31 -04:00
i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'")
2014-06-23 05:57:31 -04:00
i.fa.fa-fw(ng-if="entity.type != 'folder'", ng-class="'fa-' + iconTypeFromName(entity.name)")
2018-02-20 05:37:55 -05:00
i.fa.fa-external-link-square.fa-rotate-180.linked-file-highlight(
ng-if="entity.linkedFileData.provider"
)
2014-06-23 05:57:31 -04:00
span(
ng-hide="entity.renaming"
) {{ entity.renamingToName || entity.name }}
span.rename-input
input(
ng-if="permissions.write",
ng-show="entity.renaming",
ng-model="inputs.name",
ng-blur="finishRenaming()",
select-name-when="entity.renaming",
on-enter="finishRenaming()"
2018-02-05 11:56:52 -05:00
valid-file
)
2014-06-23 05:57:31 -04:00
span.dropdown.entity-menu-toggle(
dropdown,
ng-if="permissions.write"
)
a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
2014-06-23 07:37:05 -04:00
i.fa.fa-chevron-down
ul.dropdown-menu.dropdown-menu-right
li
a(
href
2014-06-23 07:37:05 -04:00
ng-click="startRenaming()"
right-click="startRenaming()"
ng-show="!entity.multiSelected"
2014-07-31 12:07:43 -04:00
) #{translate("rename")}
2014-06-23 07:37:05 -04:00
li
a(
href
2014-06-23 07:37:05 -04:00
ng-click="openDeleteModal()"
right-click="openDeleteModal()"
stop-propagation="click"
2014-07-31 12:07:43 -04:00
) #{translate("delete")}
2014-06-23 07:37:05 -04:00
div.dropdown.context-menu(
id="context-menu-{{ entity.id }}",
ng-if="permissions.write"
)
2014-06-23 12:25:45 -04:00
ul.dropdown-menu
2014-06-23 07:37:05 -04:00
li
a(
href
2014-06-23 07:37:05 -04:00
ng-click="startRenaming()"
right-click="startRenaming()"
ng-show="!entity.multiSelected"
2014-07-31 12:07:43 -04:00
) #{translate("rename")}
2014-06-23 07:37:05 -04:00
li
a(
href
2014-06-23 07:37:05 -04:00
ng-click="openDeleteModal()"
right-click="openDeleteModal()"
stop-propagation="click"
2014-07-31 12:07:43 -04:00
) #{translate("delete")}
2014-06-23 07:37:05 -04:00
2014-06-23 12:25:45 -04:00
.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
.entity-name(
ng-click="select($event)"
ng-dblclick="permissions.write && startRenaming()"
draggable="permissions.write"
draggable-helper="draggableHelper"
droppable="permissions.write"
2014-06-27 10:55:08 -04:00
accept=".entity-name"
2014-06-23 12:25:45 -04:00
on-drop-callback="onDrop"
)
div(
context-menu
data-target="context-menu-{{ entity.id }}"
context-menu-container="body"
context-menu-disabled="!permissions.write"
2014-06-23 12:25:45 -04:00
)
i.fa.fa-fw.toggle(
ng-if="entity.type == 'folder'"
ng-class="{'fa-chevron-right': !expanded, 'fa-chevron-down': expanded}"
ng-click="toggleExpanded()"
)
i.fa.fa-fw(
ng-if="entity.type == 'folder'"
ng-class="{\
'fa-folder': !expanded, \
'fa-folder-open': expanded \
}"
ng-click="select($event)"
2014-06-23 12:25:45 -04:00
)
span(
ng-hide="entity.renaming"
) {{ entity.renamingToName || entity.name }}
span.rename-input
input(
ng-if="permissions.write",
ng-show="entity.renaming",
ng-model="inputs.name",
ng-blur="finishRenaming()",
select-name-when="entity.renaming",
on-enter="finishRenaming()"
2018-02-05 11:56:52 -05:00
valid-file
)
2014-06-23 12:25:45 -04:00
span.dropdown.entity-menu-toggle(
dropdown,
ng-if="permissions.write"
)
a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
2014-06-23 12:25:45 -04:00
i.fa.fa-chevron-down
ul.dropdown-menu.dropdown-menu-right
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="startRenaming()"
right-click="startRenaming()"
ng-show="!entity.multiSelected"
2014-07-31 12:07:43 -04:00
) #{translate("rename")}
2014-06-23 12:25:45 -04:00
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openDeleteModal()"
right-click="openDeleteModal()"
stop-propagation="click"
2014-07-31 12:07:43 -04:00
) #{translate("delete")}
2014-06-23 12:25:45 -04:00
li.divider
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openNewDocModal()"
right-click="openNewDocModal()"
2014-07-31 12:07:43 -04:00
) #{translate("new_file")}
2014-06-23 12:25:45 -04:00
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openNewFolderModal()"
right-click="openNewFolderModal()"
2014-07-31 12:07:43 -04:00
) #{translate("new_folder")}
2014-06-23 12:25:45 -04:00
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openUploadFileModal()"
right-click="openUploadFileModal()"
2014-07-31 12:07:43 -04:00
) #{translate("upload_file")}
2014-06-23 12:25:45 -04:00
.dropdown.context-menu(
ng-if="permissions.write"
id="context-menu-{{ entity.id }}"
)
2014-06-23 12:25:45 -04:00
ul.dropdown-menu
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="startRenaming()"
right-click="startRenaming()"
ng-show="!entity.multiSelected"
2014-07-31 12:07:43 -04:00
) #{translate("rename")}
2014-06-23 12:25:45 -04:00
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openDeleteModal()"
right-click="openDeleteModal()"
stop-propagation="click"
2014-07-31 12:07:43 -04:00
) #{translate("delete")}
2014-06-23 12:25:45 -04:00
li.divider
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openNewDocModal()"
right-click="openNewDocModal()"
) #{translate("new_file")}
2014-06-23 12:25:45 -04:00
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openNewFolderModal()"
right-click="openNewFolderModal()"
2014-07-31 12:07:43 -04:00
) #{translate("new_folder")}
2014-06-23 12:25:45 -04:00
li
a(
href
2014-06-23 12:25:45 -04:00
ng-click="openUploadFileModal()"
right-click="openUploadFileModal()"
2014-07-31 12:07:43 -04:00
) #{translate("upload_file")}
2014-06-23 12:25:45 -04:00
2014-06-22 15:21:31 -04:00
ul.list-unstyled(
ng-if="entity.type == 'folder'"
ng-show="expanded"
droppable="permissions.write"
2014-06-27 10:55:08 -04:00
accept=".entity-name"
2014-06-23 05:57:31 -04:00
on-drop-callback="onDrop"
2014-06-22 15:21:31 -04:00
)
2014-06-23 05:57:31 -04:00
file-entity(
entity="child",
permissions="permissions",
2014-06-23 05:57:31 -04:00
ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
)
2014-07-11 08:55:14 -04:00
2014-06-22 12:32:15 -04:00
script(type='text/ng-template', id='newDocModalTemplate')
.modal-header
2014-07-31 12:07:43 -04:00
h3 #{translate("new_file")}
2014-06-22 12:32:15 -04:00
.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}}
2014-06-22 12:32:15 -04:00
input.form-control(
type="text",
placeholder="File Name",
required,
ng-model="inputs.name",
2014-06-22 15:08:56 -04:00
on-enter="create()",
select-name-on="open",
2018-02-05 11:56:52 -05:00
valid-file,
name="name"
2014-06-22 12:32:15 -04:00
)
2018-02-05 11:56:52 -05:00
.text-danger.row-spaced-small(ng-show="newDocForm.name.$error.validFile")
| #{translate('files_cannot_include_invalid_characters')}
2014-06-22 12:32:15 -04:00
.modal-footer
button.btn.btn-default(
ng-disabled="state.inflight"
ng-click="cancel()"
2014-07-31 12:07:43 -04:00
) #{translate("cancel")}
2014-06-22 12:32:15 -04:00
button.btn.btn-primary(
ng-disabled="newDocForm.$invalid || state.inflight"
ng-click="create()"
)
2014-07-31 12:07:43 -04:00
span(ng-hide="state.inflight") #{translate("create")}
span(ng-show="state.inflight") #{translate("creating")}...
2014-06-22 12:32:15 -04:00
2017-11-20 09:43:13 -05:00
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")}...
2014-06-22 12:32:15 -04:00
script(type='text/ng-template', id='newFolderModalTemplate')
.modal-header
2014-07-31 12:07:43 -04:00
h3 #{translate("new_folder")}
2014-06-22 12:32:15 -04:00
.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}}
2014-06-22 12:32:15 -04:00
form(novalidate, name="newFolderForm")
input.form-control(
type="text",
placeholder="Folder Name",
required,
ng-model="inputs.name",
2014-06-22 15:08:56 -04:00
on-enter="create()",
select-name-on="open",
2018-02-05 11:56:52 -05:00
valid-file,
name="name"
2014-06-22 12:32:15 -04:00
)
2018-02-05 11:56:52 -05:00
.text-danger.row-spaced-small(ng-show="newFolderForm.name.$error.validFile")
| #{translate('files_cannot_include_invalid_characters')}
2014-06-22 12:32:15 -04:00
.modal-footer
button.btn.btn-default(
ng-disabled="state.inflight"
ng-click="cancel()"
) #{translate("cancel")}
2014-06-22 12:32:15 -04:00
button.btn.btn-primary(
ng-disabled="newFolderForm.$invalid || state.inflight"
ng-click="create()"
)
2014-07-31 12:07:43 -04:00
span(ng-hide="state.inflight") #{translate("create")}
span(ng-show="state.inflight") #{translate("creating")}...
2014-06-22 12:32:15 -04:00
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
2014-06-22 12:32:15 -04:00
script(type="text/ng-template", id="uploadFileModalTemplate")
.modal-header
2014-07-31 12:07:43 -04:00
h3 #{translate("upload_files")}
2015-12-08 03:50:11 -05:00
.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
| &nbsp;
a(href, ng-click="cancel()").btn.btn-default Cancel
2014-06-22 12:32:15 -04:00
.modal-body(
fine-upload
endpoint="/project/{{ project_id }}/upload"
template-id="qq-file-uploader-template"
2014-06-22 12:32:15 -04:00
multiple="true"
auto-upload="false"
2014-06-22 12:32:15 -04:00
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"
2014-06-22 12:32:15 -04:00
params="{'folder_id': parent_folder_id}"
)
.modal-footer
2014-07-31 12:07:43 -04:00
button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
2014-06-22 15:49:58 -04:00
2017-11-20 09:43:13 -05:00
2014-06-22 15:49:58 -04:00
script(type='text/ng-template', id='deleteEntityModalTemplate')
.modal-header
2014-07-31 12:07:43 -04:00
h3 #{translate("delete")} {{ entity.name }}
2014-06-22 15:49:58 -04:00
.modal-body
2014-08-11 03:01:39 -04:00
p !{translate("sure_you_want_to_delete")}
ul
li(ng-repeat="entity in entities") {{entity.name}}
2014-06-22 15:49:58 -04:00
.modal-footer
button.btn.btn-default(
ng-disabled="state.inflight"
ng-click="cancel()"
2014-07-31 12:07:43 -04:00
) #{translate("cancel")}
2014-06-22 15:49:58 -04:00
button.btn.btn-danger(
ng-disabled="state.inflight"
ng-click="delete()"
)
2014-07-31 12:07:43 -04:00
span(ng-hide="state.inflight") #{translate("delete")}
span(ng-show="state.inflight") #{translate("deleting")}...
script(type='text/ng-template', id='invalidFileNameModalTemplate')
.modal-header
h3 #{translate('invalid_file_name')}
.modal-body
p #{translate('files_cannot_include_invalid_characters')}
.modal-footer
button.btn.btn-default(
ng-click="$close()"
2017-01-31 09:57:22 -05:00
) #{translate('ok')}