From c489cd4d3a44db74c6dab3106dd1d15df33ec3cd Mon Sep 17 00:00:00 2001
From: Raghu Nayyar <hey@raghunayyar.com>
Date: Thu, 11 Aug 2016 12:59:57 +0530
Subject: Uses javascript to invert the SVGs.

---
 settings/js/apps.js | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/settings/js/apps.js b/settings/js/apps.js
index 66c097e1257..d2411197c9c 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -196,14 +196,14 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		if (app.preview && !OC.Util.isIE()) {
 			var currentImage = new Image();
 			currentImage.src = app.preview;
-
-			currentImage.onload = function() {
-				page.find('.app-image')
-					.append(this)
-					.fadeIn();
-			};
 		}
 
+		currentImage.onload = function() {
+			page.find('.app-image')
+				.append(OC.Settings.Apps.imageUrl(app.preview))
+				.fadeIn();
+		};
+
 		// set group select properly
 		if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
 			OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging') ||
@@ -226,6 +226,17 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		}
 	},
 
+	/**
+	 * Returns the image for apps listing
+	 */
+
+	imageUrl : function (url) {
+		var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
+		img += '<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>';
+		img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + url + '"  class="app-icon" /></svg>';
+		return img;
+	},
+
 	isType: function(app, type){
 		return app.types && app.types.indexOf(type) !== -1;
 	},
-- 
cgit v1.2.3


From 7c2346b373c42e23b896f1d8c7a666d4f8e7ff9c Mon Sep 17 00:00:00 2001
From: Raghu Nayyar <hey@raghunayyar.com>
Date: Thu, 11 Aug 2016 13:09:42 +0530
Subject: Removes uneeded styles.

---
 settings/css/settings.css | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index b006f1f5656..37e4a9cc77b 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -378,16 +378,7 @@ span.version {
 	width: 80px;
 	height: 80px;
 }
-.app-image img {
-	max-width: 80px;
-	max-height: 80px;
-}
-.app-image-icon img {
-	background-color: #ccc;
-	width: 60px;
-	padding: 10px;
-	border-radius: 3px;
-}
+
 .app-name,
 .app-version,
 .app-score,
-- 
cgit v1.2.3


From eeee9681d5e764454bd26de0a0036992140fc0a0 Mon Sep 17 00:00:00 2001
From: Raghu Nayyar <hey@raghunayyar.com>
Date: Thu, 11 Aug 2016 15:53:39 +0530
Subject: Adds opacity to image container.

---
 settings/css/settings.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 37e4a9cc77b..647db0d0c59 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -377,8 +377,8 @@ span.version {
 	padding-right: 10px;
 	width: 80px;
 	height: 80px;
+	opacity: 0.8;
 }
-
 .app-name,
 .app-version,
 .app-score,
-- 
cgit v1.2.3


From 7c61fa14ae4866b7e90a3bf5d8c9f2f664f20833 Mon Sep 17 00:00:00 2001
From: Raghu Nayyar <hey@raghunayyar.com>
Date: Mon, 15 Aug 2016 00:49:33 +0530
Subject: Fixes image preview when fetched from the store.

---
 settings/js/apps.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/settings/js/apps.js b/settings/js/apps.js
index d2411197c9c..f8ad9c7918c 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -200,7 +200,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 
 		currentImage.onload = function() {
 			page.find('.app-image')
-				.append(OC.Settings.Apps.imageUrl(app.preview))
+				.append(OC.Settings.Apps.imageUrl(app.preview, app.detailpage))
 				.fadeIn();
 		};
 
@@ -228,12 +228,18 @@ OC.Settings.Apps = OC.Settings.Apps || {
 
 	/**
 	 * Returns the image for apps listing
+	 * url : the url of the image
+	 * appfromstore: bool to check whether the app is fetched from store or not.
 	 */
 
-	imageUrl : function (url) {
+	imageUrl : function (url, appfromstore) {
 		var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
-		img += '<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>';
-		img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + url + '"  class="app-icon" /></svg>';
+		if (appfromstore) {
+			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '"  class="app-icon" /></svg>';
+		} else {
+			img += '<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>';
+			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + url + '"  class="app-icon" /></svg>';
+		}
 		return img;
 	},
 
-- 
cgit v1.2.3