Add UI to reply to a post

Signed-off-by: Julius Härtl <jus@bitgrid.net>

img/reply.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <g transform="matrix(-1,0,0,1,16,-1036.4)">
+  <path d="m1 1051.4s0.39147-7.8025 7-10v-4l7 7-7 7v-4c-5.1157 0-7 4-7 4z"/>
+ </g>
+</svg>

src/components/ActorAvatar.vue

@@ -0,0 +1,53 @@
+<!--
+  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<avatar v-if="actor.local" :size="size" :user="actor.preferredUsername"
+		:display-name="actor.account" :disable-tooltip="true" />
+	<avatar v-else :size="size" :url="avatarUrl"
+		:disable-tooltip="true" />
+</template>
+
+<script>
+import { Avatar } from 'nextcloud-vue'
+
+export default {
+	name: 'ActorAvatar',
+	components: {
+		Avatar
+	},
+	props: {
+		actor: { type: Object, default: () => {} },
+		size: { type: Number, default: 32 }
+	},
+	data: function() {
+		return {
+			followingText: t('social', 'Following')
+		}
+	},
+	computed: {
+		avatarUrl() {
+			return OC.generateUrl('/apps/social/api/v1/global/actor/avatar?id=' + this.item.attributedTo)
+		}
+	}
+}
+</script>

src/components/Composer.vue

@@ -34,11 +34,22 @@
 				</span>
 			</div>
 		</div>
+		<div v-if="replyTo" class="reply-to">
+			<p>
+				<span>In reply to</span>
+				<actor-avatar :actor="replyTo.actor_info" :size="16" />
+				<strong>{{ replyTo.actor_info.account }}</strong>
+				<a class="icon-close" @click="replyTo=null" />
+			</p>
+			<div class="reply-to-preview">
+				{{ replyTo.content }}
+			</div>
+		</div>
 		<form class="new-post-form" @submit.prevent="createPost">
 			<vue-tribute :options="tributeOptions">
 				<!-- eslint-disable-next-line vue/valid-v-model -->
-				<div ref="composerInput" v-contenteditable:post.dangerousHTML="canType" class="message"
-					placeholder="What would you like to share?" @keyup.enter="keyup" />
+				<div ref="composerInput" v-contenteditable:post.dangerousHTML="canType && !loading" class="message"
+					placeholder="What would you like to share?" :class="{'icon-loading': loading}" @keyup.enter="keyup" />
 			</vue-tribute>
 			<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
 				@emoji="insert">
@@ -107,6 +118,25 @@
 		}
 	}
 
