summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRomulus Urakagi Tsai <urakagi@gmail.com>2020-01-02 09:16:28 +0000
committerRomulus Urakagi Tsai <urakagi@gmail.com>2020-01-02 09:16:28 +0000
commit6ebd6defe917a70e84467d64a1c15ec109c73f1b (patch)
tree0e8bec85b74b46684284aa558ba63352db12b8a9
parent93337c20f83146bb702a5af8cf9cdb37f4c53443 (diff)
downloadwekan-6ebd6defe917a70e84467d64a1c15ec109c73f1b.tar.gz
wekan-6ebd6defe917a70e84467d64a1c15ec109c73f1b.tar.bz2
wekan-6ebd6defe917a70e84467d64a1c15ec109c73f1b.zip
Uploading dialog done
-rw-r--r--client/components/cards/attachments.jade8
-rw-r--r--client/components/cards/attachments.js25
-rw-r--r--client/components/cards/attachments.styl11
3 files changed, 34 insertions, 10 deletions
diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade
index 04e0d04c..a5a5c00b 100644
--- a/client/components/cards/attachments.jade
+++ b/client/components/cards/attachments.jade
@@ -19,10 +19,10 @@ template(name="attachmentDeletePopup")
button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
template(name="uploadingPopup")
- p Uploading...
- p
- span.upload-percentage 0%
- div.upload-progress-bar
+ .uploading-info
+ span.upload-percentage {{progress}}%
+ .upload-progress-frame
+ .upload-progress-bar(style="width: {{progress}}%;")
span.upload-size {{fileSize}}
template(name="attachmentsGalery")
diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js
index 026ce170..9e32825e 100644
--- a/client/components/cards/attachments.js
+++ b/client/components/cards/attachments.js
@@ -77,23 +77,24 @@ Template.cardAttachmentsPopup.events({
const callbacks = {
onBeforeUpload: (err, fileData) => {
Popup.open('uploading')(this.clickEvent);
+ uploadFileSize.set('...');
+ uploadProgress.set(0);
return true;
},
onUploaded: (err, attachment) => {
- console.log('onEnd');
if (attachment && attachment._id && attachment.isImage) {
card.setCover(attachment._id);
}
Popup.close();
},
onStart: (error, fileData) => {
- console.log('fd', fileData);
- uploadFileSize.set(`${fileData.size} bytes`);
+ uploadFileSize.set(formatBytes(fileData.size));
},
onError: (err, fileObj) => {
console.log('Error!', err);
},
onProgress: (progress, fileData) => {
+ uploadProgress.set(progress);
}
};
const processFile = f => {
@@ -144,12 +145,12 @@ Template.cardAttachmentsPopup.events({
'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'),
});
-Template.uploadingPopup.onRendered(() => {
-});
-
Template.uploadingPopup.helpers({
fileSize: () => {
return uploadFileSize.get();
+ },
+ progress: () => {
+ return uploadProgress.get();
}
});
@@ -225,3 +226,15 @@ Template.previewClipboardImagePopup.events({
}
},
});
+
+function formatBytes(bytes, decimals = 2) {
+ if (bytes === 0) return '0 Bytes';
+
+ const k = 1024;
+ const dm = decimals < 0 ? 0 : decimals;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl
index 4a22fd8a..61ea8232 100644
--- a/client/components/cards/attachments.styl
+++ b/client/components/cards/attachments.styl
@@ -64,6 +64,17 @@
border: 1px solid black
box-shadow: 0 1px 2px rgba(0,0,0,.2)
+.uploading-info
+ .upload-progress-frame
+ background-color: grey;
+ border: 1px solid;
+ height: 22px;
+
+ .upload-progress-bar
+ background-color: blue;
+ height: 20px;
+ padding: 1px;
+
@media screen and (max-width: 800px)
.attachments-galery
flex-direction