css tweaks

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

5 files changed, 78 insertions, 56 deletions

diff --git a/src/components/FeedItemDisplay.vue b/src/components/FeedItemDisplay.vue
index 8190c8176..df6fa9199 100644
--- a/src/components/FeedItemDisplay.vue
+++ b/src/components/FeedItemDisplay.vue
@@ -1,7 +1,22 @@
 <template>
 	<div class="feed-item-display">
-		<div>
-			<CloseIcon style="position: absolute; right: 30px; top: 20px; cursor: pointer;" @click="clearSelected()" />
+		<div class="action-bar">
+			<NcActions :force-menu="true">
+				<template #icon>
+					<ShareVariant />
+				</template>
+				<NcActionButton>
+					<template #default>
+						<!-- TODO: Share Menu --> TODO
+					</template>
+					<template #icon>
+						<ShareVariant />
+					</template>
+				</NcActionButton>
+			</NcActions>
+			<StarIcon :class="{'starred': item.starred }" @click="toggleStarred(item)" />
+			<Eye @click="markUnread(item)" />
+			<CloseIcon @click="clearSelected()" />
 		</div>
 		<div class="article">
 			<div class="heading">
@@ -80,7 +95,13 @@
 import Vue from 'vue'
 import { mapState } from 'vuex'
 
+import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+import StarIcon from 'vue-material-design-icons/Star.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
 import { Feed } from '../types/Feed'
 import { FeedItem } from '../types/FeedItem'
