Vue improvements

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is mostly based on [Keep a Changelog](https://keepachangelog.com/en/1
 # Unreleased
 ## [25.x.x]
 ### Changed
+- Use Nextcloud vue components for item list and article view
+- Fix aspect ratio of article images
 
 ### Fixed
 

package.json

@@ -35,7 +35,7 @@
   },
   "engines": {
     "node": "^16.0.0",
-    "npm": "^8.0.0"
+    "npm": "^7.0.0 || ^8.0.0"
   },
   "resolutions": {
     "natives": "1.1.3"
@@ -52,18 +52,15 @@
     "@nextcloud/password-confirmation": "^1.0.1",
     "@nextcloud/router": "^2.0.0",
     "@nextcloud/vue": "^7.8.0",
-    "vue": "^2.7.0",
+    "@vue/vue2-jest": "^29.2.6",
     "lodash": "^4.17.21",
+    "vue": "^2.7.0",
     "vue-router": "^3.5.3",
     "vuex": "^3.6.2"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ],
-  "engines": {
-    "node": "^16.0.0",
-    "npm": "^7.0.0 || ^8.0.0"
-  },
   "devDependencies": {
     "@babel/core": "^7.11.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -128,7 +125,6 @@
     "v-click-outside": "^3.2.0",
     "vue-color": "^2.8.1",
     "vue-eslint-parser": "^9.0.2",
-    "vue-jest": "^3.0.7",
     "vue-loader": "^15.10.1",
     "vue-material-design-icons": "^5.1.2",
     "vue-multiselect": "^2.1.6",
@@ -152,7 +148,7 @@
     },
     "testEnvironment": "jsdom",
     "transform": {
-      ".*\\.(vue)$": "vue-jest",
+      ".*\\.(vue)$": "@vue/vue2-jest",
       "^.+\\.ts?$": "ts-jest"
     },
     "transformIgnorePatterns": [

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,15 +48,13 @@
 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'
 
 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;

src/components/ContentTemplate.vue

@@ -0,0 +1,101 @@
+<template>
+	<NcAppContent :show-details="showDetails"
+		@update:showDetails="unselectItem()">
+		<template #list>
+			<NcAppContentList>
+				<div class="header">
+					<slot name="header" />
+				</div>
+
+				<FeedItemDisplayList :items="items"
+					:fetch-key="fetchKey"
+					:config="config"
+					@load-more="emit('load-more')" />
+			</NcAppContentList>
+		</template>
+
+		<NcAppContentDetails>
+			<FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" />
+			<NcEmptyContent v-else
+				:title="t('news', 'No article selected')"
+				:description="t('news', 'Please select an article from the list...')">
+				<template #icon>
+					<TextIcon />
+				</template>
+			</NcEmptyContent>
+		</NcAppContentDetails>
+	</NcAppContent>
+</template>
+
+<script setup lang="ts">
+
+/**
+ * This component uses vue's composition api format,
+ * for more information, see https://vuejs.org/guide/extras/composition-api-faq.html
+ */
+
+import { type PropType, computed, ref, watch } from 'vue'
+
+import itemStore from '../store/item'
+
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import NcAppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
+import NcAppContentDetails from '@nextcloud/vue/dist/Components/NcAppContentDetails'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+
+import TextIcon from 'vue-material-design-icons/Text.vue'
+
+import { FeedItem } from '../types/FeedItem'
+
+import FeedItemDisplayList from './feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplay from './feed-display/FeedItemDisplay.vue'
+
+defineProps({
+	items: {
+		type: Array as PropType<Array<FeedItem>>,
+		required: true,
+	},
+	fetchKey: {
+		type: String,
+		required: true,
+	},
+	config: {
+		type: Object,
+	},
+})
+
+const emit = defineEmits<{(event: 'load-more'): void}>()
+
+const showDetails = ref(false)
+
+const selectedFeedItem = computed(() => {
+	return itemStore.getters.selected(itemStore.state)
+})
+
+watch(selectedFeedItem, (newSelectedFeedItem) => {
+	if (newSelectedFeedItem) {
+		showDetails.value = true
+	} else {
+		showDetails.value = false
+	}
+})
+
+function unselectItem() {
+	itemStore.mutations.SET_SELECTED_ITEM(
+		itemStore.state,
+		{ id: undefined },
+	)
+}
+
+</script>
+
+<style scoped>
+
+.header {
+	padding-left: 50px;
+	position: absolute;
+	top: 1em;
+	font-weight: 700;
+}
+
+</style>

src/components/feed-display/FeedItemDisplay.vue

@@ -85,9 +85,9 @@
 				<img v-else :src="item.mediaThumbnail" alt="">
 			</div>
 
 			<div v-if="item.mediaDescription" class="enclosure description" v-html="item.mediaDescription" />
 
 			<div class="body" :dir="item.rtl && 'rtl'" v-html="item.body" />
 		</div>
 	</div>
 </template>
@@ -208,6 +208,9 @@
 		padding: 0 50px 50px 50px;
 		overflow-y: scroll;
 		height: 100%;
+		max-width: 1024px;
+		margin-left: auto;
+		margin-right: auto;
 	}
 
 	.article video {
@@ -267,6 +270,7 @@
 
 	.article img {
 		width: 100%;
+		height: auto;
 	}
 
 	.article h1 {

src/components/feed-display/FeedItemDisplayList.vue

@@ -35,10 +35,6 @@
 					</template>
 				</template>
 			</VirtualScroll>
-
-			<div v-if="selected !== undefined" class="feed-item-container">
-				<FeedItemDisplay :item="selected" />
-			</div>
 		</div>
 	</div>
 </template>
@@ -58,7 +54,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 import VirtualScroll from './VirtualScroll.vue'
 import FeedItemRow from './FeedItemRow.vue'
-import FeedItemDisplay from './FeedItemDisplay.vue'
 
 import { FeedItem } from '../../types/FeedItem'
 
@@ -71,7 +66,6 @@ export default Vue.extend({
 	components: {
 		VirtualScroll,
 		FeedItemRow,
-		FeedItemDisplay,
 		FilterIcon,
 		StarIcon,
 		StarCheckIcon,
@@ -115,9 +109,6 @@ export default Vue.extend({
 		}
 	},
 	computed: {
-		selected(): FeedItem | undefined {
-			return this.$store.getters.selected
-		},
 		reachedEnd(): boolean {
 			return this.mounted && this.$store.state.items.allItemsLoaded[this.fetchKey] === true
 		},
@@ -206,30 +197,12 @@ export default Vue.extend({
 		.feed-item-display-container {
 			flex-direction: column;
 		}
-
-		.feed-item-container {
-			flex: 1 1 1000px;
-			max-height: calc(100vh - 200px)
-		}
 	}
 
 	@media only screen and (min-width: 768px) {
 		.feed-item-display-container {
 			flex-direction: row;
 		}
-
-		.feed-item-container {
-			width: 50%;
-			max-height: unset;
-		}
-	}
-
-	.feed-item-container {
-		overflow-y: hidden;
-		-webkit-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
-		-moz-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
-		box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
-		border-top: 1px solid var(--color-border);
 	}
 
 	.header {