Merge pull request #748 from nextcloud/timeline-to-grid

👌 IMPROVE: move timeline to css grid layout and restructure code

appinfo/routes.php

@@ -50,7 +50,7 @@ return [
 		['name' => 'Navigation#resizedGetPublic', 'url' => '/document/public/resized', 'verb' => 'GET'],
 
 		['name' => 'ActivityPub#actor', 'url' => '/users/{username}', 'verb' => 'GET'],
-		['name' => 'ActivityPub#actorAlias', 'url' => '/@{username}', 'verb' => 'GET'],
+		['name' => 'ActivityPub#actorAlias', 'url' => '/@{username}/', 'verb' => 'GET'],
 		['name' => 'ActivityPub#inbox', 'url' => '/@{username}/inbox', 'verb' => 'POST'],
 		['name' => 'ActivityPub#getInbox', 'url' => '/@{username}/inbox', 'verb' => 'GET'],
 		['name' => 'ActivityPub#sharedInbox', 'url' => '/inbox', 'verb' => 'POST'],

src/components/MessageContent.js

@@ -24,6 +24,9 @@ export default Vue.component('MessageContent', {
  * All attributes other than `href` for links are stripped from the source
  */
 export function formatMessage(createElement, source) {
+	if (!source.tag) {
+		source.tag = []
+	}
 	let mentions = source.tag.filter(tag => tag.type === 'Mention')
 	let hashtags = source.tag.filter(tag => tag.type === 'Hashtag')
 

src/components/TimelineAvatar.vue

@@ -0,0 +1,44 @@
+<template>
+	<div v-if="item.actor_info" class="post-avatar">
+		<avatar v-if="item.local" :size="32" :user="userTest"
+			:display-name="item.actor_info.account" :disable-tooltip="true" />
+		<avatar v-else :size="32" :url="avatarUrl"
+			:disable-tooltip="true" />
+	</div>
+</template>
+
+<script>
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+
+export default {
+	name: 'TimelineAvatar',
+	components: {
+		Avatar
+	},
+	props: {
+		item: { type: Object, default: () => {} }
+	},
+	computed: {
+		userTest() {
+			return this.item.actor_info.preferredUsername
+		},
+		avatarUrl() {
+			return OC.generateUrl('/apps/social/api/v1/global/actor/avatar?id=' + this.item.attributedTo)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.post-avatar {
+    margin: 5px;
+    margin-right: 10px;
+    border-radius: 50%;
+    overflow: hidden;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    align-self: start;
+}
+
+</style>

src/components/TimelineEntry.vue

@@ -1,12 +1,16 @@
 <template>
-	<div class="timeline-entry">
-		<div v-if="item.type === 'SocialAppNotification'">
+	<div :class="['timeline-entry', hasHeader ? 'with-header' : '']">
+		<template v-if="item.type === 'SocialAppNotification'">
+			<div class="notification-icon" :class="notificationIcon" />
+			<span class="notification-action">
 				{{ actionSummary }}
-		</div>
-		<div v-if="item.type === 'Announce'" class="boost">
-			<div class="container-icon-boost">
+			</span>
+		</template>
+		<template v-else-if="item.type === 'Announce'">
+			<div class="container-icon-boost boost">
 				<span class="icon-boost" />
 			</div>
+			<div class="boost">
 				<router-link v-if="item.actor_info" :to="{ name: 'profile', params: { account: item.local ? item.actor_info.preferredUsername : item.actor_info.account }}">
 					<span v-tooltip.bottom="item.actor_info.account" class="post-author">
 						{{ userDisplayName(item.actor_info) }}
@@ -19,23 +23,28 @@
 				</a>
 				{{ boosted }}
 			</div>
+		</template>
+		<user-entry v-if="item.type === 'SocialAppNotification' && item.details.actor" :key="item.details.actor.id" :item="item.details.actor" />
+		<template v-else>
+			<timeline-avatar :item="entryContent" />
 			<timeline-post
-			v-if="item.type === 'SocialAppNotification' && item.details.post"
-			:item="item.details.post" />
-		<timeline-post
-			v-else
 				:item="entryContent"
 				:parent-announce="isBoost" />
+		</template>
 	</div>
 </template>
 
 <script>
 import TimelinePost from './TimelinePost.vue'
+import TimelineAvatar from './TimelineAvatar.vue'
+import UserEntry from './UserEntry.vue'
 
 export default {
 	name: 'TimelineEntry',
 	components: {
-		TimelinePost
+		TimelinePost,
+		TimelineAvatar,
+		UserEntry
 	},
 	props: {
 		item: { type: Object, default: () => {} }
@@ -48,6 +57,8 @@ export default {
 		entryContent() {
 			if (this.item.type === 'Announce') {
 				return this.item.cache[this.item.object].object
+			} else if (this.item.type === 'SocialAppNotification') {
+				return this.item.details.post
 			} else {
 				return this.item
 			}
@@ -58,6 +69,9 @@ export default {
 			}
 			return {}
 		},
+		hasHeader() {
+			return this.item.type === 'Announce' || this.item.type === 'SocialAppNotification'
+		},
 		boosted() {
 			return t('social', 'boosted')
 		},
@@ -101,13 +115,59 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+  .timeline-entry.with-header {
+    grid-template-rows: 30px 1fr;
+  }
 	.timeline-entry {
+		display: grid;
+    grid-template-columns: 44px 1fr;
+    grid-template-rows: 1fr;
 		padding: 10px;
 		margin-bottom: 10px;
 		&:hover {
 			background-color: var(--color-background-hover);
 		}
 	}
+	.notification-header {
+		display: flex;
+		align-items: bottom;
+	}
+
+	.notification-action {
+		flex-grow: 1;
+		display: inline-block;
+		grid-row: 1;
+		grid-column: 2;
+	}
+
+	.notification-icon {
+		opacity: .5;
+		background-position: center;
+		background-size: contain;
+		overflow: hidden;
+		height: 20px;
+		min-width: 32px;
+		flex-shrink: 0;
+		display: inline-block;
+		vertical-align: middle;
+		grid-column: 1;
+		grid-row: 1;
+	}
+
+	.icon-boost {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.icon-favorite {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.icon-user {
+		display: inline-block;
+		vertical-align: middle;
+	}
 
 	.container-icon-boost {
 		display: inline-block;

src/components/TimelinePost.vue

@@ -1,11 +1,4 @@
 <template>
-	<div class="entry-content">
-		<div v-if="item.actor_info" class="post-avatar">
-			<avatar v-if="item.local && item.type!=='SocialAppNotification'" :size="32" :user="item.actor_info.preferredUsername"
-				:display-name="item.actor_info.account" :disable-tooltip="true" />
-			<avatar v-else :size="32" :url="avatarUrl"
-				:disable-tooltip="true" />
-		</div>
 	<div class="post-content">
 		<div class="post-header">
 			<div class="post-author-wrapper">
@@ -53,11 +46,9 @@
 			</div>
 		</div>
 	</div>
-	</div>
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import * as linkify from 'linkifyjs'
 import pluginMention from 'linkifyjs/plugins/mention'
 import 'linkifyjs/string'
@@ -74,7 +65,6 @@ pluginMention(linkify)
 export default {
 	name: 'TimelinePost',
 	components: {
-		Avatar,
 		PostAttachment,
 		MessageContent
 	},
@@ -207,17 +197,6 @@ export default {
 		opacity: .7;
 	}
 
-	.post-avatar {
-		margin: 5px;
-		margin-right: 10px;
-		border-radius: 50%;
-		overflow: hidden;
-		width: 32px;
-		height: 32px;
-		min-width: 32px;
-		flex-shrink: 0;
-	}
-
 	.post-timestamp {
 		width: 120px;
 		text-align: right;
@@ -260,10 +239,6 @@ export default {
 		display: flex;
 	}
 
-	.post-content {
-		flex-grow: 1;
-	}
-
 	.post-header {
 		display: flex;
 		flex-direction: row;

webpack.common.js

@@ -50,9 +50,7 @@ module.exports = {
 	},
 	plugins: [new VueLoaderPlugin()],
 	resolve: {
-		alias: {
-			vue$: 'vue/dist/vue.esm.js'
-		},
-		extensions: ['*', '.js', '.vue', '.json']
+		extensions: ['*', '.js', '.vue'],
+		symlinks: false
 	}
 };