diff --git a/img/reply.svg b/img/reply.svg new file mode 100644 index 00000000..18b53a24 --- /dev/null +++ b/img/reply.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ActorAvatar.vue b/src/components/ActorAvatar.vue new file mode 100644 index 00000000..9621e2ce --- /dev/null +++ b/src/components/ActorAvatar.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/src/components/Composer.vue b/src/components/Composer.vue index c4767aa6..7ec53222 100644 --- a/src/components/Composer.vue +++ b/src/components/Composer.vue @@ -34,11 +34,22 @@ +
+

+ In reply to + + {{ replyTo.actor_info.account }} + +

+
+ {{ replyTo.content }} +
+
-
+
@@ -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') diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue index 5cabdbac..ed9dd7b0 100644 --- a/src/components/TimelineEntry.vue +++ b/src/components/TimelineEntry.vue @@ -26,8 +26,16 @@
-
@@ -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 { } } -