Merge branch 'develop' into 'feature/attachment-form-improvements'

# Conflicts:
#   src/components/attachment/attachment.js
This commit is contained in:
dtluna 2016-11-25 21:02:53 -05:00
commit cb940a8742
15 changed files with 219 additions and 112 deletions

View file

@ -145,10 +145,6 @@ status.ng-enter.ng-enter-active {
} }
.media-body {
flex: 1
}
#content { #content {
margin: auto; margin: auto;
max-width: 920px; max-width: 920px;
@ -163,34 +159,14 @@ status.ng-enter.ng-enter-active {
padding-left: 0.3em; padding-left: 0.3em;
} }
.status .avatar { .container > * {
width: 48px; min-width: 0px;
}
.status.compact .avatar {
width: 32px;
}
.status {
padding: 0.5em;
padding-right: 1em;
border-bottom: 1px solid silver;
}
.status-el:last-child .status {
border: none
} }
[ng-click] { [ng-click] {
cursor: pointer; cursor: pointer;
} }
.status-el p {
margin: 0;
margin-top: 0.2em;
margin-bottom: 0.5em;
}
.user-info { .user-info {
padding: 1em; padding: 1em;
img { img {

View file

@ -20,4 +20,4 @@ const Attachment = {
} }
} }
export default Attachment export default Attachment

View file

@ -11,6 +11,8 @@
<video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video> <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
<audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
<span v-if="type === 'unknown'">Don't know how to display this...</span> <span v-if="type === 'unknown'">Don't know how to display this...</span>
<div v-if="type === 'html' && attachment.oembed" class="oembed"> <div v-if="type === 'html' && attachment.oembed" class="oembed">
@ -45,6 +47,10 @@
width: 100%; width: 100%;
} }
audio {
width: 100%;
}
img.media-upload { img.media-upload {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -94,7 +100,6 @@
img { img {
width: 100%; width: 100%;
flex: 1;
border: 1px solid; border: 1px solid;
border-radius: 0.5em; border-radius: 0.5em;
width: 100%; width: 100%;

View file

@ -0,0 +1,48 @@
import { find, filter, sortBy, toInteger } from 'lodash'
import Status from '../status/status.vue'
import apiService from '../../services/api/api.service.js'
const conversation = {
computed: {
status () {
const id = toInteger(this.$route.params.id)
const statuses = this.$store.state.statuses.allStatuses
const status = find(statuses, {id})
return status
},
conversation () {
if (!this.status) {
return false
}
const conversationId = this.status.statusnet_conversation_id
const statuses = this.$store.state.statuses.allStatuses
const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
return sortBy(conversation, 'id')
}
},
components: {
Status
},
created () {
this.fetchConversation()
},
methods: {
fetchConversation () {
if (this.status) {
const conversationId = this.status.statusnet_conversation_id
apiService.fetchConversation({id: conversationId})
.then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
.then(() => this.$store.commit('updateTimestamps'))
} else {
const id = this.$route.params.id
apiService.fetchStatus({id})
.then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
.then(() => this.fetchConversation())
}
}
}
}
export default conversation

View file

@ -0,0 +1,12 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">Status</div>
<div class="panel-body">
<div class="timeline">
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
</div>
</div>
</div>
</template>
<script src="./conversation.js"></script>

View file

@ -1,8 +0,0 @@
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js app'
}
}
}

View file

@ -1,44 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script src='./Hello.js'></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View file

@ -20,7 +20,14 @@
<small><a :href="status.user.statusnet_profile_url">{{status.user.screen_name}}</a></small> <small><a :href="status.user.statusnet_profile_url">{{status.user.screen_name}}</a></small>
<small v-if="status.in_reply_to_screen_name"> &gt; <a :href="status.in_reply_to_profileurl">{{status.in_reply_to_screen_name}}</a></small> <small v-if="status.in_reply_to_screen_name"> &gt; <a :href="status.in_reply_to_profileurl">{{status.in_reply_to_screen_name}}</a></small>
- -
<small>{{status.created_at_parsed}}</small> <small>
<router-link :to="{ name: 'conversation', params: { id: status.id } }">
{{status.created_at_parsed}}
</router-link>
</small>
<small v-if="!status.is_local" class="source_url">
<a :href="status.external_url" >Source</a>
</small>
</h4> </h4>
<div class="status-content" v-html="status.statusnet_html"></div> <div class="status-content" v-html="status.statusnet_html"></div>
@ -51,13 +58,21 @@
<script src="./status.js" ></script> <script src="./status.js" ></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.status-el { .status-el {
hyphens: auto; hyphens: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
.source_url {
float: right;
}
.greentext {
color: green;
}
a { a {
display: inline-block; display: inline-block;
word-break: break-all; word-break: break-all;
@ -67,13 +82,37 @@
margin-top: 3px; margin-top: 3px;
margin-bottom: 3px; margin-bottom: 3px;
} }
}
.status-actions { p {
margin: 0;
margin-top: 0.2em;
margin-bottom: 0.5em;
}
}
.status-actions {
padding-top: 5px; padding-top: 5px;
} }
.icon-reply:hover { .icon-reply:hover {
color: $blue; color: $blue;
} }
.status .avatar {
width: 48px;
}
.status.compact .avatar {
width: 32px;
}
.status {
padding: 0.5em;
padding-right: 1em;
border-bottom: 1px solid silver;
}
.status-el:last-child .status {
border: none
}
</style> </style>

View file

@ -12,12 +12,13 @@ const Timeline = {
created () { created () {
const store = this.$store const store = this.$store
const credentials = store.state.users.currentUser.credentials const credentials = store.state.users.currentUser.credentials
const showImmediately = this.timeline.visibleStatuses.length === 0
timelineFetcher.fetchAndUpdate({ timelineFetcher.fetchAndUpdate({
store, store,
credentials, credentials,
timeline: this.timelineName, timeline: this.timelineName,
showImmediately: true showImmediately
}) })
}, },
methods: { methods: {

View file

@ -5,6 +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 statusesModule from './modules/statuses.js' import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js' import usersModule from './modules/users.js'
@ -23,12 +24,16 @@ const routes = [
{ path: '/', redirect: '/main/all' }, { path: '/', redirect: '/main/all' },
{ 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 }
] ]
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
routes routes,
scrollBehavior: (to, from, savedPosition) => {
return savedPosition || { x: 0, y: 0 }
}
}) })
/* eslint-disable no-new */ /* eslint-disable no-new */

