diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/conversation/conversation.js | 36 | ||||
| -rw-r--r-- | src/components/conversation/conversation.vue | 31 | ||||
| -rw-r--r-- | src/components/status/status.js | 7 | ||||
| -rw-r--r-- | src/components/status_or_conversation/status_or_conversation.js | 26 | ||||
| -rw-r--r-- | src/components/status_or_conversation/status_or_conversation.vue | 30 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 4 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 8 |
7 files changed, 60 insertions, 82 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 95e484cd..4cae0bdb 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -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 } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 42d009c9..b208d540 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -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> diff --git a/src/components/status/status.js b/src/components/status/status.js index 20ca86a6..8e489704 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -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) } diff --git a/src/components/status_or_conversation/status_or_conversation.js b/src/components/status_or_conversation/status_or_conversation.js deleted file mode 100644 index 749f7665..00000000 --- a/src/components/status_or_conversation/status_or_conversation.js +++ /dev/null @@ -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 diff --git a/src/components/status_or_conversation/status_or_conversation.vue b/src/components/status_or_conversation/status_or_conversation.vue deleted file mode 100644 index 43a60c3a..00000000 --- a/src/components/status_or_conversation/status_or_conversation.vue +++ /dev/null @@ -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> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index c45f8947..1da7d5cc 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -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 diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 8f28d65c..e0a34bd1 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -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"> |