kopia lustrzana https://github.com/nextcloud/social
Merge pull request #1571 from nextcloud/artonge/fix/correctly_store_followers_in_store
Fixes on user profilepull/1573/head
Louis
GitHub
commit
c0b8bf771c
|
|
@ -23,19 +23,30 @@
|
|||
<template>
|
||||
<!-- Show button only if user is authenticated and she is not the same as the account viewed -->
|
||||
<div v-if="!serverData.public && accountInfo && accountInfo.viewerLink!='viewer'">
|
||||
<NcButton v-if="isCurrentUserFollowing"
|
||||
:class="{'icon-loading-small': followLoading}"
|
||||
@click="unfollow()"
|
||||
@mouseover="followingText=t('social', 'Unfollow')"
|
||||
@mouseleave="followingText=t('social', 'Following')">
|
||||
<template #icon>
|
||||
<Check :size="32" />
|
||||
</template>
|
||||
{{ followingText }}
|
||||
</NcButton>
|
||||
<div v-if="isCurrentUserFollowing"
|
||||
class="follow-button-container">
|
||||
<NcButton :disabled="loading"
|
||||
class="follow-button follow-button--following"
|
||||
type="success">
|
||||
<template #icon>
|
||||
<Check :size="32" />
|
||||
</template>
|
||||
{{ t('social', 'Following') }}
|
||||
</NcButton>
|
||||
<NcButton :disabled="loading"
|
||||
class="follow-button follow-button--unfollow"
|
||||
type="error"
|
||||
@click="unfollow()">
|
||||
<template #icon>
|
||||
<CloseOctagon :size="32" />
|
||||
</template>
|
||||
{{ t('social', 'Unfollow') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
<NcButton v-else
|
||||
:class="{'icon-loading-small': followLoading}"
|
||||
class="primary"
|
||||
:disabled="loading"
|
||||
type="primary"
|
||||
class="follow-button"
|
||||
@click="follow">
|
||||
{{ t('social', 'Follow') }}
|
||||
</NcButton>
|
||||
|
|
@ -46,12 +57,14 @@
|
|||
import accountMixins from '../mixins/accountMixins.js'
|
||||
import currentUser from '../mixins/currentUserMixin.js'
|
||||
import Check from 'vue-material-design-icons/Check.vue'
|
||||
import CloseOctagon from 'vue-material-design-icons/CloseOctagon.vue'
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||
|
||||
export default {
|
||||
name: 'FollowButton',
|
||||
components: {
|
||||
Check,
|
||||
CloseOctagon,
|
||||
NcButton,
|
||||
},
|
||||
mixins: [
|
||||
|
|
@ -70,28 +83,58 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
followingText: t('social', 'Following'),
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
followLoading() {
|
||||
return false
|
||||
},
|
||||
isCurrentUserFollowing() {
|
||||
return this.$store.getters.isFollowingUser(this.account)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
follow() {
|
||||
this.$store.dispatch('followAccount', { currentAccount: this.cloudId, accountToFollow: this.account })
|
||||
async follow() {
|
||||
try {
|
||||
this.loading = true
|
||||
await this.$store.dispatch('followAccount', { currentAccount: this.cloudId, accountToFollow: this.account })
|
||||
} catch {
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
unfollow() {
|
||||
this.$store.dispatch('unfollowAccount', { currentAccount: this.cloudId, accountToUnfollow: this.account })
|
||||
async unfollow() {
|
||||
try {
|
||||
this.loading = true
|
||||
await this.$store.dispatch('unfollowAccount', { currentAccount: this.cloudId, accountToUnfollow: this.account })
|
||||
} catch {
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.follow-button {
|
||||
width: 150px !important;
|
||||
}
|
||||
|
||||
.follow-button-container {
|
||||
.follow-button--following {
|
||||
display: flex;
|
||||
}
|
||||
.follow-button--unfollow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.follow-button--following {
|
||||
display: none;
|
||||
}
|
||||
.follow-button--unfollow {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-entry {
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
:size="128" />
|
||||
<h2>{{ displayName }}</h2>
|
||||
<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
|
||||
<ul v-if="accountInfo.details && accountInfo.local" class="user-profile--sections">
|
||||
<ul v-if="accountInfo.details && accountInfo.local" class="user-profile__info user-profile__sections">
|
||||
<li>
|
||||
<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">
|
||||
{{ getCount('post') }} {{ t('social', 'posts') }}
|
||||
|
|
@ -49,14 +49,18 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<p>@{{ accountInfo.account }}</p>
|
||||
<p v-if="accountInfo.website">
|
||||
Website: <a :href="accountInfo.website.value">
|
||||
{{ accountInfo.website.value }}
|
||||
</a>
|
||||
<p class="user-profile__info">
|
||||
<a :href="accountInfo.url" target="_blank">@{{ accountInfo.account }}</a>
|
||||
</p>
|
||||
<FollowButton :account="accountInfo.account" :uid="uid" />
|
||||
<NcButton v-if="serverData.public" class="primary" @click="followRemote">
|
||||
|
||||
<p v-if="accountInfo.website" class="user-profile__info">
|
||||
{{ t('social', 'Website') }}: <a :href="accountInfo.website.value">{{ accountInfo.website.value }}</a>
|
||||
</p>
|
||||
|
||||
<FollowButton class="user-profile__info" :account="accountInfo.account" :uid="uid" />
|
||||
<NcButton v-if="serverData.public"
|
||||
class="user-profile__info primary"
|
||||
@click="followRemote">
|
||||
{{ t('social', 'Follow') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
|
|
@ -126,7 +130,7 @@ export default {
|
|||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.user-profile {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -137,28 +141,36 @@ export default {
|
|||
padding-top: 20px;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.user-profile--sections {
|
||||
display: flex;
|
||||
}
|
||||
.user-profile--sections li {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.user-profile--sections li a {
|
||||
padding: 10px;
|
||||
padding-left: 24px;
|
||||
display: inline-block;
|
||||
background-position: 0 center;
|
||||
height: 40px;
|
||||
opacity: .6;
|
||||
}
|
||||
.user-profile--sections li a.router-link-exact-active,
|
||||
.user-profile--sections li a:focus{
|
||||
opacity: 1;
|
||||
border-bottom: 1px solid var(--color-main-text);
|
||||
&__info {
|
||||
margin-bottom: 12px;
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__sections {
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
flex-grow: 1;
|
||||
|
||||
a {
|
||||
padding: 10px;
|
||||
padding-left: 24px;
|
||||
display: inline-block;
|
||||
background-position: 0 center;
|
||||
height: 40px;
|
||||
opacity: .6;
|
||||
|
||||
&.router-link-exact-active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
border-bottom: 1px solid var(--color-main-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const addAccount = (state, { actorId, data }) => {
|
|||
details: {
|
||||
following: false,
|
||||
follower: false,
|
||||
}
|
||||
},
|
||||
}, state.accounts[actorId], data))
|
||||
Vue.set(state.accountIdMap, data.account, data.id)
|
||||
}
|
||||
|
|
@ -53,10 +53,13 @@ const mutations = {
|
|||
const users = []
|
||||
for (const index in data) {
|
||||
const actor = data[index].actor_info
|
||||
addAccount(state, {
|
||||
actorId: actor.id,
|
||||
data: actor,
|
||||
})
|
||||
if (typeof actor !== 'undefined' && account !== actor.account) {
|
||||
users.push(actor.id)
|
||||
addAccount(state, {
|
||||
actorId: actor.id,
|
||||
data: actor,
|
||||
})
|
||||
}
|
||||
}
|
||||
Vue.set(state.accounts[_getActorIdForAccount(account)], 'followersList', users)
|
||||
},
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue