Merge pull request #20056 from EverythingMe/1016233-ui-styling

Bug 1016233 - [Collections App] Collection UI styling

apps/collection/js/view_collection.js

@@ -1,6 +1,7 @@
 'use strict';
 /* global BaseCollection */
 /* global Contextmenu */
+/* global Promise */
 
 (function(exports) {
 
@@ -9,7 +10,8 @@
   var grid = document.getElementById('grid');
 
   var elements = {
-    bgimage: document.getElementById('bgimage'),
+    content: document.getElementById('content'),
+    header: document.getElementById('header'),
     close: document.getElementById('close'),
     name: document.getElementById('name')
   };
@@ -36,9 +38,7 @@
 
     var categoryId = collection.categoryId;
     var query = collection.query;
-    var name = collection.name;
 
-    elements.name.textContent = name;
     elements.close.addEventListener('click', function close() {
       activity.postResult('close');
     });
@@ -76,7 +76,7 @@
             src = 'data:' + image.MIMEType + ';base64,' + image.data;
           }
 
-          elements.bgimage.style.backgroundImage = 'url(' + src + ')';
+          elements.content.style.backgroundImage = 'url(' + src + ')';
         } else {
           // TODO show default image?
         }
@@ -86,12 +86,35 @@
 
   navigator.mozSetMessageHandler('activity', function onActivity(activity) {
     if (activity.source.name === 'view-collection') {
+      // set collection name to header
+      elements.name.textContent = activity.source.data.name;
+
+      // set wallpaper behind header
+      getWallpaperImage().then(function(src) {
+        elements.header.style.backgroundImage = 'url(' + src + ')';
+      });
+
       eme.init().then(function ready() {
         HandleView(activity);
       });
     }
   });
 
+  function getWallpaperImage() {
+    return new Promise(function convert(resolve, reject) {
+      var req = navigator.mozSettings.createLock().get('wallpaper.image');
+      req.onsuccess = function image_onsuccess() {
+        var image = req.result['wallpaper.image'];
+        if (image instanceof Blob) {
+          image = URL.createObjectURL(image);
+        }
+
+        resolve(image);
+      };
+      req.onerror = reject;
+    });
+  }
+
   // exporting handler so we can trigger it from testpage.js
   // without mozActivities since we can't debug activities in app manager
   exports.HandleView = HandleView;

apps/collection/locales/collection.en-US.properties

@@ -6,7 +6,6 @@ prompt-create-custom=Create your own Smart Collection
 network-error-message=Connect to the internet to add more Smart Collections
 
 # view-collection
-close=Close
 add-to-top-of-collection=Add to top of collection
 save-to-homescreen=Save to Homescreen
 

apps/collection/style/css/view.css

@@ -1,43 +1,70 @@
+body {
+  background: #000000;
+}
 gaia-grid {
   display: block;
   height: 100%;
   width: 100%;
 }
-
-#bgimage {
-  position: fixed;
+#header {
+  height: 5.4rem;
+  line-height: 5.4rem;
+  color: #ffffff;
+  font-size: 2.25rem;
+  overflow: hidden;
+  background-position: center -2.4rem; /* to continue wallpaper position from status bar */
+  position: relative;
+}
+#header:after {
+  position: absolute;
+  content: ' ';
+  z-index: 0;
+  background-color: rgba(0,0,0,0.8);
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
+}
+#name {
+  margin-right: 1rem;
+  padding-left: 3rem;
+  display: block;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  mask: url('../images/app_name_mask.svg#fade_right_mask');
+  text-overflow: '';
+  -moz-box-sizing: border-box;
+}
+#close {
+  position: absolute;
+  background: transparent url('../images/close.png') no-repeat 50% 50%/1.7rem;
+  left: 0;
+  top: 0;
+  width: 3rem;
+  height: 5.4rem;
+  z-index: 1;
+}
+#content {
+  border-top: 0.1rem solid #555;
+  position: fixed;
+  top: 5.4rem;
   left: 0;
-  z-index: -1;
+  right: 0;
+  bottom: 0;
+  overflow: scroll;
+  padding-top: 2.4rem;
+  background-color: #000000;
   background-size: cover;
 }
-
-#bgimage:after {
+#content:after {
   position: fixed;
-  top: 0;
+  top: 5.4rem;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   content: " ";
   background-color: rgba(0,0,0,0.4);
 }
-
-#header {
-  height: 5rem;
-  background: #ccc;
-  font-size: 2rem;
-}
-#name {
-  font-weight: bold;
-}
-#close {
-  float: right;
-  color: white;
-}
-
-#content {
-  position: relative;
-}

apps/collection/view.html

@@ -43,11 +43,9 @@
 
   </head>
   <body>
-    <div id="bgimage"></div>
-
     <div id="header">
         <span id="name"></span>
-        <span id="close" data-l10n-id="close"></span>
+        <span id="close"></span>
     </div>
 
     <div id="content">

shared/js/everythingme/api.js

@@ -133,6 +133,9 @@
         return Request(this.service, 'suggestions', options);
       },
       bgimage: function bgimage(options) {
+        options.width = eme.device.screen.width;
+        options.height = eme.device.screen.height;
+
         return Request('Search', 'bgimage', options);
       }
     };

shared/js/everythingme/device.js

@@ -81,6 +81,10 @@
     this.deviceId = null;
     this.deviceType = null;
     this.carrierName = null;
+    this.screen = {
+      width: window.screen.width * window.devicePixelRatio,
+      height: window.screen.height * window.devicePixelRatio
+    };
 
     // observe info that may change
     mozSettings.addObserver('language.current', function setLocale(e) {