#433: persistency of status form

This commit is contained in:
dave 2019-03-11 16:24:37 -04:00
parent 19015a4ae7
commit 63d7c7bd80
7 changed files with 60 additions and 82 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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