diff --git a/apps/homescreen/everything.me/modules/Results/Result.js b/apps/homescreen/everything.me/modules/Results/Result.js index 9307ce4daf69..f6d325234307 100644 --- a/apps/homescreen/everything.me/modules/Results/Result.js +++ b/apps/homescreen/everything.me/modules/Results/Result.js @@ -1,6 +1,7 @@ 'use strict'; (function() { + var INSTALLED_APPS_SHADOW_OFFSET = Icon.prototype.SHADOW_OFFSET_Y; Evme.RESULT_TYPE = { CONTACT: 'contact', @@ -83,7 +84,6 @@ Evme.Utils.blobToDataURI(iconObj, function onDataReady(src) { setImageSrc(src); }); - } else { var src = Evme.Utils.formatImageData(iconObj); setImageSrc(src); @@ -107,13 +107,22 @@ // @default this.onAppIconLoad = function onAppIconLoad() { - // use OS icon rendering - var iconCanvas = Icon.prototype.createCanvas(image), - canvas = self.initIcon(iconCanvas.height), - context = canvas.getContext('2d'); + var canvas = self.initIcon(Evme.Utils.getOSIconSize()), + context = canvas.getContext('2d'), + width = canvas.width, + height = canvas.height, + // hard coded since it's from page.js, which is a homescreen file + SHADOW = INSTALLED_APPS_SHADOW_OFFSET; + + // account for shadow - pad the canvas from the bottom, + // and move the name back up + canvas.height += SHADOW; + self.elIcon.style.cssText += '; margin-bottom: ' + -SHADOW + 'px;'; + + context.drawImage(image, + (width - image.width) / 2, + (height - image.height) / 2); - context.drawImage(iconCanvas, (TEXT_WIDTH - iconCanvas.width) / 2, 0); - self.iconPostRendering(iconCanvas); self.finalizeIcon(canvas); self.setIconSrc(image.src); }; @@ -129,11 +138,6 @@ return canvas; }; - // @default - this.iconPostRendering = function iconPostRendering(iconCanvas) { - // do nothing - }; - // @default this.finalizeIcon = function finalizeIcon(canvas) { var icon = self.elIcon, diff --git a/apps/homescreen/everything.me/modules/Results/providers/CloudApps.js b/apps/homescreen/everything.me/modules/Results/providers/CloudApps.js index e39a390b7d61..83b7c2cf357a 100644 --- a/apps/homescreen/everything.me/modules/Results/providers/CloudApps.js +++ b/apps/homescreen/everything.me/modules/Results/providers/CloudApps.js @@ -37,7 +37,15 @@ Evme.CloudAppResult = function Evme_CloudAppsResult(query) { height = this.height, padding = Evme.Utils.OS_ICON_PADDING, canvas = self.initIcon(height + padding), - context = canvas.getContext('2d'); + context = canvas.getContext('2d'), + canvasHeight = canvas.height, + canvasWidth = canvas.width, + SHADOW_SIZE = (SHADOW_OFFSET + SHADOW_BLUR); + + // account for shadow - pad the canvas from the bottom, + // and move the name back up + canvas.height += SHADOW_SIZE; + self.elIcon.style.cssText += 'margin-bottom: ' + -SHADOW_SIZE + 'px;'; // shadow context.shadowOffsetX = 0; @@ -45,7 +53,7 @@ Evme.CloudAppResult = function Evme_CloudAppsResult(query) { context.shadowBlur = SHADOW_BLUR; context.shadowColor = 'rgba(0, 0, 0, 0.6)'; context.drawImage(fixedImage, - (canvas.width - width + padding) / 2, padding, + (canvasWidth - width + padding) / 2, padding, width - padding, height - padding); self.finalizeIcon(canvas); diff --git a/apps/homescreen/js/page.js b/apps/homescreen/js/page.js index dc65510f9cb7..7a051e4cfad7 100644 --- a/apps/homescreen/js/page.js +++ b/apps/homescreen/js/page.js @@ -41,6 +41,11 @@ Icon.prototype = { CANCELED_ICON_URL: window.location.protocol + '//' + window.location.host + '/style/images/app_paused.png', + // App icons shadow settings + SHADOW_BLUR: 5, + SHADOW_OFFSET_Y: 2, + SHADOW_COLOR: 'rgba(0,0,0,0.15)', + // These properties will be copied from the descriptor onto the icon's HTML // element dataset and allow us to uniquely look up the Icon object from // the HTML element. @@ -296,9 +301,9 @@ Icon.prototype = { var background = new Image(); background.src = 'style/images/default_background.png'; background.onload = function icon_loadBackgroundSuccess() { - ctx.shadowColor = 'rgba(0,0,0,0.15)'; - ctx.shadowBlur = 5; - ctx.shadowOffsetY = 2; + ctx.shadowColor = self.SHADOW_COLOR; + ctx.shadowBlur = self.SHADOW_BLUR; + ctx.shadowOffsetY = self.SHADOW_OFFSET_Y; ctx.drawImage(background, 2 * SCALE_RATIO, 2 * SCALE_RATIO, MAX_ICON_SIZE * SCALE_RATIO, MAX_ICON_SIZE * SCALE_RATIO); // Disable smoothing on icon resize @@ -331,9 +336,9 @@ Icon.prototype = { // Collection icons are self contained and should NOT be manipulated if (type !== GridItemsFactory.TYPE.COLLECTION) { - ctx.shadowColor = 'rgba(0,0,0,0.15)'; - ctx.shadowBlur = 5; - ctx.shadowOffsetY = 2; + ctx.shadowColor = this.SHADOW_COLOR; + ctx.shadowBlur = this.SHADOW_BLUR; + ctx.shadowOffsetY = this.SHADOW_OFFSET_Y; } // Deal with very small or very large icons