commit: 5ec4f1b047d798b7038ec73db86476e70d2b1888
parent: ea25708bf365e865334877c8625996f9386b44e0
Author: Roger Braun <roger@rogerbraun.net>
Date: Sat, 4 Feb 2017 13:52:26 +0100
Extract conversation and create conversation page.
Diffstat:
5 files changed, 39 insertions(+), 12 deletions(-)
diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js
@@ -0,0 +1,19 @@
+import Conversation from '../conversation/conversation.vue'
+import { find, toInteger } from 'lodash'
+
+const conversationPage = {
+ components: {
+ Conversation
+ },
+ computed: {
+ statusoid () {
+ const id = toInteger(this.$route.params.id)
+ const statuses = this.$store.state.statuses.allStatuses
+ const status = find(statuses, {id})
+
+ return status
+ }
+ }
+}
+
+export default conversationPage
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
@@ -0,0 +1,5 @@
+<template>
+ <conversation :collapsable="false" :statusoid="statusoid"></conversation>
+</template>
+
+<script src="./conversation-page.js"></script>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { find, filter, sortBy, toInteger } from 'lodash'
+import { filter, sortBy } from 'lodash'
import { statusType } from '../../modules/statuses.js'
import Status from '../status/status.vue'
@@ -8,14 +8,12 @@ const sortAndFilterConversation = (conversation) => {
}
const conversation = {
+ props: [
+ 'statusoid',
+ 'collapsable'
+ ],
computed: {
- status () {
- const id = toInteger(this.$route.params.id)
- const statuses = this.$store.state.statuses.allStatuses
- const status = find(statuses, {id})
-
- return status
- },
+ status () { return this.statusoid },
conversation () {
if (!this.status) {
return false
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -1,9 +1,14 @@
<template>
<div class="timeline panel panel-default base00-background">
- <div class="panel-heading base01-background base04">Status</div>
+ <div class="panel-heading base01-background base04">
+ Conversation
+ <div v-if="collapsable">
+ <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
+ </div>
+ </div>
<div class="panel-body">
<div class="timeline">
- <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
+ <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
</div>
</div>
</div>
diff --git a/src/main.js b/src/main.js
@@ -5,7 +5,7 @@ import App from './App.vue'
import PublicTimeline from './components/public_timeline/public_timeline.vue'
import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
-import Conversation from './components/conversation/conversation.vue'
+import ConversationPage from './components/conversation-page/conversation-page.vue'
import Mentions from './components/mentions/mentions.vue'
import UserProfile from './components/user_profile/user_profile.vue'
@@ -39,7 +39,7 @@ const routes = [
{ path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline },
{ path: '/main/friends', component: FriendsTimeline },
- { name: 'conversation', path: '/notice/:id', component: Conversation },
+ { name: 'conversation', path: '/notice/:id', component: ConversationPage },
{ name: 'user-profile', path: '/users/:id', component: UserProfile },
{ name: 'mentions', path: '/:username/mentions', component: Mentions }
]