Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #8475 from dominickuo/email-attach-from-gallery
Browse files Browse the repository at this point in the history 
Bug 838006 - Support attaching image files from gallery picker in email. r=asuth
  • Loading branch information
@asutherland
asutherland committed Mar 14, 2013
2 parents 127a5be + a4b3341 commit 8311004
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 40 deletions.
3 changes: 2 additions & 1 deletion apps/camera/js/camera.js
View file
Expand Up @@ -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));
Expand Down
13 changes: 11 additions & 2 deletions apps/email/index.html
View file
Expand Up @@ -342,14 +342,23 @@ <h3 class="msg-envelope-subject"></h3>
<div class="cmp-bcc-add cmp-contact-add"></div>
</div>
</div>
<div class="cmp-envelope-line cmp-combo">
<span class="cmp-attachment-label cmp-addr-label"
data-l10n-id="compose-attachments[zero]">AttachmentS:</span>
<div class="cmp-attachment-container cmp-addr-container">
<div class="cmp-attachments-size">
</div>
<div class="cmp-attachment-add cmp-file-add"></div>
</div>
</div>
<ul class="cmp-attachments-container">
</ul>
<div class="cmp-envelope-line cmp-subject">
<span class="cmp-subject-label"
data-l10n-id="compose-subject">SubjecT:</span>
<input class="cmp-subject-text" type="text" />
</div>
</div>
<ul class="cmp-attachments-container">
</ul>
<textarea class="cmp-body-text" rows="1"></textarea>
<div class="cmp-body-html">
</div>
Expand Down
131 changes: 107 additions & 24 deletions apps/email/js/compose-cards.js
View file
Expand Up @@ -51,6 +51,13 @@ 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');
Expand All @@ -59,30 +66,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';
Expand Down Expand Up @@ -359,9 +343,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();
},

/**
Expand Down Expand Up @@ -483,6 +534,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() {
}
};
Expand Down
9 changes: 9 additions & 0 deletions apps/email/locales/email.en-US.properties
View file
Expand Up @@ -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
Expand Down
7 changes: 5 additions & 2 deletions apps/email/style/compose-cards.css
View file
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
31 changes: 21 additions & 10 deletions apps/gallery/js/gallery.js
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
3 changes: 2 additions & 1 deletion apps/wallpaper/js/pick.js
View file
Expand Up @@ -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();
Expand Down

0 comments on commit 8311004

Please sign in to comment.