kopia lustrzana https://github.com/nextcloud/social
Add UI to reply to a post
Signed-off-by: Julius Härtl <jus@bitgrid.net>pull/323/head
rodzic
a4a5b29550
commit
80b7c57221
|
@ -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 |
|
@ -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>
|
|
@ -34,11 +34,22 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<form class="new-post-form" @submit.prevent="createPost">
|
||||||
<vue-tribute :options="tributeOptions">
|
<vue-tribute :options="tributeOptions">
|
||||||
<!-- eslint-disable-next-line vue/valid-v-model -->
|
<!-- eslint-disable-next-line vue/valid-v-model -->
|
||||||
<div ref="composerInput" v-contenteditable:post.dangerousHTML="canType" class="message"
|
<div ref="composerInput" v-contenteditable:post.dangerousHTML="canType && !loading" class="message"
|
||||||
placeholder="What would you like to share?" @keyup.enter="keyup" />
|
placeholder="What would you like to share?" :class="{'icon-loading': loading}" @keyup.enter="keyup" />
|
||||||
</vue-tribute>
|
</vue-tribute>
|
||||||
<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
|
<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
|
||||||
@emoji="insert">
|
@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 {
|
.new-post-form {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -309,12 +339,14 @@ import { VTooltip } from 'v-tooltip'
|
||||||
import CurrentUserMixin from './../mixins/currentUserMixin'
|
import CurrentUserMixin from './../mixins/currentUserMixin'
|
||||||
import FocusOnCreate from '../directives/focusOnCreate'
|
import FocusOnCreate from '../directives/focusOnCreate'
|
||||||
import axios from 'nextcloud-axios'
|
import axios from 'nextcloud-axios'
|
||||||
|
import ActorAvatar from './ActorAvatar'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Composer',
|
name: 'Composer',
|
||||||
components: {
|
components: {
|
||||||
PopoverMenu,
|
PopoverMenu,
|
||||||
Avatar,
|
Avatar,
|
||||||
|
ActorAvatar,
|
||||||
EmojiPicker,
|
EmojiPicker,
|
||||||
VueTribute
|
VueTribute
|
||||||
},
|
},
|
||||||
|
@ -330,9 +362,11 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
type: localStorage.getItem('social.lastPostType') || 'followers',
|
type: localStorage.getItem('social.lastPostType') || 'followers',
|
||||||
|
loading: false,
|
||||||
post: '',
|
post: '',
|
||||||
canType: true,
|
canType: true,
|
||||||
search: '',
|
search: '',
|
||||||
|
replyTo: null,
|
||||||
tributeOptions: {
|
tributeOptions: {
|
||||||
lookup: function(item) {
|
lookup: function(item) {
|
||||||
return item.key + item.value
|
return item.key + item.value
|
||||||
|
@ -463,6 +497,11 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$root.$on('composer-reply', (data) => {
|
||||||
|
this.replyTo = data
|
||||||
|
})
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
insert(emoji) {
|
insert(emoji) {
|
||||||
if (typeof emoji === 'object') {
|
if (typeof emoji === 'object') {
|
||||||
|
@ -513,12 +552,16 @@ export default {
|
||||||
}
|
}
|
||||||
} while (match)
|
} while (match)
|
||||||
|
|
||||||
return {
|
let data = {
|
||||||
content: content,
|
content: content,
|
||||||
to: to,
|
to: to,
|
||||||
hashtags: hashtags,
|
hashtags: hashtags,
|
||||||
type: this.type
|
type: this.type
|
||||||
}
|
}
|
||||||
|
if (this.replyTo) {
|
||||||
|
data.replyTo = this.replyTo.id
|
||||||
|
}
|
||||||
|
return data
|
||||||
},
|
},
|
||||||
keyup(event) {
|
keyup(event) {
|
||||||
if (event.shiftKey) {
|
if (event.shiftKey) {
|
||||||
|
@ -526,7 +569,10 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
createPost(event) {
|
createPost(event) {
|
||||||
|
this.loading = true
|
||||||
this.$store.dispatch('post', this.getPostData()).then((response) => {
|
this.$store.dispatch('post', this.getPostData()).then((response) => {
|
||||||
|
this.loading = false
|
||||||
|
this.replyTo = null
|
||||||
this.post = ''
|
this.post = ''
|
||||||
this.$refs.composerInput.innerText = this.post
|
this.$refs.composerInput.innerText = this.post
|
||||||
this.$store.dispatch('refreshTimeline')
|
this.$store.dispatch('refreshTimeline')
|
||||||
|
|
|
@ -26,8 +26,16 @@
|
||||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
<div class="post-message" v-html="formatedMessage" />
|
<div class="post-message" v-html="formatedMessage" />
|
||||||
</div>
|
</div>
|
||||||
<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">
|
<div>
|
||||||
{{ relativeTimestamp }}
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -39,6 +47,7 @@ import * as linkify from 'linkifyjs'
|
||||||
import pluginTag from 'linkifyjs/plugins/hashtag'
|
import pluginTag from 'linkifyjs/plugins/hashtag'
|
||||||
import pluginMention from 'linkifyjs/plugins/mention'
|
import pluginMention from 'linkifyjs/plugins/mention'
|
||||||
import 'linkifyjs/string'
|
import 'linkifyjs/string'
|
||||||
|
import popoverMenu from './../mixins/popoverMenu'
|
||||||
|
|
||||||
pluginTag(linkify)
|
pluginTag(linkify)
|
||||||
pluginMention(linkify)
|
pluginMention(linkify)
|
||||||
|
@ -48,15 +57,32 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
Avatar
|
Avatar
|
||||||
},
|
},
|
||||||
|
mixins: [popoverMenu],
|
||||||
props: {
|
props: {
|
||||||
item: { type: Object, default: () => {} }
|
item: { type: Object, default: () => {} }
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
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() {
|
relativeTimestamp() {
|
||||||
return OC.Util.relativeModifiedDate(this.item.published)
|
return OC.Util.relativeModifiedDate(this.item.published)
|
||||||
},
|
},
|
||||||
|
@ -90,7 +116,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.timeline-entry {
|
.timeline-entry {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
@ -125,6 +151,19 @@ export default {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-actions {
|
||||||
|
position: relative;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.icon-more {
|
||||||
|
display: inline-block;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
/* opacity: 0.5; */
|
/* opacity: 0.5; */
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,7 +28,7 @@ import store from './store'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import vuetwemoji from 'vue-twemoji'
|
import vuetwemoji from 'vue-twemoji'
|
||||||
import contenteditableDirective from 'vue-contenteditable-directive'
|
import contenteditableDirective from 'vue-contenteditable-directive'
|
||||||
|
import ClickOutside from 'vue-click-outside'
|
||||||
sync(store, router)
|
sync(store, router)
|
||||||
|
|
||||||
// CSP config for webpack dynamic chunk loading
|
// CSP config for webpack dynamic chunk loading
|
||||||
|
@ -45,6 +45,7 @@ Vue.prototype.n = n
|
||||||
Vue.prototype.OC = OC
|
Vue.prototype.OC = OC
|
||||||
Vue.prototype.OCA = OCA
|
Vue.prototype.OCA = OCA
|
||||||
|
|
||||||
|
Vue.directive('ClickOutside', ClickOutside)
|
||||||
Vue.use(contenteditableDirective)
|
Vue.use(contenteditableDirective)
|
||||||
Vue.use(vuetwemoji, {
|
Vue.use(vuetwemoji, {
|
||||||
baseUrl: OC.linkTo('social', 'img/'), // can set to local folder of emojis. default: https://twemoji.maxcdn.com/
|
baseUrl: OC.linkTo('social', 'img/'), // can set to local folder of emojis. default: https://twemoji.maxcdn.com/
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Ładowanie…
Reference in New Issue