Make status expandable into conversation.
This commit is contained in:
parent
b420b5838c
commit
2269e815e1
2 changed files with 15 additions and 6 deletions
|
@ -5,9 +5,13 @@ import DeleteButton from '../delete_button/delete_button.vue'
|
||||||
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
||||||
|
|
||||||
const Status = {
|
const Status = {
|
||||||
props: [ 'statusoid' ],
|
props: [
|
||||||
|
'statusoid',
|
||||||
|
'expandable'
|
||||||
|
],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
replying: false
|
replying: false,
|
||||||
|
expanded: false
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
retweet () { return !!this.statusoid.retweeted_status },
|
retweet () { return !!this.statusoid.retweeted_status },
|
||||||
|
@ -33,6 +37,9 @@ const Status = {
|
||||||
methods: {
|
methods: {
|
||||||
toggleReplying () {
|
toggleReplying () {
|
||||||
this.replying = !this.replying
|
this.replying = !this.replying
|
||||||
|
},
|
||||||
|
toggleExpanded () {
|
||||||
|
this.$emit('toggleExpanded')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,6 +30,12 @@
|
||||||
<timeago :since="status.created_at" :auto-update="60"></timeago>
|
<timeago :since="status.created_at" :auto-update="60"></timeago>
|
||||||
</router-link>
|
</router-link>
|
||||||
</small>
|
</small>
|
||||||
|
<template v-if="expandable">
|
||||||
|
-
|
||||||
|
<small>
|
||||||
|
<a href="#" @click.prevent="toggleExpanded" >Expand</a>
|
||||||
|
</small>
|
||||||
|
</template>
|
||||||
<small v-if="!status.is_local" class="source_url">
|
<small v-if="!status.is_local" class="source_url">
|
||||||
<a :href="status.external_url" target="_blank" >Source</a>
|
<a :href="status.external_url" target="_blank" >Source</a>
|
||||||
</small>
|
</small>
|
||||||
|
@ -122,8 +128,4 @@
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-el:last-child .status {
|
|
||||||
border-bottom: none
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue