diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug index b4a62af103..4396b6ffed 100644 --- a/services/web/app/views/project/editor/file-tree.pug +++ b/services/web/app/views/project/editor/file-tree.pug @@ -364,19 +364,34 @@ 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-uploader') - div woot -
-
{dragZoneText}
-
-
{uploadButtonText}
-
- or - #{dragAreaText} - {dropProcessingText} -
#{hintText}
- -
+//- script(type='text/template', id='qq-uploader-template') +//-
+//-
{dragZoneText}
+//-
+//-
{uploadButtonText}
+//-
+//- or +//- {dragAreaText} +//- {dropProcessingText} +//-
{hintText}
+//- +//-
script(type="text/ng-template", id="uploadFileModalTemplate") .modal-header @@ -415,7 +430,7 @@ script(type="text/ng-template", id="uploadFileModalTemplate") control="control" params="{'folder_id': parent_folder_id}" ) - span #{translate("upload_files")} + //- span #{translate("upload_files")} .modal-footer button.btn.btn-default(ng-click="cancel()") #{translate("cancel")} diff --git a/services/web/public/coffee/directives/fineUpload.coffee b/services/web/public/coffee/directives/fineUpload.coffee index 797a4f9d9b..0c060b0ac1 100644 --- a/services/web/public/coffee/directives/fineUpload.coffee +++ b/services/web/public/coffee/directives/fineUpload.coffee @@ -24,7 +24,6 @@ define [ control: "=" } link: (scope, element, attrs) -> - console.log ">> element", element multiple = scope.multiple or false endpoint = scope.endpoint if scope.allowedExtensions? @@ -51,6 +50,38 @@ define [ autoUpload = scope.autoUpload params = scope.params or {} params._csrf = window.csrfToken + templateElement = document.createElement('div') + templateElement.innerHTML = """ +
+
+ Drop files here to upload +
+
+
#{text.uploadButton}
+
+ or + #{dragAreaText} + Processing +
#{hintText}
+ +
+ """ q = new qq.FineUploader element: element[0] @@ -73,7 +104,7 @@ define [ onCancel: onCancel text: text # template: "qq-uploader" - template: document.getElementById('qq-uploader') + template: templateElement window.q = q scope.control?.q = q return q diff --git a/services/web/public/js/libs/fineuploader.js b/services/web/public/js/libs/fineuploader.js index 06b66038d1..606a2fb70a 100644 --- a/services/web/public/js/libs/fineuploader.js +++ b/services/web/public/js/libs/fineuploader.js @@ -6762,16 +6762,13 @@ if (options.templateIdOrEl == null) { throw new Error("You MUST specify either a template element or ID!"); } - console.log(">> template", options.templateIdOrEl) if (qq.isString(options.templateIdOrEl)) { - console.log(">> is string") scriptEl = document.getElementById(options.templateIdOrEl); if (scriptEl === null) { throw new Error(qq.format("Cannot find template script at ID '{}'!", options.templateIdOrEl)); } scriptHtml = scriptEl.innerHTML; } else { - console.log(">> not string") if (options.templateIdOrEl.innerHTML === undefined) { throw new Error("You have specified an invalid value for the template option! " + "It must be an ID or an Element."); } diff --git a/services/web/public/stylesheets/components/fineupload.less b/services/web/public/stylesheets/components/fineupload.less index 3347edbc47..9cb3878f3e 100644 --- a/services/web/public/stylesheets/components/fineupload.less +++ b/services/web/public/stylesheets/components/fineupload.less @@ -4,11 +4,11 @@ * * Licensed under MIT license, GNU GPL 2 or later, GNU LGPL 2 or later, see license.txt. */ -.qq-uploader { +.qq-uploader-selector { position: relative; width: 100%; } -.qq-uploader { +.qq-uploader-selector { text-align: center; .drag-here { border: 1px dashed #666; @@ -18,7 +18,7 @@ margin-top: 6px; } } -/*.qq-upload-button { +/*.qq-upload-button-selector { display: block; width: 105px; padding: 7px 0; @@ -27,13 +27,13 @@ border-bottom: 1px solid #DDD; color: #FFF; } -.qq-upload-button-hover { +.qq-upload-button-hover-selector { background: #CC0000; } -.qq-upload-button-focus { +.qq-upload-button-focus-selector { outline: 1px dotted #000000; }*/ -.qq-upload-drop-area, .qq-upload-extra-drop-area { +.qq-upload-drop-area-selector, .qq-upload-extra-drop-area-selector { position: absolute; top: 0; left: 0; @@ -44,7 +44,7 @@ background: @orange; text-align: center; } -.qq-upload-drop-area span { +.qq-upload-drop-area-selector span { display: block; position: absolute; top: 50%; @@ -53,7 +53,7 @@ font-size: 16px; color: white; } -.qq-upload-extra-drop-area { +.qq-upload-extra-drop-area-selector { position: relative; margin-top: 50px; font-size: 16px; @@ -61,15 +61,15 @@ height: 20px; min-height: 40px; } -.qq-upload-drop-area-active { +.qq-upload-drop-area-active-selector { background: darken(@orange, 15%); } -.qq-upload-list { +.qq-upload-list-selector { margin: 0; padding: 0; list-style: none; } -.qq-upload-list li { +.qq-upload-list-selector li { margin: 0; margin-top: 10px; padding: 9px; @@ -77,74 +77,74 @@ font-size: 16px; background-color: @gray-lightest; } -.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-retry, .qq-upload-failed-text, .qq-upload-finished, .qq-upload-delete { +.qq-upload-file-selector, .qq-upload-spinner-selector, .qq-upload-size-selector, .qq-upload-cancel-selector, .qq-upload-retry-selector, .qq-upload-failed-text-selector, .qq-upload-finished-selector, .qq-upload-delete-selector { margin-right: 12px; } -.qq-upload-file { +.qq-upload-file-selector { } -.qq-upload-spinner { +.qq-upload-spinner-selector { display: inline-block; width: 15px; height: 15px; vertical-align: text-bottom; } -.qq-drop-processing { +.qq-drop-processing-selector { display: none; } -.qq-drop-processing-spinner { +.qq-drop-processing-spinner-selector { display: inline-block; background: url("processing.gif"); width: 24px; height: 24px; vertical-align: text-bottom; } -.qq-upload-finished { +.qq-upload-finished-selector { display:none; width:15px; height:15px; vertical-align:text-bottom; } -.qq-upload-retry, .qq-upload-delete { +.qq-upload-retry-selector, .qq-upload-delete-selector { display: none; // color: #000000; } -.qq-upload-cancel, .qq-upload-delete { +.qq-upload-cancel-selector, .qq-upload-delete-selector { // color: #000000; } -.qq-upload-retryable .qq-upload-retry { +.qq-upload-retryable-selector .qq-upload-retry-selector { display: inline; } -.qq-upload-size, .qq-upload-cancel, .qq-upload-retry, .qq-upload-delete { +.qq-upload-size-selector, .qq-upload-cancel-selector, .qq-upload-retry-selector, .qq-upload-delete-selector { font-size: 12px; font-weight: normal; } -.qq-upload-failed-text { +.qq-upload-failed-text-selector { display: none; font-style: italic; font-weight: bold; } -.qq-upload-failed-icon { +.qq-upload-failed-icon-selector { display:none; width:15px; height:15px; vertical-align:text-bottom; } -.qq-upload-fail .qq-upload-failed-text { +.qq-upload-fail-selector .qq-upload-failed-text-selector { display: inline; } -.qq-upload-retrying .qq-upload-failed-text { +.qq-upload-retrying-selector .qq-upload-failed-text-selector { display: inline; color: #D60000; } -.qq-upload-list li.qq-upload-success { +.qq-upload-list-selector li.qq-upload-success-selector { background-color: @green; color: #FFFFFF; } -.qq-upload-list li.qq-upload-fail { +.qq-upload-list-selector li.qq-upload-fail-selector { background-color: @red; color: #FFFFFF; } -.qq-progress-bar { +.qq-progress-bar-selector { width: 0%; height: @line-height-computed; margin-bottom: @line-height-computed / 2;