Icon on apps settings

core/css/icons.scss

@@ -488,3 +488,57 @@ img, object, video, button, textarea, input, select {
 .icon-picture {
 	background-image: url('../img/places/picture.svg?v=1');
 }
+
+/* APP CATEGORIES ------------------------------------------------------------------- */
+.icon-category-installed {
+	background-image: url('../img/actions/user.svg?v=1');
+}
+.icon-category-enabled {
+	background-image: url('../img/actions/checkmark.svg?v=1');
+}
+.icon-category-disabled {
+	background-image: url('../img/actions/close.svg?v=1');
+}
+.icon-category-app-bundles {
+	background-image: url('../img/categories/bundles.svg?v=1');
+}
+
+.icon-category-files {
+	background-image: url('../img/categories/files.svg?v=1');
+}
+
+.icon-category-social {
+	background-image: url('../img/categories/social.svg?v=1');
+}
+
+.icon-category-office {
+	background-image: url('../img/categories/office.svg?v=1');
+}
+
+.icon-category-auth {
+	background-image: url('../img/categories/auth.svg?v=1');
+}
+
+.icon-category-monitoring {
+	background-image: url('../img/categories/monitoring.svg?v=1');
+}
+
+.icon-category-multimedia {
+	background-image: url('../img/categories/multimedia.svg?v=1');
+}
+
+.icon-category-organization {
+	background-image: url('../img/categories/organization.svg?v=1');
+}
+
+.icon-category-customization {
+	background-image: url('../img/categories/customization.svg?v=1');
+}
+
+.icon-category-integration {
+	background-image: url('../img/categories/integration.svg?v=1');
+}
+
+.icon-category-tools {
+	background-image: url('../img/actions/settings-dark.svg?v=1');
+}

settings/js/apps.js

@@ -40,10 +40,10 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			this._loadCategoriesCall.abort();
 		}
 
-		var categories = [
-			{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 categories = [,
+			{displayName: t('settings', 'Your apps'), ident: 'installed', id: '0'},
+			{displayName: t('settings', 'Enabled apps'), ident: 'enabled', id: '1',},
+			{displayName: t('settings', 'Disabled apps'), ident: 'disabled', id: '2'}
 		];
 
 		var source   = $("#categories-template").html();

settings/templates/apps.php

@@ -18,13 +18,13 @@
 <script id="categories-template" type="text/x-handlebars-template">
 {{#each this}}
 	<li id="app-category-{{ident}}" data-category-id="{{ident}}" tabindex="0">
-		<a href="#">{{displayName}}</a>
+		<a href="#" class="icon-category-{{ident}}">{{displayName}}</a>
 	</li>
 {{/each}}
 
 <?php if($_['appstoreEnabled']): ?>
 	<li>
-		<a class="app-external" target="_blank" rel="noreferrer" href="https://docs.nextcloud.org/server/12/developer_manual/"><?php p($l->t('Developer documentation'));?> ↗</a>
+		<a class="app-external icon-info" target="_blank" rel="noreferrer" href="https://docs.nextcloud.org/server/12/developer_manual/"><?php p($l->t('Developer documentation'));?> ↗</a>
 	</li>
 <?php endif; ?>
 </script>