Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into feature/custom-theme
This commit is contained in:
shpuld
commit
e13c8c3fd2
12 changed files with 132 additions and 70 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { reduce, find, filter, sortBy } from 'lodash'
|
||||
import { reduce, filter, sortBy } from 'lodash'
|
||||
import { statusType } from '../../modules/statuses.js'
|
||||
import Status from '../status/status.vue'
|
||||
|
||||
|
|
@ -10,12 +10,7 @@ const sortAndFilterConversation = (conversation) => {
|
|||
const conversation = {
|
||||
data () {
|
||||
return {
|
||||
highlight: null,
|
||||
preview: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
status: null
|
||||
}
|
||||
highlight: null
|
||||
}
|
||||
},
|
||||
props: [
|
||||
|
|
@ -86,15 +81,6 @@ const conversation = {
|
|||
},
|
||||
setHighlight (id) {
|
||||
this.highlight = Number(id)
|
||||
},
|
||||
setPreview (id, x, y) {
|
||||
if (id) {
|
||||
this.preview.x = x
|
||||
this.preview.y = y
|
||||
this.preview.status = find(this.conversation, { id: id })
|
||||
} else {
|
||||
this.preview.status = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,48 +8,10 @@
|
|||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="timeline">
|
||||
<status v-for="status in conversation" @goto="setHighlight" :key="status.id" @preview="setPreview" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-preview base00-background base03-border" :style="{ left: preview.x + 'px', top: preview.y + 'px'}" v-if="preview.status">
|
||||
<img class="avatar" :src="preview.status.user.profile_image_url_original">
|
||||
<div class="text">
|
||||
<h4>
|
||||
{{ preview.status.user.name }}
|
||||
<small><a>{{ preview.status.user.screen_name}}</a></small>
|
||||
</h4>
|
||||
<div @click.prevent="linkClicked" class="status-content" v-html="preview.status.statusnet_html"></div>
|
||||
<status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./conversation.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.status-preview {
|
||||
position: absolute;
|
||||
max-width: 35em;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.text {
|
||||
h4 {
|
||||
margin-bottom: 0.4em;
|
||||
small {
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
padding: 0 0.5em 0.5em 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
|
|||
import DeleteButton from '../delete_button/delete_button.vue'
|
||||
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
||||
import UserCardContent from '../user_card_content/user_card_content.vue'
|
||||
import { filter } from 'lodash'
|
||||
import { filter, find } from 'lodash'
|
||||
|
||||
const Status = {
|
||||
props: [
|
||||
|
|
@ -20,7 +20,9 @@ const Status = {
|
|||
replying: false,
|
||||
expanded: false,
|
||||
unmuted: false,
|
||||
userExpanded: false
|
||||
userExpanded: false,
|
||||
preview: null,
|
||||
showPreview: false
|
||||
}),
|
||||
computed: {
|
||||
muteWords () {
|
||||
|
|
@ -90,7 +92,9 @@ const Status = {
|
|||
},
|
||||
gotoOriginal (id) {
|
||||
// only handled by conversation, not status_or_conversation
|
||||
this.$emit('goto', id)
|
||||
if (this.inConversation) {
|
||||
this.$emit('goto', id)
|
||||
}
|
||||
},
|
||||
toggleExpanded () {
|
||||
this.$emit('toggleExpanded')
|
||||
|
|
@ -102,13 +106,25 @@ const Status = {
|
|||
this.userExpanded = !this.userExpanded
|
||||
},
|
||||
replyEnter (id, event) {
|
||||
if (this.$store.state.config.hoverPreview) {
|
||||
let rect = event.target.getBoundingClientRect()
|
||||
this.$emit('preview', Number(id), rect.left + 20, rect.top + 20 + window.pageYOffset)
|
||||
this.showPreview = true
|
||||
const targetId = Number(id)
|
||||
const statuses = this.$store.state.statuses.allStatuses
|
||||
|
||||
if (!this.preview) {
|
||||
// if we have the status somewhere already
|
||||
this.preview = find(statuses, { 'id': targetId })
|
||||
// or if we have to fetch it
|
||||
if (!this.preview) {
|
||||
this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
|
||||
this.preview = status
|
||||
})
|
||||
}
|
||||
} else if (this.preview.id !== targetId) {
|
||||
this.preview = find(statuses, { 'id': targetId })
|
||||
}
|
||||
},
|
||||
replyLeave () {
|
||||
this.$emit('preview', 0, 0, 0)
|
||||
this.showPreview = false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
{{status.in_reply_to_screen_name}}
|
||||
</router-link>
|
||||
</small>
|
||||
<template v-if="isReply && !expandable">
|
||||
<template v-if="isReply">
|
||||
<small>
|
||||
<a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"><i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i></a>
|
||||
</small>
|
||||
|
|
@ -83,6 +83,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-preview base00-background base03-border" v-if="showPreview && preview">
|
||||
<img class="avatar" :src="preview.user.profile_image_url_original">
|
||||
<div class="text">
|
||||
<h4>
|
||||
{{ preview.user.name }}
|
||||
<small><a>{{ preview.user.screen_name}}</a></small>
|
||||
</h4>
|
||||
<div @click.prevent="linkClicked" class="status-content" v-html="preview.statusnet_html"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview">
|
||||
<i class="fa icon-spin4 animate-spin"></i>
|
||||
</div>
|
||||
|
||||
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
||||
|
||||
<div v-if='status.attachments' class='attachments'>
|
||||
|
|
@ -120,7 +134,44 @@
|
|||
|
||||
status-text-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.status-preview {
|
||||
position: absolute;
|
||||
max-width: 34em;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
|
||||
margin-top: 0.5em;
|
||||
margin-left: 1em;
|
||||
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.text {
|
||||
h4 {
|
||||
margin-bottom: 0.4em;
|
||||
small {
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
padding: 0 0.5em 0.5em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.status-preview-loading {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
min-width: 8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-el {
|
||||
hyphens: auto;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ const Timeline = {
|
|||
},
|
||||
destroyed () {
|
||||
window.removeEventListener('scroll', this.scrollLoad)
|
||||
this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
|
||||
},
|
||||
methods: {
|
||||
showNewStatuses () {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ const UserFinder = {
|
|||
}),
|
||||
methods: {
|
||||
findUser (username) {
|
||||
username = username[0] === '@' ? username.slice(1) : username
|
||||
this.loading = true
|
||||
this.$store.state.api.backendInteractor.externalProfile(username)
|
||||
.then((user) => {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ const UserProfile = {
|
|||
created () {
|
||||
this.$store.commit('clearTimeline', { timeline: 'user' })
|
||||
this.$store.dispatch('startFetching', ['user', this.userId])
|
||||
if (!this.$store.state.users.usersObject[this.userId]) {
|
||||
this.$store.dispatch('fetchUser', this.userId)
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
this.$store.dispatch('stopFetching', 'user')
|
||||
|
|
@ -18,7 +21,7 @@ const UserProfile = {
|
|||
if (this.timeline.statuses[0]) {
|
||||
return this.timeline.statuses[0].user
|
||||
} else {
|
||||
return false
|
||||
return this.$store.state.users.usersObject[this.userId] || false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue