Vue improvements 2

AUTHORS.md

@@ -22,6 +22,7 @@
 * [Bernhard Posselt](mailto:[email protected])
 * [Thomas Müller](mailto:[email protected])
 * [Hoàng Đức Hiếu](mailto:[email protected])
+* [IgorA100](mailto:[email protected])
 * [Marco Nassabain](mailto:[email protected])
 * [rakekniven](mailto:[email protected])
 * [Daniel Opitz](mailto:[email protected])
@@ -40,6 +41,7 @@
 * [Xéfir Destiny](mailto:[email protected])
 * [devlinjunker](mailto:[email protected])
 * [hydrian](mailto:[email protected])
+* [mortee](mailto:[email protected])
 * [Daniel Opitz](mailto:[email protected])
 * [Daniel Rheinbay](mailto:[email protected])
 * [Lars Bensmann](mailto:[email protected])
@@ -52,7 +54,6 @@
 * [Christoph Stenglein](mailto:[email protected])
 * [Daniel Kesselberg](mailto:[email protected])
 * [ELHADDAD Hamza](mailto:[email protected])
-* [IgorA100](mailto:[email protected])
 * [Jakob Sack](mailto:[email protected])
 * [ManuelSailer](mailto:[email protected])
 * [Qingping Hou](mailto:[email protected])
@@ -75,16 +76,19 @@
 * [Loki3000](mailto:[email protected])
 * [Maik Kulbe](mailto:[email protected])
 * [Manuel Sailer](mailto:[email protected])
+* [Martin Vuille](mailto:[email protected])
 * [Michael Gapczynski](mailto:[email protected])
 * [Nikita Chernyi](mailto:[email protected])
 * [Peter Hedlund](mailto:[email protected])
+* [Petra Mirelli](mailto:[email protected])
 * [Simon Spannagel](mailto:[email protected])
 * [bbBowser](mailto:[email protected])
 * [benediktb](mailto:[email protected])
 * [coderkun](mailto:[email protected])
 * [davidak](mailto:[email protected])
 * [hooger](mailto:[email protected])
 * [lsmooth](mailto:[email protected])
+* [mortee](mailto:[email protected])
 * [s17t.net](mailto:[email protected])
 * [Accalia](mailto:[email protected])
 * [Accalia Elementia](mailto:[email protected])
@@ -109,6 +113,7 @@
 * [Chris Aumann](mailto:[email protected])
 * [Chris Danser](mailto:[email protected])
 * [Chris Noxz](mailto:[email protected])
+* [Christof Dorner](mailto:[email protected])
 * [Christoph Wurst](mailto:[email protected])
 * [Clemens](mailto:[email protected])
 * [Colin W](mailto:[email protected])
@@ -138,10 +143,12 @@
 * [Hendrik Leppelsack](mailto:[email protected])
 * [Jasper Knockaert](mailto:[email protected])
 * [Jimmy Boucher](mailto:[email protected])
+* [Josh](mailto:[email protected])
 * [Kevin Decherf](mailto:[email protected])
 * [Kuba Orlik](mailto:[email protected])
 * [Maceček Richard](mailto:[email protected])
 * [Marc Cousin](mailto:[email protected])
+* [Marcus Nitzschke](mailto:[email protected])
 * [Martin Ferretti](mailto:[email protected])
 * [Matthias](mailto:[email protected])
 * [Matthias Blümel](mailto:[email protected])
@@ -196,6 +203,7 @@
 * [markusj](mailto:[email protected])
 * [mnassabain](mailto:[email protected])
 * [mormegil](mailto:[email protected])
+* [nextcloud-command](mailto:[email protected])
 * [nextcloud486153](mailto:[email protected])
 * [nexus-uw](mailto:[email protected])
 * [repat](mailto:[email protected])

CHANGELOG.md

@@ -7,9 +7,11 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 # Unreleased
 ## [25.x.x]
 ### Changed
