add: highlighting of active item

Signed-off-by: Patrizio Bekerle <[email protected]>

CHANGELOG.md

@@ -9,6 +9,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 ### Changed
 - added alternative development environment (#2670)
 - Implement `j` and `k` keyboards shortcuts for navigating through feed items (#2671)
+- Implement highlighting of active feed item (#2677)
 
 ### Fixed
 

src/components/feed-display/FeedItemDisplayList.vue

@@ -41,7 +41,10 @@
 				@load-more="fetchMore()">
 				<template v-if="items && items.length > 0">
 					<template v-for="item in filterSortedItems()">
-						<FeedItemRow :key="item.id" :ref="'feedItemRow' + item.id" :item="item" />
+						<FeedItemRow :key="item.id"
+							:ref="'feedItemRow' + item.id"
+							:item="item"
+							:class="{ 'active': selectedItem && selectedItem.id === item.id }" />
 					</template>
 				</template>
 			</VirtualScroll>
@@ -121,6 +124,7 @@ export default Vue.extend({
 				}
 			},
 			cache: [] as FeedItem[] | undefined,
+			selectedItem: undefined as FeedItem | undefined,
 		}
 	},
 	computed: {
@@ -130,10 +134,15 @@ export default Vue.extend({
 		cfg() {
 			return _.defaults({ ...this.config }, DEFAULT_DISPLAY_LIST_CONFIG)
 		},
-		selectedItem() {
+		getSelectedItem() {
 			return this.$store.getters.selected
 		},
 	},
+	watch: {
+		getSelectedItem(newVal) {
+			this.selectedItem = newVal
+		},
+	},
 	mounted() {
 		this.mounted = true
 	},
@@ -203,33 +212,25 @@ export default Vue.extend({
 		currentIndex(items: FeedItem[]): number {
 			return this.selectedItem ? items.findIndex((item: FeedItem) => item.id === this.selectedItem.id) || 0 : -1
 		},
-		// TODO: Make jumpToPreviousItem() highlight the current item
 		jumpToPreviousItem() {
-			console.log('Previous item')
 			const items = this.filterSortedItems()
 			let currentIndex = this.currentIndex(items)
-			console.log('currentIndex', currentIndex)
 			// Prepare to jump to the first item, if none was selected
 			if (currentIndex === -1) {
 				currentIndex = 1
 			}
 			// Jump to the previous item
 			if (currentIndex > 0) {
 				const previousItem = items[currentIndex - 1]
-				console.log('previousItem', previousItem)
 				this.clickItem(previousItem)
 			}
 		},
-		// TODO: Make jumpToNextItem() highlight the current item
 		jumpToNextItem() {
-			console.log('Next item')
 			const items = this.filterSortedItems()
 			const currentIndex = this.currentIndex(items)
-			console.log('currentIndex', currentIndex)
 			// Jump to the first item, if none was selected, otherwise jump to the next item
 			if (currentIndex === -1 || (currentIndex < items.length - 1)) {
 				const nextItem = items[currentIndex + 1]
-				console.log('nextItem', nextItem)
 				this.clickItem(nextItem)
 			}
 		},

src/components/feed-display/FeedItemRow.vue

@@ -276,4 +276,8 @@ export default Vue.extend({
 	.feed-item-row .button-container .eye-check-icon {
 		color: var(--color-placeholder-dark);
 	}
+
+	.active, .active:hover {
+		background-color: var(--color-background-darker);
+	}
 </style>