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 #12207 from jmcanterafonseca/matching_details_b
Browse files Browse the repository at this point in the history 
[REOPENED] Bug 902399 In the Contacts duplicates screen allow to show a summary of ...
  • Loading branch information
@jmcanterafonseca
jmcanterafonseca committed Sep 13, 2013
2 parents a425525 + 6492214 commit 8ccb741
Show file tree
Hide file tree
Showing 5 changed files with 251 additions and 18 deletions.
168 changes: 151 additions & 17 deletions apps/communications/contacts/js/contacts_matching_ui.js
View file
Expand Up @@ -16,6 +16,8 @@ if (!contacts.MatchingUI) {
var checkedContacts = {};

var mergeButton, contactsList, duplicateMessage, title;
var matchingResults;
var matchingDetails, matchingDetailList, matchingImg, matchingTitle;

function init() {
mergeButton = document.getElementById('merge-action');
Expand All @@ -30,11 +32,22 @@ if (!contacts.MatchingUI) {
document.getElementById('merge-close').addEventListener('click', onClose);
contactsList.addEventListener('click', onClick);
mergeButton.addEventListener('click', onMerge);

matchingDetails = document.querySelector('#matching-details');
matchingDetailList = matchingDetails.querySelector('#matching-list');
matchingImg = matchingDetails.querySelector('img');
matchingTitle = matchingDetails.querySelector('h1');

matchingDetails.querySelector('button').onclick = function() {
hideMatchingDetails();
};
}

function load(type, contact, results, cb) {
matchingResults = results;

document.body.dataset.mode = type;
var params = { name: getCompleteName(getDisplayName(contact)) };
var params = { name: getDisplayName(contact) };

if (type === 'matching') {
// "Suggested duplicate contacts for xxx"
Expand Down Expand Up @@ -93,7 +106,7 @@ if (!contacts.MatchingUI) {
populate(contact, out,
Object.getOwnPropertyNames(Object.getPrototypeOf(contact)));

out.displayName = getCompleteName(getDisplayName(contact));
out.displayName = getDisplayName(contact);
out.mainReason = selectMainReason(reasons);
if (Array.isArray(out.photo) && out.photo[0]) {
out.thumb = window.URL.createObjectURL(out.photo[0]);
Expand All @@ -118,23 +131,25 @@ if (!contacts.MatchingUI) {

// Fills the contact data to display if no givenName and familyName
function getDisplayName(contact) {
if (hasName(contact))
return { givenName: contact.givenName, familyName: contact.familyName };

var givenName = [];
if (Array.isArray(contact.name) && contact.name.length > 0) {
givenName.push(contact.name[0]);
} else if (contact.org && contact.org.length > 0) {
givenName.push(contact.org[0]);
} else if (contact.tel && contact.tel.length > 0) {
givenName.push(contact.tel[0].value);
} else if (contact.email && contact.email.length > 0) {
givenName.push(contact.email[0].value);
if (hasName(contact)) {
return getCompleteName(contact);
}

var name = [];
if (Array.isArray(contact.name) && contact.name[0] &&
contact.name[0].trim()) {
name.push(contact.name[0]);
} else if (contact.org && contact.org[0] && contact.org[0].trim()) {
name.push(contact.org[0]);
} else if (contact.tel && contact.tel[0]) {
name.push(contact.tel[0].value);
} else if (contact.email && contact.email[0]) {
name.push(contact.email[0].value);
} else {
givenName.push(_('noName'));
name.push(_('noName'));
}

return { givenName: givenName, modified: true };
return name[0];
};

function hasName(contact) {
Expand Down Expand Up @@ -173,15 +188,134 @@ if (!contacts.MatchingUI) {
}, CONTACTS_APP_ORIGIN);
}

// Obtains the action from the contacts list from the click coordinates
// The action can be: 'check' or 'detail'
// If it is 'check' the input check will be toggled
// If it is 'detail' the matching contact details overlay will be show
function getActionOverList(event) {
// 40% percent of the horizontal width will be consider 'check' area
var CHECKING_AREA_WIDTH = 0.4;

var out = 'detail';
if (event.clientX <= window.innerWidth * CHECKING_AREA_WIDTH) {
out = 'check';
}

return out;
}

function onClick(e) {
var target = e.target;

var uuid;
if (target && target.dataset.uuid) {
var uuid = target.dataset.uuid;
uuid = target.dataset.uuid;
}

var targetAction = getActionOverList(e);
if (targetAction === 'check') {
var checkbox = target.querySelector('input[type="checkbox"]');
setChecked(target, checkbox, !checkbox.checked, uuid);
checkMergeButton();
}
else if (uuid) {
showMatchingDetails();
renderMatchingDetails(uuid);
}
}

function resetContentDetails() {
if (matchingImg.src) {
window.URL.revokeObjectURL(matchingImg.src);
}
matchingImg.src = '';
matchingImg.alt = '';
matchingTitle.textContent = '';
matchingDetailList.innerHTML = '';
}

function hideMatchingDetails() {
matchingDetails.classList.remove('fade-in');
matchingDetails.classList.add('fade-out');

matchingDetails.addEventListener('animationend', function cd_fadeOut(ev) {
matchingDetails.removeEventListener('animationend', cd_fadeOut);
matchingDetails.classList.add('no-opacity');
matchingDetails.classList.add('hide');

resetContentDetails();
});
}

function showMatchingDetails() {
matchingDetails.classList.remove('hide');
matchingDetails.classList.remove('fade-out');
matchingDetails.classList.add('fade-in');

matchingDetails.addEventListener('animationend', function cd_fadeIn(ev) {
matchingDetails.removeEventListener('animationend', cd_fadeIn);
matchingDetails.classList.remove('no-opacity');
});
}

function renderMatchingDetails(uuid) {
var fields = ['org', 'name', 'tel', 'email', 'adr', 'photo'];

var theContact = matchingResults[uuid].matchingContact;
var matchings = matchingResults[uuid].matchings;
if (!hasName(theContact)) {
theContact.name = [getDisplayName(theContact)];
}
fields.forEach(function(aField) {
if (!Array.isArray(theContact[aField]) || !theContact[aField][0]) {
return;
}

theContact[aField].forEach(function(fieldValue) {
if (!fieldValue) {
return;
}
var item = document.createElement('li');

if (matchings[aField]) {
matchings[aField].forEach(function(obj) {
var val = fieldValue.value || fieldValue;
if (obj.matchedValue === val) {
item.setAttribute('aria-selected', 'true');
}
});
}
switch (aField) {
case 'photo':
matchingImg.src = window.URL.createObjectURL(fieldValue);
matchingImg.alt = getDisplayName(theContact);
break;
case 'name':
matchingTitle.textContent = fieldValue;
if (hasName(theContact)) {
item.textContent = fieldValue;
}
break;
case 'tel':
item.textContent = fieldValue.type + ', ' + fieldValue.value;
break;
case 'adr':
var adrFields = ['streetAddress', 'locality',
'region', 'countryName'];
adrFields.forEach(function(addrField) {
if (fieldValue[addrField]) {
var p = document.createElement('p');
p.textContent = fieldValue[addrField];
item.appendChild(p);
}
});
break;
default:
item.textContent = fieldValue.value || fieldValue || '';
}
matchingDetailList.appendChild(item);
});
});
}

function checkMergeButton() {
Expand Down
2 changes: 2 additions & 0 deletions apps/communications/contacts/locales/matcher/matcher.en-US.properties
View file
Expand Up @@ -18,3 +18,5 @@ mergeActionButtonLabel[other] = Merge with {{n}} contacts

duplicatesFoundTitle = Duplicates found
duplicatesFoundMessage = {{name}} duplicates information in the following contacts

ok = Ok
29 changes: 28 additions & 1 deletion apps/communications/contacts/matching_contacts.html
View file
Expand Up @@ -19,6 +19,7 @@
<link href="/shared/style/switches.css" rel="stylesheet">
<link href="/shared/style_unstable/lists.css" rel="stylesheet">
<link href="/shared/style/confirm.css" rel="stylesheet">
<link href="/contacts/style/animations.css" rel="stylesheet">

<link rel="stylesheet" href="style/root.css">
<link rel="stylesheet" href="style/matching_contacts.css">
Expand Down Expand Up @@ -62,7 +63,33 @@ <h1 id="title" data-l10n-id="mergeDuplicateTitle">Merge duplicates</h1>
</menu>
</form>
</section> <!-- main -->

</section> <!-- role="region" -->

<!--
<ul id="matching-list">
<li>Telefónica</li>
<li aria-selected>mobile, +34 674 439 849</li>
<li>mobile, +34 104 438 88</li>
<li>luzie@gmail.com</li>
<li>luzie@hotmail.com</li>
<li>
<p>123 streetname is very long we try to make it go double line ok?</p>
<p>Town</p>
<p>ZIP code</p>
<p>Country</p>
</li>
</ul>
-->
<form id="matching-details" class="hide" role="dialog" data-type="confirm">
<img src="">
<h1></h1>
<section class="matched-info">
<ul id="matching-list">
</ul>
</section>
<menu>
<button type="button" class="full" data-l10n-id="ok">Ok</button>
</menu>
</form>
</body>
</html>
58 changes: 58 additions & 0 deletions apps/communications/contacts/style/matching_contacts.css
View file
Expand Up @@ -75,3 +75,61 @@ li[aria-disabled="true"] p.match-main-reason {
#footer button {
pointer-events: auto;
}

/*
Confirmation message with detailed information
This is a mixed customization between confirm.css and value_selector.css from shared
*/
#matching-details {
padding-top: 0;
}

#matching-details:before { /* Removes vertical-alignment */
display: none;
}

#matching-details h1 { /* Same header as shared/style_unstable/value_selectors.css */
font-weight: 400;
font-size: 1.9rem;
line-height: 4.8rem;
color: #fff;
border-bottom: 0.1rem solid #616262;
background: rgba(0 ,0, 0, .2);
margin: 0 -1.5rem;
padding: 0 3rem 1rem 4.5rem;
height: 4.8rem;
-moz-box-sizing: border-box;
}

#matching-details img {
float: right;
background: transparent no-repeat center / cover;
width: 4.8rem;
height: 4.8rem;
font-size: 0;
}

#matching-details .matched-info {
padding: 3rem 3rem 0;
-moz-box-sizing: border-box;
overflow-y: auto;
max-height: calc(100% - 4.8rem);
}

#matching-details .matched-info li {
font-size: 1.4rem;
line-height: 1.8rem;
color: #fff;
margin-bottom: 1.8rem;
}

#matching-details .matched-info li[aria-selected] {
color: #0EB0D0;
}

#matching-details .matched-info p {
border: none;
margin: 0;
padding: 0;
line-height: inherit;
}
12 changes: 12 additions & 0 deletions apps/communications/contacts/test/unit/mock_matching_contacts.html
View file
Expand Up @@ -37,3 +37,15 @@ <h1 id="title" data-l10n-id="mergeDuplicateTitle">Merge duplicates</h1>
</section> <!-- main -->

</section> <!-- role="region" -->

<form id="matching-details" class="hide" role="dialog" data-type="confirm">
<img src="">
<h1></h1>
<section class="matched-info">
<ul id="matching-list">
</ul>
</section>
<menu>
<button type="button" class="full" data-l10n-id="ok">Ok</button>
</menu>
</form>

0 comments on commit 8ccb741

Please sign in to comment.