github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Update the file-upload library

Browse source
This commit is contained in:
Shane Kilkelly 2017-11-21 16:21:58 +00:00
parent 81887dd4f5
commit 1ddfd948d6
4 changed files with 90 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -364,19 +364,34 @@ script(type='text/ng-template', id='newFolderModalTemplate')
span(ng-hide="state.inflight") #{translate("create")} span(ng-hide="state.inflight") #{translate("create")}
span(ng-show="state.inflight") #{translate("creating")}... span(ng-show="state.inflight") #{translate("creating")}...
script(type='text/template', id='qq-uploader') //- script(type='text/template', id='qq-uploader-template')
div woot //- <div class="qq-uploader-selector">
<div class="qq-uploader"> //- <div class="qq-upload-drop-area-selector"><span>{dragZoneText}</span></div>
<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div> //- <div class="qq-upload-button-selector btn btn-primary btn-lg">
<div class="qq-upload-button btn btn-primary btn-lg"> //- <div>{uploadButtonText}</div>
<div>{uploadButtonText}</div> //- </div>
</div> //- <span class="or btn-lg"> or </span>
<span class="or btn-lg"> or </span> //- <span class="drag-here btn-lg">{dragAreaText}</span>
<span class="drag-here btn-lg">#{dragAreaText}</span> //- <span class="qq-drop-processing-selector"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner-selector"></span></span>
<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span> //- <div class="small">{hintText}</div>
<div class="small">#{hintText}</div> //- <ul class="qq-upload-list-selector">
<ul class="qq-upload-list"></ul> //- <li>
</div> //- <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-spinner-selector qq-upload-spinner"></span>
//- <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
//- <span class="qq-upload-file-selector qq-upload-file"></span>
//- <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
//- <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
//- <span class="qq-upload-size-selector qq-upload-size"></span>
//- <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
//- <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
//- <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</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") script(type="text/ng-template", id="uploadFileModalTemplate")
.modal-header .modal-header
@ -415,7 +430,7 @@ script(type="text/ng-template", id="uploadFileModalTemplate")
control="control" control="control"
params="{'folder_id': parent_folder_id}" params="{'folder_id': parent_folder_id}"
) )
span #{translate("upload_files")} //- span #{translate("upload_files")}
.modal-footer .modal-footer
button.btn.btn-default(ng-click="cancel()") #{translate("cancel")} button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}

35
services/web/public/coffee/directives/fineUpload.coffee
View file

@ -24,7 +24,6 @@ define [
control: "=" control: "="
} }
link: (scope, element, attrs) -> link: (scope, element, attrs) ->
console.log ">> element", element
multiple = scope.multiple or false multiple = scope.multiple or false
endpoint = scope.endpoint endpoint = scope.endpoint
if scope.allowedExtensions? if scope.allowedExtensions?
@ -51,6 +50,38 @@ define [
autoUpload = scope.autoUpload autoUpload = scope.autoUpload
params = scope.params or {} params = scope.params or {}
params._csrf = window.csrfToken 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>Processing</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-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<\li>
</ul>
</div>
"""
q = new qq.FineUploader q = new qq.FineUploader
element: element[0] element: element[0]
@ -73,7 +104,7 @@ define [
onCancel: onCancel onCancel: onCancel
text: text text: text
# template: "qq-uploader" # template: "qq-uploader"
template: document.getElementById('qq-uploader') template: templateElement
window.q = q window.q = q
scope.control?.q = q scope.control?.q = q
return q return q

3
services/web/public/js/libs/fineuploader.js
View file

@ -6762,16 +6762,13 @@
if (options.templateIdOrEl == null) { if (options.templateIdOrEl == null) {
throw new Error("You MUST specify either a template element or ID!"); throw new Error("You MUST specify either a template element or ID!");
} }
console.log(">> template", options.templateIdOrEl)
if (qq.isString(options.templateIdOrEl)) { if (qq.isString(options.templateIdOrEl)) {
console.log(">> is string")
scriptEl = document.getElementById(options.templateIdOrEl); scriptEl = document.getElementById(options.templateIdOrEl);
if (scriptEl === null) { if (scriptEl === null) {
throw new Error(qq.format("Cannot find template script at ID '{}'!", options.templateIdOrEl)); throw new Error(qq.format("Cannot find template script at ID '{}'!", options.templateIdOrEl));
} }
scriptHtml = scriptEl.innerHTML; scriptHtml = scriptEl.innerHTML;
} else { } else {
console.log(">> not string")
if (options.templateIdOrEl.innerHTML === undefined) { 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."); throw new Error("You have specified an invalid value for the template option! " + "It must be an ID or an Element.");
} }

56
services/web/public/stylesheets/components/fineupload.less
View file

@ -4,11 +4,11 @@
* *
* Licensed under MIT license, GNU GPL 2 or later, GNU LGPL 2 or later, see license.txt. * Licensed under MIT license, GNU GPL 2 or later, GNU LGPL 2 or later, see license.txt.
*/ */
.qq-uploader { .qq-uploader-selector {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.qq-uploader { .qq-uploader-selector {
text-align: center; text-align: center;
.drag-here { .drag-here {
border: 1px dashed #666; border: 1px dashed #666;
@ -18,7 +18,7 @@
margin-top: 6px; margin-top: 6px;
} }
} }
/*.qq-upload-button { /*.qq-upload-button-selector {
display: block; display: block;
width: 105px; width: 105px;
padding: 7px 0; padding: 7px 0;
@ -27,13 +27,13 @@
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
color: #FFF; color: #FFF;
} }
.qq-upload-button-hover { .qq-upload-button-hover-selector {
background: #CC0000; background: #CC0000;
} }
.qq-upload-button-focus { .qq-upload-button-focus-selector {
outline: 1px dotted #000000; 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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -44,7 +44,7 @@
background: @orange; background: @orange;
text-align: center; text-align: center;
} }
.qq-upload-drop-area span { .qq-upload-drop-area-selector span {
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -53,7 +53,7 @@
font-size: 16px; font-size: 16px;
color: white; color: white;
} }
.qq-upload-extra-drop-area { .qq-upload-extra-drop-area-selector {
position: relative; position: relative;
margin-top: 50px; margin-top: 50px;
font-size: 16px; font-size: 16px;
@ -61,15 +61,15 @@
height: 20px; height: 20px;
min-height: 40px; min-height: 40px;
} }
.qq-upload-drop-area-active { .qq-upload-drop-area-active-selector {
background: darken(@orange, 15%); background: darken(@orange, 15%);
} }
.qq-upload-list { .qq-upload-list-selector {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.qq-upload-list li { .qq-upload-list-selector li {
margin: 0; margin: 0;
margin-top: 10px; margin-top: 10px;
padding: 9px; padding: 9px;
@ -77,74 +77,74 @@
font-size: 16px; font-size: 16px;
background-color: @gray-lightest; 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; margin-right: 12px;
} }
.qq-upload-file { .qq-upload-file-selector {
} }
.qq-upload-spinner { .qq-upload-spinner-selector {
display: inline-block; display: inline-block;
width: 15px; width: 15px;
height: 15px; height: 15px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.qq-drop-processing { .qq-drop-processing-selector {
display: none; display: none;
} }
.qq-drop-processing-spinner { .qq-drop-processing-spinner-selector {
display: inline-block; display: inline-block;
background: url("processing.gif"); background: url("processing.gif");
width: 24px; width: 24px;
height: 24px; height: 24px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.qq-upload-finished { .qq-upload-finished-selector {
display:none; display:none;
width:15px; width:15px;
height:15px; height:15px;
vertical-align:text-bottom; vertical-align:text-bottom;
} }
.qq-upload-retry, .qq-upload-delete { .qq-upload-retry-selector, .qq-upload-delete-selector {
display: none; display: none;
// color: #000000; // color: #000000;
} }
.qq-upload-cancel, .qq-upload-delete { .qq-upload-cancel-selector, .qq-upload-delete-selector {
// color: #000000; // color: #000000;
} }
.qq-upload-retryable .qq-upload-retry { .qq-upload-retryable-selector .qq-upload-retry-selector {
display: inline; 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-size: 12px;
font-weight: normal; font-weight: normal;
} }
.qq-upload-failed-text { .qq-upload-failed-text-selector {
display: none; display: none;
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
} }
.qq-upload-failed-icon { .qq-upload-failed-icon-selector {
display:none; display:none;
width:15px; width:15px;
height:15px; height:15px;
vertical-align:text-bottom; vertical-align:text-bottom;
} }
.qq-upload-fail .qq-upload-failed-text { .qq-upload-fail-selector .qq-upload-failed-text-selector {
display: inline; display: inline;
} }
.qq-upload-retrying .qq-upload-failed-text { .qq-upload-retrying-selector .qq-upload-failed-text-selector {
display: inline; display: inline;
color: #D60000; color: #D60000;
} }
.qq-upload-list li.qq-upload-success { .qq-upload-list-selector li.qq-upload-success-selector {
background-color: @green; background-color: @green;
color: #FFFFFF; color: #FFFFFF;
} }
.qq-upload-list li.qq-upload-fail { .qq-upload-list-selector li.qq-upload-fail-selector {
background-color: @red; background-color: @red;
color: #FFFFFF; color: #FFFFFF;
} }
.qq-progress-bar { .qq-progress-bar-selector {
width: 0%; width: 0%;
height: @line-height-computed; height: @line-height-computed;
margin-bottom: @line-height-computed / 2; margin-bottom: @line-height-computed / 2;