Merge branch 'feature/retweet' into 'master'

Feature/retweet

See merge request !1
This commit is contained in:
lambadalambda 2016-11-14 15:09:20 -05:00
commit ce509937f6
9 changed files with 91 additions and 16 deletions

View file

@ -1,7 +1,4 @@
$main-color: #f58d2c; @import './_variables.scss';
$main-background: white;
$darkened-background: whitesmoke;
#app { #app {
background-color: $main-color; background-color: $main-color;
background-size: cover; background-size: cover;
@ -225,9 +222,10 @@ status.ng-enter.ng-enter-active {
} }
.fa { .fa {
color: $main-color; color: grey;
} }
.status-actions { .status-actions {
width: 50%; width: 50%;
display: flex; display: flex;

6
src/_variables.scss Normal file
View file

@ -0,0 +1,6 @@
$main-color: #f58d2c;
$main-background: white;
$darkened-background: whitesmoke;
$green: #0fa00f;
$blue: #0095ff;

View file

@ -7,8 +7,15 @@
<script src="./favorite_button.js" ></script> <script src="./favorite_button.js" ></script>
<style> <style lang='scss'>
.favorite-button { @import '../../_variables.scss';
cursor: pointer .favorite-button {
} cursor: pointer;
&:hover {
color: $main-color;
}
}
.icon-star {
color: $main-color;
}
</style> </style>

View file

@ -0,0 +1,19 @@
const RetweetButton = {
props: [ 'status' ],
methods: {
retweet () {
if (!this.status.repeated) {
this.$store.dispatch('retweet', {id: this.status.id})
}
}
},
computed: {
classes () {
return {
'retweeted': this.status.repeated
}
}
}
}
export default RetweetButton

View file

@ -0,0 +1,22 @@
<template>
<div>
<i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i>
<span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
</div>
</template>
<script src="./retweet_button.js" ></script>
<style lang='scss'>
@import '../../_variables.scss';
.icon-retweet {
cursor: pointer;
&:hover {
color: $green;
}
}
.retweeted {
cursor: auto;
color: $green;
}
</style>

View file

@ -1,5 +1,6 @@
import Attachment from '../attachment/attachment.vue' import Attachment from '../attachment/attachment.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue' import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_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 = {
@ -24,6 +25,7 @@ const Status = {
components: { components: {
Attachment, Attachment,
FavoriteButton, FavoriteButton,
RetweetButton,
PostStatusForm PostStatusForm
}, },
methods: { methods: {

View file

@ -37,9 +37,7 @@
<i class='fa icon-reply'></i> <i class='fa icon-reply'></i>
</a> </a>
</div> </div>
<div> <retweet-button :status=status></retweet-button>
<i class='fa icon-retweet'></i>
</div>
<favorite-button :status=status></favorite-button> <favorite-button :status=status></favorite-button>
</div> </div>
@ -53,7 +51,8 @@
<script src="./status.js" ></script> <script src="./status.js" ></script>
<style lang="scss"> <style lang="scss">
.status-el { @import '../../_variables.scss';
.status-el {
hyphens: auto; hyphens: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
@ -68,9 +67,13 @@
margin-top: 3px; margin-top: 3px;
margin-bottom: 3px; margin-bottom: 3px;
} }
} }
.status-actions { .status-actions {
padding-top: 5px; padding-top: 5px;
} }
.icon-reply:hover {
color: $blue;
}
</style> </style>

View file

@ -146,6 +146,10 @@ export const mutations = {
const newStatus = find(state.allStatuses, status) const newStatus = find(state.allStatuses, status)
newStatus.favorited = value newStatus.favorited = value
}, },
setRetweeted (state, { status, value }) {
const newStatus = find(state.allStatuses, status)
newStatus.repeated = value
},
setLoading (state, { timeline, value }) { setLoading (state, { timeline, value }) {
state.timelines[timeline].loading = value state.timelines[timeline].loading = value
}, },
@ -167,6 +171,11 @@ const statuses = {
// Optimistic favoriting... // Optimistic favoriting...
commit('setFavorited', { status, value: false }) commit('setFavorited', { status, value: false })
apiService.unfavorite({ id: status.id, credentials: rootState.users.currentUser.credentials }) apiService.unfavorite({ id: status.id, credentials: rootState.users.currentUser.credentials })
},
retweet ({ rootState, commit }, status) {
// Optimistic retweeting...
commit('setRetweeted', { status, value: true })
apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials })
} }
}, },
mutations mutations

View file

@ -5,6 +5,7 @@ const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json'
const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_timeline.json' const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_timeline.json'
const FAVORITE_URL = '/api/favorites/create' 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 STATUS_UPDATE_URL = '/api/statuses/update.json' const STATUS_UPDATE_URL = '/api/statuses/update.json'
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/';
@ -63,6 +64,13 @@ const unfavorite = ({ id, credentials }) => {
}) })
} }
const retweet = ({ id, credentials }) => {
return fetch(`${RETWEET_URL}/${id}.json`, {
headers: authHeaders(credentials),
method: 'POST'
})
}
const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => { const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
const idsText = mediaIds.join(',') const idsText = mediaIds.join(',')
const form = new FormData() const form = new FormData()
@ -96,6 +104,7 @@ const apiService = {
fetchTimeline, fetchTimeline,
favorite, favorite,
unfavorite, unfavorite,
retweet,
postStatus, postStatus,
uploadMedia uploadMedia
} }