+	.reply-to {
+		background-image: url(../../img/reply.svg);
+		background-position: 5px 5px;
+		background-repeat: no-repeat;
+		margin-left: 39px;
+		margin-bottom: 20px;
+		overflow: hidden;
+		background-color: #fafafa;
+		border-radius: 3px;
+		padding: 5px;
+		padding-left: 30px;
+		.icon-close {
+			display: inline-block;
+			float: right;
+			opacity: .7;
+			padding: 3px;
+		}
+	}
+
 	.new-post-form {
 		flex-grow: 1;
 		position: relative;
@@ -309,12 +339,14 @@ import { VTooltip } from 'v-tooltip'
 import CurrentUserMixin from './../mixins/currentUserMixin'
 import FocusOnCreate from '../directives/focusOnCreate'
 import axios from 'nextcloud-axios'
+import ActorAvatar from './ActorAvatar'
 
 export default {
 	name: 'Composer',
 	components: {
 		PopoverMenu,
 		Avatar,
+		ActorAvatar,
 		EmojiPicker,
 		VueTribute
 	},
@@ -330,9 +362,11 @@ export default {
 	data() {
 		return {
 			type: localStorage.getItem('social.lastPostType') || 'followers',
+			loading: false,
 			post: '',
 			canType: true,
 			search: '',
+			replyTo: null,
 			tributeOptions: {
 				lookup: function(item) {
 					return item.key + item.value
@@ -463,6 +497,11 @@ export default {
 			]
 		}
 	},
+	mounted() {
+		this.$root.$on('composer-reply', (data) => {
+			this.replyTo = data
+		})
+	},
 	methods: {
 		insert(emoji) {
 			if (typeof emoji === 'object') {
@@ -513,12 +552,16 @@ export default {
 				}
 			} while (match)
 
-			return {
+			let data = {
 				content: content,
 				to: to,
 				hashtags: hashtags,
 				type: this.type
 			}
+			if (this.replyTo) {
+				data.replyTo = this.replyTo.id
+			}
+			return data
 		},
 		keyup(event) {
 			if (event.shiftKey) {
@@ -526,7 +569,10 @@ export default {
 			}
 		},
 		createPost(event) {
+			this.loading = true
 			this.$store.dispatch('post', this.getPostData()).then((response) => {
+				this.loading = false
+				this.replyTo = null
 				this.post = ''
 				this.$refs.composerInput.innerText = this.post
 				this.$store.dispatch('refreshTimeline')

src/components/TimelineEntry.vue

@@ -26,8 +26,16 @@
 				<!-- eslint-disable-next-line vue/no-v-html -->
 				<div class="post-message" v-html="formatedMessage" />
 			</div>
-			<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
-				{{ relativeTimestamp }}
+			<div>
+				<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
+					{{ relativeTimestamp }}
+				</div>
+				<div v-click-outside="hidePopoverMenu" class="post-actions">
+					<a class="icon-more" @click.prevent="togglePopoverMenu" />
+					<div :class="{open: menuOpened}" class="popovermenu menu-center">
+						<popover-menu :menu="popoverMenu" />
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -39,6 +47,7 @@ import * as linkify from 'linkifyjs'
 import pluginTag from 'linkifyjs/plugins/hashtag'
 import pluginMention from 'linkifyjs/plugins/mention'
 import 'linkifyjs/string'
+import popoverMenu from './../mixins/popoverMenu'
 
 pluginTag(linkify)
 pluginMention(linkify)
@@ -48,15 +57,32 @@ export default {
 	components: {
 		Avatar
 	},
+	mixins: [popoverMenu],
 	props: {
 		item: { type: Object, default: () => {} }
 	},
 	data() {
 		return {
-
 		}
 	},
 	computed: {
+		popoverMenu() {
+			var actions = [
+				{
+					action: () => { this.$root.$emit('composer-reply', this.item) },
+					icon: 'icon-comment',
+					text: t('social', 'Reply to post')
+				}
+			]
+			actions.push(
+				{
+					action: () => { },
+					icon: 'icon-delete',
+					text: t('social', 'Delete post')
+				}
+			)
+			return actions
+		},
 		relativeTimestamp() {
 			return OC.Util.relativeModifiedDate(this.item.published)
 		},
@@ -90,7 +116,7 @@ export default {
 	}
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.timeline-entry {
 		padding: 10px;
 		margin-bottom: 10px;
@@ -125,6 +151,19 @@ export default {
 		flex-shrink: 0;
 	}
 
+	.post-actions {
+		position: relative;
+		width: 44px;
+		height: 44px;
+		float: right;
+
+		.icon-more {
+			display: inline-block;
+			width: 44px;
+			height: 44px;
+		}
+	}
+
 	span {
 		/* opacity: 0.5; */
 	}

src/main.js

@@ -28,7 +28,7 @@ import store from './store'
 import router from './router'
 import vuetwemoji from 'vue-twemoji'
 import contenteditableDirective from 'vue-contenteditable-directive'
-
+import ClickOutside from 'vue-click-outside'
 sync(store, router)
 
 // CSP config for webpack dynamic chunk loading
@@ -45,6 +45,7 @@ Vue.prototype.n = n
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.directive('ClickOutside', ClickOutside)
 Vue.use(contenteditableDirective)
 Vue.use(vuetwemoji, {
 	baseUrl: OC.linkTo('social', 'img/'), // can set to local folder of emojis. default: https://twemoji.maxcdn.com/

src/mixins/popoverMenu.js

@@ -0,0 +1,42 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { PopoverMenu } from 'nextcloud-vue'
+
+export default {
+	components: {
+		PopoverMenu
+	},
+	data() {
+		return {
+			menuOpened: false
+		}
+	},
+	methods: {
+		togglePopoverMenu() {
+			this.menuOpened = !this.menuOpened
+		},
+		hidePopoverMenu() {
+			this.menuOpened = false
+		}
+	}
+}