mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Update the file-upload library
This commit is contained in:
Shane Kilkelly
parent
81887dd4f5
commit
1ddfd948d6
4 changed files with 90 additions and 47 deletions
|
|
@ -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
|
||||
<div class="qq-uploader">
|
||||
<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>
|
||||
<div class="qq-upload-button btn btn-primary btn-lg">
|
||||
<div>{uploadButtonText}</div>
|
||||
</div>
|
||||
<span class="or btn-lg"> or </span>
|
||||
<span class="drag-here btn-lg">#{dragAreaText}</span>
|
||||
<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>
|
||||
<div class="small">#{hintText}</div>
|
||||
<ul class="qq-upload-list"></ul>
|
||||
</div>
|
||||
//- script(type='text/template', id='qq-uploader-template')
|
||||
//- <div class="qq-uploader-selector">
|
||||
//- <div class="qq-upload-drop-area-selector"><span>{dragZoneText}</span></div>
|
||||
//- <div class="qq-upload-button-selector btn btn-primary btn-lg">
|
||||
//- <div>{uploadButtonText}</div>
|
||||
//- </div>
|
||||
//- <span class="or btn-lg"> or </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>
|
||||
//- <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>
|
||||
|
||||
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")}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = """
|
||||
<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
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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.");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue