Merge branch 'develop' into feature/hash-routed

This commit is contained in:
Roger Braun 2017-02-04 13:57:24 +01:00
commit 670298cca1
17 changed files with 106 additions and 28 deletions

View file

@ -2,6 +2,10 @@
> A Qvitter-style frontend for certain GS servers. > A Qvitter-style frontend for certain GS servers.
# FOR ADMINS
You don't need to build Pleroma yourself. Check out https://gitgud.io/lambadalambda/pleroma-fe/wikis/dual-boot-with-qvitter to see how to run Pleroma and Qvitter at the same time.
## Build Setup ## Build Setup
``` bash ``` bash

View file

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

View file

@ -0,0 +1,5 @@
<template>
<conversation :collapsable="false" :statusoid="statusoid"></conversation>
</template>
<script src="./conversation-page.js"></script>

View file

@ -1,4 +1,4 @@
import { find, filter, sortBy, toInteger } from 'lodash' import { filter, sortBy } from 'lodash'
import { statusType } from '../../modules/statuses.js' import { statusType } from '../../modules/statuses.js'
import Status from '../status/status.vue' import Status from '../status/status.vue'
@ -8,14 +8,12 @@ const sortAndFilterConversation = (conversation) => {
} }
const conversation = { const conversation = {
props: [
'statusoid',
'collapsable'
],
computed: { computed: {
status () { status () { return this.statusoid },
const id = toInteger(this.$route.params.id)
const statuses = this.$store.state.statuses.allStatuses
const status = find(statuses, {id})
return status
},
conversation () { conversation () {
if (!this.status) { if (!this.status) {
return false return false

View file

@ -1,9 +1,14 @@
<template> <template>
<div class="timeline panel panel-default base00-background"> <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="panel-body">
<div class="timeline"> <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> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="timeline panel panel-default base00-background"> <div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">Friends Timeline</div> <div class="panel-heading base01-background base04">Friends Timeline</div>
<div class="panel-body"> <div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/> <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="timeline panel panel-default base00-background"> <div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">Mentions</div> <div class="panel-heading base01-background base04">Mentions</div>
<div class="panel-body"> <div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/> <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>

View file

@ -9,15 +9,15 @@
</a> </a>
<div class='text'> <div class='text'>
<div v-if="notification.type === 'favorite'"> <div v-if="notification.type === 'favorite'">
<h1>{{ notification.action.user.name }}<i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1> <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
<p>{{ notification.status.text }}</p> <p>{{ notification.status.text }}</p>
</div> </div>
<div v-if="notification.type === 'repeat'"> <div v-if="notification.type === 'repeat'">
<h1>{{ notification.action.user.name }}<i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1> <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
<p>{{ notification.status.text }}</p> <p>{{ notification.status.text }}</p>
</div> </div>
<div v-if="notification.type === 'mention'"> <div v-if="notification.type === 'mention'">
<h1>{{ notification.action.user.name }}<i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1> <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
<p>{{ notification.status.text }}</p> <p>{{ notification.status.text }}</p>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="timeline panel panel-default base00-background"> <div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div> <div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
<div class="panel-body"> <div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/> <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="timeline panel panel-default base00-background"> <div class="timeline panel panel-default">
<div class="panel-heading base01-background base04">Public Timeline</div> <div class="panel-heading base01-background base04">Public Timeline</div>
<div class="panel-body"> <div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/> <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>

View file

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

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="status-el" v-if="!status.deleted"> <div class="status-el base00-background" v-if="!status.deleted">
<div v-if="retweet" class="media container retweet-info"> <div v-if="retweet" class="media container retweet-info">
<div class="media-left"> <div class="media-left">
<i class='fa icon-retweet retweeted'></i> <i class='fa icon-retweet retweeted'></i>
@ -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>

View file

@ -0,0 +1,22 @@
import Status from '../status/status.vue'
import Conversation from '../conversation/conversation.vue'
const statusOrConversation = {
props: ['statusoid'],
data () {
return {
expanded: false
}
},
components: {
Status,
Conversation
},
methods: {
toggleExpanded () {
this.expanded = !this.expanded
}
}
}
export default statusOrConversation

View file

@ -0,0 +1,14 @@
<template>
<div>
<conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation>
<status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid"></status>
</div>
</template>
<script src="./status_or_conversation.js"></script>
<style lang="scss">
.spacer {
height: 1em
}
</style>

View file

@ -1,5 +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'
const Timeline = { const Timeline = {
props: [ props: [
@ -7,7 +8,8 @@ const Timeline = {
'timelineName' 'timelineName'
], ],
components: { components: {
Status Status,
StatusOrConversation
}, },
created () { created () {
const store = this.$store const store = this.$store

View file

@ -7,7 +7,7 @@
</p> </p>
</div> </div>
</a> </a>
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status> <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading"> <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="base01-background base05-border new-status-notification"> <div class="base01-background base05-border new-status-notification">
<p class="text-center" > <p class="text-center" >

View file

@ -5,7 +5,7 @@ import App from './App.vue'
import PublicTimeline from './components/public_timeline/public_timeline.vue' import PublicTimeline from './components/public_timeline/public_timeline.vue'
import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_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 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 Mentions from './components/mentions/mentions.vue'
import UserProfile from './components/user_profile/user_profile.vue' import UserProfile from './components/user_profile/user_profile.vue'
@ -39,7 +39,7 @@ const routes = [
{ path: '/main/all', component: PublicAndExternalTimeline }, { path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline }, { path: '/main/public', component: PublicTimeline },
{ path: '/main/friends', component: FriendsTimeline }, { 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: 'user-profile', path: '/users/:id', component: UserProfile },
{ name: 'mentions', path: '/:username/mentions', component: Mentions } { name: 'mentions', path: '/:username/mentions', component: Mentions }
] ]