Fix app icon being inverted for app store apps too

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

2 files changed, 19 insertions, 8 deletions

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 103dcf26a71..a046148dcc4 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -670,6 +670,7 @@ form.section {
 	position: relative;
 }
 .app-image {
+	position: relative;
 	height: 150px;
 	opacity: 1;
 	overflow: hidden;
@@ -757,18 +758,21 @@ form.section {
 #apps-list.installed .app-image {
 	width: 44px;
 	text-align: right;
-	opacity: .5;
 }
 
 #apps-list.installed .app-image-icon svg {
 	margin-top: 5px;
 	width: 20px;
 	height: 20px;
+	opacity: .5;
 }
 
-#apps-list .app-image-icon svg {
-	opacity: .3;
-	margin-top: 50px;
+#apps-list:not(.installed) .app-image-icon svg {
+	position: absolute;
+	bottom: 43px; /* position halfway vertically */
+	width: 64px;
+	height: 64px;
+	opacity: .1;
 }
 
 .installed .actions {
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 03ae4e2e8c9..6da8c395ecb 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -183,7 +183,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		app.firstExperimental = firstExperimental;
 
 		if (!app.preview) {
-			app.preview = OC.imagePath('core', 'filetypes/image');
+			app.preview = OC.imagePath('core', 'places/default-app-icon');
 			app.previewAsIcon = true;
 		}
 
@@ -235,9 +235,16 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			currentImage.src = app.preview;
 
 			currentImage.onload = function() {
-				page.find('.app-image')
-					.append(OC.Settings.Apps.imageUrl(app.preview, app.fromAppStore))
-					.removeClass('icon-loading');
+				/* Trigger color inversion for placeholder image too */
+				if(app.previewAsIcon) {
+					page.find('.app-image')
+						.append(OC.Settings.Apps.imageUrl(app.preview, false))
+						.removeClass('icon-loading');
+				} else {
+					page.find('.app-image')
+						.append(OC.Settings.Apps.imageUrl(app.preview, app.fromAppStore))
+						.removeClass('icon-loading');
+				}
 			};
 		}