Add UI to reply to a post

Signed-off-by: Julius Härtl <jus@bitgrid.net>
pull/323/head
Julius Härtl 2019-01-10 19:42:05 +01:00
rodzic a4a5b29550
commit 80b7c57221
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4C614C6ED2CDE6DF
6 zmienionych plików z 195 dodań i 8 usunięć

6
img/reply.svg 100644
Wyświetl plik

@ -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>

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 410 B

Wyświetl plik

@ -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>

Wyświetl plik

@ -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')

Wyświetl plik

@ -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; */
}

Wyświetl plik

@ -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/

Wyświetl plik

@ -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
}
}
}