From 91a4676fc0034f63bacc36ea2591599b373e5447 Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Sat, 21 Jan 2017 17:06:26 +0100
Subject: [PATCH 01/19] Make enabled and disabled apps a tabular list

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/css/settings.css   | 38 +++++++++++++++++++++++++++++---
 settings/js/apps.js         | 16 ++++++++++----
 settings/templates/apps.php | 44 +++++++++++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 7 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 5ca62248c091d..b8bf2b26cbfd0 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -541,9 +541,7 @@ span.version {
 
 #app-navigation .app-external,
 .app-version {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
+	color: rgba(85,85,85,.5);
 }
 
 .app-level {
@@ -725,6 +723,40 @@ form.section {
 	margin-bottom: 1em;
 }
 
+#apps-list.installed {
+	display: table;
+	width: 100%;
+	height: auto;
+}
+
+#apps-list.installed .section {
+	display: table-row;
+	padding: 0;
+	margin: 0;
+}
+
+#apps-list.installed .section > *{
+	display: table-cell;
+	width: auto;
+	height: 3em;
+	vertical-align: middle;
+	float: none;
+	border-bottom: 1px solid #eee;
+	padding: .5em 1em;
+	box-sizing: border-box;
+}
+
+#apps-list.installed .app-image {
+	text-align: center;
+}
+
+.installed .actions {
+	text-align: right;
+}
+
+#apps-list.installed .groups-enable {
+	margin-top: 0
+}
 
 /* LOG */
 #log {
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 9a3ff09337df3..3d94a128d3fe0 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -94,7 +94,14 @@ OC.Settings.Apps = OC.Settings.Apps || {
 					// default values for missing fields
 					return _.extend({level: 0}, app);
 				});
