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

aside.file-tree(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }", ng-show="ui.view != 'history' || !history.isV2").full-size
	.toolbar.toolbar-filetree(ng-if="permissions.write")
		a(
			href,
			ng-click="openNewDocModal()",
			tooltip-html="'"+translate('new_file').replace(' ', '<br>')+"'",
			tooltip-placement="bottom"
		)
			i.fa.fa-fw.fa-file
		a(
			href,
			ng-click="openNewFolderModal()",
			tooltip-html="'"+translate('new_folder').replace(' ', '<br>')+"'",
			tooltip-placement="bottom"
		)
			i.fa.fa-fw.fa-folder
		a(
			href,
			ng-click="openUploadFileModal()",
			tooltip=translate('upload'),
			tooltip-placement="bottom"
		)
			i.fa.fa-fw.fa-upload

		.toolbar-right
			a(
				href,
				ng-click="startRenamingSelected()",
				tooltip=translate('rename'),
				tooltip-placement="bottom",
				ng-show="multiSelectedCount == 0"
			)
				i.fa.fa-fw.fa-pencil
			a(
				href,
				ng-click="openDeleteModalForSelected()",
				tooltip=translate('delete'),
				tooltip-placement="bottom",
				tooltip-append-to-body="true"
			)
				i.fa.fa-fw.fa-trash-o


	.file-tree-inner(
		ng-if="rootFolder",
		ng-controller="FileTreeRootFolderController",
		ng-class="{ 'no-toolbar': !permissions.write }"
	)
		ul.list-unstyled.file-tree-list(
			droppable="permissions.write"
			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

			file-entity(
				entity="entity",
				permissions="permissions",
				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

						span  {{ entity.name }}

script(type='text/ng-template', id='entityListItemTemplate')
	li(
		ng-class="{ 'selected': entity.selected, 'multi-selected': entity.multiSelected }",
		ng-controller="FileTreeEntityController"
	)
		.entity(ng-if="entity.type != 'folder'")
			.entity-name(
				ng-click="select($event)"
				ng-dblclick="permissions.write && startRenaming()"
				draggable="permissions.write"
				draggable-helper="draggableHelper"
				context-menu
				data-target="context-menu-{{ entity.id }}"
				context-menu-container="body"
				context-menu-disabled="!permissions.write"
			)
				//- Just a spacer to align with folders
				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 }}
				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()"
						valid-file
					)

				span.dropdown.entity-menu-toggle(
					dropdown,
					ng-if="permissions.write"
				)
					a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
						i.fa.fa-chevron-down

					ul.dropdown-menu.dropdown-menu-right
						li
							a(
								href
								ng-click="startRenaming()"
								right-click="startRenaming()"
								ng-show="!entity.multiSelected"
							) #{translate("rename")}
						li
							a(
								href
								ng-click="openDeleteModal()"
								right-click="openDeleteModal()"
								stop-propagation="click"
							) #{translate("delete")}

				div.dropdown.context-menu(
					id="context-menu-{{ entity.id }}",
					ng-if="permissions.write"
				)
					ul.dropdown-menu
						li
							a(
								href
								ng-click="startRenaming()"
								right-click="startRenaming()"
								ng-show="!entity.multiSelected"
							) #{translate("rename")}
						li
							a(
								href
								ng-click="openDeleteModal()"
								right-click="openDeleteModal()"
								stop-propagation="click"
							) #{translate("delete")}


		.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"
				accept=".entity-name"
				on-drop-callback="onDrop"
			)
				div(
					context-menu
					data-target="context-menu-{{ entity.id }}"
					context-menu-container="body"
					context-menu-disabled="!permissions.write"
				)
					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)"
					)

					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()"
							valid-file
						)

					span.dropdown.entity-menu-toggle(
						dropdown,
						ng-if="permissions.write"
					)
						a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click")
							i.fa.fa-chevron-down

						ul.dropdown-menu.dropdown-menu-right
							li
								a(
									href
									ng-click="startRenaming()"
									right-click="startRenaming()"
									ng-show="!entity.multiSelected"
								) #{translate("rename")}
							li
								a(
									href
									ng-click="openDeleteModal()"
									right-click="openDeleteModal()"
									stop-propagation="click"
								) #{translate("delete")}
							li.divider
							li
								a(
									href
									ng-click="openNewDocModal()"
									right-click="openNewDocModal()"
								) #{translate("new_file")}
							li
								a(
									href
									ng-click="openNewFolderModal()"
									right-click="openNewFolderModal()"
								) #{translate("new_folder")}
							li
								a(
									href
									ng-click="openUploadFileModal()"
									right-click="openUploadFileModal()"
								) #{translate("upload_file")}

					.dropdown.context-menu(
						ng-if="permissions.write"
						id="context-menu-{{ entity.id }}"
					)
						ul.dropdown-menu
							li
								a(
									href
									ng-click="startRenaming()"
									right-click="startRenaming()"
									ng-show="!entity.multiSelected"
								) #{translate("rename")}
							li
								a(
									href
									ng-click="openDeleteModal()"
									right-click="openDeleteModal()"
									stop-propagation="click"
								) #{translate("delete")}
							li.divider
							li
								a(
									href
									ng-click="openNewDocModal()"
									right-click="openNewDocModal()"
								) #{translate("new_file")} 
							li
								a(
									href
									ng-click="openNewFolderModal()"
									right-click="openNewFolderModal()"
								) #{translate("new_folder")}
							li
								a(
									href
									ng-click="openUploadFileModal()"
									right-click="openUploadFileModal()"
								) #{translate("upload_file")}

			ul.list-unstyled(
				ng-if="entity.type == 'folder'"
				ng-show="expanded"
				droppable="permissions.write"
				accept=".entity-name"
				on-drop-callback="onDrop"
			)
				file-entity(
					entity="child",
					permissions="permissions",
					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 New file from Project

	.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")
						| &nbsp;
						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
					label(for="project-entity-select") Select a File
					span(ng-show="state.inFlight.entities")
						| &nbsp;
						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) }}
				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
			| &nbsp;
		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')
	.modal-header
		h3 #{translate("new_folder")}
	.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")
			input.form-control(
				type="text",
				placeholder="Folder Name",
				required,
				ng-model="inputs.name",
				on-enter="create()",
				select-name-on="open",
				valid-file,
				name="name"
			)
			.text-danger.row-spaced-small(ng-show="newFolderForm.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="newFolderForm.$invalid || state.inflight"
			ng-click="create()"
		)
			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.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
				| &nbsp;
				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')
	.modal-header
		h3 #{translate("delete")} {{ entity.name }}
	.modal-body
		p !{translate("sure_you_want_to_delete")}
		ul
			li(ng-repeat="entity in entities") {{entity.name}}
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) #{translate("cancel")}
		button.btn.btn-danger(
			ng-disabled="state.inflight"
			ng-click="delete()"
		)
			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()"
		) #{translate('ok')}