From b5539c17d5ea2f3a5242a95576b5c4850634fb73 Mon Sep 17 00:00:00 2001 From: Dominic Kuo Date: Mon, 4 Mar 2013 19:18:41 +0800 Subject: [PATCH 1/2] Bug 838006 - Modify gallery and email to support attaching image files from picker --- apps/camera/js/camera.js | 3 +- apps/email/index.html | 13 ++- apps/email/js/compose-cards.js | 130 ++++++++++++++++++---- apps/email/locales/email.en-US.properties | 9 ++ apps/email/style/compose-cards.css | 7 +- apps/gallery/js/gallery.js | 31 ++++-- apps/wallpaper/js/pick.js | 3 +- 7 files changed, 156 insertions(+), 40 deletions(-) diff --git a/apps/camera/js/camera.js b/apps/camera/js/camera.js index af1a7172f466..b7e9d6dbec85 100644 --- a/apps/camera/js/camera.js +++ b/apps/camera/js/camera.js @@ -772,7 +772,8 @@ var Camera = { this._resizeBlobIfNeeded(blob, function(resized_blob) { this._pendingPick.postResult({ type: 'image/jpeg', - blob: resized_blob + blob: resized_blob, + name: path + name }); this._pendingPick = null; }.bind(this)); diff --git a/apps/email/index.html b/apps/email/index.html index e2c71606cde5..007da299115f 100755 --- a/apps/email/index.html +++ b/apps/email/index.html @@ -342,14 +342,23 @@

+
+ AttachmentS: +
+
+
+
+
+
+
SubjecT:
-
diff --git a/apps/email/js/compose-cards.js b/apps/email/js/compose-cards.js index c0fde6ab8df8..5c12f278ea63 100644 --- a/apps/email/js/compose-cards.js +++ b/apps/email/js/compose-cards.js @@ -51,6 +51,12 @@ function ComposeCard(domNode, mode, args) { containerList[i].addEventListener('click', this.onContainerClick.bind(this)); } + // Add attachments area event listener + var attachmentBtns = + domNode.getElementsByClassName('cmp-attachment-container'); + for (var i = 0; i < attachmentBtns.length; i++) { + attachmentBtns[i].addEventListener('click', this.onAttachmentAdd.bind(this)); + } // Add subject focus for larger hitbox var subjectContainer = domNode.querySelector('.cmp-subject'); @@ -59,30 +65,7 @@ function ComposeCard(domNode, mode, args) { }); // Add attachments - var attachmentsContainer = - domNode.getElementsByClassName('cmp-attachments-container')[0]; - if (this.composer.attachments && this.composer.attachments.length) { - var attTemplate = cmpNodes['attachment-item'], - filenameTemplate = - attTemplate.getElementsByClassName('cmp-attachment-filename')[0], - filesizeTemplate = - attTemplate.getElementsByClassName('cmp-attachment-filesize')[0]; - for (var i = 0; i < this.composer.attachments.length; i++) { - var attachment = this.composer.attachments[i]; - filenameTemplate.textContent = attachment.name; - filesizeTemplate.textContent = prettyFileSize(attachment.blob.size); - var attachmentNode = attTemplate.cloneNode(true); - attachmentsContainer.appendChild(attachmentNode); - - attachmentNode.getElementsByClassName('cmp-attachment-remove')[0] - .addEventListener('click', - this.onClickRemoveAttachment.bind( - this, attachmentNode, attachment)); - } - } - else { - attachmentsContainer.classList.add('collapsed'); - } + this.insertAttachments(); // Sent sound init this.sentAudioKey = 'mail.sent-sound.enabled'; @@ -359,9 +342,76 @@ ComposeCard.prototype = { this.textBodyNode.rows = neededRows; }, + insertAttachments: function() { + var attachmentsContainer = + this.domNode.getElementsByClassName('cmp-attachments-container')[0]; + + if (this.composer.attachments && this.composer.attachments.length) { + // Clean the container before we insert the new attachments + attachmentsContainer.innerHTML = ''; + + var attTemplate = cmpNodes['attachment-item'], + filenameTemplate = + attTemplate.getElementsByClassName('cmp-attachment-filename')[0], + filesizeTemplate = + attTemplate.getElementsByClassName('cmp-attachment-filesize')[0]; + for (var i = 0; i < this.composer.attachments.length; i++) { + var attachment = this.composer.attachments[i]; + filenameTemplate.textContent = attachment.name; + filesizeTemplate.textContent = prettyFileSize(attachment.blob.size); + var attachmentNode = attTemplate.cloneNode(true); + attachmentsContainer.appendChild(attachmentNode); + + attachmentNode.getElementsByClassName('cmp-attachment-remove')[0] + .addEventListener('click', + this.onClickRemoveAttachment.bind( + this, attachmentNode, attachment)); + } + + this.updateAttachmentsSize(); + + attachmentsContainer.classList.remove('collapsed'); + } + else { + attachmentsContainer.classList.add('collapsed'); + } + }, + + updateAttachmentsSize: function() { + var attachmentLabel = + this.domNode.getElementsByClassName('cmp-attachment-label')[0]; + var attachmentsSize = + this.domNode.getElementsByClassName('cmp-attachments-size')[0]; + + attachmentLabel.textContent = + mozL10n.get('compose-attachments', + { n: this.composer.attachments.length}); + + if (this.composer.attachments.length === 0) { + attachmentsSize.textContent = ''; + + // When there is no attachments, hide the container + // to keep the style of empty attachments + var attachmentsContainer = + this.domNode.getElementsByClassName('cmp-attachments-container')[0]; + + attachmentsContainer.classList.add('collapsed'); + } + else { + var totalSize = 0; + for (var i = 0; i < this.composer.attachments.length; i++) { + totalSize += this.composer.attachments[i].blob.size; + } + + attachmentsSize.textContent = prettyFileSize(totalSize); + } + }, + onClickRemoveAttachment: function(node, attachment) { node.parentNode.removeChild(node); this.composer.removeAttachment(attachment); + + this.updateAttachmentsSize(); }, /** @@ -483,6 +533,38 @@ ComposeCard.prototype = { } }, + onAttachmentAdd: function(event) { + event.stopPropagation(); + + try { + var activity = new MozActivity({ + name: 'pick', + data: { + type: 'image/jpeg', + isAttachment: true + } + }); + activity.onsuccess = function success() { + var name = activity.result.blob.name || activity.result.name; + + // It's possible that the name field is empty + // we should generate a default name for it, please see + // https://bugzilla.mozilla.org/show_bug.cgi?id=848855 + if (name) + name = name.substring(name.lastIndexOf('/') + 1); + + this.composer.addAttachment({ + name: name, + blob: activity.result.blob + }); + + this.insertAttachments(); + }.bind(this); + } catch (e) { + console.log('WebActivities unavailable? : ' + e); + } + }, + die: function() { } }; diff --git a/apps/email/locales/email.en-US.properties b/apps/email/locales/email.en-US.properties index d55bb7a71dd9..58a6e7d72094 100644 --- a/apps/email/locales/email.en-US.properties +++ b/apps/email/locales/email.en-US.properties @@ -170,6 +170,15 @@ compose-send=Send compose-to=To compose-cc=cc compose-bcc=bcc + +compose-attachments={[ plural(n) ]} +compose-attachments[zero] = Attachments +compose-attachments[one] = {{ n }} attachment +compose-attachments[two] = {{ n }} attachments +compose-attachments[few] = {{ n }} attachments +compose-attachments[many] = {{ n }} attachments +compose-attachments[other] = {{ n }} attachments + compose-subject=Subject compose-discard-message=Discard email? compose-discard-confirm=Discard diff --git a/apps/email/style/compose-cards.css b/apps/email/style/compose-cards.css index 631198dd55d0..960f35927fea 100644 --- a/apps/email/style/compose-cards.css +++ b/apps/email/style/compose-cards.css @@ -5,6 +5,7 @@ color: #888888; display: table-cell; width: -moz-min-content; + white-space: nowrap; text-align: left; line-height: 2.3rem; margin: 0 0.5rem; @@ -19,7 +20,8 @@ width: -moz-available; } -.cmp-bubble-container { +.cmp-bubble-container, +.cmp-attachments-size { width: calc(100% - 3.5rem); float: left; padding-top: 0.2rem; @@ -56,7 +58,8 @@ input.cmp-subject-text { margin: 0.3rem 0; } -.cmp-contact-add { +.cmp-contact-add, +.cmp-file-add { background: url("images/add-contact.png") no-repeat scroll center transparent; width: 2rem; height: 2rem; diff --git a/apps/gallery/js/gallery.js b/apps/gallery/js/gallery.js index 749fb10abd9d..d8456a20d702 100644 --- a/apps/gallery/js/gallery.js +++ b/apps/gallery/js/gallery.js @@ -661,10 +661,12 @@ var pickType; var pickWidth, pickHeight; var cropURL; var cropEditor; +var isAttachment; function startPick(activityRequest) { pendingPick = activityRequest; pickType = activityRequest.source.data.type; + isAttachment = activityRequest.source.data.isAttachment; if (pendingPick.source.data.width && pendingPick.source.data.height) { pickWidth = pendingPick.source.data.width; pickHeight = pendingPick.source.data.height; @@ -693,15 +695,21 @@ function cropPickedImage(fileinfo) { }); } -function finishPick() { - cropEditor.getCroppedRegionBlob(pickType, pickWidth, pickHeight, - function(blob) { - pendingPick.postResult({ - type: pickType, - blob: blob - }); - cleanupPick(); - }); +function finishPick(fileinfo) { + if (fileinfo.name) { + photodb.getFile(fileinfo.name, endPick); + } + else { + cropEditor.getCroppedRegionBlob(pickType, pickWidth, pickHeight, endPick); + } + + function endPick(blob) { + pendingPick.postResult({ + type: pickType, + blob: blob + }); + cleanupPick(); + } } function cancelPick() { @@ -759,9 +767,12 @@ function thumbnailClickHandler(evt) { else if (currentView === thumbnailSelectView) { updateSelection(target); } - else if (currentView === pickView) { + else if (currentView === pickView && !isAttachment) { cropPickedImage(files[parseInt(target.dataset.index)]); } + else if (currentView === pickView && isAttachment) { + finishPick(files[parseInt(target.dataset.index)]); + } } function clearSelection() { diff --git a/apps/wallpaper/js/pick.js b/apps/wallpaper/js/pick.js index 3e7b66b6a067..d453e064b0cf 100644 --- a/apps/wallpaper/js/pick.js +++ b/apps/wallpaper/js/pick.js @@ -67,7 +67,8 @@ var Wallpaper = { canvas.toBlob(function(blob) { self.pickActivity.postResult({ type: 'image/png', - blob: blob + blob: blob, + name: src }, 'image/png'); self.endPick(); From a4b3341cf701fe50b4bba7414ccc476816083333 Mon Sep 17 00:00:00 2001 From: Dominic Kuo Date: Wed, 13 Mar 2013 19:18:37 +0800 Subject: [PATCH 2/2] Fix lint errors --- apps/email/js/compose-cards.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/email/js/compose-cards.js b/apps/email/js/compose-cards.js index 5c12f278ea63..ae585f3cbbe8 100644 --- a/apps/email/js/compose-cards.js +++ b/apps/email/js/compose-cards.js @@ -55,7 +55,8 @@ function ComposeCard(domNode, mode, args) { var attachmentBtns = domNode.getElementsByClassName('cmp-attachment-container'); for (var i = 0; i < attachmentBtns.length; i++) { - attachmentBtns[i].addEventListener('click', this.onAttachmentAdd.bind(this)); + attachmentBtns[i].addEventListener('click', + this.onAttachmentAdd.bind(this)); } // Add subject focus for larger hitbox @@ -544,7 +545,7 @@ ComposeCard.prototype = { isAttachment: true } }); - activity.onsuccess = function success() { + activity.onsuccess = (function success() { var name = activity.result.blob.name || activity.result.name; // It's possible that the name field is empty @@ -559,7 +560,7 @@ ComposeCard.prototype = { }); this.insertAttachments(); - }.bind(this); + }).bind(this); } catch (e) { console.log('WebActivities unavailable? : ' + e); }