diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
new file mode 100644
index 00000000..204d506a
--- /dev/null
+++ b/src/components/account_actions/account_actions.js
@@ -0,0 +1,35 @@
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const AccountActions = {
+ props: [
+ 'user'
+ ],
+ data () {
+ return { }
+ },
+ components: {
+ ProgressButton
+ },
+ methods: {
+ showRepeats () {
+ this.$store.dispatch('showReblogs', this.user.id)
+ },
+ hideRepeats () {
+ this.$store.dispatch('hideReblogs', this.user.id)
+ },
+ blockUser () {
+ this.$store.dispatch('blockUser', this.user.id)
+ },
+ unblockUser () {
+ this.$store.dispatch('unblockUser', this.user.id)
+ },
+ reportUser () {
+ this.$store.dispatch('openUserReportingModal', this.user.id)
+ },
+ mentionUser () {
+ this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+ }
+ }
+}
+
+export default AccountActions
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
new file mode 100644
index 00000000..046cba93
--- /dev/null
+++ b/src/components/account_actions/account_actions.vue
@@ -0,0 +1,93 @@
+<template>
+ <div class="account-actions">
+ <v-popover
+ trigger="click"
+ class="account-tools-popover"
+ :container="false"
+ placement="bottom-end"
+ :offset="5"
+ >
+ <div slot="popover">
+ <div class="dropdown-menu">
+ <button
+ class="btn btn-default btn-block dropdown-item"
+ @click="mentionUser"
+ >
+ {{ $t('user_card.mention') }}
+ </button>
+ <template v-if="user.following">
+ <div
+ role="separator"
+ class="dropdown-divider"
+ />
+ <button
+ v-if="user.showing_reblogs"
+ class="btn btn-default dropdown-item"
+ @click="hideRepeats"
+ >
+ {{ $t('user_card.hide_repeats') }}
+ </button>
+ <button
+ v-if="!user.showing_reblogs"
+ class="btn btn-default dropdown-item"
+ @click="showRepeats"
+ >
+ {{ $t('user_card.show_repeats') }}
+ </button>
+ </template>
+ <div
+ role="separator"
+ class="dropdown-divider"
+ />
+ <button
+ v-if="user.statusnet_blocking"
+ class="btn btn-default btn-block dropdown-item"
+ @click="unblockUser"
+ >
+ {{ $t('user_card.unblock') }}
+ </button>
+ <button
+ v-else
+ class="btn btn-default btn-block dropdown-item"
+ @click="blockUser"
+ >
+ {{ $t('user_card.block') }}
+ </button>
+ <button
+ class="btn btn-default btn-block dropdown-item"
+ @click="reportUser"
+ >
+ {{ $t('user_card.report') }}
+ </button>
+ </div>
+ </div>
+ <div class="btn btn-default ellipsis-button">
+ <i class="icon-ellipsis trigger-button" />
+ </div>
+ </v-popover>
+ </div>
+</template>
+
+<script src="./account_actions.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+.account-actions {
+ margin: 0 .8em;
+}
+
+.account-actions button.dropdown-item {
+ margin-left: 0;
+}
+.account-actions .trigger-button {
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ opacity: .8;
+ cursor: pointer;
+ &:hover {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ }
+}
+</style>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
new file mode 100644
index 00000000..4123c9fd
--- /dev/null
+++ b/src/components/follow_button/follow_button.js
@@ -0,0 +1,53 @@
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+export default {
+ props: ['user'],
+ data () {
+ return {
+ inProgress: false
+ }
+ },
+ computed: {
+ isPressed () {
+ return this.inProgress || this.user.following
+ },
+ title () {
+ if (this.inProgress || this.user.following) {
+ return this.$t('user_card.follow_unfollow')
+ } else if (this.user.requested) {
+ return this.$t('user_card.follow_again')
+ } else {
+ return this.$t('user_card.follow')
+ }
+ },
+ label () {
+ if (this.inProgress) {
+ return this.$t('user_card.follow_progress')
+ } else if (this.user.following) {
+ return this.$t('user_card.following')
+ } else if (this.user.requested) {
+ return this.$t('user_card.follow_sent')
+ } else {
+ return this.$t('user_card.follow')
+ }
+ }
+ },
+ methods: {
+ onClick () {
+ this.user.following ? this.unfollow() : this.follow()
+ },
+ follow () {
+ this.inProgress = true
+ requestFollow(this.user, this.$store).then(() => {
+ this.inProgress = false
+ })
+ },
+ unfollow () {
+ const store = this.$store
+ this.inProgress = true
+ requestUnfollow(this.user, store).then(() => {
+ this.inProgress = false
+ store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
+ })
+ }
+ }
+}
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
new file mode 100644
index 00000000..f0cbb94b
--- /dev/null
+++ b/src/components/follow_button/follow_button.vue
@@ -0,0 +1,13 @@
+<template>
+ <button
+ class="btn btn-default follow-button"
+ :class="{ pressed: isPressed }"
+ :disabled="inProgress"
+ :title="title"
+ @click="onClick"
+ >
+ {{ label }}
+ </button>
+</template>
+
+<script src="./follow_button.js"></script>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 9c931c01..0107cfa6 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,13 +1,16 @@
import UserAvatar from '../user_avatar/user_avatar.vue'
import RemoteFollow from '../remote_follow/remote_follow.vue'
import ProgressButton from '../progress_button/progress_button.vue'
+import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue'
+import AccountActions from '../account_actions/account_actions.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
export default {
- props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar' ],
+ props: [
+ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+ ],
data () {
return {
followRequestInProgress: false,
@@ -96,30 +99,11 @@ export default {
UserAvatar,
RemoteFollow,
ModerationTools,
- ProgressButton
+ AccountActions,
+ ProgressButton,
+ FollowButton
},
methods: {
- followUser () {
- const store = this.$store
- this.followRequestInProgress = true
- requestFollow(this.user, store).then(() => {
- this.followRequestInProgress = false
- })
- },
- unfollowUser () {
- const store = this.$store
- this.followRequestInProgress = true
- requestUnfollow(this.user, store).then(() => {
- this.followRequestInProgress = false
- store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
- })
- },
- blockUser () {
- this.$store.dispatch('blockUser', this.user.id)
- },
- unblockUser () {
- this.$store.dispatch('unblockUser', this.user.id)
- },
muteUser () {
this.$store.dispatch('muteUser', this.user.id)
},
@@ -147,10 +131,10 @@ export default {
}
},
userProfileLink (user) {
- return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
- },
- reportUser () {
- this.$store.dispatch('openUserReportingModal', this.user.id)
+ return generateProfileLink(
+ user.id, user.screen_name,
+ this.$store.state.instance.restrictedNicknames
+ )
},
zoomAvatar () {
const attachment = {
@@ -159,9 +143,6 @@ export default {
}
this.$store.dispatch('setMedia', [attachment])
this.$store.dispatch('setCurrent', attachment)
- },
- mentionUser () {
- this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
}
}
}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5b6f66e7..f5cba09a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -66,8 +66,11 @@
>
<i class="icon-link-ext usersettings" />
</a>
+ <AccountActions
+ v-if="isOtherUser && loggedIn"
+ :user="user"
+ />
</div>
-
<div class="bottom-line">
<router-link
class="user-screen-name"
@@ -135,72 +138,27 @@
v-if="loggedIn && isOtherUser"
class="user-interactions"
>
- <div v-if="!user.following">
- <button
- class="btn btn-default btn-block"
- :disabled="followRequestInProgress"
- :title="user.requested ? $t('user_card.follow_again') : ''"
- @click="followUser"
- >
- <template v-if="followRequestInProgress">
- {{ $t('user_card.follow_progress') }}
- </template>
- <template v-else-if="user.requested">
- {{ $t('user_card.follow_sent') }}
- </template>
- <template v-else>
- {{ $t('user_card.follow') }}
- </template>
- </button>
+ <div class="btn-group">
+ <FollowButton :user="user" />
+ <template v-if="user.following">
+ <ProgressButton
+ v-if="!user.subscribed"
+ class="btn btn-default"
+ :click="subscribeUser"
+ :title="$t('user_card.subscribe')"
+ >
+ <i class="icon-bell-alt" />
+ </ProgressButton>
+ <ProgressButton
+ v-else
+ class="btn btn-default pressed"
+ :click="unsubscribeUser"
+ :title="$t('user_card.unsubscribe')"
+ >
+ <i class="icon-bell-ringing-o" />
+ </ProgressButton>
+ </template>
</div>
- <div v-else-if="followRequestInProgress">
- <button
- class="btn btn-default btn-block pressed"
- disabled
- :title="$t('user_card.follow_unfollow')"
- @click="unfollowUser"
- >
- {{ $t('user_card.follow_progress') }}
- </button>
- </div>
- <div
- v-else
- class="btn-group"
- >
- <button
- class="btn btn-default pressed"
- :title="$t('user_card.follow_unfollow')"
- @click="unfollowUser"
- >
- {{ $t('user_card.following') }}
- </button>
- <ProgressButton
- v-if="!user.subscribed"
- class="btn btn-default"
- :click="subscribeUser"
- :title="$t('user_card.subscribe')"
- >
- <i class="icon-bell-alt" />
- </ProgressButton>
- <ProgressButton
- v-else
- class="btn btn-default pressed"
- :click="unsubscribeUser"
- :title="$t('user_card.unsubscribe')"
- >
- <i class="icon-bell-ringing-o" />
- </ProgressButton>
- </div>
-
- <div>
- <button
- class="btn btn-default btn-block"
- @click="mentionUser"
- >
- {{ $t('user_card.mention') }}
- </button>
- </div>
-
<div>
<button
v-if="user.muted"
@@ -217,33 +175,6 @@
{{ $t('user_card.mute') }}
</button>
</div>
-
- <div>
- <button
- v-if="user.statusnet_blocking"
- class="btn btn-default btn-block pressed"
- @click="unblockUser"
- >
- {{ $t('user_card.blocked') }}
- </button>
- <button
- v-else
- class="btn btn-default btn-block"
- @click="blockUser"
- >
- {{ $t('user_card.block') }}
- </button>
- </div>
-
- <div>
- <button
- class="btn btn-default btn-block"
- @click="reportUser"
- >
- {{ $t('user_card.report') }}
- </button>
- </div>
-
<ModerationTools
v-if="loggedIn.role === "admin""
:user="user"
@@ -587,13 +518,12 @@
position: relative;
display: flex;
flex-flow: row wrap;
- justify-content: space-between;
margin-right: -.75em;
> * {
- flex: 1 0 0;
margin: 0 .75em .6em 0;
white-space: nowrap;
+ min-width: 95px;
}
button {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 32c25e3e..b58112e3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -555,6 +555,8 @@
"unmute": "Unmute",
"unmute_progress": "Unmuting...",
"mute_progress": "Muting...",
+ "hide_repeats": "Hide repeats",
+ "show_repeats": "Show repeats",
"admin_menu": {
"moderation": "Moderation",
"grant_admin": "Grant Admin",
diff --git a/src/modules/users.js b/src/modules/users.js
index 4d02f8d7..6d259dc2 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -60,6 +60,18 @@ const unmuteUser = (store, id) => {
.then((relationship) => store.commit('updateUserRelationship', [relationship]))
}
+const hideReblogs = (store, userId) => {
+ return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: false })
+ .then((relationship) => {
+ store.commit('updateUserRelationship', [relationship])
+ })
+}
+
+const showReblogs = (store, userId) => {
+ return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: true })
+ .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+}
+
export const mutations = {
setMuted (state, { user: { id }, muted }) {
const user = state.usersObject[id]
@@ -135,6 +147,7 @@ export const mutations = {
user.muted = relationship.muting
user.statusnet_blocking = relationship.blocking
user.subscribed = relationship.subscribing
+ user.showing_reblogs = relationship.showing_reblogs
}
})
},
@@ -272,6 +285,12 @@ const users = {
unmuteUser (store, id) {
return unmuteUser(store, id)
},
+ hideReblogs (store, id) {
+ return hideReblogs(store, id)
+ },
+ showReblogs (store, id) {
+ return showReblogs(store, id)
+ },
muteUsers (store, ids = []) {
return Promise.all(ids.map(id => muteUser(store, id)))
},
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 887d7d7a..61cd4f16 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -219,10 +219,16 @@ const authHeaders = (accessToken) => {
}
}
-const followUser = ({ id, credentials }) => {
+const followUser = ({ id, credentials, ...options }) => {
let url = MASTODON_FOLLOW_URL(id)
+ const form = {}
+ if (options.reblogs !== undefined) { form['reblogs'] = options.reblogs }
return fetch(url, {
- headers: authHeaders(credentials),
+ body: JSON.stringify(form),
+ headers: {
+ ...authHeaders(credentials),
+ 'Content-Type': 'application/json'
+ },
method: 'POST'
}).then((data) => data.json())
}
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 3c44a10c..cbf48ee4 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -31,8 +31,8 @@ const backendInteractorService = credentials => {
return apiService.fetchUserRelationship({ id, credentials })
}
- const followUser = (id) => {
- return apiService.followUser({ credentials, id })
+ const followUser = ({ id, reblogs }) => {
+ return apiService.followUser({ credentials, id, reblogs })
}
const unfollowUser = (id) => {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 67664af8..5f45660d 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -69,6 +69,7 @@ export const parseUser = (data) => {
output.following = relationship.following
output.statusnet_blocking = relationship.blocking
output.muted = relationship.muting
+ output.showing_reblogs = relationship.showing_reblogs
output.subscribed = relationship.subscribing
}
diff --git a/src/services/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js
index d82ce593..598cb5f7 100644
--- a/src/services/follow_manipulate/follow_manipulate.js
+++ b/src/services/follow_manipulate/follow_manipulate.js
@@ -14,7 +14,7 @@ const fetchUser = (attempt, user, store) => new Promise((resolve, reject) => {
})
export const requestFollow = (user, store) => new Promise((resolve, reject) => {
- store.state.api.backendInteractor.followUser(user.id)
+ store.state.api.backendInteractor.followUser({ id: user.id })
.then((updated) => {
store.commit('updateUserRelationship', [updated])