Vue improvements

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is mostly based on [Keep a Changelog](https://keepachangelog.com/en/1
 # Unreleased
 ## [25.x.x]
 ### Changed
+- Improvements to Vue frontend
 
 ### Fixed
 

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,92 @@
+<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 class="content-details-container">
+			<FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" />
+		</NcAppContentDetails>
+	</NcAppContent>
+</template>
+
+<script setup lang="ts">
+
+import { 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 { 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;
+}
+
+.content-details-container {
+  height: 100%
+}
+
+</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>
@@ -71,7 +67,7 @@
 	components: {
 		VirtualScroll,
 		FeedItemRow,
 		FeedItemDisplay,
 		FilterIcon,
 		StarIcon,
 		StarCheckIcon,
@@ -115,9 +111,6 @@
 		}
 	},
 	computed: {
-		selected(): FeedItem | undefined {
-			return this.$store.getters.selected
-		},
 		reachedEnd(): boolean {
 			return this.mounted && this.$store.state.items.allItemsLoaded[this.fetchKey] === true
 		},
@@ -206,30 +199,12 @@
 		.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 {

src/components/feed-display/FeedItemRow.vue

@@ -8,22 +8,31 @@
 				:href="item.url"
 				:title="t('news', 'Open website')"
 				@click="markRead(item); $event.stopPropagation();">
-				<EarthIcon />
+				<span v-if="getFeed(item.feedId).faviconLink"
+					class="favicon"
+					:style="{ 'backgroundImage': 'url(' + getFeed(item.feedId).faviconLink + ')' }" />
+				<RssIcon v-else />
 			</a>
-			<RssIcon v-if="!getFeed(item.feedId).faviconLink" />
-			<span v-if="getFeed(item.feedId).faviconLink" style="width: 24px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + getFeed(item.feedId).faviconLink + ')' }" />
 		</div>
-		<div class="title-container" :class="{ 'unread': item.unread }">
-			<span style="white-space: nowrap" :dir="item.rtl && 'rtl'">
-				{{ item.title }}
+
+		<div class="main-container">
+			<div class="title-container" :class="{ 'unread': item.unread }">
+				<span style="white-space: nowrap" :dir="item.rtl && 'rtl'">
+					{{ item.title }}
+				</span>
+			</div>
+
+			<div class="intro-container">
 				<span class="intro" v-html="item.intro" />
-			</span>
-		</div>
-		<div class="date-container">
-			<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDatetime(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
-				{{ getRelativeTimestamp(item.pubDate*1000) }}
-			</time>
+			</div>
+
+			<div class="date-container">
+				<time class="date" :title="formatDate(item.pubDate*1000, 'yyyy-MM-dd HH:mm:ss')" :datetime="formatDatetime(item.pubDate*1000, 'yyyy-MM-ddTHH:mm:ssZ')">
+					{{ getRelativeTimestamp(item.pubDate*1000) }}
+				</time>
+			</div>
 		</div>
+
 		<div class="button-container" @click="$event.stopPropagation()">
 			<StarIcon :class="{'starred': item.starred }" @click="toggleStarred(item)" />
 			<EyeIcon v-if="item.unread && !keepUnread" @click="toggleKeepUnread(item)" />
@@ -45,7 +54,6 @@
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
-import EarthIcon from 'vue-material-design-icons/Earth.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import EyeIcon from 'vue-material-design-icons/Eye.vue'
 import EyeCheckIcon from 'vue-material-design-icons/EyeCheck.vue'
@@ -65,7 +73,6 @@
 export default Vue.extend({
 	name: 'FeedItemRow',
 	components: {
-		EarthIcon,
 		StarIcon,
 		EyeIcon,
 		EyeCheckIcon,
@@ -153,7 +160,7 @@
 
 <style>
 	.feed-item-row {
-		display: flex; padding: 5px 10px;
+		display: flex; padding: 10px 10px;
 	}
 
 	.feed-item-row:hover {
@@ -165,10 +172,21 @@
 	}
 
 	.feed-item-row .link-container {
-		padding-right: 5px;
+		padding-right: 12px;
 		display: flex;
 		flex-direction: row;
-		align-self: start;
+		align-self: center;
+	}
+
+	.favicon {
+		height: 24px;
+		width: 24px;
+		display: inline-block;
+		background-size: contain;
+	}
+
+	.feed-item-row .main-container {
+		min-width: 0;
 	}
 
 	.feed-item-row .title-container {
@@ -184,11 +202,16 @@
     font-weight: bold;
 	}
 
+	.feed-item-row .intro-container {
+		line-height: initial;
+		height: 32pt;
+		overflow: hidden;
+	}
+
 	.feed-item-row .intro {
 		color: var(--color-text-lighter);
     font-size: 10pt;
     font-weight: normal;
-    margin-left: 20px;
 	}
 
 	@media only screen and (min-width: 320px) {
@@ -205,14 +228,13 @@
 
 	.feed-item-row .date-container {
 		color: var(--color-text-lighter);
-		padding-left: 4px;
 		white-space: nowrap;
 	}
 
 	.feed-item-row .button-container {
 		display: flex;
 		flex-direction: row;
-		align-self: start;
+		align-self: center;
 	}
 
 	.feed-item-row .button-container .button-vue, .feed-item-row .button-container .button-vue .button-vue__wrapper, .feed-item-row .button-container .material-design-icon {

src/components/routes/All.vue

@@ -1,27 +1,25 @@
 <template>
-	<div class="route-container">
-		<div class="header">
+	<ContentTemplate :items="allItems"
+		:fetch-key="'all'"
+		@load-more="fetchMore()">
+		<template #header>
 			{{ t('news', 'All Articles') }}
-		</div>
-
-		<FeedItemDisplayList :items="allItems"
-			:fetch-key="'all'"
-			@load-more="fetchMore()" />
-	</div>
+		</template>
+	</ContentTemplate>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
-import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
+import ContentTemplate from '../ContentTemplate.vue'
 
 import { FeedItem } from '../../types/FeedItem'
 import { ACTIONS, MUTATIONS } from '../../store'
 
 export default Vue.extend({
 	components: {
-		FeedItemDisplayList,
+		ContentTemplate,
 	},
 	computed: {
 		...mapState(['items']),
@@ -44,17 +42,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-	.route-container {
-		height: 100%;
-	}
-
-	.header {
-		padding-left: 50px;
-		position: absolute;
-		top: 1em;
-		font-weight: 700;
-	}
-
 	.counter-bubble {
 		display: inline-block;
 		vertical-align: sub;