Use template elements for file uploaders, and i18n

services/web/app/views/project/editor.pug

@@ -169,5 +169,3 @@ block requirejs
 		data-ace-base=buildJsPath(lib('ace'), {fingerprint:false}),
 		src=buildJsPath('libs/require.js')
 	)
-
-	

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

@@ -364,6 +364,38 @@ script(type='text/ng-template', id='newFolderModalTemplate')
 			span(ng-hide="state.inflight") #{translate("create")}
 			span(ng-show="state.inflight") #{translate("creating")}...
 
+
+script(type="text/template", id="qq-file-uploader-template").
+	<div class="qq-uploader-selector">
+		<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
+			<span class="qq-upload-drop-area-text-selector">#{translate('drop_files_here_to_upload')}</span>
+		</div>
+		<div class="qq-upload-button-selector btn btn-primary btn-lg">
+			<div>#{translate('upload')}</div>
+		</div>
+		<span class="or btn-lg"> #{translate('or')} </span>
+		<span class="drag-here btn-lg">#{translate('drag_here')}</span>
+		<span class="qq-drop-processing-selector"><span>#{translate('processing')}</span><span class="qq-drop-processing-spinner-selector"></span></span>
+		<ul class="qq-upload-list-selector">
+			<li>
+				<div class="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">
+					</div>
+				</div>
+				<span class="qq-upload-file-selector qq-upload-file"></span>
+				<span class="qq-upload-size-selector qq-upload-size"></span>
+				<a type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">#{translate('cancel')}</a>
+				<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">#{translate('retry')}</button>
+				<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
+			</li>
+		</ul>
+	</div>
+
 script(type="text/ng-template", id="uploadFileModalTemplate")
 	.modal-header
 		h3 #{translate("upload_files")}
@@ -385,6 +417,7 @@ script(type="text/ng-template", id="uploadFileModalTemplate")
 	.modal-body(
 		fine-upload
 		endpoint="/project/{{ project_id }}/upload"
+		template-id="qq-file-uploader-template"
 		multiple="true"
 		auto-upload="false"
 		on-complete-callback="onComplete"

services/web/app/views/project/list.pug

@@ -6,6 +6,7 @@ block content
 	script#data(type="application/json").
 		!{JSON.stringify({ projects: projects, tags: tags, notifications: notifications }).replace(/\//g, '\\/')}
 
+
 	script(type="text/javascript").
 		window.data = JSON.parse($("#data").text());
 		window.algolia = {

services/web/app/views/project/list/modals.pug

@@ -213,6 +213,37 @@ script(type='text/ng-template', id='deleteProjectsModalTemplate')
 			ng-click="delete()"
 		) #{translate("confirm")}
 
+script(type="text/template", id="qq-project-uploader-template").
+	<div class="qq-uploader-selector">
+		<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
+			<span class="qq-upload-drop-area-text-selector">#{translate('drop_files_here_to_upload')}</span>
+		</div>
+		<div class="qq-upload-button-selector btn btn-primary btn-lg">
+			<div>#{translate('select_a_zip_file')}</div>
+		</div>
+		<span class="or btn-lg"> #{translate('or')} </span>
+		<span class="drag-here btn-lg">#{translate('drag_a_zip_file')}</span>
+		<span class="qq-drop-processing-selector"><span>#{translate('creating_project')}</span><span class="qq-drop-processing-spinner-selector"></span></span>
+		<ul class="qq-upload-list-selector">
+			<li>
+				<div class="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">
+					</div>
+				</div>
+				<span class="qq-upload-file-selector qq-upload-file"></span>
+				<span class="qq-upload-size-selector qq-upload-size"></span>
+				<a type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">#{translate('cancel')}</a>
+				<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">#{translate('retry')}</button>
+				<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
+			</li>
+		</ul>
+	</div>
+
 script(type="text/ng-template", id="uploadProjectModalTemplate")
 	.modal-header
 		button.close(
@@ -224,10 +255,7 @@ script(type="text/ng-template", id="uploadProjectModalTemplate")
 	.modal-body(
 		fine-upload
 		endpoint="/project/new/upload"
-		waiting-for-response-text="Creating project..."
-		failed-upload-text="Upload failed. Is it a valid zip file?"
-		upload-button-text="Select a .zip file"
-		drag-area-text="drag .zip file"
+		template-id="qq-project-uploader-template"
 		multiple="false"
 		allowed-extensions="['zip']"
 		on-complete-callback="onComplete"

services/web/public/coffee/directives/fineUpload.coffee

@@ -7,11 +7,7 @@ define [
 			scope: {
 				multiple: "="
 				endpoint: "@"
-				waitingForResponseText: "@"
-				failedUploadText: "@"
-				uploadButtonText: "@"
-				dragAreaText: "@"
-				hintText: "@"
+				templateId: "@"
 				allowedExtensions: "="
 				onCompleteCallback: "="
 				onUploadCallback: "="
@@ -26,17 +22,12 @@ define [
 			link: (scope, element, attrs) ->
 				multiple = scope.multiple or false
 				endpoint = scope.endpoint
+				templateId = scope.templateId
 				if scope.allowedExtensions?
-					validation = 
+					validation =
 						allowedExtensions: scope.allowedExtensions
 				else
 					validation = {}
-				text =
-					waitingForResponse: scope.waitingForResponseText or "Processing..."
-					failUpload: scope.failedUploadText or "Failed :("
-					uploadButton: scope.uploadButtonText or "Upload"
-				dragAreaText = scope.dragAreaText or "drag here"
-				hintText = scope.hintText or ""
 				maxConnections = scope.maxConnections or 1
 				onComplete = scope.onCompleteCallback or () ->
 				onUpload   = scope.onUploadCallback or () ->
@@ -50,39 +41,6 @@ define [
 					autoUpload = scope.autoUpload
 				params     = scope.params or {}
 				params._csrf = window.csrfToken
-				templateElement = document.createElement('div')
-				templateElement.innerHTML = """
-				<div class="qq-uploader-selector">
-					<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
-						<span class="qq-upload-drop-area-text-selector">Drop files here to upload</span>
-					</div>
-					<div class="qq-upload-button-selector btn btn-primary btn-lg">
-						<div>#{text.uploadButton}</div>
-					</div>
-					<span class="or btn-lg"> or </span>
-					<span class="drag-here btn-lg">#{dragAreaText}</span>
-					<span class="qq-drop-processing-selector"><span>#{text.waitingForResponse}</span><span class="qq-drop-processing-spinner-selector"></span></span>
-					<div class="small">#{hintText}</div>
-					<ul class="qq-upload-list-selector">
-						<li>
-							<div class="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">
-								</div>
-							</div>
-							<span class="qq-upload-file-selector qq-upload-file"></span>
-							<span class="qq-upload-size-selector qq-upload-size"></span>
-							<a type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</a>
-							<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
-							<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
-						<\li>
-					</ul>
-				</div>
-				"""
 
 				q = new qq.FineUploader
 					element: element[0]
@@ -103,9 +61,7 @@ define [
 						onError: onError
 						onSubmit: onSubmit
 						onCancel: onCancel
-					text: text
-					# template: "qq-uploader"
-					template: templateElement
+					template: templateId
 				window.q = q
 				scope.control?.q = q
 				return q