Merge pull request #18 from crdlc/feature-homeNewVisuals

Feature home new visuals

apps/browser/manifest.webapp

@@ -57,6 +57,7 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Browser.png"
+    "120": "/style/icons/Browser.png",
+    "60": "/style/icons/60/Browser.png"
   }
 }

apps/calculator/manifest.webapp

@@ -54,7 +54,8 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Calculator.png"
+    "120": "/style/icons/Calculator.png",
+    "60": "/style/icons/60/Calculator.png"
   },
   "orientation": "portrait-primary"
 }

apps/calendar/manifest.webapp

@@ -16,8 +16,7 @@
   "orientation": "portrait-primary",
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Calendar.png"
+    "120": "/style/icons/Calendar.png",
+    "60": "/style/icons/60/Calendar.png"
   }
 }
-
-

apps/camera/manifest.webapp

@@ -54,6 +54,7 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Camera.png"
+    "120": "/style/icons/Camera.png",
+    "60": "/style/icons/60/Camera.png"
   }
 }

apps/clock/manifest.webapp

@@ -54,7 +54,8 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Clock.png"
+    "120": "/style/icons/Clock.png",
+    "60": "/style/icons/60/Clock.png"
   },
   "orientation": "portrait-primary"
 }

apps/contacts/manifest.webapp

@@ -21,6 +21,7 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Contacts.png"
+    "120": "/style/icons/Contacts.png",
+    "60": "/style/icons/60/Contacts.png"
   }
 }

apps/email/manifest.webapp

@@ -14,6 +14,7 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "79": "/style/icons/Email.png"
+    "79": "/style/icons/Email.png",
+    "60": "/style/icons/60/Email.png"
   }
 }

apps/fm/manifest.webapp

@@ -21,6 +21,7 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "128": "/style/icons/Fm.png"
+    "128": "/style/icons/Fm.png",
+    "60": "/style/icons/60/Fm.png"
   }
 }

apps/homescreen/js/appmanager.js

@@ -127,6 +127,18 @@ var Applications = (function() {
     return coreApplications.indexOf(origin) !== -1;
   };
 
+  var deviceWidth = document.documentElement.clientWidth;
+
+  /*
+   *  Returns the size of the icon
+   *
+   *  {Array} Sizes orderer largest to smallest
+   *
+   */
+  function getIconSize(sizes) {
+    return sizes[(deviceWidth < 480) ? sizes.length - 1 : 0];
+  }
+
   /*
    *  Returns an icon given an origin
    *
@@ -154,7 +166,7 @@ var Applications = (function() {
     // application to it (technically, manifests are supposed to
     // have those). Otherwise return the url directly as it could be
     // a data: url.
-    var icon = icons[sizes[0]];
+    var icon = icons[getIconSize(sizes)];
     if (icon.indexOf('data:') !== 0) {
       icon = origin + icon;
     }
@@ -205,4 +217,3 @@ var Applications = (function() {
     getManifest: getManifest
   };
 })();
-

apps/homescreen/js/grid.js

@@ -407,7 +407,7 @@ const GridManager = (function() {
 
       pages.list[index].destroy(); // Destroy page
       pages.list.splice(index, 1); // Removes page from the list
-      pages.total = index - 1; // Reset total number of pages
+      pages.total--; // Reset total number of pages
       updatePaginationBar();
     },
 
@@ -736,4 +736,3 @@ const GridManager = (function() {
     }
   };
 })();
-

apps/homescreen/style/grid.css

@@ -28,8 +28,7 @@
   display: inline-block;
   float: left;
   text-align: center;
-  /* It SHOULD be 2.5rem but status bar is 32px instead of 20px */
-  padding-bottom: 2.3rem;
+  padding-bottom: 2.2rem;
   font-family:'Open Sans';
 }
 
@@ -60,6 +59,7 @@
 .apps ol > li > div > img {
   width: 6rem;
   height: 6rem;
+  border-radius: 50%; /* rounded icons */
 }
 
 /* label wrapper */
@@ -81,7 +81,7 @@
   display: block;
   width: 94%; /* At least 6% of margin between labels of different apps */
   position: relative;
