diff options
author | Julius Härtl <jus@bitgrid.net> | 2019-01-11 10:15:31 +0100 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2019-02-20 21:05:24 +0100 |
commit | fb65b686feaa81cd2e0f177acf92e1d5095de1b3 (patch) | |
tree | d698c1e3ac9a4492dc02c7b4adb2578bfcc67f38 /src | |
parent | 80b7c572215e4f7d2efabbe88a5669140d33834a (diff) |
Implement post deletion and add animation to timeline list
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/TimelineEntry.vue | 24 | ||||
-rw-r--r-- | src/components/TimelineList.vue | 20 | ||||
-rw-r--r-- | src/store/timeline.js | 13 |
3 files changed, 47 insertions, 10 deletions
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue index ed9dd7b0..6e201294 100644 --- a/src/components/TimelineEntry.vue +++ b/src/components/TimelineEntry.vue @@ -32,7 +32,7 @@ </div> <div v-click-outside="hidePopoverMenu" class="post-actions"> <a class="icon-more" @click.prevent="togglePopoverMenu" /> - <div :class="{open: menuOpened}" class="popovermenu menu-center"> + <div :class="{open: menuOpened}" class="popovermenu"> <popover-menu :menu="popoverMenu" /> </div> </div> @@ -48,6 +48,7 @@ import pluginTag from 'linkifyjs/plugins/hashtag' import pluginMention from 'linkifyjs/plugins/mention' import 'linkifyjs/string' import popoverMenu from './../mixins/popoverMenu' +import currentUser from './../mixins/currentUserMixin' pluginTag(linkify) pluginMention(linkify) @@ -57,7 +58,7 @@ export default { components: { Avatar }, - mixins: [popoverMenu], + mixins: [popoverMenu, currentUser], props: { item: { type: Object, default: () => {} } }, @@ -74,13 +75,18 @@ export default { text: t('social', 'Reply to post') } ] - actions.push( - { - action: () => { }, - icon: 'icon-delete', - text: t('social', 'Delete post') - } - ) + if (this.item.actor_info.account === this.cloudId) { + actions.push( + { + action: () => { + this.$store.dispatch('postDelete', this.item) + this.hidePopoverMenu() + }, + icon: 'icon-delete', + text: t('social', 'Delete post') + } + ) + } return actions }, relativeTimestamp() { diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue index 94d51935..9d405b16 100644 --- a/src/components/TimelineList.vue +++ b/src/components/TimelineList.vue @@ -22,7 +22,9 @@ <template> <div class="social__timeline"> - <timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" /> + <transition-group name="list" tag="div"> + <timeline-entry v-for="entry in timeline" :key="entry.id" :item="entry" /> + </transition-group> <infinite-loading ref="infiniteLoading" @infinite="infiniteHandler"> <div slot="spinner"> <div class="icon-loading" /> @@ -37,6 +39,22 @@ </div> </template> +<style scoped> + .list-item { + } + .list-enter-active, .list-leave-active { + transition: all .5s; + } + .list-enter { + opacity: 0; + transform: translateY(-30px); + } + .list-leave-to { + opacity: 0; + transform: translateX(-100px); + } +</style> + <script> import InfiniteLoading from 'vue-infinite-loading' import TimelineEntry from './../components/TimelineEntry' diff --git a/src/store/timeline.js b/src/store/timeline.js index be1ca66c..38f9e090 100644 --- a/src/store/timeline.js +++ b/src/store/timeline.js @@ -37,6 +37,9 @@ const mutations = { Vue.set(state.timeline, data[item].id, data[item]) } }, + removePost(state, post) { + Vue.delete(state.timeline, post.id) + }, resetTimeline(state) { state.timeline = {} state.since = Math.floor(Date.now() / 1000) + 1 @@ -83,6 +86,16 @@ const actions = { }) }) }, + postDelete(context, post) { + return axios.delete(OC.generateUrl(`apps/social/api/v1/post?id=${post.id}`)).then((response) => { + context.commit('removePost', post) + // eslint-disable-next-line no-console + console.log('Post deleted with token ' + response.data.result.token) + }).catch((error) => { + OC.Notification.showTemporary('Failed to delete the post') + console.error('Failed to delete the post', error) + }) + }, refreshTimeline(context) { return this.dispatch('fetchTimeline', { sinceTimestamp: Math.floor(Date.now() / 1000) + 1 }) }, |