show feed item in content detail

Signed-off-by: Paul Tirk <paultirk@paultirk.com>

6 files changed, 45 insertions, 25 deletions

diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index aac045e02..20ee62ebe 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/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>
@@ -115,9 +111,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 +199,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 {
diff --git a/src/components/routes/All.vue b/src/components/routes/All.vue
index fc3428679..4bf95e3f6 100644
--- a/src/components/routes/All.vue
+++ b/src/components/routes/All.vue
@@ -9,6 +9,10 @@
 				:fetch-key="'all'"
 				@load-more="fetchMore()" />
 		</template>
+
+		<div>
+			<FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" />
+		</div>
 	</NcAppContent>
 </template>
 
@@ -19,6 +23,7 @@ import { mapState } from 'vuex'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue'
 
 import { FeedItem } from '../../types/FeedItem'
 import { ACTIONS, MUTATIONS } from '../../store'
@@ -27,6 +32,7 @@ export default Vue.extend({
 	components: {
 		NcAppContent,
 		FeedItemDisplayList,
+		FeedItemDisplay
 	},
 	computed: {
 		...mapState(['items']),
@@ -34,6 +40,9 @@ export default Vue.extend({
 		allItems(): FeedItem[] {
 			return this.$store.getters.allItems
 		},
+		selectedFeedItem(): FeedItem | undefined {
+			return this.$store.getters.selected
+		},
 	},
 	created() {
 		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
diff --git a/src/components/routes/Feed.vue b/src/components/routes/Feed.vue
index db56af78d..fd0a7cf35 100644
--- a/src/components/routes/Feed.vue
+++ b/src/components/routes/Feed.vue
@@ -10,6 +10,10 @@
 
 			<FeedItemDisplayList :items="items" :fetch-key="'feed-'+feedId" @load-more="fetchMore()" />
 		</template>
+
+		<div>
+			<FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" />
+		</div>
 	</NcAppContent>
 </template>
 
@@ -21,6 +25,7 @@ import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue'
 
 import { FeedItem } from '../../types/FeedItem'
 import { ACTIONS, MUTATIONS } from '../../store'
@@ -31,6 +36,7 @@ export default Vue.extend({
 		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
+		FeedItemDisplay
 	},
 	props: {
 		feedId: {
@@ -51,6 +57,9 @@ export default Vue.extend({
 		id(): number {
 			return Number(this.feedId)
 		},
+		selectedFeedItem(): FeedItem | undefined {
+			return this.$store.getters.selected
+		},
 	},
 	created() {
 		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
diff --git a/src/components/routes/Folder.vue b/src/components/routes/Folder.vue
index df8232ac4..8a8bd01e6 100644
--- a/src/components/routes/Folder.vue
+++ b/src/components/routes/Folder.vue
@@ -10,6 +10,10 @@
 
 			<FeedItemDisplayList :items="items" :fetch-key="'folder-'+folderId" @load-more="fetchMore()" />
 		</template>
+
+		<div>
+			<FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" />
+		</div>
 	</NcAppContent>
 </template>
 
@@ -21,6 +25,7 @@ import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue'
 
 import { FeedItem } from '../../types/FeedItem'
 import { ACTIONS, MUTATIONS } from '../../store'
@@ -32,6 +37,7 @@ export default Vue.extend({
 		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
+		FeedItemDisplay
 	},
 	props: {
 		folderId: {
@@ -61,6 +67,9 @@ export default Vue.extend({
 
 			return totalUnread
 		},
+		selectedFeedItem(): FeedItem | undefined {
+			return this.$store.getters.selected
+		},
 	},
 	created() {
 		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
diff --git a/src/components/routes/Starred.vue b/src/components/routes/Starred.vue
index eedbf90e7..05d32c633 100644
--- a/src/components/routes/Starred.vue
+++ b/src/components/routes/Starred.vue
@@ -13,6 +13,10 @@
 				:config="{ starFilter: false }"
 				@load-more="fetchMore()" />
 		</template>
+
+		<div>
+			<FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" />
+		</div>
 	</NcAppContent>
 </template>
 
@@ -24,6 +28,7 @@ import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue'
 
 import { FeedItem } from '../../types/FeedItem'
 import { ACTIONS, MUTATIONS } from '../../store'
@@ -33,6 +38,7 @@ export default Vue.extend({
 		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
+		FeedItemDisplay
 	},
 	computed: {
 		...mapState(['items']),
@@ -40,6 +46,9 @@ export default Vue.extend({
 		starred(): FeedItem[] {
 			return this.$store.getters.starred
 		},
+		selectedFeedItem(): FeedItem | undefined {
+			return this.$store.getters.selected
+		},
 	},
 	created() {
 		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })
diff --git a/src/components/routes/Unread.vue b/src/components/routes/Unread.vue
index e65ad7173..ae10e6a28 100644
--- a/src/components/routes/Unread.vue
+++ b/src/components/routes/Unread.vue
@@ -14,6 +14,10 @@
 				:config="{ unreadFilter: false }"
 				@load-more="fetchMore()" />
 		</template>
+
+		<div>
+			<FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" />
+		</div>
 	</NcAppContent>
 </template>
 
@@ -25,6 +29,7 @@ import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue'
+import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue'
 
 import { FeedItem } from '../../types/FeedItem'
 import { ACTIONS, MUTATIONS } from '../../store'
@@ -39,6 +44,7 @@ export default Vue.extend({
 		NcAppContent,
 		NcCounterBubble,
 		FeedItemDisplayList,
+		FeedItemDisplay
 	},
 	data() {
 		return {
@@ -47,6 +53,9 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapState(['items']),
+		selectedFeedItem(): FeedItem | undefined {
+			return this.$store.getters.selected
+		},
 	},
 	created() {
 		this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined })