#433: persistency of status form
This commit is contained in:
parent
19015a4ae7
commit
63d7c7bd80
7 changed files with 60 additions and 82 deletions
|
@ -1,4 +1,4 @@
|
|||
import { reduce, filter } from 'lodash'
|
||||
import { reduce, filter, findIndex } from 'lodash'
|
||||
import Status from '../status/status.vue'
|
||||
|
||||
const sortById = (a, b) => {
|
||||
|
@ -25,13 +25,13 @@ const sortAndFilterConversation = (conversation) => {
|
|||
const conversation = {
|
||||
data () {
|
||||
return {
|
||||
highlight: null
|
||||
highlight: null,
|
||||
expanded: false
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'statusoid',
|
||||
'collapsable',
|
||||
'replying'
|
||||
'collapsable'
|
||||
],
|
||||
computed: {
|
||||
status () {
|
||||
|
@ -49,9 +49,18 @@ const conversation = {
|
|||
return []
|
||||
}
|
||||
|
||||
if (!this.expanded) {
|
||||
return [this.status]
|
||||
}
|
||||
|
||||
const conversationId = this.status.statusnet_conversation_id
|
||||
const statuses = this.$store.state.statuses.allStatuses
|
||||
const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
|
||||
|
||||
const statusIndex = findIndex(conversation, { id: this.statusId })
|
||||
if (statusIndex !== -1) {
|
||||
conversation[statusIndex] = this.status
|
||||
}
|
||||
return sortAndFilterConversation(conversation)
|
||||
},
|
||||
replies () {
|
||||
|
@ -75,11 +84,13 @@ const conversation = {
|
|||
components: {
|
||||
Status
|
||||
},
|
||||
created () {
|
||||
this.fetchConversation()
|
||||
},
|
||||
watch: {
|
||||
'$route': 'fetchConversation'
|
||||
'$route': 'fetchConversation',
|
||||
expanded (value) {
|
||||
if (value) {
|
||||
this.fetchConversation()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchConversation () {
|
||||
|
@ -99,13 +110,16 @@ const conversation = {
|
|||
return this.replies[id] || []
|
||||
},
|
||||
focused (id) {
|
||||
return id === this.statusId
|
||||
return this.expanded && id === this.statusId
|
||||
},
|
||||
setHighlight (id) {
|
||||
this.highlight = id
|
||||
},
|
||||
toggleReplying () {
|
||||
this.$emit('toggleReplying')
|
||||
getHighlight () {
|
||||
return this.expanded ? this.highlight : null
|
||||
},
|
||||
toggleExpanded () {
|
||||
this.expanded = !this.expanded
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="timeline panel panel-default">
|
||||
<div class="panel-heading conversation-heading">
|
||||
<div class="timeline panel-default" :class="[expanded ? 'panel' : 'panel-disabled']">
|
||||
<div v-if="expanded" class="panel-heading conversation-heading">
|
||||
<span class="title"> {{ $t('timeline.conversation') }} </span>
|
||||
<span v-if="collapsable">
|
||||
<a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a>
|
||||
<a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
@ -11,15 +11,14 @@
|
|||
<status
|
||||
v-for="status in conversation"
|
||||
@goto="setHighlight"
|
||||
@toggleReplying="toggleReplying"
|
||||
:replying="replying && status.id === statusId"
|
||||
@toggleExpanded="toggleExpanded"
|
||||
:key="status.id"
|
||||
:inlineExpanded="collapsable"
|
||||
:statusoid="status"
|
||||
:expandable='false'
|
||||
:expandable='!expanded'
|
||||
:focused="focused(status.id)"
|
||||
:inConversation='true'
|
||||
:highlight="highlight"
|
||||
:inConversation="expanded"
|
||||
:highlight="getHighlight()"
|
||||
:replies="getReplies(status.id)"
|
||||
class="status-fadein"
|
||||
/>
|
||||
|
@ -29,3 +28,19 @@
|
|||
</template>
|
||||
|
||||
<script src="./conversation.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.timeline {
|
||||
.panel-disabled {
|
||||
.status-el {
|
||||
border-left: none;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -25,11 +25,11 @@ const Status = {
|
|||
'replies',
|
||||
'isPreview',
|
||||
'noHeading',
|
||||
'inlineExpanded',
|
||||
'replying'
|
||||
'inlineExpanded'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
replying: false,
|
||||
expanded: false,
|
||||
unmuted: false,
|
||||
userExpanded: false,
|
||||
|
@ -307,10 +307,9 @@ const Status = {
|
|||
}
|
||||
},
|
||||
toggleReplying () {
|
||||
this.$emit('toggleReplying')
|
||||
this.replying = !this.replying
|
||||
},
|
||||
gotoOriginal (id) {
|
||||
// only handled by conversation, not status_or_conversation
|
||||
if (this.inConversation) {
|
||||
this.$emit('goto', id)
|
||||
}
|
||||
|
|
|
@ -1,26 +0,0 @@
|
|||
import Status from '../status/status.vue'
|
||||
import Conversation from '../conversation/conversation.vue'
|
||||
|
||||
const statusOrConversation = {
|
||||
props: ['statusoid'],
|
||||
data () {
|
||||
return {
|
||||
expanded: false,
|
||||
replying: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Status,
|
||||
Conversation
|
||||
},
|
||||
methods: {
|
||||
toggleExpanded () {
|
||||
this.expanded = !this.expanded
|
||||
},
|
||||
toggleReplying () {
|
||||
this.replying = !this.replying
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default statusOrConversation
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<conversation
|
||||
v-if="expanded"
|
||||
@toggleExpanded="toggleExpanded"
|
||||
@toggleReplying="toggleReplying"
|
||||
:replying="replying"
|
||||
:collapsable="true"
|
||||
:statusoid="statusoid"
|
||||
/>
|
||||
<status
|
||||
v-else
|
||||
@toggleExpanded="toggleExpanded"
|
||||
@toggleReplying="toggleReplying"
|
||||
:replying="replying"
|
||||
:expandable="true"
|
||||
:inConversation="false"
|
||||
:focused="false"
|
||||
:statusoid="statusoid"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./status_or_conversation.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.spacer {
|
||||
height: 1em
|
||||
}
|
||||
</style>
|
|
@ -1,6 +1,6 @@
|
|||
import Status from '../status/status.vue'
|
||||
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
|
||||
import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
|
||||
import Conversation from '../conversation/conversation.vue'
|
||||
import { throttle } from 'lodash'
|
||||
|
||||
const Timeline = {
|
||||
|
@ -43,7 +43,7 @@ const Timeline = {
|
|||
},
|
||||
components: {
|
||||
Status,
|
||||
StatusOrConversation
|
||||
Conversation
|
||||
},
|
||||
created () {
|
||||
const store = this.$store
|
||||
|
|
|
@ -16,7 +16,13 @@
|
|||
</div>
|
||||
<div :class="classes.body">
|
||||
<div class="timeline">
|
||||
<status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
|
||||
<conversation
|
||||
v-for="status in timeline.visibleStatuses"
|
||||
class="status-fadein"
|
||||
:key="status.id"
|
||||
:statusoid="status"
|
||||
:collapsable="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="classes.footer">
|
||||
|
|
Loading…
Reference in a new issue