Merge branch 'develop' into 'master'

`master` refresh with `develop`

See merge request pleroma/pleroma-fe!1028

1 files changed, 72 insertions, 71 deletions

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 80d15a27..2f649910 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,50 +1,47 @@
 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'
+import { mapGetters } from 'vuex'
 
 export default {
-  props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
+  props: [
+    'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+  ],
   data () {
     return {
       followRequestInProgress: false,
-      followRequestSent: false,
-      hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
-        ? this.$store.state.instance.hideUserStats
-        : this.$store.state.config.hideUserStats,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
+  created () {
+    this.$store.dispatch('fetchUserRelationship', this.user.id)
+  },
   computed: {
     classes () {
       return [{
-        'user-card-rounded-t': this.rounded === 'top',  // set border-top-left-radius and border-top-right-radius
-        'user-card-rounded': this.rounded === true,     // set border-radius for all sides
-        'user-card-bordered': this.bordered === true    // set border for all sides
+        'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded': this.rounded === true, // set border-radius for all sides
+        'user-card-bordered': this.bordered === true // set border for all sides
       }]
     },
     style () {
-      const color = this.$store.state.config.customTheme.colors
-            ? this.$store.state.config.customTheme.colors.bg  // v2
-            : this.$store.state.config.colors.bg // v1
+      const color = this.$store.getters.mergedConfig.customTheme.colors
+        ? this.$store.getters.mergedConfig.customTheme.colors.bg // v2
+        : this.$store.getters.mergedConfig.colors.bg // v1
 
       if (color) {
         const rgb = (typeof color === 'string') ? hex2rgb(color) : color
         const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
 
-        const gradient = [
-          [tintColor, this.hideBio ? '60%' : ''],
-          this.hideBio ? [
-            color, '100%'
-          ] : [
-            tintColor, ''
-          ]
-        ].map(_ => _.join(' ')).join(', ')
-
         return {
           backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
           backgroundImage: [
-            `linear-gradient(to bottom, ${gradient})`,
+            `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
             `url(${this.user.cover_photo})`
           ].join(', ')
         }
@@ -67,21 +64,22 @@ export default {
     },
     userHighlightType: {
       get () {
-        const data = this.$store.state.config.highlight[this.user.screen_name]
-        return data && data.type || 'disabled'
+        const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+        return (data && data.type) || 'disabled'
       },
       set (type) {
-        const data = this.$store.state.config.highlight[this.user.screen_name]
+        const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
         if (type !== 'disabled') {
-          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
         } else {
           this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
         }
-      }
+      },
+      ...mapGetters(['mergedConfig'])
     },
     userHighlightColor: {
       get () {
-        const data = this.$store.state.config.highlight[this.user.screen_name]
+        const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
         return data && data.color
       },
       set (color) {
@@ -89,51 +87,40 @@ export default {
       }
     },
     visibleRole () {
-      const validRole = (this.user.role === 'admin' || this.user.role === 'moderator')
-      const showRole = this.isOtherUser || this.user.show_role
-
-      return validRole && showRole && this.user.role
-    }
+      const rights = this.user.rights
+      if (!rights) { return }
+      const validRole = rights.admin || rights.moderator
+      const roleTitle = rights.admin ? 'admin' : 'moderator'
+      return validRole && roleTitle
+    },
+    hideFollowsCount () {
+      return this.isOtherUser && this.user.hide_follows_count
+    },
+    hideFollowersCount () {
+      return this.isOtherUser && this.user.hide_followers_count
+    },
+    ...mapGetters(['mergedConfig'])
   },
   components: {
-    UserAvatar
+    UserAvatar,
+    RemoteFollow,
+    ModerationTools,
+    AccountActions,
+    ProgressButton,
+    FollowButton
   },
   methods: {
-    followUser () {
-      const store = this.$store
-      this.followRequestInProgress = true
-      requestFollow(this.user, store).then(({sent}) => {
-        this.followRequestInProgress = false
-        this.followRequestSent = sent
-      })
-    },
-    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 () {
-      const store = this.$store
-      store.state.api.backendInteractor.blockUser(this.user.id)
-        .then((blockedUser) => {
-          store.commit('addNewUsers', [blockedUser])
-          store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
-          store.commit('removeStatus', { timeline: 'public', userId: this.user.id })
-          store.commit('removeStatus', { timeline: 'publicAndExternal', userId: this.user.id })
-        })
-    },
-    unblockUser () {
-      const store = this.$store
-      store.state.api.backendInteractor.unblockUser(this.user.id)
-        .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
-    },
-    toggleMute () {
-      const store = this.$store
-      store.commit('setMuted', {user: this.user, muted: !this.user.muted})
-      store.state.api.backendInteractor.setUserMute(this.user)
+    muteUser () {
+      this.$store.dispatch('muteUser', this.user.id)
+    },
+    unmuteUser () {
+      this.$store.dispatch('unmuteUser', this.user.id)
+    },
+    subscribeUser () {
+      return this.$store.dispatch('subscribeUser', this.user.id)
+    },
+    unsubscribeUser () {
+      return this.$store.dispatch('unsubscribeUser', this.user.id)
     },
     setProfileView (v) {
       if (this.switcher) {
@@ -141,7 +128,7 @@ export default {
         store.commit('setProfileView', { v })
       }
     },
-    linkClicked ({target}) {
+    linkClicked ({ target }) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode
       }
@@ -150,7 +137,21 @@ export default {
       }
     },
     userProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+      return generateProfileLink(
+        user.id, user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
+    },
+    zoomAvatar () {
+      const attachment = {
+        url: this.user.profile_image_url_original,
+        mimetype: 'image'
+      }
+      this.$store.dispatch('setMedia', [attachment])
+      this.$store.dispatch('setCurrent', attachment)
+    },
+    mentionUser () {
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }