Merge pull request mozilla-b2g#6731 from albertopq/contacts-BB-scrolling

Bug 816680 - Apply Scroll BB to Contacts Application r=basiclines
marshall · Nov 30, 2012 · 628f16a · 628f16a
2 parents 3019226 + 28ddfa7
commit 628f16a
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 189 deletions.
diff --git a/apps/communications/contacts/fb_import.html b/apps/communications/contacts/fb_import.html
@@ -46,6 +46,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="/shared/style_unstable/scrolling.css" rel="stylesheet">
 
 
     <link rel="stylesheet" href="style/fb/facebook.css">
@@ -70,16 +71,14 @@ <h1 data-l10n-id="fbFriends">Facebook Friends</h1>
       </header>
 
       <section id="main">
-        <div id="shortcuts">
-          <abbr id="current" title="Contacts by "></abbr>
-          <ol class="unbordered">
+        <nav data-type="scrollbar">
+          <p></p>
+          <ol>
             <li data-template data-anchor="group-#anchor#" data-letter="#anchor#">
-              <a href="#">
-                <abbr title="Jump to #anchor#">#anchor#</abbr>
-              </a>
+              <a href="#">#anchor#</a>
             </li>
           </ol>
-        </div>
+        </nav>
 
         <!-- Contacts List Section -->
         <section id='mainContent' data-state="selection">

diff --git a/apps/communications/contacts/index.html b/apps/communications/contacts/index.html
@@ -12,6 +12,7 @@
     <link href="/shared/style/buttons.css" rel="stylesheet">
     <link href="/shared/style/confirm.css" rel="stylesheet">
     <link href="/shared/style_unstable/lists.css" rel="stylesheet">
+    <link href="/shared/style_unstable/scrolling.css" rel="stylesheet">
 
     <link href="/contacts/style/app.css" rel="stylesheet">
     <link href="/contacts/style/contacts.css" rel="stylesheet">
@@ -107,18 +108,20 @@ <h1 data-l10n-id="contacts">Contacts</h1>
               <p data-l10n-id="start-adding">start adding them now </p>
             </div>
           </div>
-          <div class="view-jumper">
-            <ol class="view-jumper-inner">
-              <li data-anchor="search-container" data-img="magnifier_icon_big.png"><a href="#"><span role="button" class="icon-search"></span></a></li>
-              <li data-anchor="group-favorites" data-img="star_icon_big.png"><a href="#"><span role="button" class="icon-fav-dark"></span></a></li>
+          <nav data-type="scrollbar">
+            <p></p>
+            <ol>
+              <li data-anchor="search-container" data-img="magnifier_icon_big.png">
+                <a href="#"><span class="pack-icon-search">Search</span></a>
+              </li>
+              <li data-anchor="group-favorites" data-img="star_icon_big.png">
+                <a href="#"><span class="pack-icon-favorites">Favorites</span></a>
+              </li>
               <li data-template data-anchor="group-#anchor#" data-letter="#anchor#">
-                <a href="#">
-                  <abbr class="letter" title="Jump to #anchor#">#anchor#</abbr>
-                </a>
+                <a href="#">#anchor#</a>
               </li>
             </ol>
-          </div>
-
+          </nav>
           <div id="groups-container" class="view-body-inner">
             <form id="search-container" class="search" role="search">
               <p>
@@ -134,7 +137,6 @@ <h1 data-l10n-id="contacts">Contacts</h1>
           </div>
         </article>
         <div id='fixed-container' class='fixed-title'></div>
-        <div id="current-jumper" class="view-jumper-current"></div>
 
         <section id="search-view" class="view">
         <form id="searchview-container" class="search" role="search">