-				var source   = $("#app-template").html();
+				var source
+				if (categoryId === 'enabled' || categoryId === 'disabled') {
+					source = $("#app-template-installed").html();
+					$('#apps-list').addClass('installed');
+				} else {
+					source = $("#app-template").html();
+					$('#apps-list').removeClass('installed');
+				}
 				var template = Handlebars.compile(source);
 
 				if (appList.length) {
@@ -257,12 +264,13 @@ OC.Settings.Apps = OC.Settings.Apps || {
 	 */
 
 	imageUrl : function (url, appfromstore) {
-		var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
-
+		var img;
 		if (appfromstore) {
+			img = '<svg width="72" height="72" viewBox="0 0 72 72">';
 			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url  + '"  class="app-icon" /></svg>';
 		} else {
-			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
+			img = '<svg width="32" height="32" viewBox="0 0 32 32">';
+			img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
 		}
 		return img;
 	},
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 0adf5dfcc6f44..1b6e5e60327ea 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -29,6 +29,50 @@
 <?php endif; ?>
 </script>
 
+
+<script id="app-template-installed" type="text/x-handlebars">
+<div class="section" id="app-{{id}}">
+	<div class="app-image app-image-icon hidden"></div>
+	<h2 class="app-name">
+		{{#if detailpage}}
+			<a href="{{detailpage}}" target="_blank" rel="noreferrer">{{name}}</a>
+		{{else}}
+			{{name}}
+		{{/if}}
+	</h2>
+	<div class="app-version"> {{version}}</div>
+	<div class="app-level">
+		{{{level}}}
+	</div>
+
+	<div>
+		{{#if active}}
+		<div class="groups-enable">
+			<input type="checkbox" class="groups-enable__checkbox checkbox" id="groups_enable-{{id}}"/>
+			<label for="groups_enable-{{id}}"><?php p($l->t('Limit to groups')); ?></label>
+			<input type="hidden" id="group_select" title="<?php p($l->t('All')); ?>">
+		</div>
+		{{/if}}
+	</div>
+
+	<div class="actions">
+		<div class="app-dependencies update hidden">
+			<p><?php p($l->t('This app has an update available.')); ?></p>
+		</div>
+		<div class="warning hidden"></div>
+		{{#if active}}
+		<input class="enable" type="submit" data-appid="{{id}}" data-active="true" value="<?php p($l->t("Disable"));?>"/>
+		{{else}}
+		<input class="enable{{#if needsDownload}} needs-download{{/if}}" type="submit" data-appid="{{id}}" data-active="false" {{#unless canInstall}}disabled="disabled"{{/unless}} value="<?php p($l->t("Enable"));?>"/>
+		{{/if}}
+		<input class="update hidden" type="submit" value="<?php p($l->t('Update to %s', array('{{update}}'))); ?>" data-appid="{{id}}" />
+		{{#if canUnInstall}}
+		<input class="uninstall" type="submit" value="<?php p($l->t('Uninstall app')); ?>" data-appid="{{id}}" />
+		{{/if}}
+	</div>
+</div>
+</script>
+
 <script id="app-template" type="text/x-handlebars">
 	<div class="section" id="app-{{id}}">
 	{{#if preview}}

From 89ac71355df63bbad814d05999cc44d98d75fadf Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Sat, 21 Jan 2017 17:10:08 +0100
Subject: [PATCH 02/19] Add apps category 'all installed'

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/Controller/AppSettingsController.php | 22 ++++++++++++++++++-
 settings/js/apps.js                           | 17 +++++++++-----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/settings/Controller/AppSettingsController.php b/settings/Controller/AppSettingsController.php
index 6a5b5210c0fc3..89cf5b6b7daf6 100644
--- a/settings/Controller/AppSettingsController.php
+++ b/settings/Controller/AppSettingsController.php
@@ -49,6 +49,7 @@
 class AppSettingsController extends Controller {
 	const CAT_ENABLED = 0;
 	const CAT_DISABLED = 1;
+	const CAT_ALL_INSTALLED = 2;
 
 	/** @var \OCP\IL10N */
 	private $l10n;
@@ -103,7 +104,7 @@ public function __construct($appName,
 	 */
 	public function viewApps($category = '') {
 		if ($category === '') {
-			$category = 'enabled';
+			$category = 'installed';
 		}
 
 		$params = [];
@@ -128,6 +129,7 @@ public function listCategories() {
 		$currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2);
 
 		$formattedCategories = [
+			['id' => self::CAT_ALL_INSTALLED, 'ident' => 'installed', 'displayName' => (string)$this->l10n->t('All installed')],
 			['id' => self::CAT_ENABLED, 'ident' => 'enabled', 'displayName' => (string)$this->l10n->t('Enabled')],
 			['id' => self::CAT_DISABLED, 'ident' => 'disabled', 'displayName' => (string)$this->l10n->t('Not enabled')],
 		];
@@ -270,6 +272,24 @@ public function listApps($category = '') {
 
 		switch ($category) {
 			// installed apps
+			case 'installed':
+				$apps = $appClass->listAllApps();
+
+				foreach($apps as $key => $app) {
+					$newVersion = \OC\Installer::isUpdateAvailable($app['id'], $this->appFetcher);
+					$apps[$key]['update'] = $newVersion;
+				}
+
+				usort($apps, function ($a, $b) {
+					$a = (string)$a['name'];
+					$b = (string)$b['name'];
+					if ($a === $b) {
+						return 0;
+					}
+					return ($a < $b) ? -1 : 1;
+				});
+				break;
+			// enabled apps
 			case 'enabled':
 				$apps = $appClass->listAllApps();
 				$apps = array_filter($apps, function ($app) {
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 3d94a128d3fe0..bde069e1b274e 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -41,7 +41,8 @@ OC.Settings.Apps = OC.Settings.Apps || {
 
 		var categories = [
 			{displayName: t('settings', 'Enabled'), ident: 'enabled', id: '0'},
-			{displayName: t('settings', 'Not enabled'), ident: 'disabled', id: '1'}
+			{displayName: t('settings', 'Not enabled'), ident: 'disabled', id: '1'},
+			{displayName: t('settings', 'All installed'), ident: 'installed', id: '2'}
 		];
 
 		var source   = $("#categories-template").html();
@@ -95,7 +96,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 					return _.extend({level: 0}, app);
 				});
 				var source
-				if (categoryId === 'enabled' || categoryId === 'disabled') {
+				if (categoryId === 'enabled' || categoryId === 'disabled' || categoryId === 'installed') {
 					source = $("#app-template-installed").html();
 					$('#apps-list').addClass('installed');
 				} else {
@@ -106,11 +107,15 @@ OC.Settings.Apps = OC.Settings.Apps || {
 
 				if (appList.length) {
 					appList.sort(function(a,b) {
-						var levelDiff = b.level - a.level;
-						if (levelDiff === 0) {
-							return OC.Util.naturalSortCompare(a.name, b.name);
+						if (a.active !== b.active) {
+							return (a.active ? -1 : 1)
+						} else {
+							var levelDiff = b.level - a.level;
+							if (levelDiff === 0) {
+								return OC.Util.naturalSortCompare(a.name, b.name);
+							}
+							return levelDiff;
 						}
-						return levelDiff;
 					});
 
 					var firstExperimental = false;

From 8496b36f0ac046e2df5384b81cd7242c0c518860 Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Sun, 22 Jan 2017 16:32:10 +0100
Subject: [PATCH 03/19] Add a link to the appstore page in the installed apps
 settings categories

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/templates/apps.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 1b6e5e60327ea..f8f065a7f642e 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -42,7 +42,7 @@
 	</h2>
 	<div class="app-version"> {{version}}</div>
 	<div class="app-level">
-		{{{level}}}
+		{{{level}}}{{#unless internal}}<a href="https://apps.nextcloud.com/apps/{{id}}">View in Store</a>{{/unless}}
 	</div>
 
 	<div>

From c51c41b2af25d888dcc2276d50a4848519eddb92 Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Sun, 22 Jan 2017 22:16:12 +0100
Subject: [PATCH 04/19] Fix app-icon opacity and positioing

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/css/settings.css   | 7 ++++++-
 settings/templates/apps.php | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index b8bf2b26cbfd0..95dc2ed50328d 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -748,6 +748,11 @@ form.section {
 
 #apps-list.installed .app-image {
 	text-align: center;
+	opacity: .5;
+}
+
+#apps-list.installed .app-image-icon svg {
+	margin-top: 5px;
 }
 
 .installed .actions {
@@ -755,7 +760,7 @@ form.section {
 }
 
 #apps-list.installed .groups-enable {
-	margin-top: 0
+	margin-top: 0;
 }
 
 /* LOG */
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index f8f065a7f642e..652dc38557d89 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -32,7 +32,7 @@
 
 <script id="app-template-installed" type="text/x-handlebars">
 <div class="section" id="app-{{id}}">
-	<div class="app-image app-image-icon hidden"></div>
+	<div class="app-image app-image-icon"></div>
 	<h2 class="app-name">
 		{{#if detailpage}}
 			<a href="{{detailpage}}" target="_blank" rel="noreferrer">{{name}}</a>

From 5e5aa2eeebc6df41664ecb59f571a9f634ba8e66 Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Mon, 23 Jan 2017 16:29:16 +0100
Subject: [PATCH 05/19] Fix uninstall in tabular view

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/js/apps.js         | 4 ++--
 settings/templates/apps.php | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/settings/js/apps.js b/settings/js/apps.js
index bde069e1b274e..80ac732730f1f 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -455,8 +455,8 @@ OC.Settings.Apps = OC.Settings.Apps || {
 				element.val(t('settings','Uninstall'));
 			} else {
 				OC.Settings.Apps.rebuildNavigation();
-				element.parent().fadeOut(function() {
-					element.remove();
+				element.parents('#apps-list > .section').fadeOut(function() {
+					this.remove();
 				});
 			}
 		},'json');
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 652dc38557d89..e3e9ad97d6f0f 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -60,15 +60,15 @@
 			<p><?php p($l->t('This app has an update available.')); ?></p>
 		</div>
 		<div class="warning hidden"></div>
+		<input class="update hidden" type="submit" value="<?php p($l->t('Update to %s', array('{{update}}'))); ?>" data-appid="{{id}}" />
+		{{#if canUnInstall}}
+		<input class="uninstall" type="submit" value="<?php p($l->t('Uninstall')); ?>" data-appid="{{id}}" />
+		{{/if}}
 		{{#if active}}
 		<input class="enable" type="submit" data-appid="{{id}}" data-active="true" value="<?php p($l->t("Disable"));?>"/>
 		{{else}}
 		<input class="enable{{#if needsDownload}} needs-download{{/if}}" type="submit" data-appid="{{id}}" data-active="false" {{#unless canInstall}}disabled="disabled"{{/unless}} value="<?php p($l->t("Enable"));?>"/>
 		{{/if}}
-		<input class="update hidden" type="submit" value="<?php p($l->t('Update to %s', array('{{update}}'))); ?>" data-appid="{{id}}" />
-		{{#if canUnInstall}}
-		<input class="uninstall" type="submit" value="<?php p($l->t('Uninstall app')); ?>" data-appid="{{id}}" />
-		{{/if}}
 	</div>
 </div>
 </script>

From d772e758ab6abe5836bb30f1a3e5d20ce1ac31ce Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Mon, 23 Jan 2017 17:48:37 +0100
Subject: [PATCH 06/19] Fix spacing between enbale-groups label and select2

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/css/settings.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 95dc2ed50328d..d24733f84b5b3 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -763,6 +763,10 @@ form.section {
 	margin-top: 0;
 }
 
+#apps-list.installed .groups-enable label {
+    margin-right: 3px;
+}
+
 /* LOG */
 #log {
 	white-space:normal;

From c7d9e0ab22ab5a498246761184bb89966d5287b2 Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Mon, 27 Mar 2017 16:55:12 +0200
Subject: [PATCH 07/19] Add Minor styling improvements with opacity instead of
 grey

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/css/settings.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index d24733f84b5b3..f327a73385aeb 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -525,6 +525,10 @@ input.userFilter {width: 200px;}
 	width: 0;
 }
 
+#app-category-disabled {
+	margin-bottom: 20px;
+}
+
 .appinfo { margin: 1em 40px; }
 #app-navigation .appwarning {
 	background: #fcc;
@@ -548,17 +552,18 @@ span.version {
 	margin-top: 8px;
 }
 .app-level span {
-	color: #555;
-	background-color: transparent;
-	border: 1px solid #555;
-	border-radius: 3px;
+	color: #000;
+	background-color: #ccc;
+	border: 1px solid #ccc;
+	border-radius: 30px;
 	padding: 3px 6px;
 }
+
 .app-level .official {
-	border-color: #37ce02;
 	background-position: left center;
 	background-position: 5px center;
 	padding-left: 25px;
+	opacity: .5;
 }
 
 .app-score {

From ec96faead84ca5edf37a2fd95dea51797cb3af8a Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 28 Mar 2017 22:17:31 +0200
Subject: [PATCH 08/19] improve wording of Apps mgmt navigation entries

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/Controller/AppSettingsController.php | 6 +++---
 settings/js/apps.js                           | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/settings/Controller/AppSettingsController.php b/settings/Controller/AppSettingsController.php
index 89cf5b6b7daf6..7be6c2bf56217 100644
--- a/settings/Controller/AppSettingsController.php
+++ b/settings/Controller/AppSettingsController.php
@@ -129,9 +129,9 @@ public function listCategories() {
 		$currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2);
 
 		$formattedCategories = [
-			['id' => self::CAT_ALL_INSTALLED, 'ident' => 'installed', 'displayName' => (string)$this->l10n->t('All installed')],
-			['id' => self::CAT_ENABLED, 'ident' => 'enabled', 'displayName' => (string)$this->l10n->t('Enabled')],
-			['id' => self::CAT_DISABLED, 'ident' => 'disabled', 'displayName' => (string)$this->l10n->t('Not enabled')],
+			['id' => self::CAT_ALL_INSTALLED, 'ident' => 'installed', 'displayName' => (string)$this->l10n->t('Your apps')],
+			['id' => self::CAT_ENABLED, 'ident' => 'enabled', 'displayName' => (string)$this->l10n->t('Enabled apps')],
+			['id' => self::CAT_DISABLED, 'ident' => 'disabled', 'displayName' => (string)$this->l10n->t('Disabled apps')],
 		];
 		$categories = $this->categoryFetcher->get();
 		foreach($categories as $category) {
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 80ac732730f1f..90453b7afdfcd 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -40,9 +40,9 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		}
 
 		var categories = [
-			{displayName: t('settings', 'Enabled'), ident: 'enabled', id: '0'},
-			{displayName: t('settings', 'Not enabled'), ident: 'disabled', id: '1'},
-			{displayName: t('settings', 'All installed'), ident: 'installed', id: '2'}
+			{displayName: t('settings', 'Enabled apps'), ident: 'enabled', id: '0'},
+			{displayName: t('settings', 'Disabled apps'), ident: 'disabled', id: '1'},
+			{displayName: t('settings', 'Your apps'), ident: 'installed', id: '2'}
 		];
 
 		var source   = $("#categories-template").html();

From 6e5f0e0d9db35fcda3333539bf0935381396d3d2 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 28 Mar 2017 23:55:11 +0200
Subject: [PATCH 09/19] hide app version and level on narrower screens

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/css/settings.css   | 13 +++++++++++++
 settings/templates/apps.php |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index f327a73385aeb..628759974670a 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -648,6 +648,19 @@ span.version {
 	}
 }
 
+/* hide app version and level on narrower screens */
+@media only screen and (max-width: 768px) {
+	#apps-list.installed .app-version,
+	#apps-list.installed .app-level {
+		display: none !important;
+	}
+}
+@media only screen and (max-width: 700px) {
+	#apps-list.installed .app-groups {
+		display: none !important;
+	}
+}
+
 .section h2.app-name {
 	margin-bottom: 8px;
 	display: inline;
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index e3e9ad97d6f0f..e102d87afaa89 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -40,12 +40,12 @@
 			{{name}}
 		{{/if}}
 	</h2>
-	<div class="app-version"> {{version}}</div>
+	<div class="app-version">{{version}}</div>
 	<div class="app-level">
 		{{{level}}}{{#unless internal}}<a href="https://apps.nextcloud.com/apps/{{id}}">View in Store</a>{{/unless}}
 	</div>
 
-	<div>
+	<div class="app-groups">
 		{{#if active}}
 		<div class="groups-enable">
 			<input type="checkbox" class="groups-enable__checkbox checkbox" id="groups_enable-{{id}}"/>

From b5a9c4e4554136c437a8d90a36e51e1fbc414eed Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 29 Mar 2017 01:12:46 +0200
Subject: [PATCH 10/19] fix sizing and alignment of your app list

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/css/settings.css   | 10 ++++++----
 settings/templates/apps.php |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 628759974670a..fb39bc410f792 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -755,22 +755,24 @@ form.section {
 
 #apps-list.installed .section > *{
 	display: table-cell;
-	width: auto;
-	height: 3em;
+	height: initial;
 	vertical-align: middle;
 	float: none;
 	border-bottom: 1px solid #eee;
-	padding: .5em 1em;
+	padding: 6px;
 	box-sizing: border-box;
 }
 
 #apps-list.installed .app-image {
-	text-align: center;
+	width: 44px;
+	text-align: right;
 	opacity: .5;
 }
 
 #apps-list.installed .app-image-icon svg {
 	margin-top: 5px;
+	width: 20px;
+	height: 20px;
 }
 
 .installed .actions {
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index e102d87afaa89..224092d9ae58d 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -33,16 +33,16 @@
 <script id="app-template-installed" type="text/x-handlebars">
 <div class="section" id="app-{{id}}">
 	<div class="app-image app-image-icon"></div>
-	<h2 class="app-name">
+	<div class="app-name">
 		{{#if detailpage}}
 			<a href="{{detailpage}}" target="_blank" rel="noreferrer">{{name}}</a>
 		{{else}}
 			{{name}}
 		{{/if}}
-	</h2>
+	</div>
 	<div class="app-version">{{version}}</div>
 	<div class="app-level">
-		{{{level}}}{{#unless internal}}<a href="https://apps.nextcloud.com/apps/{{id}}">View in Store</a>{{/unless}}
+		{{{level}}}{{#unless internal}}<a href="https://apps.nextcloud.com/apps/{{id}}"><?php p($l->t('View in store'));?> ↗</a>{{/unless}}
 	</div>
 
 	<div class="app-groups">

From bb436a430000771735901bc84e999e8d15497807 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 29 Mar 2017 01:13:48 +0200
Subject: [PATCH 11/19] Revert "Add Minor styling improvements with opacity
 instead of grey"

This reverts commit e9f8a15692ccd4690eef9d4268343d59aa8491ea.

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/css/settings.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index fb39bc410f792..f43170158ce8c 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -552,18 +552,17 @@ span.version {
 	margin-top: 8px;
 }
 .app-level span {
-	color: #000;
-	background-color: #ccc;
-	border: 1px solid #ccc;
-	border-radius: 30px;
+	color: #555;
+	background-color: transparent;
+	border: 1px solid #555;
+	border-radius: 3px;
 	padding: 3px 6px;
 }
-
 .app-level .official {
+	border-color: #37ce02;
 	background-position: left center;
 	background-position: 5px center;
 	padding-left: 25px;
-	opacity: .5;
 }
 
 .app-score {

From a392532e28bb50a724e7ea76daad4472307406b2 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 29 Mar 2017 01:35:18 +0200
Subject: [PATCH 12/19] also improve layout of apps from store

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/css/settings.css   | 20 ++++++--------------
 settings/js/apps.js         |  2 +-
 settings/templates/apps.php | 16 ++++++++--------
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index f43170158ce8c..8fe4ae8bebe8b 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -568,6 +568,7 @@ span.version {
 .app-score {
 	position: relative;
 	top: 4px;
+	opacity: .5;
 }
 
 #apps-list {
@@ -640,13 +641,6 @@ span.version {
 	}
 }
 
-@media (max-width: 600px), (min-width: 771px) and (max-width: 900px) {
-	#apps-list .section {
-		width: 100%;
-		box-sizing: border-box;
-	}
-}
-
 /* hide app version and level on narrower screens */
 @media only screen and (max-width: 768px) {
 	#apps-list.installed .app-version,
@@ -661,8 +655,8 @@ span.version {
 }
 
 .section h2.app-name {
-	margin-bottom: 8px;
-	display: inline;
+	display: block;
+	margin: 8px 0;
 }
 form.section {
 	position: relative;
@@ -676,11 +670,9 @@ form.section {
 	position: relative;
 }
 .app-image {
-	float: left;
-	padding-right: 10px;
-	width: 80px;
-	height: 80px;
-	opacity: 0.8;
+	height: 150px;
+	opacity: 1;
+	overflow: hidden;
 }
 .app-name,
 .app-version,
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 90453b7afdfcd..06ec001b67230 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -271,7 +271,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 	imageUrl : function (url, appfromstore) {
 		var img;
 		if (appfromstore) {
-			img = '<svg width="72" height="72" viewBox="0 0 72 72">';
+			img = '<svg width="250" height="250" viewBox="0 0 72 72">';
 			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url  + '"  class="app-icon" /></svg>';
 		} else {
 			img = '<svg width="32" height="32" viewBox="0 0 32 32">';
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 224092d9ae58d..d1e2e501a62eb 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -86,14 +86,6 @@
 			{{name}}
 		{{/if}}
 	</h2>
-	<div class="app-version"> {{version}}</div>
-	{{#if profilepage}}<a href="{{profilepage}}" target="_blank" rel="noreferrer">{{/if}}
-	<div class="app-author"><?php p($l->t('by %s', ['{{author}}']));?>
-		{{#if licence}}
-		(<?php p($l->t('%s-licensed', ['{{licence}}'])); ?>)
-		{{/if}}
-	</div>
-	{{#if profilepage}}</a>{{/if}}
 	<div class="app-level">
 		{{{level}}}
 	</div>
@@ -103,6 +95,14 @@
 	<div class="app-detailpage"></div>
 
 	<div class="app-description-container hidden">
+		<div class="app-version">{{version}}</div>
+		{{#if profilepage}}<a href="{{profilepage}}" target="_blank" rel="noreferrer">{{/if}}
+		<div class="app-author"><?php p($l->t('by %s', ['{{author}}']));?>
+			{{#if licence}}
+			(<?php p($l->t('%s-licensed', ['{{licence}}'])); ?>)
+			{{/if}}
+		</div>
+		{{#if profilepage}}</a>{{/if}}
 		<div class="app-description">{{{description}}}</div>
 		<!--<div class="app-changed">{{changed}}</div>-->
 		{{#if documentation}}

From a04413fd754ea4e56679f900bc67d3ff6428cd63 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 29 Mar 2017 01:41:53 +0200
Subject: [PATCH 13/19] rename Uninstall to Remove

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/js/apps.js         | 6 +++---
 settings/templates/apps.php | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/settings/js/apps.js b/settings/js/apps.js
index 06ec001b67230..83a8e893042ea 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -448,11 +448,11 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		}
 
 		OC.Settings.Apps.hideErrorMessage(appId);
-		element.val(t('settings','Uninstalling …'));
+		element.val(t('settings','Removing …'));
 		$.post(OC.filePath('settings','ajax','uninstallapp.php'),{appid:appId},function(result) {
 			if(!result || result.status !== 'success') {
-				OC.Settings.Apps.showErrorMessage(appId, t('settings','Error while uninstalling app'));
-				element.val(t('settings','Uninstall'));
+				OC.Settings.Apps.showErrorMessage(appId, t('settings','Error while removing app'));
+				element.val(t('settings','Remove'));
 			} else {
 				OC.Settings.Apps.rebuildNavigation();
 				element.parents('#apps-list > .section').fadeOut(function() {
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index d1e2e501a62eb..653adaa547429 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -62,7 +62,7 @@
 		<div class="warning hidden"></div>
 		<input class="update hidden" type="submit" value="<?php p($l->t('Update to %s', array('{{update}}'))); ?>" data-appid="{{id}}" />
 		{{#if canUnInstall}}
-		<input class="uninstall" type="submit" value="<?php p($l->t('Uninstall')); ?>" data-appid="{{id}}" />
+		<input class="uninstall" type="submit" value="<?php p($l->t('Remove')); ?>" data-appid="{{id}}" />
 		{{/if}}
 		{{#if active}}
 		<input class="enable" type="submit" data-appid="{{id}}" data-active="true" value="<?php p($l->t("Disable"));?>"/>
@@ -178,7 +178,7 @@
 	<input class="enable{{#if needsDownload}} needs-download{{/if}}" type="submit" data-appid="{{id}}" data-active="false" {{#unless canInstall}}disabled="disabled"{{/unless}} value="<?php p($l->t("Enable"));?>"/>
 	{{/if}}
 	{{#if canUnInstall}}
-	<input class="uninstall" type="submit" value="<?php p($l->t('Uninstall app')); ?>" data-appid="{{id}}" />
+	<input class="uninstall" type="submit" value="<?php p($l->t('Remove app')); ?>" data-appid="{{id}}" />
 	{{/if}}
 
 	<div class="warning hidden"></div>

From 47d9bffc53c7cdfd9f5547c690cfe9d5c184edae Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Wed, 5 Apr 2017 22:12:49 +0200
Subject: [PATCH 14/19] Make svgs more fluid and consistent remove action,
 instead of 'remove app'

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/js/apps.js         | 2 +-
 settings/templates/apps.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/settings/js/apps.js b/settings/js/apps.js
index 83a8e893042ea..d4d10ddc951e4 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -271,7 +271,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 	imageUrl : function (url, appfromstore) {
 		var img;
 		if (appfromstore) {
-			img = '<svg width="250" height="250" viewBox="0 0 72 72">';
+			img = '<svg viewBox="0 0 72 72">';
 			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url  + '"  class="app-icon" /></svg>';
 		} else {
 			img = '<svg width="32" height="32" viewBox="0 0 32 32">';
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 653adaa547429..817856717a0b5 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -178,7 +178,7 @@
 	<input class="enable{{#if needsDownload}} needs-download{{/if}}" type="submit" data-appid="{{id}}" data-active="false" {{#unless canInstall}}disabled="disabled"{{/unless}} value="<?php p($l->t("Enable"));?>"/>
 	{{/if}}
 	{{#if canUnInstall}}
-	<input class="uninstall" type="submit" value="<?php p($l->t('Remove app')); ?>" data-appid="{{id}}" />
+	<input class="uninstall" type="submit" value="<?php p($l->t('Remove')); ?>" data-appid="{{id}}" />
 	{{/if}}
 
 	<div class="warning hidden"></div>

From 2fbf1114aced77a3840ee024d925efb8671458fb Mon Sep 17 00:00:00 2001
From: "Felix A. Epp" <work@felixepp.de>
Date: Thu, 6 Apr 2017 13:10:42 +0200
Subject: [PATCH 15/19] Add installed category in AppSettingsControlerTest

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 .../Controller/AppSettingsControllerTest.php        | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/tests/Settings/Controller/AppSettingsControllerTest.php b/tests/Settings/Controller/AppSettingsControllerTest.php
index a3e4a6fd8285f..14dc33ca191d7 100644
--- a/tests/Settings/Controller/AppSettingsControllerTest.php
+++ b/tests/Settings/Controller/AppSettingsControllerTest.php
@@ -91,15 +91,20 @@ public function setUp() {
 
 	public function testListCategories() {
 		$expected = new JSONResponse([
+			[
+				'id' => 2,
+				'ident' => 'installed',
+				'displayName' => 'Your apps',
+			],
 			[
 				'id' => 0,
 				'ident' => 'enabled',
-				'displayName' => 'Enabled',
+				'displayName' => 'Enabled apps',
 			],
 			[
 				'id' => 1,
 				'ident' => 'disabled',
-				'displayName' => 'Not enabled',
+				'displayName' => 'Disabled apps',
 			],
 			[
 				'id' => 'auth',
@@ -175,7 +180,7 @@ public function testViewApps() {
 		$policy = new ContentSecurityPolicy();
 		$policy->addAllowedImageDomain('https://usercontent.apps.nextcloud.com');
 
-		$expected = new TemplateResponse('settings', 'apps', ['category' => 'enabled', 'appstoreEnabled' => true], 'user');
+		$expected = new TemplateResponse('settings', 'apps', ['category' => 'installed', 'appstoreEnabled' => true], 'user');
 		$expected->setContentSecurityPolicy($policy);
 
 		$this->assertEquals($expected, $this->appSettingsController->viewApps());
@@ -195,7 +200,7 @@ public function testViewAppsAppstoreNotEnabled() {
 		$policy = new ContentSecurityPolicy();
 		$policy->addAllowedImageDomain('https://usercontent.apps.nextcloud.com');
 
-		$expected = new TemplateResponse('settings', 'apps', ['category' => 'enabled', 'appstoreEnabled' => false], 'user');
+		$expected = new TemplateResponse('settings', 'apps', ['category' => 'installed', 'appstoreEnabled' => false], 'user');
 		$expected->setContentSecurityPolicy($policy);
 
 		$this->assertEquals($expected, $this->appSettingsController->viewApps());

From cf588f03bf91c24115e77c47f50e631f6f54a227 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Mon, 24 Apr 2017 23:13:46 +0200
Subject: [PATCH 16/19] Center spinner in apps management

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/js/apps.js         | 5 +++--
 settings/templates/apps.php | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/settings/js/apps.js b/settings/js/apps.js
index d4d10ddc951e4..c800182208309 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -74,8 +74,9 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		if (this._loadCategoryCall) {
 			this._loadCategoryCall.abort();
 		}
+
+		$('#app-content').addClass('icon-loading');
 		$('#apps-list')
-			.addClass('icon-loading')
 			.removeClass('hidden')
 			.html('');
 		$('#apps-list-empty').addClass('hidden');
@@ -166,7 +167,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 				});
 			},
 			complete: function() {
-				$('#apps-list').removeClass('icon-loading');
+				$('#app-content').removeClass('icon-loading');
 			}
 		});
 	},
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 817856717a0b5..ed842bb2ca91a 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -191,11 +191,11 @@
 
 	</ul>
 </div>
-<div id="app-content">
+<div id="app-content" class="icon-loading">
 	<svg class="app-filter">
 		<defs><filter id="invertIcon"><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"></feColorMatrix></filter></defs>
 	</svg>
-	<div id="apps-list" class="icon-loading"></div>
+	<div id="apps-list"></div>
 	<div id="apps-list-empty" class="hidden emptycontent emptycontent-search">
 		<div class="icon-search"></div>
 		<h2><?php p($l->t('No apps found for your version')) ?></h2>

From b48d81d59f6768cd4c7fb869c2c994d3d3805248 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Mon, 24 Apr 2017 23:49:04 +0200
Subject: [PATCH 17/19] Show placeholder for image-less apps in app management

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/img/default-app-icon.svg | 1 -
 settings/css/settings.css     | 5 +++++
 settings/js/apps.js           | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)
 delete mode 100644 core/img/default-app-icon.svg

diff --git a/core/img/default-app-icon.svg b/core/img/default-app-icon.svg
deleted file mode 100644
index 7ef7f0869212b..0000000000000
--- a/core/img/default-app-icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1" viewBox="0 0 32 32"><path d="M13.733 0a.915.915 0 0 0-.933.934V3.6c-1.182.304-2.243.794-3.267 1.4L7.6 3.068a.93.93 0 0 0-1.334 0l-3.2 3.2a.93.93 0 0 0 0 1.334L5 9.535c-.607 1.024-1.097 2.085-1.4 3.267H.933a.915.915 0 0 0-.933.934v4.533c0 .53.403.934.933.934H3.6c.303 1.182.793 2.243 1.4 3.267l-1.934 1.935a.93.93 0 0 0 0 1.333l3.2 3.2a.93.93 0 0 0 1.333 0L9.532 27c1.024.61 2.085 1.097 3.266 1.4v2.667c0 .53.402.933.932.933h4.534c.53 0 .933-.403.933-.935V28.4c1.18-.305 2.24-.795 3.265-1.4L24.4 28.93a.93.93 0 0 0 1.332 0l3.2-3.2a.93.93 0 0 0 0-1.333L27 22.465c.607-1.024 1.096-2.085 1.4-3.266h2.665a.915.915 0 0 0 .935-.933v-4.534a.915.915 0 0 0-.934-.933H28.4c-.304-1.182-.792-2.243-1.4-3.267L28.932 7.6a.93.93 0 0 0 0-1.334l-3.2-3.2a.93.93 0 0 0-1.333 0L22.465 5c-1.024-.607-2.084-1.097-3.266-1.4V.933A.915.915 0 0 0 18.267 0zM16 8.87A7.134 7.134 0 0 1 23.13 16 7.134 7.134 0 0 1 16 23.133c-3.936 0-7.13-3.196-7.13-7.132S12.063 8.87 16 8.87z" display="block" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/settings/css/settings.css b/settings/css/settings.css
index 8fe4ae8bebe8b..103dcf26a7125 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -766,6 +766,11 @@ form.section {
 	height: 20px;
 }
 
+#apps-list .app-image-icon svg {
+	opacity: .3;
+	margin-top: 50px;
+}
+
 .installed .actions {
 	text-align: right;
 }
diff --git a/settings/js/apps.js b/settings/js/apps.js
index c800182208309..b016d7c07d0ad 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', 'default-app-icon');
+			app.preview = OC.imagePath('core', 'filetypes/image');
 			app.previewAsIcon = true;
 		}
 

From f03e59530a6d766f177330f90d2feb1d6491e5e5 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Mon, 24 Apr 2017 23:52:07 +0200
Subject: [PATCH 18/19] Show spinner until app store images loaded

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/js/apps.js         | 2 +-
 settings/templates/apps.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/settings/js/apps.js b/settings/js/apps.js
index b016d7c07d0ad..03ae4e2e8c97b 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -237,7 +237,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			currentImage.onload = function() {
 				page.find('.app-image')
 					.append(OC.Settings.Apps.imageUrl(app.preview, app.fromAppStore))
-					.fadeIn();
+					.removeClass('icon-loading');
 			};
 		}
 
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index ed842bb2ca91a..310513722cfb1 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -76,7 +76,7 @@
 <script id="app-template" type="text/x-handlebars">
 	<div class="section" id="app-{{id}}">
 	{{#if preview}}
-	<div class="app-image{{#if previewAsIcon}} app-image-icon{{/if}} hidden">
+	<div class="app-image{{#if previewAsIcon}} app-image-icon{{/if}} icon-loading">
 	</div>
 	{{/if}}
 	<h2 class="app-name">

From 88bc43182f3352fd5ddb23c01b9b7b3ae4b6b2fd Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 25 Apr 2017 00:20:12 +0200
Subject: [PATCH 19/19] Fix app icon being inverted for app store apps too

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/img/places/default-app-icon.svg |  1 +
 settings/css/settings.css            | 12 ++++++++----
 settings/js/apps.js                  | 15 +++++++++++----
 3 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 core/img/places/default-app-icon.svg

diff --git a/core/img/places/default-app-icon.svg b/core/img/places/default-app-icon.svg
new file mode 100644
index 0000000000000..7ef7f0869212b
--- /dev/null
+++ b/core/img/places/default-app-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1" viewBox="0 0 32 32"><path d="M13.733 0a.915.915 0 0 0-.933.934V3.6c-1.182.304-2.243.794-3.267 1.4L7.6 3.068a.93.93 0 0 0-1.334 0l-3.2 3.2a.93.93 0 0 0 0 1.334L5 9.535c-.607 1.024-1.097 2.085-1.4 3.267H.933a.915.915 0 0 0-.933.934v4.533c0 .53.403.934.933.934H3.6c.303 1.182.793 2.243 1.4 3.267l-1.934 1.935a.93.93 0 0 0 0 1.333l3.2 3.2a.93.93 0 0 0 1.333 0L9.532 27c1.024.61 2.085 1.097 3.266 1.4v2.667c0 .53.402.933.932.933h4.534c.53 0 .933-.403.933-.935V28.4c1.18-.305 2.24-.795 3.265-1.4L24.4 28.93a.93.93 0 0 0 1.332 0l3.2-3.2a.93.93 0 0 0 0-1.333L27 22.465c.607-1.024 1.096-2.085 1.4-3.266h2.665a.915.915 0 0 0 .935-.933v-4.534a.915.915 0 0 0-.934-.933H28.4c-.304-1.182-.792-2.243-1.4-3.267L28.932 7.6a.93.93 0 0 0 0-1.334l-3.2-3.2a.93.93 0 0 0-1.333 0L22.465 5c-1.024-.607-2.084-1.097-3.266-1.4V.933A.915.915 0 0 0 18.267 0zM16 8.87A7.134 7.134 0 0 1 23.13 16 7.134 7.134 0 0 1 16 23.133c-3.936 0-7.13-3.196-7.13-7.132S12.063 8.87 16 8.87z" display="block" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/settings/css/settings.css b/settings/css/settings.css
index 103dcf26a7125..a046148dcc404 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 03ae4e2e8c97b..6da8c395ecbdf 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');
+				}
 			};
 		}