Create unified new file modal with linked files

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

@@ -308,183 +308,10 @@ script(type='text/ng-template', id='entityListItemTemplate')
 					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')
 	.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",
@@ -496,8 +323,12 @@ script(type='text/ng-template', id='newFolderModalTemplate')
 				valid-file,
 				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
 		button.btn.btn-default(
 			ng-disabled="state.inflight"
@@ -510,70 +341,7 @@ script(type='text/ng-template', id='newFolderModalTemplate')
 			span(ng-hide="state.inflight") #{translate("create")}
 			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')
 	.modal-header

services/web/app/views/project/editor/new-file-modal.pug

@@ -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

services/web/public/coffee/ide/file-tree/controllers/FileTreeController.coffee

@@ -4,10 +4,12 @@ define [
 	App.controller "FileTreeController", ["$scope", "$modal", "ide", "$rootScope", ($scope, $modal, ide, $rootScope) ->
 		$scope.openNewDocModal = () ->
 			$modal.open(
-				templateUrl: "newDocModalTemplate"
+				templateUrl: "newFileModalTemplate"
-				controller:  "NewDocModalController"
+				controller:  "NewFileModalController"
+				size: 'lg'
 				resolve: {
 					parent_folder: () -> ide.fileTreeManager.getCurrentFolder()
+					type: () -> 'doc'
 				}
 			)
 
@@ -22,52 +24,12 @@ define [
 
 		$scope.openUploadFileModal = () ->
 			$modal.open(
-				templateUrl: "uploadFileModalTemplate"
+				templateUrl: "newFileModalTemplate"
-				controller:  "UploadFileModalController"
+				controller:  "NewFileModalController"
-				scope: $scope
+				size: 'lg'
 				resolve: {
 					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,38 +44,6 @@ define [
 			$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", [
 		"$scope", "ide", "$modalInstance", "$timeout", "parent_folder",
 		($scope,   ide,   $modalInstance,   $timeout,   parent_folder) ->
@@ -133,10 +63,10 @@ define [
 					return
 				$scope.state.inflight = true
 				ide.fileTreeManager
-					.createFolder(name, parent_folder)
+					.createFolder(name, $scope.parent_folder)
 					.then () ->
 						$scope.state.inflight = false
-						$modalInstance.close()
+						$modalInstance.dismiss('done')
 					.catch (response)->
 						{ data } = response
 						$scope.error = data
@@ -146,10 +76,60 @@ define [
 				$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", [
-		"$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.rateLimitHit = false
 			$scope.secondsToRedirect = 10
@@ -177,7 +157,7 @@ define [
 					if response.success
 						$rootScope.$broadcast 'file:upload:complete', response
 					if uploadCount == 0 and response? and response.success
-						$modalInstance.close("done")
+						$scope.$emit 'done'
 				), 250
 
 			$scope.onValidateBatch = (files)->
@@ -225,14 +205,11 @@ define [
 			$scope.doUpload = () ->
 				$scope.control?.q?.uploadStoredFiles()
 
-			$scope.cancel = () ->
-				$modalInstance.dismiss('cancel')
 	]
 
 	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 =
 				projects: null # or []
@@ -242,13 +219,11 @@ define [
 				selectedProjectEntity: null
 				selectedProjectOutputFile: 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) ->
 				return if !newVal
@@ -278,7 +253,8 @@ define [
 			_reset = (opts) ->
 				isError = opts.err == true
 				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.shouldEnableProjectSelect = () ->
@@ -293,10 +269,11 @@ define [
 				{ state, data } = $scope
 				return !state.inFlight.projects && !state.inFlight.compile && data.projects && data.selectedProjectId
 
-			$scope.shouldEnableCreateButton = () ->
+
+			validate = () ->
 				state = $scope.state
 				data = $scope.data
-				return !state.inFlight.projects &&
+				$scope.state.valid = !state.inFlight.projects &&
 					!state.inFlight.entities &&
 					data.projects &&
 					data.selectedProjectId &&
@@ -313,6 +290,8 @@ define [
 						)
 					) &&
 					data.name
+			$scope.$watch 'state', validate, true
+			$scope.$watch 'data', validate, true
 
 			$scope.getUserProjects = () ->
 				_setInFlight('projects')
@@ -362,7 +341,7 @@ define [
 				$scope.getUserProjects()
 			$timeout($scope.init, 0)
 
-			$scope.create = () ->
+			$scope.$on 'create', () ->
 				projectId = $scope.data.selectedProjectId
 				name = $scope.data.name
 				if isOutputFilesMode
@@ -379,34 +358,39 @@ define [
 					}
 				_setInFlight('create')
 				ide.fileTreeManager
-					.createLinkedFile(name, parent_folder, provider, payload)
+					.createLinkedFile(name, $scope.parent_folder, provider, payload)
 					.then () ->
 						_reset(err: false)
-						$modalInstance.close()
+						$scope.$emit 'done'
 					.catch (response)->
 						{ data } = response
 						_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 =
 				name: ""
 				url: ""
 			$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) ->
 				if url? and url != "" and !$scope.nameChangedByUser
@@ -415,7 +399,7 @@ define [
 					if parts.length > 1 # Wait for at one /
 						$scope.inputs.name = parts[0]
 
-			$scope.create = () ->
+			$scope.$on 'create', () ->
 				{name, url} = $scope.inputs
 				if !name? or name.length == 0
 					return
@@ -423,15 +407,13 @@ define [
 					return
 				$scope.state.inflight = true
 				ide.fileTreeManager
-					.createLinkedFile(name, parent_folder, 'url', {url})
+					.createLinkedFile(name, $scope.parent_folder, 'url', {url})
 					.then () ->
 						$scope.state.inflight = false
-						$modalInstance.close()
+						$scope.$emit 'done'
 					.catch (response)->
 						{ data } = response
 						$scope.error = data
 						$scope.state.inflight = false
 
-			$scope.cancel = () ->
-				$modalInstance.dismiss('cancel')
 	]

services/web/public/stylesheets/app/editor/file-tree.less

@@ -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;
+	}

services/web/public/stylesheets/components/fineupload.less

@@ -10,13 +10,17 @@
 }
 .qq-uploader-selector {
 	text-align: center;
-	.drag-here {
+	border: 1px dashed #666;
-		border: 1px dashed #666;
+    border-radius: 6px;
-		vertical-align: middle;
+	vertical-align: middle;
-	}
 	.help {
 		margin-top: 6px;
 	}
+    min-height: 200px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 /*.qq-upload-button-selector {
     display: block;