Fix active indicator and add proper separation between screenshot and preview

Signed-off-by: Julius Härtl <jus@bitgrid.net>

settings/Controller/AppSettingsController.php

@@ -486,7 +486,7 @@ class AppSettingsController extends Controller {
 			$appStoreData = $manager->getApp($appData['id']);
 			$appData['appstoreData'] = $appStoreData;
 			$appData['license'] = $appStoreData['releases'][0]['licenses'];
-			$appData['preview'] = isset($appStoreData['screenshots'][0]['url']) ? 'https://usercontent.apps.nextcloud.com/'.base64_encode($appStoreData['screenshots'][0]['url']) : '';
+			$appData['screenshot'] = isset($appStoreData['screenshots'][0]['url']) ? 'https://usercontent.apps.nextcloud.com/'.base64_encode($appStoreData['screenshots'][0]['url']) : '';
 			return $appData;
 		}, $apps);
 

settings/src/components/appList.vue

@@ -53,7 +53,7 @@
 		</div>
 
 		<div id="apps-list-empty" class="emptycontent emptycontent-search" v-if="!loading && searchApps.length === 0 && apps.length === 0">
-			<div id="app-list-empty-icon" class="icon-search"></div>
+			<div id="app-list-empty-icon" class="icon-settings-dark"></div>
 			<h2>{{ t('settings', 'No apps found for your versoin')}}</h2>
 		</div>
 

settings/src/components/appList/appItem.vue

@@ -24,11 +24,14 @@
 	<div class="section" v-bind:class="{ selected: isSelected }">
 		<div class="app-image app-image-icon" v-on:click="showAppDetails">
 			<div v-if="!app.preview" class="icon-settings-dark"></div>
-			<img v-if="!app.previewAsIcon && app.preview" :src="app.preview"  width="100%" />
-			<svg v-if="app.previewAsIcon && app.preview" width="32" height="32" viewBox="0 0 32 32">
+			<img v-if="!app.previewAsIcon && app.preview && listView" :src="app.preview"  width="100%" />
+
+			<svg v-if="listView && app.previewAsIcon && app.preview" width="32" height="32" viewBox="0 0 32 32">
 				<defs><filter :id="filterId"><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>
 				<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" :filter="filterUrl" :xlink:href="app.preview" class="app-icon"></image>
 			</svg>
+
+			<img v-if="!listView && app.screenshot" :src="app.screenshot"  width="100%" />
 		</div>
 		<div class="app-name" v-on:click="showAppDetails">
 			{{ app.name }}

settings/src/views/Apps.vue

@@ -122,7 +122,7 @@ export default {
 			// Map groups
 			categories = categories.map(category => {
 				let item = {};
-				item.id = category.ident;
+				item.id = 'app-category-' + category.ident;
 				item.icon = 'icon-category-' + category.ident;
 				item.classes = [];							// empty classes, active will be set later
 				item.router = {								// router link to
@@ -188,7 +188,7 @@ export default {
 			categories = defaultCategories.concat(categories);
 
 			// Set current group as active
-			let activeGroup = categories.findIndex(group => group.id === this.category);
+			let activeGroup = categories.findIndex(group => group.id === 'app-category-' + this.category);
 			if (activeGroup >= 0) {
 				categories[activeGroup].classes.push('active');
 			} else {