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

aside#file-tree.ui-layout-west(ng-controller="FileTreeController")
	.toolbar.toolbar-small
		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

	ul.list-unstyled.file-tree-list
		file-entity(
			entity="entity",
			ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, '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="startRenaming()"
				draggable
			)
				//- 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-show="entity.renaming",
					ng-model="inputs.name",
					ng-blur="finishRenaming()",
					select-name-when="entity.renaming",
					on-enter="finishRenaming()"
				)

				span.dropdown(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


		.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
			.entity-name(
				ng-click="select()"
				ng-dblclick="startRenaming()"
				draggable
				droppable
				on-drop-callback="onDrop"
			)
				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-show="entity.renaming",
					ng-model="inputs.name",
					ng-blur="finishRenaming()",
					select-name-when="entity.renaming",
					on-enter="finishRenaming()"
				)

				span.dropdown(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


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