View file

@ -1,4 +1,4 @@
import { remove, map, slice, sortBy, toInteger, each, find, flatten, maxBy, last, merge, max } from 'lodash' import { remove, map, slice, sortBy, toInteger, each, find, flatten, maxBy, last, merge, max, isArray } from 'lodash'
import moment from 'moment' import moment from 'moment'
import apiService from '../services/api/api.service.js' import apiService from '../services/api/api.service.js'
// import parse from '../services/status_parser/status_parser.js' // import parse from '../services/status_parser/status_parser.js'
@ -7,6 +7,7 @@ export const defaultState = {
allStatuses: [], allStatuses: [],
maxId: 0, maxId: 0,
notifications: [], notifications: [],
favorites: new Set(),
timelines: { timelines: {
public: { public: {
statuses: [], statuses: [],
@ -100,11 +101,17 @@ const mergeOrAdd = (arr, item) => {
} }
const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {} }) => { const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {} }) => {
// Sanity check
if (!isArray(statuses)) {
return false
}
const allStatuses = state.allStatuses const allStatuses = state.allStatuses
const timelineObject = state.timelines[timeline] const timelineObject = state.timelines[timeline]
// Set the maxId to the new id if it's larger. // Set the maxId to the new id if it's larger.
const updateMaxId = ({id}) => { const updateMaxId = ({id}) => {
if (!timeline) { return false }
timelineObject.maxId = max([id, timelineObject.maxId]) timelineObject.maxId = max([id, timelineObject.maxId])
} }
@ -117,15 +124,15 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
} }
// Some statuses should only be added to the global status repository. // Some statuses should only be added to the global status repository.
if (addToTimeline) { if (timeline && addToTimeline) {
mergeOrAdd(timelineObject.statuses, status) mergeOrAdd(timelineObject.statuses, status)
} }
if (showImmediately) { if (timeline && showImmediately) {
// Add it directly to the visibleStatuses, don't change // Add it directly to the visibleStatuses, don't change
// newStatusCount // newStatusCount
mergeOrAdd(timelineObject.visibleStatuses, status) mergeOrAdd(timelineObject.visibleStatuses, status)
} else if (addToTimeline && result.new) { } else if (timeline && addToTimeline && result.new) {
// Just change newStatuscount // Just change newStatuscount
timelineObject.newStatusCount += 1 timelineObject.newStatusCount += 1
} }
@ -141,6 +148,13 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
const status = find(allStatuses, { id: toInteger(favorite.in_reply_to_status_id) }) const status = find(allStatuses, { id: toInteger(favorite.in_reply_to_status_id) })
if (status) { if (status) {
status.fave_num += 1 status.fave_num += 1
// This is our favorite, so the relevant bit.
if (favorite.user.id === user.id) {
status.favorited = true
}
// Add a notification if the user's status is favorited
if (status.user.id === user.id) { if (status.user.id === user.id) {
addNotification({type: 'favorite', status, action: favorite}) addNotification({type: 'favorite', status, action: favorite})
} }
@ -159,7 +173,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
let retweet let retweet
// If the retweeted status is already there, don't add the retweet // If the retweeted status is already there, don't add the retweet
// to the timeline. // to the timeline.
if (find(timelineObject.visibleStatuses, {id: retweetedStatus.id})) { if (timeline && find(timelineObject.visibleStatuses, {id: retweetedStatus.id})) {
// Already have it visible, don't add to timeline, don't show. // Already have it visible, don't add to timeline, don't show.
retweet = addStatus(status, false, false) retweet = addStatus(status, false, false)
} else { } else {
@ -169,16 +183,22 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
retweet.retweeted_status = retweetedStatus retweet.retweeted_status = retweetedStatus
}, },
'favorite': (favorite) => { 'favorite': (favorite) => {
updateMaxId(favorite) // Only update if this is a new favorite.
favoriteStatus(favorite) if (!state.favorites.has(favorite.id)) {
state.favorites.add(favorite.id)
updateMaxId(favorite)
favoriteStatus(favorite)
}
}, },
'deletion': (deletion) => { 'deletion': (deletion) => {
const uri = deletion.uri const uri = deletion.uri
updateMaxId(deletion) updateMaxId(deletion)
remove(allStatuses, { uri }) remove(allStatuses, { uri })
remove(timelineObject.statuses, { uri }) if (timeline) {
remove(timelineObject.visibleStatuses, { uri }) remove(timelineObject.statuses, { uri })
remove(timelineObject.visibleStatuses, { uri })
}
}, },
'default': (unknown) => { 'default': (unknown) => {
console.log(unknown) console.log(unknown)
@ -192,9 +212,11 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
}) })
// Keep the visible statuses sorted // Keep the visible statuses sorted
timelineObject.visibleStatuses = sortBy(timelineObject.visibleStatuses, ({id}) => -id) if (timeline) {
timelineObject.statuses = sortBy(timelineObject.statuses, ({id}) => -id) timelineObject.visibleStatuses = sortBy(timelineObject.visibleStatuses, ({id}) => -id)
timelineObject.minVisibleId = (last(timelineObject.statuses) || {}).id timelineObject.statuses = sortBy(timelineObject.statuses, ({id}) => -id)
timelineObject.minVisibleId = (last(timelineObject.statuses) || {}).id
}
} }
export const mutations = { export const mutations = {
@ -228,7 +250,7 @@ export const mutations = {
const statuses = { const statuses = {
state: defaultState, state: defaultState,
actions: { actions: {
addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline }) { addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false }) {
commit('addNewStatuses', { statuses, showImmediately, timeline, user: rootState.users.currentUser }) commit('addNewStatuses', { statuses, showImmediately, timeline, user: rootState.users.currentUser })
}, },
favorite ({ rootState, commit }, status) { favorite ({ rootState, commit }, status) {

View file

@ -7,18 +7,16 @@ const FAVORITE_URL = '/api/favorites/create'
const UNFAVORITE_URL = '/api/favorites/destroy' const UNFAVORITE_URL = '/api/favorites/destroy'
const RETWEET_URL = '/api/statuses/retweet' const RETWEET_URL = '/api/statuses/retweet'
const STATUS_UPDATE_URL = '/api/statuses/update.json' const STATUS_UPDATE_URL = '/api/statuses/update.json'
const STATUS_URL = '/api/statuses/show'
const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload' const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
// const CONVERSATION_URL = '/api/statusnet/conversation/'; const CONVERSATION_URL = '/api/statusnet/conversation'
// const FORM_CONTENT_TYPE = {'Content-Type': 'application/x-www-form-urlencoded'}; const oldfetch = window.fetch
// import { param, ajax } from 'jquery';
// import { merge } from 'lodash';
let fetch = (url, options) => { let fetch = (url, options) => {
const baseUrl = '' const baseUrl = ''
const fullUrl = baseUrl + url const fullUrl = baseUrl + url
return window.fetch(fullUrl, options) return oldfetch(fullUrl, options)
} }
const authHeaders = (user) => { const authHeaders = (user) => {
@ -29,6 +27,16 @@ const authHeaders = (user) => {
} }
} }
const fetchConversation = ({id}) => {
let url = `${CONVERSATION_URL}/${id}.json?count=100`
return fetch(url).then((data) => data.json())
}
const fetchStatus = ({id}) => {
let url = `${STATUS_URL}/${id}.json`
return fetch(url).then((data) => data.json())
}
const fetchTimeline = ({timeline, credentials, since = false, until = false}) => { const fetchTimeline = ({timeline, credentials, since = false, until = false}) => {
const timelineUrls = { const timelineUrls = {
public: PUBLIC_TIMELINE_URL, public: PUBLIC_TIMELINE_URL,
@ -108,6 +116,8 @@ const uploadMedia = ({formData, credentials}) => {
const apiService = { const apiService = {
verifyCredentials, verifyCredentials,
fetchTimeline, fetchTimeline,
fetchConversation,
fetchStatus,
favorite, favorite,
unfavorite, unfavorite,
retweet, retweet,

View file

@ -67,6 +67,18 @@ describe('The Statuses module', () => {
expect(state.timelines.public.newStatusCount).to.equal(1) expect(state.timelines.public.newStatusCount).to.equal(1)
}) })
it('add the statuses to allStatuses if no timeline is given', () => {
const state = cloneDeep(defaultState)
const status = makeMockStatus({id: 1})
mutations.addNewStatuses(state, { statuses: [status] })
expect(state.allStatuses).to.eql([status])
expect(state.timelines.public.statuses).to.eql([])
expect(state.timelines.public.visibleStatuses).to.eql([])
expect(state.timelines.public.newStatusCount).to.equal(0)
})
it('adds the status to allStatuses and to the given timeline, directly visible', () => { it('adds the status to allStatuses and to the given timeline, directly visible', () => {
const state = cloneDeep(defaultState) const state = cloneDeep(defaultState)
const status = makeMockStatus({id: 1}) const status = makeMockStatus({id: 1})
@ -185,7 +197,8 @@ describe('The Statuses module', () => {
is_post_verb: false, is_post_verb: false,
in_reply_to_status_id: '1', // The API uses strings here... in_reply_to_status_id: '1', // The API uses strings here...
uri: 'tag:shitposter.club,2016-08-21:fave:3895:note:773501:2016-08-21T16:52:15+00:00', uri: 'tag:shitposter.club,2016-08-21:fave:3895:note:773501:2016-08-21T16:52:15+00:00',
text: 'a favorited something by b' text: 'a favorited something by b',
user: {}
} }
mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' }) mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
@ -194,6 +207,33 @@ describe('The Statuses module', () => {
expect(state.timelines.public.visibleStatuses.length).to.eql(1) expect(state.timelines.public.visibleStatuses.length).to.eql(1)
expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1) expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
expect(state.timelines.public.maxId).to.eq(favorite.id) expect(state.timelines.public.maxId).to.eq(favorite.id)
// Adding it again does nothing
mutations.addNewStatuses(state, { statuses: [favorite], showImmediately: true, timeline: 'public' })
expect(state.timelines.public.visibleStatuses.length).to.eql(1)
expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
expect(state.timelines.public.maxId).to.eq(favorite.id)
// If something is favorited by the current user, it also sets the 'favorited' property
const user = {
id: 1
}
const ownFavorite = {
id: 3,
is_post_verb: false,
in_reply_to_status_id: '1', // The API uses strings here...
uri: 'tag:shitposter.club,2016-08-21:fave:3895:note:773501:2016-08-21T16:52:15+00:00',
text: 'a favorited something by b',
user
}
mutations.addNewStatuses(state, { statuses: [ownFavorite], showImmediately: true, timeline: 'public', user })
expect(state.timelines.public.visibleStatuses.length).to.eql(1)
expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(2)
expect(state.timelines.public.visibleStatuses[0].favorited).to.eql(true)
}) })
describe('notifications', () => { describe('notifications', () => {
@ -208,7 +248,8 @@ describe('The Statuses module', () => {
is_post_verb: false, is_post_verb: false,
in_reply_to_status_id: '1', // The API uses strings here... in_reply_to_status_id: '1', // The API uses strings here...
uri: 'tag:shitposter.club,2016-08-21:fave:3895:note:773501:2016-08-21T16:52:15+00:00', uri: 'tag:shitposter.club,2016-08-21:fave:3895:note:773501:2016-08-21T16:52:15+00:00',
text: 'a favorited something by b' text: 'a favorited something by b',
user: {}
} }
mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public', user }) mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public', user })