@@ -90,6 +111,11 @@ export default Vue.extend({
 	name: 'FeedItemDisplay',
 	components: {
 		CloseIcon,
+		Eye,
+		StarIcon,
+		ShareVariant,
+		NcActions,
+		NcActionButton,
 	},
 	props: {
 		item: {
@@ -132,14 +158,26 @@ export default Vue.extend({
 		toggleStarred(item: FeedItem): void {
 			this.$store.dispatch(item.starred ? ACTIONS.UNSTAR_ITEM : ACTIONS.STAR_ITEM, { item })
 		},
+		markUnread(item: FeedItem): void {
+			this.$store.dispatch(ACTIONS.MARK_UNREAD, { item })
+		},
 	},
 })
 
 </script>
 
 <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%;
 	}
 
 	.article .body {
@@ -175,4 +213,16 @@ export default Vue.extend({
     font-size: 17px;
 		margin-top: 25px;
 	}
+
+	.action-bar {
+		padding: 20px;
+
+		display: flex;
+		justify-content: right
+	}
+
+	.action-bar .material-design-icon{
+		cursor: pointer;
+		margin: 5px;
+	}
 </style>
diff --git a/src/components/FeedItemDisplayList.vue b/src/components/FeedItemDisplayList.vue
index 41cdd72a8..8d3649c62 100644
--- a/src/components/FeedItemDisplayList.vue
+++ b/src/components/FeedItemDisplayList.vue
@@ -10,7 +10,7 @@
 			</template>
 		</VirtualScroll>
 
-		<div v-if="selected !== undefined">
+		<div v-if="selected !== undefined" class="feed-item-container">
 			<FeedItemDisplay :item="selected" />
 		</div>
 	</div>
@@ -25,10 +25,6 @@ import FeedItemDisplay from './FeedItemDisplay.vue'
 
 import { FeedItem } from '../types/FeedItem'
 
-type FeedItemDisplayListState = {
-	mounted: boolean
-}
-
 export default Vue.extend({
 	components: {
 		VirtualScroll,
@@ -48,7 +44,7 @@ export default Vue.extend({
 	data() {
 		return {
 			mounted: false,
-		} as FeedItemDisplayListState
+		}
 	},
 	computed: {
 		selected(): FeedItem | undefined {
@@ -81,6 +77,6 @@ export default Vue.extend({
 
 	.feed-item-container {
 		max-width: 50%;
-		overflow-y: scroll;
+		overflow-y: hidden;
 	}
 </style>
diff --git a/src/components/FeedItemRow.vue b/src/components/FeedItemRow.vue
index 3bac1cfd1..04d4a9343 100644
--- a/src/components/FeedItemRow.vue
+++ b/src/components/FeedItemRow.vue
@@ -86,18 +86,18 @@ export default Vue.extend({
 		...mapState(['feeds']),
 	},
 	methods: {
-		select() {
+		select(): void {
 			this.$store.dispatch(ACTIONS.SET_SELECTED_ITEM, { id: this.item.id })
 			// this.expanded = !this.expanded
 			this.markRead(this.item)
 		},
-		formatDate(epoch: number) {
+		formatDate(epoch: number): string {
 			return new Date(epoch).toLocaleString()
 		},
-		formatDatetime(epoch: number) {
+		formatDatetime(epoch: number): string {
 			return new Date(epoch).toISOString()
 		},
-		getRelativeTimestamp(previous: number) {
+		getRelativeTimestamp(previous: number): string {
 			const current = Date.now()
 
 			const msPerMinute = 60 * 1000
@@ -152,7 +152,7 @@ export default Vue.extend({
 	}
 
 	.feed-item-row:hover {
-		background-color: #222;
+		background-color: var(--color-background-hover);
 	}
 
 	.feed-item-row, .feed-item-row * {
@@ -206,11 +206,11 @@ export default Vue.extend({
 	}
 
 	.material-design-icon {
-		color: #555555;
+		color: var(--color-text-lighter)
 	}
 
 	.material-design-icon:hover {
-		color: var(--color-main-text);
+		color: var(--color-text-light);
 	}
 
 	.material-design-icon.rss-icon:hover {
@@ -228,32 +228,4 @@ export default Vue.extend({
 	.material-design-icon.starred:hover {
 		color: #555555;
 	}
-
-	.article {
-		padding: 0 50px 50px 50px;
-	}
-
-	.article .body {
-		color: var(--color-main-text);
-    font-size: 15px;
-	}
-
-	.article a {
-		text-decoration: underline;
-	}
-
-	.article .body a {
-		color: #3a84e4
-	}
-
-	.article .subtitle {
-		color: var(--color-text-lighter);
-    font-size: 15px;
-    padding: 25px 0;
-	}
-
-	.article .author {
-		color: var(--color-text-lighter);
-    font-size: 15px;
-	}
 </style>
diff --git a/src/components/Starred.vue b/src/components/Starred.vue
index 5a00ea31f..d1aba4921 100644
--- a/src/components/Starred.vue
+++ b/src/components/Starred.vue
@@ -1,5 +1,5 @@
 <template>
-	<div style="display: flex;">
+	<div class="route-container">
 		<div class="header">
 			Starred
 			<NcCounterBubble class="counter-bubble">
@@ -48,6 +48,10 @@ export default Vue.extend({
 </script>
 
 <style>
+.route-container {
+	height: 100%;
+}
+
 .header {
 	padding-left: 50px;
 	position: absolute;
diff --git a/src/components/Unread.vue b/src/components/Unread.vue
index 6cb332eca..324b20d32 100644
--- a/src/components/Unread.vue
+++ b/src/components/Unread.vue
@@ -1,5 +1,5 @@
 <template>
-	<div style="height: 100%">
+	<div class="route-container">
 		<div class="header">
 			Unread
 			<NcCounterBubble class="counter-bubble">
@@ -23,7 +23,7 @@ import { FeedItem } from '../types/FeedItem'
 import { ACTIONS } from '../store'
 
 type UnreadItemState = {
-	_unread?: FeedItem[]
+	unreadCache?: FeedItem[]
 }
 
 export default Vue.extend({
@@ -33,7 +33,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			_unread: undefined,
+			unreadCache: undefined,
 		} as UnreadItemState
 	},
 	computed: {
@@ -44,23 +44,23 @@ export default Vue.extend({
 	},
 	methods: {
 		unread() {
-			if (!this._unread) {
+			if (!this.unreadCache) {
 				if (this.$store.getters.unread.length > 0) {
-					this._unread = this.$store.getters.unread
+					this.unreadCache = this.$store.getters.unread
 				}
-			} else if (this.$store.getters.unread.length > (this._unread?.length)) {
+			} else if (this.$store.getters.unread.length > (this.unreadCache?.length)) {
 				for (const item of this.$store.getters.unread) {
-					if (this._unread.find((unread: FeedItem) => unread.id === item.id) === undefined) {
-						this._unread.push(item)
+					if (this.unreadCache.find((unread: FeedItem) => unread.id === item.id) === undefined) {
+						this.unreadCache.push(item)
 					}
 				}
 			}
 
-			return this._unread
+			return this.unreadCache
 		},
 		async fetchMore() {
-			if (this._unread && !this.$store.state.items.fetchingItems.unread) {
-			  this.$store.dispatch(ACTIONS.FETCH_UNREAD, { start: this._unread[this._unread?.length - 1]?.id })
+			if (this.unreadCache && !this.$store.state.items.fetchingItems.unread) {
+			  this.$store.dispatch(ACTIONS.FETCH_UNREAD, { start: this.unreadCache[this.unreadCache?.length - 1]?.id })
 			}
 		},
 	},