-  height: 1.5rem; /* 15px in otoro */
+  height: 1.6rem; /* 15px in otoro */
   margin: 0 auto;
 }
 
@@ -98,7 +98,7 @@
   margin-bottom: .5rem;
   box-shadow: 0 0 5px 5px #666;
   -moz-transform: scale(1.1);
-  border-radius: 1rem;
+  border-radius: 50%; /* rounded icons */
   width: 6rem;
   height: 6rem;
 }
@@ -148,7 +148,8 @@
   opacity: .8;
 }
 
-.apps[data-transitioning] ol > li > div > img, .apps[data-transitioning] ol > li > div {
+.apps[data-transitioning] ol > li > div > img,
+.apps[data-transitioning] ol > li > div {
   -moz-animation-name: none;
 }
 
@@ -159,3 +160,9 @@
 .apps ol > li[data-dragging] {
   opacity: 0;
 }
+
+@media screen and (min-device-width: 480px) {
+  .apps ol > li > div > img, .apps .draggable > img {
+    border-radius: .5rem; /* squared icons */
+  }
+}

apps/market/manifest.webapp

@@ -54,6 +54,7 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Market.png"
+    "120": "/style/icons/Market.png",
+    "60": "/style/icons/60/Market.png"
   }
 }

apps/music/manifest.webapp

@@ -54,7 +54,8 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Music.png"
+    "120": "/style/icons/Music.png",
+    "60": "/style/icons/60/Music.png"
   },
   "orientation": "portrait-primary"
 }

apps/settings/manifest.webapp

@@ -56,7 +56,8 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Settings.png"
+    "120": "/style/icons/Settings.png",
+    "60": "/style/icons/60/Settings.png"
   },
   "orientation": "portrait-primary"
 }

apps/sms/manifest.webapp

@@ -59,7 +59,8 @@
   "default_locale": "en-US",
   "background_page": "/background.html#0",
   "icons": {
-    "120": "/style/icons/Sms.png"
+    "120": "/style/icons/Sms.png",
+    "60": "/style/icons/60/Sms.png"
   },
   "orientation": "portrait-primary"
 }

apps/system/js/cards_view/cards_view.js

@@ -16,6 +16,25 @@ var CardsView = (function() {
   var cardsList = cardsView.getElementsByTagName('ul')[0];
   var displayedApp,
       runningApps;
+  var HVGA = document.documentElement.clientWidth < 480;
+
+  /*
+   * Returns an icon URI
+   *
+   * @param{String} the app's origin
+   */
+  function getIconURI(origin) {
+    var icons = runningApps[origin].manifest.icons;
+
+    var sizes = Object.keys(icons).map(function parse(str) {
+      return parseInt(str, 10);
+    });
+
+    sizes.sort(function(x, y) { return y - x; });
+
+    var index = sizes[(HVGA) ? sizes.length - 1 : 0];
+    return origin + icons[index];
+  }
 
   // Build and display the card switcher overlay
   // Note that we rebuild the switcher each time we need it rather
@@ -57,12 +76,10 @@ var CardsView = (function() {
 
       //display app icon on the tab
       if (DISPLAY_APP_ICON) {
-        var icons = runningApps[origin].manifest.icons;
-        var iconSrc = origin + icons[Object.keys(icons)[0]];
         var appIcon = document.createElement('img');
 
         appIcon.classList.add('appIcon');
-        appIcon.src = iconSrc;
+        appIcon.src = getIconURI(origin);
         card.appendChild(appIcon);
       }
 

apps/tasks/manifest.webapp

@@ -54,7 +54,8 @@
   },
   "default_locale": "en-US",
   "icons": {
-    "120": "/style/icons/Tasks.png"
+    "120": "/style/icons/Tasks.png",
+    "60": "/style/icons/60/Tasks.png"
   },
   "orientation": "portrait-primary"
 }

apps/video/manifest.webapp

@@ -55,6 +55,7 @@
   "default_locale": "en-US",
   "hackKillMe": true,
   "icons": {
-    "120": "/style/icons/Video.png"
+    "120": "/style/icons/Video.png",
+    "60": "/style/icons/60/Video.png"
   }
 }