Create right table view

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

apps/settings/css/settings.scss

@@ -1051,11 +1051,9 @@ span.version {
 		}
 
 		h2 {
-			display: table-cell;
-			position: absolute;
 			padding-left: 6px;
 			padding-top: 15px;
-
+			margin-bottom: 12px;
 			.enable {
 				position: relative;
 				top: -1px;

apps/settings/src/components/AppList.vue

@@ -38,7 +38,16 @@
 					{{ t('settings', 'All apps are up-to-date.') }}
 				</div>
 
-				<transition-group name="app-list" tag="div" class="apps-list-container">
+				<transition-group name="app-list" tag="table" class="apps-list-container">
+					<tr class="apps-header">
+						<th class="app-image"><span class="hidden-visually">{{ t('settings', 'App icon') }}</span></th>
+						<th class="app-name"><span class="hidden-visually">{{ t('settings', 'App name') }}</span></th>
+						<th class="app-version"><span class="hidden-visually">{{ t('settings', 'App version') }}</span></th>
+						<th class="app-level"><span class="hidden-visually">{{ t('settings', 'App level') }}</span></th>
+						<th class="actions">
+							&nbsp;<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
+						</th>
+					</tr>
 					<AppItem v-for="app in apps"
 						:key="app.id"
 						:app="app"
@@ -48,19 +57,18 @@
 
 			<transition-group v-if="useBundleView"
 				name="app-list"
-				tag="div"
+				tag="table"
 				class="apps-list-container">
 				<template v-for="bundle in bundles">
-					<div :key="bundle.id" class="apps-header">
-						<div class="app-image" />
-						<h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" @click="toggleBundle(bundle.id)"></h2>
-						<div class="app-version" />
-						<div class="app-level" />
-						<div class="app-groups" />
-						<div class="actions">
-							&nbsp;
-						</div>
-					</div>
+					<tr :key="bundle.id" class="apps-header">
+						<th class="app-image"><span class="hidden-visually">{{ t('settings', 'App icon') }}</span></th>
+						<th><h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" @click="toggleBundle(bundle.id)"></h2></th>
+						<th class="app-version"><span class="hidden-visually">{{ t('settings', 'App version') }}</span></th>
+						<th class="app-level"><span class="hidden-visually">{{ t('settings', 'App level') }}</span></th>
+						<th class="actions">
+							&nbsp;<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
+						</th>
+					</tr>
 					<AppItem v-for="app in bundleApps(bundle.id)"
 						:key="bundle.id + app.id"
 						:app="app"
@@ -88,8 +96,7 @@
 					<AppItem v-for="app in searchApps"
 						:key="app.id"
 						:app="app"
-						:category="category"
-						:list-view="true" />
+						:category="category" />
 				</template>
 			</div>
 		</div>
@@ -240,7 +247,7 @@ export default {
 			const limit = pLimit(1)
 			this.apps
 				.filter(app => app.update)
-				.map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id }))
+				.map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id })),
 				)
 		},
 	},

apps/settings/src/components/AppList/AppItem.vue

@@ -21,8 +21,11 @@
   -->
 
 <template>
-	<div class="section" :class="{ selected: isSelected }" @click="showAppDetails">
-		<div class="app-image app-image-icon" @click="showAppDetails">
+	<component :is="listView ? `tr` : `div`"
+		class="section"
+		:class="{ selected: isSelected }"
+		@click="showAppDetails">
+		<component :is="isTableView" class="app-image app-image-icon" @click="showAppDetails">
 			<div v-if="(listView && !app.preview) || (!listView && !screenshotLoaded)" class="icon-settings-dark" />
 
 			<svg v-else-if="listView && app.preview"
@@ -39,19 +42,19 @@
 			</svg>
 
 			<img v-if="!listView && app.screenshot && screenshotLoaded" :src="app.screenshot" width="100%">
-		</div>
-		<div class="app-name" @click="showAppDetails">
+		</component>
+		<component :is="isTableView" class="app-name" @click="showAppDetails">
 			{{ app.name }}
-		</div>
-		<div v-if="!listView" class="app-summary">
+		</component>
+		<component :is="isTableView" v-if="!listView" class="app-summary">
 			{{ app.summary }}
-		</div>
-		<div v-if="listView" class="app-version">
+		</component>
+		<component :is="isTableView" v-if="listView" class="app-version">
 			<span v-if="app.version">{{ app.version }}</span>
 			<span v-else-if="app.appstoreData.releases[0].version">{{ app.appstoreData.releases[0].version }}</span>
-		</div>
+		</component>
 
-		<div class="app-level">
+		<component :is="isTableView" class="app-level">
 			<span v-if="app.level === 300"
 				:title="t('settings', 'This app is supported via your current Nextcloud subscription.')"
 				:aria-label="t('settings', 'This app is supported via your current Nextcloud subscription.')"
@@ -63,9 +66,8 @@
 				class="official icon-checkmark">
 				{{ t('settings', 'Featured') }}</span>
 			<AppScore v-if="hasRating && !listView" :score="app.score" />
-		</div>
-
-		<div class="actions">
+		</component>
+		<component :is="isTableView" class="actions">
 			<div v-if="app.error" class="warning">
 				{{ app.error }}
 			</div>
@@ -104,8 +106,8 @@
 				@click.stop="forceEnable(app.id)">
 				{{ forceEnableButtonText }}
 			</NcButton>
-		</div>
-	</div>
+		</component>
+	</component>
 </template>
 
 <script>
@@ -140,6 +142,9 @@ export default {
 		hasRating() {
 			return this.app.appstoreData && this.app.appstoreData.ratingNumOverall > 5
 		},
+		isTableView() {
+	  	return this.listView ? 'td' : 'div'
+		},
 	},
 	watch: {
 		'$route.params.id'(id) {