diff options
author | Romulus Urakagi Tsai <urakagi@gmail.com> | 2020-01-02 09:16:28 +0000 |
---|---|---|
committer | Romulus Urakagi Tsai <urakagi@gmail.com> | 2020-01-02 09:16:28 +0000 |
commit | 6ebd6defe917a70e84467d64a1c15ec109c73f1b (patch) | |
tree | 0e8bec85b74b46684284aa558ba63352db12b8a9 | |
parent | 93337c20f83146bb702a5af8cf9cdb37f4c53443 (diff) | |
download | wekan-6ebd6defe917a70e84467d64a1c15ec109c73f1b.tar.gz wekan-6ebd6defe917a70e84467d64a1c15ec109c73f1b.tar.bz2 wekan-6ebd6defe917a70e84467d64a1c15ec109c73f1b.zip |
Uploading dialog done
-rw-r--r-- | client/components/cards/attachments.jade | 8 | ||||
-rw-r--r-- | client/components/cards/attachments.js | 25 | ||||
-rw-r--r-- | client/components/cards/attachments.styl | 11 |
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 |