Bug 1140613 - [Contacts] The star indicating a favorite contact overl…

…aps long contact names in the header of the contact details page r=francisco
mozilla-b2g · Mar 26, 2015 · e965784 · e965784
1 parent 7c5fdf1
commit e965784
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git a/apps/communications/contacts/elements/details.html b/apps/communications/contacts/elements/details.html
@@ -2,6 +2,7 @@
   <template>
     <gaia-header id='details-view-header' action="back">
       <h1 id='contact-name-title'><bdi class="ellipsis-dir-fix"></bdi></h1>
+      <div class='favorite-indicator'></div>
       <button id="edit-contact-button" data-icon="edit-contact" data-l10n-id="editButton"></button>
     </gaia-header>
 

diff --git a/apps/communications/contacts/js/views/details.js b/apps/communications/contacts/js/views/details.js
@@ -312,11 +312,8 @@ contacts.Details = (function() {
   var renderFavorite = function cd_renderFavorite(contact) {
     var favorite = isFavorite(contact);
     toggleFavoriteMessage(favorite);
-    if (contact.category && contact.category.indexOf('favorite') != -1) {
-      detailsName.classList.add('favorite');
-    } else {
-      detailsName.classList.remove('favorite');
-    }
+
+    header.classList.toggle('favorite', !!favorite);
   };
 
   var isFavorite = function isFavorite(contact) {

diff --git a/apps/communications/contacts/style/contacts.css b/apps/communications/contacts/style/contacts.css
@@ -6,10 +6,15 @@
 }
 
 /* Fav star in header */
-#contact-name-title.favorite {
-  background: url(/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star.png) no-repeat right 1rem / 3rem;
-  padding-right: 3rem;
-  margin-right: -1rem;
+.favorite-indicator {
+  display: none;
+
+  background: url(/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star.png) no-repeat center / 3rem;
+  padding: 0 1rem;
+}
+
+.favorite .favorite-indicator {
+  display: unset;
 }
 
 section[role="region"] > gaia-header .icon.icon-edit-contact {

diff --git a/apps/communications/contacts/test/marionette/details_test.js b/apps/communications/contacts/test/marionette/details_test.js
@@ -98,7 +98,7 @@ marionette('Contacts > Details', function() {
     });
   });
 
-  test('Mark contact as favorite', function() {
+  test.only('Mark contact as favorite', function() {
     contactsData.createMozContact(testContact);
 
     client.helper.waitForElement(selectors.listContactFirstText).click();
@@ -110,7 +110,7 @@ marionette('Contacts > Details', function() {
 
     // Click on favorite
     client.helper.waitForElement(selectors.detailsFavoriteButton).click();
-    nameNode = client.helper.waitForElement(selectors.detailsContactName);
+    nameNode = client.helper.waitForElement(selectors.detailsHeader);
     client.waitFor(function() {
       return nameNode.getAttribute('class').indexOf('favorite') != -1;
     });

diff --git a/apps/communications/contacts/test/unit/views/details_test.js b/apps/communications/contacts/test/unit/views/details_test.js
@@ -250,14 +250,14 @@ suite('Render contact', function() {
   suite('Render favorite', function() {
     test('with favorite contact', function() {
       subject.render(null, TAG_OPTIONS);
-      assert.isTrue(detailsName.classList.contains('favorite'));
+      assert.isTrue(header.classList.contains('favorite'));
     });
     test('without favorite contact', function() {
       var contactWoFav = new MockContactAllFields(true);
       contactWoFav.category = [];
       subject.setContact(contactWoFav);
       subject.render(null, TAG_OPTIONS);
-      assert.isFalse(detailsName.classList.contains('favorite'));
+      assert.isFalse(header.classList.contains('favorite'));
     });
     test('change in favorite not render the window', function(done) {
       var contactWoPhoto = new MockContactAllFields();