move NcAppContent into route components & use list slot

Signed-off-by: Paul Tirk <paultirk@paultirk.com>

6 files changed, 74 insertions, 73 deletions

diff --git a/src/App.vue b/src/App.vue
index 5b818d6d8..39047f8cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,9 +21,7 @@
 		<div id="news-app">
 			<div id="content-display" :class="{ playing: playingItem }">
 				<Sidebar />
-				<NcAppContent>
-					<RouterView />
-				</NcAppContent>
+				<RouterView />
 			</div>
 			<div v-if="playingItem" class="podcast">
 				<audio controls
@@ -50,7 +48,6 @@
 import Vue from 'vue'
 import { mapState } from 'vuex'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import Sidebar from './components/Sidebar.vue'
 import { ACTIONS, MUTATIONS } from './store'
 
@@ -58,7 +55,6 @@ export default Vue.extend({
 	components: {
 		NcContent,
 		Sidebar,
-		NcAppContent,
 	},
 	computed: {
 		playingItem() {
@@ -120,10 +116,6 @@ export default Vue.extend({
 		font-size: small;
 	}
 
-	.route-container {
-		height: 100%;
-	}
-
 	#content-display {
 		display: flex;
 		flex-direction: row;
diff --git a/src/components/routes/All.vue b/src/components/routes/All.vue
index a1cc52fef..fc3428679 100644
--- a/src/components/routes/All.vue
+++ b/src/components/routes/All.vue
@@ -1,19 +1,23 @@
 <template>
-	<div class="route-container">
-		<div class="header">
-			{{ t('news', 'All Articles') }}
-		</div>
-
-		<FeedItemDisplayList :items="allItems"
-			:fetch-key="'all'"
-			@load-more="fetchMore()" />
-	</div>
+	<NcAppContent>
+		<template #list>
+			<div class="header">
+				{{ t('news', 'All Articles') }}
+			</div>
+
+			<FeedItemDisplayList :items="allItems"
+				:fetch-key="'all'"
+				@load-more="fetchMore()" />
+		</template>
+	</NcAppContent>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
 
 import { FeedItem } from '../../types/FeedItem'
@@ -21,6 +25,7 @@ import { ACTIONS, MUTATIONS } from '../../store'
 
 export default Vue.extend({
 	components: {
+		NcAppContent,
 		FeedItemDisplayList,
 	},
 	computed: {
@@ -44,9 +49,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-	.route-container {
-		height: 100%;
-	}
 
 	.header {
 		padding-left: 50px;
diff --git a/src/components/routes/Feed.vue b/src/components/routes/Feed.vue
index 31194eb09..db56af78d 100644
--- a/src/components/routes/Feed.vue
+++ b/src/components/routes/Feed.vue
@@ -1,20 +1,23 @@
 <template>
-	<div class="route-container">
-		<div class="header">
-			{{ feed ? feed.title : '' }}
-			<NcCounterBubble v-if="feed" class="counter-bubble">
-				{{ feed.unreadCount }}
-			</NcCounterBubble>
-		</div>
+	<NcAppContent>
+		<template #list>
+			<div class="header">
+				{{ feed ? feed.title : '' }}
+				<NcCounterBubble v-if="feed" class="counter-bubble">
+					{{ feed.unreadCount }}
+				</NcCounterBubble>
+			</div>
 
-		<FeedItemDisplayList :items="items" :fetch-key="'feed-'+feedId" @load-more="fetchMore()" />
-	</div>
+			<FeedItemDisplayList :items="items" :fetch-key="'feed-'+feedId" @load-more="fetchMore()" />
+		</template>
+	</NcAppContent>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
@@ -25,6 +28,7 @@ import { Feed } from '../../types/Feed'
 
 export default Vue.extend({
 	components: {
+		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
 	},
@@ -64,9 +68,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.route-container {
-	height: 100%;
-}
 
 .header {
 	padding-left: 50px;
diff --git a/src/components/routes/Folder.vue b/src/components/routes/Folder.vue
index 17fd768c3..df8232ac4 100644
--- a/src/components/routes/Folder.vue
+++ b/src/components/routes/Folder.vue
@@ -1,20 +1,23 @@
 <template>
-	<div class="route-container">
-		<div class="header">
-			{{ folder ? folder.name : '' }}
-			<NcCounterBubble v-if="folder" class="counter-bubble">
-				{{ unreadCount }}
-			</NcCounterBubble>
-		</div>
+	<NcAppContent>
+		<template #list>
+			<div class="header">
+				{{ folder ? folder.name : '' }}
+				<NcCounterBubble v-if="folder" class="counter-bubble">
+					{{ unreadCount }}
+				</NcCounterBubble>
+			</div>
 
-		<FeedItemDisplayList :items="items" :fetch-key="'folder-'+folderId" @load-more="fetchMore()" />
-	</div>
+			<FeedItemDisplayList :items="items" :fetch-key="'folder-'+folderId" @load-more="fetchMore()" />
+		</template>
+	</NcAppContent>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
@@ -26,6 +29,7 @@ import { Folder } from '../../types/Folder'
 
 export default Vue.extend({
 	components: {
+		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
 	},
@@ -74,9 +78,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.route-container {
-	height: 100%;
-}
 
 .header {
 	padding-left: 50px;
diff --git a/src/components/routes/Starred.vue b/src/components/routes/Starred.vue
index 730c94039..eedbf90e7 100644
--- a/src/components/routes/Starred.vue
+++ b/src/components/routes/Starred.vue
@@ -1,23 +1,26 @@
 <template>
-	<div class="route-container">
-		<div class="header">
-			{{ t('news', 'Starred') }}
-			<NcCounterBubble class="counter-bubble">
-				{{ items.starredCount }}
-			</NcCounterBubble>
-		</div>
+	<NcAppContent>
+		<template #list>
+			<div class="header">
+				{{ t('news', 'Starred') }}
+				<NcCounterBubble class="counter-bubble">
+					{{ items.starredCount }}
+				</NcCounterBubble>
+			</div>
 
-		<FeedItemDisplayList :items="starred"
-			:fetch-key="'starred'"
-			:config="{ starFilter: false }"
-			@load-more="fetchMore()" />
-	</div>
+			<FeedItemDisplayList :items="starred"
+				:fetch-key="'starred'"
+				:config="{ starFilter: false }"
+				@load-more="fetchMore()" />
+		</template>
+	</NcAppContent>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
@@ -27,6 +30,7 @@ import { ACTIONS, MUTATIONS } from '../../store'
 
 export default Vue.extend({
 	components: {
+		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
 	},
@@ -51,9 +55,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-	.route-container {
-		height: 100%;
-	}
 
 	.header {
 		padding-left: 50px;
diff --git a/src/components/routes/Unread.vue b/src/components/routes/Unread.vue
index b71a724cb..e65ad7173 100644
--- a/src/components/routes/Unread.vue
+++ b/src/components/routes/Unread.vue
@@ -1,24 +1,27 @@
 <template>
-	<div class="route-container">
-		<div class="header">
-			{{ t('news', 'Unread Articles') }}
-			<NcCounterBubble class="counter-bubble">
-				{{ items.unreadCount }}
-			</NcCounterBubble>
-		</div>
+	<NcAppContent>
+		<template #list>
+			<div class="header">
+				{{ t('news', 'Unread Articles') }}
+				<NcCounterBubble class="counter-bubble">
+					{{ items.unreadCount }}
+				</NcCounterBubble>
+			</div>
 
-		<FeedItemDisplayList v-if="unread()"
-			:items="unread()"
-			:fetch-key="'unread'"
-			:config="{ unreadFilter: false }"
-			@load-more="fetchMore()" />
-	</div>
+			<FeedItemDisplayList v-if="unread()"
+				:items="unread()"
+				:fetch-key="'unread'"
+				:config="{ unreadFilter: false }"
+				@load-more="fetchMore()" />
+		</template>
+	</NcAppContent>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
@@ -33,6 +36,7 @@ type UnreadItemState = {
 
 export default Vue.extend({
 	components: {
+		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
 	},