diff --git a/apps/communications/contacts/js/contacts_list.js b/apps/communications/contacts/js/contacts_list.js
@@ -20,7 +20,7 @@ contacts.List = (function() {
 
     cancel = document.getElementById('cancel-search'),
     conctactsListView = document.getElementById('view-contacts-list'),
-    fastScroll = document.querySelector('.view-jumper'),
+    fastScroll = document.querySelector('nav[data-type="scrollbar"]'),
     scrollable = document.querySelector('#groups-container');
     settingsView = document.querySelector('#view-settings .view-body-inner');
     noContacts = document.querySelector('#no-contacts');
@@ -44,13 +44,11 @@ contacts.List = (function() {
   }
 
   var initAlphaScroll = function initAlphaScroll() {
-    var overlay = document.querySelector('.view-jumper-current');
-    var overlayContent = document.querySelector('#current-jumper');
-    var jumper = document.querySelector('.view-jumper-inner');
+    var overlay = document.querySelector('nav[data-type="scrollbar"] p');
+    var jumper = document.querySelector('nav[data-type="scrollbar"] ol');
 
     var params = {
       overlay: overlay,
-      overlayContent: overlayContent,
       jumper: jumper,
       groupSelector: '#group-',
       scrollToCb: scrollToCb
@@ -129,7 +127,7 @@ contacts.List = (function() {
     searchable.forEach(function(field) {
       if (contact[field] && contact[field][0]) {
         var value = contact[field][0].trim();
-        if(value.length > 0) {
+        if (value.length > 0) {
           searchInfo.push(value);
         }
       }
@@ -240,11 +238,11 @@ contacts.List = (function() {
       }
 
       window.setTimeout(function() {
-        renderChunks(index+1);
+        renderChunks(index + 1);
       }, 0);
     }
 
-    renderChunks(0)
+    renderChunks(0);
   };
 
   var toggleNoContactsScreen = function cl_toggleNoContacs(show) {

diff --git a/apps/communications/contacts/js/contacts_shortcuts.js b/apps/communications/contacts/js/contacts_shortcuts.js
@@ -8,7 +8,7 @@ if (!utils.alphaScroll) {
     var alphaScroll = utils.alphaScroll = {};
 
     var scrollToCallback, jumper, overlay,
-        overlayContent, overlayStyle, groupSelector;
+        overlayStyle, groupSelector;
 
     var isScrolling = false;
 
@@ -21,9 +21,6 @@ if (!utils.alphaScroll) {
     var P_JUMPER = 'jumper';
     // Element that shows the current letter
     var P_OVERLAY = 'overlay';
-    // Element that has the content of the current letter
-    // (can point to the same as overlay content)
-    var P_OVERLAY_CONTENT = 'overlayContent';
     // Selector that will allow to get the group that should be scrolled to
     // Group will be identified by this selector plus the corresponding letter
     var P_GROUP_SELECTOR = 'groupSelector';
@@ -37,10 +34,9 @@ if (!utils.alphaScroll) {
       scrollToCallback = params[P_SCROLLTO_CB];
       jumper = params[P_JUMPER];
       overlay = params[P_OVERLAY];
-      overlayContent = params[P_OVERLAY_CONTENT];
       groupSelector = params[P_GROUP_SELECTOR];
 
-      overlayContent.textContent = '';
+      overlay.textContent = '';
       overlayStyle = overlay.style;
 
       jumper.addEventListener('mousedown', scrollStart);
@@ -72,7 +68,7 @@ if (!utils.alphaScroll) {
       overlayStyle.MozTransitionDelay = TRANSITION_DELAY;
       overlayStyle.MozTransitionDuration = TRANSITION_DURATION;
       overlayStyle.opacity = '0';
-      overlayContent.textContent = previous = null;
+      overlay.textContent = previous = null;
       isScrolling = false;
     }
 
@@ -94,14 +90,14 @@ if (!utils.alphaScroll) {
 
       // Render
       if (evt.target.dataset.letter) {
-        overlayContent.textContent = evt.target.dataset.letter;
+        overlay.textContent = evt.target.dataset.letter;
       } else if (evt.target.dataset.img) {
-        overlayContent.textContent = '';
+        overlay.textContent = '';
         var img = new Image();
         img.src = 'style/images/' + evt.target.dataset.img;
-        overlayContent.appendChild(img);
+        overlay.appendChild(img);
       } else {
-        overlayContent.textContent = '';
+        overlay.textContent = '';
       }
 
       anch = current.anchor;

diff --git a/apps/communications/contacts/js/fb/fb_import.js b/apps/communications/contacts/js/fb/fb_import.js
@@ -72,14 +72,13 @@ if (typeof fb.importer === 'undefined') {
     var BLOCK_SIZE = 5;
 
     UI.init = function() {
-      var overlay, overlayContent;
+      var overlay;
 
-      overlay = overlayContent = document.querySelector('#shortcuts #current');
-      var jumper = document.querySelector('#shortcuts ol');
+      overlay = document.querySelector('nav[data-type="scrollbar"] p');
+      var jumper = document.querySelector('nav[data-type="scrollbar"] ol');
 
       var params = {
         overlay: overlay,
-        overlayContent: overlayContent,
         jumper: jumper,
         groupSelector: '#group-',
         scrollToCb: scrollToCb

diff --git a/apps/communications/contacts/style/app.css b/apps/communications/contacts/style/app.css
@@ -354,65 +354,6 @@ form p + p {
   width: -moz-calc(100% + 0.8rem);
 }
 
-/* jumper: Goes directly to some point of a scrollable area */
-.view-jumper {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 1rem;
-  z-index: 10;
-}
-
-.view-jumper:active .view-jumper-inner, .view-jumper.active .view-jumper-inner  {
-  background: #999;
-}
-
-.view-jumper-current {
-  position: absolute;
-  right: 4rem;
-  top: 30%;
-  z-index: 100;
-  width: 10.5rem;
-  height: 10.5rem;
-  background: rgba(0, 0, 0, 0.7);
-  font: 400 6rem/10.5rem MozTT, Sans-serif;
-  color: #fff;
-  text-align: center;
-  -moz-transition: opacity;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.view-jumper-current img{
-  width: 4.6rem;
-  height: 4.6rem;
-  position: absolute;
-  left:50%;
-  top: 50%;
-  margin-left:-2.3rem;
-  margin-top:-2.3rem;
-}
-
-.view-jumper-inner {
-  padding: 0.3rem 0;
-  border-radius: 4rem;
-  opacity: 0.6;
-}
-
-.view-jumper li {
-  font-size: 1.1rem;
-  line-height: 1.25em;
-  text-align: center;
-  text-transform: uppercase;
-  width: 4.5rem;
-}
-
-.view-jumper-inner a, .view-jumper-inner abbr {
-  display: block;
-  color: #333;
-  width: 100%;
-  text-indent: 1.5rem;
-}
 
 /* LAYOUT */
 /* ITEM: The smallest complete structure; */
@@ -476,25 +417,6 @@ span[role="button"].icon-finish {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-/* jumper */
-span[role="button"].icon-fav-dark {
-  background-image: url(/contacts/style/gphx/bitmap/default/vw-jumper/fav.png);
-  width: 1.2rem;
-  height: 1.1rem;
-}
-
-span[role="button"].icon-search {
-  background-image: url(/contacts/style/gphx/bitmap/default/vw-jumper/search.png);
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-span[role="button"].icon-fav-color {
-  background-image: url(/contacts/style/gphx/bitmap/default/block-list/fav.png);
-  width: 2rem;
-  height: 2rem;
-}
-
 /* selection list */
 span[role="button"].icon-selected {
   background-color: rgba(0, 0, 0, 0.5);
@@ -722,6 +644,22 @@ span[role="button"].icon-arrow.icon-arrow-right {
   background-size: cover;
 }
 
+/* JUMPER */
+
+nav[data-type="scrollbar"] {
+  z-index: 6;
+}
+
+nav[data-type="scrollbar"] ol > li > * {
+  pointer-events: none;
+}
+
+nav[data-type="scrollbar"] p img {
+  position: absolute;
+  top: 25%;
+  left: 25%;
+  width: auto;
+}
 
 /* ----------------------------------
  * PROGRESS + ACTIVITIES

diff --git a/apps/communications/contacts/style/contacts.css b/apps/communications/contacts/style/contacts.css
@@ -133,15 +133,6 @@ section[role="region"] > header:first-child sup {
   pointer-events: none;
 }
 
-.view-jumper-inner > li > * {
-  pointer-events: none;
-}
-
-.view-jumper span[role="button"] {
-  display: inline-block;
-  margin-right: 0;
-}
-
 /* Edit contact section */
 .view-edit-contact .tail-actions {
   padding-top: 0.7rem;
@@ -373,7 +364,7 @@ fieldset legend.action:after {
 
 /* Contacts in comms application */
 @media screen and (max-height: 450px) and (min-height: 420px) {
- .view-jumper li {
+ nav[data-type="scrollbar"] li {
   font-size: 1.05rem;
   line-height: 1.23rem;
  }