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

aside#file-tree(ng-controller="FileTreeController")
	.toolbar.toolbar-small(ng-if="permissions.write")
		a(
			href,
			ng-click="openNewDocModal()",
			tooltip-html-unsafe="New<br>File",
			tooltip-placement="bottom"
		)
			i.fa.fa-file
		a(
			href,
			ng-click="openNewFolderModal()",
			tooltip="New Folder",
			tooltip-placement="bottom"
		)
			i.fa.fa-folder
		a(
			href,
			ng-click="openUploadFileModal()",
			tooltip="Upload",
			tooltip-placement="bottom"
		)
			i.fa.fa-upload

		.toolbar-right
			a(
				href,
				ng-click="startRenamingSelected()",
				tooltip="Rename",
				tooltip-placement="bottom"
			)
				i.fa.fa-pencil
			a(
				href,
				ng-click="openDeleteModalForSelected()",
				tooltip="Delete",
				tooltip-placement="bottom",
				tooltip-append-to-body="true"
			)
				i.fa.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"
		)
			file-entity(
				entity="entity",
				permissions="permissions",
				ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']"
			)

		div(ng-show="deletedDocs.length > 0 && ui.view == 'track-changes'")
			h3 Deleted Files
			ul.list-unstyled.file-tree-list.deleted-docs
				li(
					ng-class="{ 'selected': entity.selected }",
					ng-repeat="entity in deletedDocs | orderBy:'name'",
					ng-controller="FileTreeEntityController"
				)
					.entity
						.entity-name(
							ng-click="select()"
						)
							//- 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 }",
		ng-controller="FileTreeEntityController"
	)
		.entity(ng-if="entity.type != 'folder'")
			.entity-name(
				ng-click="select()"
				ng-dblclick="permissions.write && startRenaming()"
				draggable="permissions.write"
				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.fa-file(ng-if="entity.type == 'doc'")
				i.fa.fa-fw.fa-image(ng-if="entity.type == 'file'")

				span(
					ng-hide="entity.renaming"
				)  {{ entity.name }}
				input(
					ng-if="permissions.write",
					ng-show="entity.renaming",
					ng-model="inputs.name",
					ng-blur="finishRenaming()",
					select-name-when="entity.renaming",
					on-enter="finishRenaming()"
				)

				span.dropdown(
					ng-show="entity.selected",
					ng-if="permissions.write"
				)
					a.dropdown-toggle(href)
						i.fa.fa-chevron-down

					ul.dropdown-menu.dropdown-menu-right
						li
							a(
								href="#"
								prevent-default="click"
								ng-click="startRenaming()"
							) Rename
						li
							a(
								href="#"
								prevent-default="click"
								ng-click="openDeleteModal()"
							) Delete

				div.dropdown.context-menu(
					id="context-menu-{{ entity.id }}",
					ng-if="permissions.write"
				)
					ul.dropdown-menu
						li
							a(
								href="#"
								prevent-default="click"
								stop-propagation="click"
								ng-click="startRenaming()"
							) Rename
						li
							a(
								href="#"
								prevent-default="click"
								stop-propagation="click"
								ng-click="openDeleteModal()"
							) Delete


		.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
			.entity-name(
				ng-click="select()"
				ng-dblclick="permissions.write && startRenaming()"
				draggable="permissions.write"
				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()"
					)

					span(
						ng-hide="entity.renaming"
					)  {{ entity.name }}
					input(
						ng-if="permissions.write",
						ng-show="entity.renaming",
						ng-model="inputs.name",
						ng-blur="finishRenaming()",
						select-name-when="entity.renaming",
						on-enter="finishRenaming()"
					)

					span.dropdown(
						ng-if="permissions.write"
						ng-show="entity.selected"
					)
						a.dropdown-toggle(href)
							i.fa.fa-chevron-down

						ul.dropdown-menu.dropdown-menu-right
							li
								a(
									href="#"
									prevent-default="click"
									ng-click="startRenaming()"
								) Rename
							li
								a(
									href="#"
									prevent-default="click"
									ng-click="openDeleteModal()"
								) Delete
							li.divider
							li
								a(
									href="#"
									prevent-default="click"
									ng-click="openNewDocModal()"
								) New File
							li
								a(
									href="#"
									prevent-default="click"
									ng-click="openNewFolderModal()"
								) New Folder
							li
								a(
									href="#"
									prevent-default="click"
									ng-click="openUploadFileModal()"
								) Upload File

					.dropdown.context-menu(
						ng-if="permissions.write"
						id="context-menu-{{ entity.id }}"
					)
						ul.dropdown-menu
							li
								a(
									href="#"
									prevent-default="click"
									stop-propagation="click"
									ng-click="startRenaming()"
								) Rename
							li
								a(
									href="#"
									prevent-default="click"
									stop-propagation="click"
									ng-click="openDeleteModal()"
								) Delete
							li.divider
							li
								a(
									href="#"
									prevent-default="click"
									stop-propagation="click"
									ng-click="openNewDocModal()"
								) New File
							li
								a(
									href="#"
									prevent-default="click"
									stop-propagation="click"
									ng-click="openNewFolderModal()"
								) New Folder
							li
								a(
									href="#"
									prevent-default="click"
									stop-propagation="click"
									ng-click="openUploadFileModal()"
								) 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 New File
	.modal-body
		form(novalidate, name="newDocForm")
			input.form-control(
				type="text",
				placeholder="File Name",
				required,
				ng-model="inputs.name",
				on-enter="create()",
				select-name-on="open"
			)
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) Cancel
		button.btn.btn-primary(
			ng-disabled="newDocForm.$invalid || state.inflight"
			ng-click="create()"
		)
			span(ng-hide="state.inflight") Create
			span(ng-show="state.inflight") Creating...

script(type='text/ng-template', id='newFolderModalTemplate')
	.modal-header
		h3 New File
	.modal-body
		form(novalidate, name="newFolderForm")
			input.form-control(
				type="text",
				placeholder="Folder Name",
				required,
				ng-model="inputs.name",
				on-enter="create()",
				select-name-on="open"
			)
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) Cancel
		button.btn.btn-primary(
			ng-disabled="newFolderForm.$invalid || state.inflight"
			ng-click="create()"
		)
			span(ng-hide="state.inflight") Create
			span(ng-show="state.inflight") Creating...

script(type="text/ng-template", id="uploadFileModalTemplate")
	.modal-header
		h3 Upload File(s)
	.modal-body(
		fine-upload
		endpoint="/project/{{ project_id }}/upload"
		waiting-for-response-text="Inserting file..."
		failed-upload-text="Upload failed, sorry :("
		upload-button-text="Select file(s)"
		drag-area-text="drag file(s)"
		hint-text="Hint: Press and hold the Control (Ctrl) key to select multiple files"
		multiple="true"
		on-complete-callback="onComplete"
		on-upload-callback="onUpload"
		params="{'folder_id': parent_folder_id}"
	)
		span Upload file(s)
	.modal-footer
		button.btn.btn-default(ng-click="cancel()") Cancel

script(type='text/ng-template', id='deleteEntityModalTemplate')
	.modal-header
		h3 Delete {{ entity.name }}
	.modal-body
		p Are you sure you want to permanently delete <strong>{{ entity.name }}</strong>?
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) Cancel
		button.btn.btn-danger(
			ng-disabled="state.inflight"
			ng-click="delete()"
		)
			span(ng-hide="state.inflight") Delete
			span(ng-show="state.inflight") Deleting...