+- Improve layout of feed item row (#2569)
 
 ### Fixed
-
+- Reset content scroll position when feed item is changed (#2569)
+- Fix link to feed in article header (#2569)
 
 # Releases
 ## [25.0.0-alpha5] - 2024-04-01

src/components/ContentTemplate.vue

@@ -3,26 +3,28 @@
 		@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')" />
+					@load-more="emit('load-more')">
+					<template #header>
+						<slot name="header" />
+					</template>
+				</FeedItemDisplayList>
 			</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 class="feed-item-content">
+			<div ref="contentElement" class="feed-item-content-wrapper">
+				<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>
+			</div>
 		</NcAppContentDetails>
 	</NcAppContent>
 </template>
@@ -47,7 +49,7 @@
 
 import { FeedItem } from '../types/FeedItem'
 
-import FeedItemDisplayList from './feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplayList, { Config } from './feed-display/FeedItemDisplayList.vue'
 import FeedItemDisplay from './feed-display/FeedItemDisplay.vue'
 
 defineProps({
@@ -59,22 +61,25 @@
 		type: String,
 		required: true,
 	},
 	config: {
-		type: Object,
+		type: Object as PropType<Config>,
 	},
 })
 
 const emit = defineEmits<{(event: 'load-more'): void}>()
 
 const showDetails = ref(false)
 
+const contentElement = ref()
+
 const selectedFeedItem = computed(() => {
 	return itemStore.getters.selected(itemStore.state)
 })
 
 watch(selectedFeedItem, (newSelectedFeedItem) => {
 	if (newSelectedFeedItem) {
 		showDetails.value = true
+		contentElement.value?.scrollTo(0, 0)
 	} else {
 		showDetails.value = false
 	}
@@ -93,13 +98,14 @@
 
 </script>
 
-<style scoped>
-
-.header {
-	padding-left: 50px;
-	position: absolute;
-	top: 1em;
-	font-weight: 700;
+<style>
+.feed-item-content {
+	overflow:hidden;
+	height: 100%
 }
 
+.feed-item-content-wrapper {
+	height: 100%;
+	overflow-y: scroll;
+}
 </style>

src/components/feed-display/FeedItemDisplay.vue

@@ -34,8 +34,7 @@
 					{{ t('news', 'by') }} {{ item.author }}
 				</span>
 				<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
-					<!-- TODO: Fix link to feed -->
-					<a :href="`#/items/feeds/${item.feedId}/`">
+					<a :href="`#/feed/${item.feedId}/`">
 						{{ getFeed(item.feedId).title }}
 						<img v-if="getFeed(item.feedId).faviconLink"
 							:src="getFeed(item.feedId).faviconLink"
@@ -200,15 +199,13 @@ export default Vue.extend({
 
 <style>
 	.feed-item-display {
-		max-height: 100%;
 		overflow-y: hidden;
 		display: flex;
 		flex-direction: column;
 	}
 
 	.article {
 		padding: 0 50px 50px 50px;
-		overflow-y: scroll;
 		height: 100%;
 		max-width: 1024px;
 		margin-left: auto;

src/components/feed-display/FeedItemDisplayList.vue

@@ -1,6 +1,10 @@
 <template>
 	<div class="feed-item-display-list">
 		<div class="header">
+			<div class="header-content">
+				<slot name="header" />
+			</div>
+
 			<NcActions class="filter-container" :force-menu="true">
 				<template #icon>
 					<FilterIcon />
@@ -40,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { type PropType } from 'vue'
 import _ from 'lodash'
 
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
@@ -62,6 +66,11 @@ const DEFAULT_DISPLAY_LIST_CONFIG = {
 	unreadFilter: true,
 }
 
+export type Config = {
+	unreadFilter: boolean;
+	starFlter: boolean;
+}
+
 export default Vue.extend({
 	components: {
 		VirtualScroll,
@@ -84,7 +93,7 @@ export default Vue.extend({
 			required: true,
 		},
 		config: {
-			type: Object,
+			type: Object as PropType<Config>,
 			default: () => {
 				return DEFAULT_DISPLAY_LIST_CONFIG
 			},
@@ -132,7 +141,7 @@ export default Vue.extend({
 		unreadFilter(item: FeedItem): boolean {
 			return item.unread
 		},
-		toggleFilter(filter: () => boolean) {
+		toggleFilter(filter: (item: FeedItem) => boolean) {
 			if (this.filter === filter) {
 				this.filter = this.noFilter
 				if (filter === this.unreadFilter) {
@@ -206,8 +215,15 @@ export default Vue.extend({
 	}
 
 	.header {
-		justify-content: right;
 		display: flex;
+		align-items: center;
+		justify-content: right;
+	}
+
+	.header-content {
+		flex-grow: 1;
+		padding-left: 50px;
+		font-weight: 700;
 	}
 
 	.filter-container {

src/components/feed-display/FeedItemRow.vue

@@ -190,6 +190,7 @@ export default Vue.extend({
 	.feed-item-row .main-container {
 		flex-grow: 1;
 		min-width: 0;
+		flex-grow: 1;
 	}
 
 	.feed-item-row .title-container {