#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' import Status from '../status/status.vue'
const sortById = (a, b) => { const sortById = (a, b) => {
@ -25,13 +25,13 @@ const sortAndFilterConversation = (conversation) => {
const conversation = { const conversation = {
data () { data () {
return { return {
highlight: null highlight: null,
expanded: false
} }
}, },
props: [ props: [
'statusoid', 'statusoid',
'collapsable', 'collapsable'
'replying'
], ],
computed: { computed: {
status () { status () {
@ -49,9 +49,18 @@ const conversation = {
return [] return []
} }
if (!this.expanded) {
return [this.status]
}
const conversationId = this.status.statusnet_conversation_id const conversationId = this.status.statusnet_conversation_id
const statuses = this.$store.state.statuses.allStatuses const statuses = this.$store.state.statuses.allStatuses
const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) 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) return sortAndFilterConversation(conversation)
}, },
replies () { replies () {
@ -75,11 +84,13 @@ const conversation = {
components: { components: {
Status Status
}, },
created () {
this.fetchConversation()
},
watch: { watch: {
'$route': 'fetchConversation' '$route': 'fetchConversation',
expanded (value) {
if (value) {
this.fetchConversation()
}
}
}, },
methods: { methods: {
fetchConversation () { fetchConversation () {
@ -99,13 +110,16 @@ const conversation = {
return this.replies[id] || [] return this.replies[id] || []
}, },
focused (id) { focused (id) {
return id === this.statusId return this.expanded && id === this.statusId
}, },
setHighlight (id) { setHighlight (id) {
this.highlight = id this.highlight = id
}, },
toggleReplying () { getHighlight () {
this.$emit('toggleReplying') return this.expanded ? this.highlight : null
},
toggleExpanded () {
this.expanded = !this.expanded
} }
} }
} }

View file

@ -1,9 +1,9 @@
<template> <template>
<div class="timeline panel panel-default"> <div class="timeline panel-default" :class="[expanded ? 'panel' : 'panel-disabled']">
<div class="panel-heading conversation-heading"> <div v-if="expanded" class="panel-heading conversation-heading">
<span class="title"> {{ $t('timeline.conversation') }} </span> <span class="title"> {{ $t('timeline.conversation') }} </span>
<span v-if="collapsable"> <span v-if="collapsable">
<a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a> <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a>
</span> </span>
</div> </div>
<div class="panel-body"> <div class="panel-body">
@ -11,15 +11,14 @@
<status <status
v-for="status in conversation" v-for="status in conversation"
@goto="setHighlight" @goto="setHighlight"
@toggleReplying="toggleReplying" @toggleExpanded="toggleExpanded"
:replying="replying && status.id === statusId"
:key="status.id" :key="status.id"
:inlineExpanded="collapsable" :inlineExpanded="collapsable"
:statusoid="status" :statusoid="status"
:expandable='false' :expandable='!expanded'
:focused="focused(status.id)" :focused="focused(status.id)"
:inConversation='true' :inConversation="expanded"
:highlight="highlight" :highlight="getHighlight()"
:replies="getReplies(status.id)" :replies="getReplies(status.id)"
class="status-fadein" class="status-fadein"
/> />
@ -29,3 +28,19 @@
</template> </template>
<script src="./conversation.js"></script> <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', 'replies',
'isPreview', 'isPreview',
'noHeading', 'noHeading',
'inlineExpanded', 'inlineExpanded'
'replying'
], ],
data () { data () {
return { return {
replying: false,
expanded: false, expanded: false,
unmuted: false, unmuted: false,
userExpanded: false, userExpanded: false,
@ -307,10 +307,9 @@ const Status = {
} }
}, },
toggleReplying () { toggleReplying () {
this.$emit('toggleReplying') this.replying = !this.replying
}, },
gotoOriginal (id) { gotoOriginal (id) {
// only handled by conversation, not status_or_conversation
if (this.inConversation) { if (this.inConversation) {
this.$emit('goto', id) 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 Status from '../status/status.vue'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' 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' import { throttle } from 'lodash'
const Timeline = { const Timeline = {
@ -43,7 +43,7 @@ const Timeline = {
}, },
components: { components: {
Status, Status,
StatusOrConversation Conversation
}, },
created () { created () {
const store = this.$store const store = this.$store

View file

@ -16,7 +16,13 @@
</div> </div>
<div :class="classes.body"> <div :class="classes.body">
<div class="timeline"> <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> </div>
<div :class="classes.footer"> <div :class="classes.footer">