diff options
Diffstat (limited to 'client/components/cards')
-rw-r--r-- | client/components/cards/attachments.jade | 13 | ||||
-rw-r--r-- | client/components/cards/attachments.js | 103 | ||||
-rw-r--r-- | client/components/cards/attachments.styl | 11 | ||||
-rw-r--r-- | client/components/cards/cardDetails.js | 13 | ||||
-rw-r--r-- | client/components/cards/minicard.jade | 2 | ||||
-rw-r--r-- | client/components/cards/minicard.js | 3 |
6 files changed, 121 insertions, 24 deletions
diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade index 61454fa7..eda6d118 100644 --- a/client/components/cards/attachments.jade +++ b/client/components/cards/attachments.jade @@ -18,12 +18,19 @@ template(name="attachmentDeletePopup") p {{_ "attachment-delete-pop"}} button.js-confirm.negate.full(type="submit") {{_ 'delete'}} +template(name="uploadingPopup") + .uploading-info + span.upload-percentage {{progress}}% + .upload-progress-frame + .upload-progress-bar(style="width: {{progress}}%;") + span.upload-size {{fileSize}} + template(name="attachmentsGalery") .attachments-galery each attachments .attachment-item - a.attachment-thumbnail.swipebox(href="{{url}}" title="{{name}}") - if isUploaded + a.attachment-thumbnail.swipebox(href="{{url}}" download="{{name}}" title="{{name}}") + if isUploaded if isImage img.attachment-thumbnail-img(src="{{url}}") else @@ -33,7 +40,7 @@ template(name="attachmentsGalery") p.attachment-details = name span.attachment-details-actions - a.js-download(href="{{url download=true}}") + a.js-download(href="{{url download=true}}" download="{{name}}") i.fa.fa-download | {{_ 'download'}} if currentUser.isBoardMember diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js index e4439155..81f6c6e1 100644 --- a/client/components/cards/attachments.js +++ b/client/components/cards/attachments.js @@ -13,10 +13,10 @@ Template.attachmentsGalery.events({ event.stopPropagation(); }, 'click .js-add-cover'() { - Cards.findOne(this.cardId).setCover(this._id); + Cards.findOne(this.meta.cardId).setCover(this._id); }, 'click .js-remove-cover'() { - Cards.findOne(this.cardId).unsetCover(); + Cards.findOne(this.meta.cardId).unsetCover(); }, 'click .js-preview-image'(event) { Popup.open('previewAttachedImage').call(this, event); @@ -45,22 +45,63 @@ Template.attachmentsGalery.events({ }, }); +Template.attachmentsGalery.helpers({ + url() { + return Attachments.link(this, 'original', '/'); + }, + isUploaded() { + return !this.meta.uploading; + }, + isImage() { + return !!this.isImage; + }, +}); + Template.previewAttachedImagePopup.events({ 'click .js-large-image-clicked'() { Popup.close(); }, }); +Template.previewAttachedImagePopup.helpers({ + url() { + return Attachments.link(this, 'original', '/'); + } +}); + +// For uploading popup + +let uploadFileSize = new ReactiveVar(''); +let uploadProgress = new ReactiveVar(0); + Template.cardAttachmentsPopup.events({ - 'change .js-attach-file'(event) { + 'change .js-attach-file'(event, instance) { const card = this; - const processFile = f => { - Utils.processUploadedAttachment(card, f, attachment => { - if (attachment && attachment._id && attachment.isImage()) { - card.setCover(attachment._id); + const callbacks = { + onBeforeUpload: (err, fileData) => { + Popup.open('uploading')(this.clickEvent); + uploadFileSize.set('...'); + uploadProgress.set(0); + return true; + }, + onUploaded: (err, attachment) => { + if (attachment && attachment._id && attachment.isImage) { + card.setCover(attachment._id); + } + Popup.close(); + }, + onStart: (error, fileData) => { + uploadFileSize.set(formatBytes(fileData.size)); + }, + onError: (err, fileObj) => { + console.log('Error!', err); + }, + onProgress: (progress, fileData) => { + uploadProgress.set(progress); } - Popup.close(); - }); + }; + const processFile = f => { + Utils.processUploadedAttachment(card, f, callbacks); }; FS.Utility.eachFile(event, f => { @@ -100,12 +141,22 @@ Template.cardAttachmentsPopup.events({ }); }, 'click .js-computer-upload'(event, templateInstance) { + this.clickEvent = event; templateInstance.find('.js-attach-file').click(); event.preventDefault(); }, 'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'), }); +Template.uploadingPopup.helpers({ + fileSize: () => { + return uploadFileSize.get(); + }, + progress: () => { + return uploadProgress.get(); + } +}); + const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL; const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO; let pastedResults = null; @@ -149,20 +200,26 @@ Template.previewClipboardImagePopup.events({ if (results && results.file) { window.oPasted = pastedResults; const card = this; - const file = new FS.File(results.file); + const settings = { + file: results.file, + streams: 'dynamic', + chunkSize: 'dynamic', + }; if (!results.name) { // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type if (typeof results.file.type === 'string') { - file.name(results.file.type.replace('image/', 'clipboard.')); + settings.fileName = + new Date().getTime() + results.file.type.replace('.+/', ''); } } - file.updatedAt(new Date()); - file.boardId = card.boardId; - file.cardId = card._id; - file.userId = Meteor.userId(); - const attachment = Attachments.insert(file); + settings.meta = {}; + settings.meta.updatedAt = new Date().getTime(); + settings.meta.boardId = card.boardId; + settings.meta.cardId = card._id; + settings.meta.userId = Meteor.userId(); + const attachment = Attachments.insert(settings); - if (attachment && attachment._id && attachment.isImage()) { + if (attachment && attachment._id && attachment.isImage) { card.setCover(attachment._id); } @@ -172,3 +229,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 diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 441068b0..d877421c 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -74,11 +74,18 @@ BlazeComponent.extendComponent({ scrollParentContainer() { const cardPanelWidth = 510; - const bodyBoardComponent = this.parentComponent().parentComponent(); + const parentComponent = this.parentComponent(); + // TODO sometimes parentComponent is not available, maybe because it's not + // yet created?! + if (!parentComponent) return; + const bodyBoardComponent = parentComponent.parentComponent(); //On Mobile View Parent is Board, Not Board Body. I cant see how this funciton should work then. if (bodyBoardComponent === null) return; const $cardView = this.$(this.firstNode()); const $cardContainer = bodyBoardComponent.$('.js-swimlanes'); + // TODO sometimes cardContainer is not available, maybe because it's not yet + // created?! + if (!$cardContainer) return; const cardContainerScroll = $cardContainer.scrollLeft(); const cardContainerWidth = $cardContainer.width(); @@ -805,9 +812,9 @@ Template.copyChecklistToManyCardsPopup.events({ // copy subtasks cursor = Cards.find({ parentId: oldId }); - cursor.forEach(function() { + cursor.forEach(cur => { 'use strict'; - const subtask = arguments[0]; + const subtask = cur; subtask.parentId = _id; subtask._id = null; /* const newSubtaskId = */ Cards.insert(subtask); diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index 79dd9127..e9de2fea 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -11,7 +11,7 @@ template(name="minicard") .handle .fa.fa-arrows if cover - .minicard-cover(style="background-image: url('{{cover.url}}');") + .minicard-cover(style="background-image: url('{{coverUrl}}');") if labels .minicard-labels each labels diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js index da36b87f..200e019d 100644 --- a/client/components/cards/minicard.js +++ b/client/components/cards/minicard.js @@ -52,4 +52,7 @@ Template.minicard.helpers({ return false; } }, + coverUrl() { + return Attachments.findOne(this.coverId).link('original', '/'); + }, }); |