From 8721fb57fc3ee169ba401ce498280b8d7257297d Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Sat, 21 Sep 2019 16:24:47 +0300
Subject: added support hide\show reblogs from a specific user

---
 src/components/user_card/user_card.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

(limited to 'src/components/user_card/user_card.js')

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e3bd7697..03f15d8e 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -7,7 +7,9 @@ import { requestFollow, requestUnfollow } from '../../services/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,
@@ -108,6 +110,12 @@ export default {
     ProgressButton
   },
   methods: {
+    showReblogs () {
+      this.$store.dispatch('showReblogs', this.user.id)
+    },
+    hideReblogs () {
+      this.$store.dispatch('hideReblogs', this.user.id)
+    },
     followUser () {
       const store = this.$store
       this.followRequestInProgress = true
@@ -156,7 +164,10 @@ 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
+      )
     },
     reportUser () {
       this.$store.dispatch('openUserReportingModal', this.user.id)
-- 
cgit v1.2.3-70-g09d2


From f0b9f5d29ca7bbac21cabad3d5f14328dfbf56dd Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Sun, 22 Sep 2019 14:39:28 +0300
Subject: use `repeats` intead `boosts`

---
 src/components/user_card/user_card.js  | 4 ++--
 src/components/user_card/user_card.vue | 8 ++++----
 src/i18n/en.json                       | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src/components/user_card/user_card.js')

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 03f15d8e..8b8ae132 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -110,10 +110,10 @@ export default {
     ProgressButton
   },
   methods: {
-    showReblogs () {
+    showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
-    hideReblogs () {
+    hideRepeats () {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     followUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 029406e7..acef1d72 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -189,16 +189,16 @@
             <button
               v-if="user.showing_reblogs"
               class="btn btn-default"
-              :title="$t('user_card.hide_boosts', {user: user.screen_name})"
-              @click="hideReblogs"
+              :title="$t('user_card.hide_repeats')"
+              @click="hideRepeats"
             >
               <i class="icon-eye" />
             </button>
             <button
               v-if="!user.showing_reblogs"
               class="btn btn-default pressed"
-              :title="$t('user_card.show_boosts', {user: user.screen_name})"
-              @click="showReblogs"
+              :title="$t('user_card.show_repeats')"
+              @click="showRepeats"
             >
               <i class="icon-eye-off" />
             </button>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c20f880a..426a2f6a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -543,8 +543,8 @@
     "unmute": "Unmute",
     "unmute_progress": "Unmuting...",
     "mute_progress": "Muting...",
-    "hide_boosts": "Hide boosts from {user}",
-    "show_boosts": "Show boosts from {user}",
+    "hide_repeats": "Hide repeats",
+    "show_repeats": "Show repeats",
     "admin_menu": {
       "moderation": "Moderation",
       "grant_admin": "Grant Admin",
-- 
cgit v1.2.3-70-g09d2


From 979e170bd6880d0ee85bf0dd8898cf53d91055b5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Sep 2019 22:33:15 +0300
Subject: created mergedConfig getter to avoid obnoxious checks for undefined
 everywhere

---
 src/components/favorite_button/favorite_button.js  |  8 ++--
 src/components/favorite_button/favorite_button.vue |  4 +-
 .../post_status_form/post_status_form.js           | 25 ++++--------
 src/components/retweet_button/retweet_button.js    |  8 ++--
 src/components/retweet_button/retweet_button.vue   |  4 +-
 src/components/status/status.js                    | 46 +++++++++-------------
 src/components/user_card/user_card.js              | 10 ++---
 src/components/user_card/user_card.vue             |  4 +-
 src/modules/config.js                              | 19 +++++++++
 9 files changed, 64 insertions(+), 64 deletions(-)

(limited to 'src/components/user_card/user_card.js')

diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index a24eacbf..5014d84f 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -1,10 +1,9 @@
+import { mapGetters } from 'vuex'
+
 const FavoriteButton = {
   props: ['status', 'loggedIn'],
   data () {
     return {
-      hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
-        ? this.$store.state.instance.hidePostStats
-        : this.$store.state.config.hidePostStats,
       animated: false
     }
   },
@@ -28,7 +27,8 @@ const FavoriteButton = {
         'icon-star': this.status.favorited,
         'animate-spin': this.animated
       }
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   }
 }
 
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 06ce9983..fbc90f84 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -6,7 +6,7 @@
       :title="$t('tool_tip.favorite')"
       @click.prevent="favorite()"
     />
-    <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
+    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
   <div v-else>
     <i
@@ -14,7 +14,7 @@
       class="button-icon favorite-button"
       :title="$t('tool_tip.favorite')"
     />
-    <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span>
+    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
 </template>
 
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 9b2a9c90..46afc79c 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -7,6 +7,7 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { reject, map, uniqBy } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
+import { mapGetters } from 'vuex'
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   let allAttentions = [...attentions]
@@ -50,9 +51,7 @@ const PostStatusForm = {
     const preset = this.$route.query.message
     let statusText = preset || ''
 
-    const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
-      ? this.$store.state.instance.scopeCopy
-      : this.$store.state.config.scopeCopy
+    const { scopeCopy } = this.$store.getters.mergedConfig
 
     if (this.replyTo) {
       const currentUser = this.$store.state.users.currentUser
@@ -63,9 +62,7 @@ const PostStatusForm = {
       ? this.copyMessageScope
       : this.$store.state.users.currentUser.default_scope
 
-    const contentType = typeof this.$store.state.config.postContentType === 'undefined'
-      ? this.$store.state.instance.postContentType
-      : this.$store.state.config.postContentType
+    const { postContentType: contentType } = this.$store.getters.mergedConfig
 
     return {
       dropFiles: [],
@@ -94,10 +91,7 @@ const PostStatusForm = {
       return this.$store.state.users.currentUser.default_scope
     },
     showAllScopes () {
-      const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
-        ? this.$store.state.instance.minimalScopesMode
-        : this.$store.state.config.minimalScopesMode
-      return !minimalScopesMode
+      return this.mergedConfig.minimalScopesMode
     },
     emojiUserSuggestor () {
       return suggestor({
@@ -145,13 +139,7 @@ const PostStatusForm = {
       return this.$store.state.instance.minimalScopesMode
     },
     alwaysShowSubject () {
-      if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
-        return this.$store.state.config.alwaysShowSubjectInput
-      } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
-        return this.$store.state.instance.alwaysShowSubjectInput
-      } else {
-        return true
-      }
+      return this.mergedConfig.alwaysShowSubjectInput
     },
     postFormats () {
       return this.$store.state.instance.postFormats || []
@@ -170,7 +158,8 @@ const PostStatusForm = {
       return this.pollFormVisible &&
         this.newStatus.poll &&
         this.newStatus.poll.error
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   },
   methods: {
     postStatus (newStatus) {
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index fb543a9c..d9a0f92e 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,10 +1,9 @@
+import { mapGetters } from 'vuex'
+
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
   data () {
     return {
-      hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
-        ? this.$store.state.instance.hidePostStats
-        : this.$store.state.config.hidePostStats,
       animated: false
     }
   },
@@ -28,7 +27,8 @@ const RetweetButton = {
         'retweeted-empty': !this.status.repeated,
         'animate-spin': this.animated
       }
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   }
 }
 
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index d58a7f8c..074f7747 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -7,7 +7,7 @@
         :title="$t('tool_tip.repeat')"
         @click.prevent="retweet()"
       />
-      <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
+      <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
     </template>
     <template v-else>
       <i
@@ -23,7 +23,7 @@
       class="button-icon icon-retweet"
       :title="$t('tool_tip.repeat')"
     />
-    <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span>
+    <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
   </div>
 </template>
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d17ba318..976fd320 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -15,6 +15,7 @@ import fileType from 'src/services/file_type/file_type.service'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { filter, find, unescape, uniqBy } from 'lodash'
+import { mapGetters } from 'vuex'
 
 const Status = {
   name: 'Status',
@@ -42,20 +43,16 @@ const Status = {
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
-      expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
-        ? !this.$store.state.instance.collapseMessageWithSubject
-        : !this.$store.state.config.collapseMessageWithSubject,
+      expandingSubject: this.$store.getters.mergedConfig.collapseMessageWithSubject,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   computed: {
     localCollapseSubjectDefault () {
-      return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
-        ? this.$store.state.instance.collapseMessageWithSubject
-        : this.$store.state.config.collapseMessageWithSubject
+      return this.mergedConfig.collapseMessageWithSubject
     },
     muteWords () {
-      return this.$store.state.config.muteWords
+      return this.mergedConfig.muteWords
     },
     repeaterClass () {
       const user = this.statusoid.user
@@ -70,18 +67,18 @@ const Status = {
     },
     repeaterStyle () {
       const user = this.statusoid.user
-      const highlight = this.$store.state.config.highlight
+      const highlight = this.mergedConfig.highlight
       return highlightStyle(highlight[user.screen_name])
     },
     userStyle () {
       if (this.noHeading) return
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
-      const highlight = this.$store.state.config.highlight
+      const highlight = this.mergedConfig.highlight
       return highlightStyle(highlight[user.screen_name])
     },
     hideAttachments () {
-      return (this.$store.state.config.hideAttachments && !this.inConversation) ||
-        (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
+      return (this.mergedConfig.hideAttachments && !this.inConversation) ||
+        (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
     },
     userProfileLink () {
       return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
@@ -120,9 +117,7 @@ const Status = {
     },
     muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) },
     hideFilteredStatuses () {
-      return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
-        ? this.$store.state.instance.hideFilteredStatuses
-        : this.$store.state.config.hideFilteredStatuses
+      return this.mergedConfig.hideFilteredStatuses
     },
     hideStatus () {
       return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
@@ -163,7 +158,7 @@ const Status = {
       }
     },
     hideReply () {
-      if (this.$store.state.config.replyVisibility === 'all') {
+      if (this.mergedConfig.replyVisibility === 'all') {
         return false
       }
       if (this.inConversation || !this.isReply) {
@@ -175,7 +170,7 @@ const Status = {
       if (this.status.type === 'retweet') {
         return false
       }
-      const checkFollowing = this.$store.state.config.replyVisibility === 'following'
+      const checkFollowing = this.mergedConfig.replyVisibility === 'following'
       for (var i = 0; i < this.status.attentions.length; ++i) {
         if (this.status.user.id === this.status.attentions[i].id) {
           continue
@@ -220,9 +215,7 @@ const Status = {
     replySubject () {
       if (!this.status.summary) return ''
       const decodedSummary = unescape(this.status.summary)
-      const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
-        ? this.$store.state.instance.subjectLineBehavior
-        : this.$store.state.config.subjectLineBehavior
+      const behavior = this.mergedConfig.subjectLineBehavior
       const startsWithRe = decodedSummary.match(/^re[: ]/i)
       if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
         return decodedSummary
@@ -233,8 +226,8 @@ const Status = {
       }
     },
     attachmentSize () {
-      if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
-        (this.$store.state.config.hideAttachmentsInConv && this.inConversation) ||
+      if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
+        (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
         (this.status.attachments.length > this.maxThumbnails)) {
         return 'hide'
       } else if (this.compact) {
@@ -246,7 +239,7 @@ const Status = {
       if (this.attachmentSize === 'hide') {
         return []
       }
-      return this.$store.state.config.playVideosInModal
+      return this.mergedConfig.playVideosInModal
         ? ['image', 'video']
         : ['image']
     },
@@ -261,7 +254,7 @@ const Status = {
       )
     },
     maxThumbnails () {
-      return this.$store.state.config.maxThumbnails
+      return this.mergedConfig.maxThumbnails
     },
     contentHtml () {
       if (!this.status.summary_html) {
@@ -284,10 +277,9 @@ const Status = {
       return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
     },
     hidePostStats () {
-      return typeof this.$store.state.config.hidePostStats === 'undefined'
-        ? this.$store.state.instance.hidePostStats
-        : this.$store.state.config.hidePostStats
-    }
+      return this.mergedConfig.hidePostStats
+    },
+    ...mapGetters(['mergedConfig'])
   },
   components: {
     Attachment,
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 9c931c01..12f9f9e8 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -5,15 +5,13 @@ import ModerationTools from '../moderation_tools/moderation_tools.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', 'allowZoomingAvatar' ],
   data () {
     return {
       followRequestInProgress: 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
     }
   },
@@ -73,7 +71,8 @@ export default {
         } else {
           this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
         }
-      }
+      },
+      ...mapGetters(['mergedConfig'])
     },
     userHighlightColor: {
       get () {
@@ -90,7 +89,8 @@ export default {
       const validRole = rights.admin || rights.moderator
       const roleTitle = rights.admin ? 'admin' : 'moderator'
       return validRole && roleTitle
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   },
   components: {
     UserAvatar,
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5b6f66e7..6bcc3aac 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -81,7 +81,7 @@
               >{{ visibleRole }}</span>
               <span v-if="user.locked"><i class="icon icon-lock" /></span>
               <span
-                v-if="!hideUserStatsLocal && !hideBio"
+                v-if="!mergedConfig.hideUserStats && !hideBio"
                 class="dailyAvg"
               >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
             </div>
@@ -262,7 +262,7 @@
       class="panel-body"
     >
       <div
-        v-if="!hideUserStatsLocal && switcher"
+        v-if="!mergedConfig.hideUserStats && switcher"
         class="user-counts"
       >
         <div
diff --git a/src/modules/config.js b/src/modules/config.js
index cf04d14f..5245308d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -40,8 +40,27 @@ const defaultState = {
   minimalScopesMode: undefined // instance default
 }
 
+// caching the instance default properties
+export const instanceDefaultProperties = Object.entries(defaultState)
+  .filter(([key, value]) => value === undefined)
+  .map(([key, value]) => key)
+
 const config = {
   state: defaultState,
+  getters: {
+    mergedConfig (state, getters, rootState, rootGetters) {
+      const { instance } = rootState
+      return {
+        ...state,
+        ...instanceDefaultProperties
+          .map(key => [key, state[key] === undefined
+            ? instance[key]
+            : state[key]
+          ])
+          .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+      }
+    }
+  },
   mutations: {
     setOption (state, { name, value }) {
       set(state, name, value)
-- 
cgit v1.2.3-70-g09d2


From 188b6f56ed2f983d8f0fba4dc8f7327ebbee321d Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Mon, 30 Sep 2019 20:34:51 +0300
Subject: added acccount_actions component

---
 src/components/account_actions/account_actions.js  |  59 +++++++++
 src/components/account_actions/account_actions.vue | 133 ++++++++++++++++++++
 src/components/follow_button/follow_button.js      |  58 +++++++++
 src/components/follow_button/follow_button.vue     |  13 ++
 src/components/user_card/user_card.js              |  48 +-------
 src/components/user_card/user_card.vue             | 135 +--------------------
 6 files changed, 268 insertions(+), 178 deletions(-)
 create mode 100644 src/components/account_actions/account_actions.js
 create mode 100644 src/components/account_actions/account_actions.vue
 create mode 100644 src/components/follow_button/follow_button.js
 create mode 100644 src/components/follow_button/follow_button.vue

(limited to 'src/components/user_card/user_card.js')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
new file mode 100644
index 00000000..1092a96a
--- /dev/null
+++ b/src/components/account_actions/account_actions.js
@@ -0,0 +1,59 @@
+import FollowButton from '../follow_button/follow_button.vue'
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const AccountActions = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      showDropDown: false
+    }
+  },
+  components: {
+    FollowButton,
+    ProgressButton
+  },
+  computed: {
+    tagsSet () {
+      return new Set(this.user.tags)
+    },
+    hasTagPolicy () {
+      return this.$store.state.instance.tagPolicyAvailable
+    }
+  },
+  methods: {
+    subscribeUser () {
+      return this.$store.dispatch('subscribeUser', this.user.id)
+    },
+    unsubscribeUser () {
+      return this.$store.dispatch('unsubscribeUser', this.user.id)
+    },
+    showRepeats () {
+      this.$store.dispatch('showReblogs', this.user.id)
+    },
+    hideRepeats () {
+      this.$store.dispatch('hideReblogs', this.user.id)
+    },
+    muteUser () {
+      this.$store.dispatch('muteUser', this.user.id)
+    },
+    unmuteUser () {
+      this.$store.dispatch('unmuteUser', 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..ce508b0a
--- /dev/null
+++ b/src/components/account_actions/account_actions.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="account-actions">
+    <FollowButton :user="user" />
+    <v-popover
+      trigger="click"
+      class="account-tools-popover"
+      :container="false"
+      placement="bottom-end"
+      :offset="5"
+      @show="showDropDown = true"
+      @hide="showDropDown = false"
+    >
+      <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"
+            />
+            <ProgressButton
+              v-if="!user.subscribed"
+              class="btn btn-default dropdown-item"
+              :click="subscribeUser"
+              :title="$t('user_card.subscribe')"
+            >
+              {{ $t('user_card.subscribe') }}
+            </ProgressButton>
+            <ProgressButton
+              v-else
+              class="btn btn-default pressed dropdown-item"
+              :click="unsubscribeUser"
+              :title="$t('user_card.unsubscribe')"
+            >
+              {{ $t('user_card.unsubscribe') }}
+            </ProgressButton>
+
+            <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 pressed dropdown-item"
+              @click="showRepeats"
+            >
+              {{ $t('user_card.show_repeats') }}
+            </button>
+          </template>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
+          <button
+            v-if="user.muted"
+            class="btn btn-default btn-block pressed dropdown-item"
+            @click="unmuteUser"
+          >
+            {{ $t('user_card.muted') }}
+          </button>
+          <button
+            v-else
+            class="btn btn-default btn-block dropdown-item"
+            @click="muteUser"
+          >
+            {{ $t('user_card.mute') }}
+          </button>
+          <button
+            v-if="user.statusnet_blocking"
+            class="btn btn-default btn-block pressed dropdown-item"
+            @click="unblockUser"
+          >
+            {{ $t('user_card.blocked') }}
+          </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>
+      <button class="btn btn-default ellipsis-button">
+        <i class="icon-ellipsis" />
+      </button>
+    </v-popover>
+  </div>
+</template>
+
+<script src="./account_actions.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+
+.account-tools-popover {
+  height: 100%;
+  .trigger {
+    display: flex !important;
+    height: 100%;
+  }
+}
+.account-actions {
+  display: flex;
+  flex: 0 0 0 !important;
+  margin: 0 3em 0 0 !important;
+}
+.account-actions .follow-button {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.account-actions .ellipsis-button {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.account-actions .button-icon {
+}
+</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..9d2834ab
--- /dev/null
+++ b/src/components/follow_button/follow_button.js
@@ -0,0 +1,58 @@
+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 'user_card.follow_unfollow'
+      } else if (this.user.requested) {
+        return 'user_card.follow_again'
+      } else {
+        return ''
+      }
+    },
+    label () {
+      if (this.inProgress) {
+        return 'user_card.follow_progress'
+      } else if (this.user.following) {
+        return 'user_card.following'
+      } else if (this.user.requested) {
+        return 'user_card.follow_sent'
+      } else {
+        return 'user_card.follow'
+      }
+    }
+  },
+  methods: {
+    doClick () {
+      if (this.user.following) {
+        this.unfollowUser()
+      } else {
+        this.followUser()
+      }
+    },
+    followUser () {
+      const store = this.$store
+      this.inProgress = true
+      requestFollow(this.user, store).then(() => {
+        this.inProgress = false
+      })
+    },
+    unfollowUser () {
+      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..61aa75a0
--- /dev/null
+++ b/src/components/follow_button/follow_button.vue
@@ -0,0 +1,13 @@
+<template>
+  <button
+    class="btn btn-default btn-block follow-button"
+    :class="{ pressed: isPressed }"
+    :disabled="inProgress"
+    :title="$t(title)"
+    @click="doClick"
+  >
+    {{ $t(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 015a5762..c09e5654 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -2,8 +2,8 @@ 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 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 {
@@ -98,48 +98,10 @@ export default {
     UserAvatar,
     RemoteFollow,
     ModerationTools,
+    AccountActions,
     ProgressButton
   },
   methods: {
-    showRepeats () {
-      this.$store.dispatch('showReblogs', this.user.id)
-    },
-    hideRepeats () {
-      this.$store.dispatch('hideReblogs', this.user.id)
-    },
-    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)
-    },
-    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) {
         const store = this.$store
@@ -160,9 +122,6 @@ export default {
         this.$store.state.instance.restrictedNicknames
       )
     },
-    reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
-    },
     zoomAvatar () {
       const attachment = {
         url: this.user.profile_image_url_original,
@@ -170,9 +129,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 f465467c..abaef85f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -131,135 +131,12 @@
             </label>
           </div>
         </div>
+
         <div
           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>
-          <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>
-            <button
-              v-if="user.showing_reblogs"
-              class="btn btn-default"
-              :title="$t('user_card.hide_repeats')"
-              @click="hideRepeats"
-            >
-              <i class="icon-eye" />
-            </button>
-            <button
-              v-if="!user.showing_reblogs"
-              class="btn btn-default pressed"
-              :title="$t('user_card.show_repeats')"
-              @click="showRepeats"
-            >
-              <i class="icon-eye-off" />
-            </button>
-          </div>
-
-          <div>
-            <button
-              class="btn btn-default btn-block"
-              @click="mentionUser"
-            >
-              {{ $t('user_card.mention') }}
-            </button>
-          </div>
-
-          <div>
-            <button
-              v-if="user.muted"
-              class="btn btn-default btn-block pressed"
-              @click="unmuteUser"
-            >
-              {{ $t('user_card.muted') }}
-            </button>
-            <button
-              v-else
-              class="btn btn-default btn-block"
-              @click="muteUser"
-            >
-              {{ $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>
-
+          <AccountActions :user="user" />
           <ModerationTools
             v-if="loggedIn.role === &quot;admin&quot;"
             :user="user"
@@ -603,15 +480,9 @@
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    justify-content: space-between;
+    justify-content: flex-end;
     margin-right: -.75em;
 
-    > * {
-      flex: 1 0 0;
-      margin: 0 .75em .6em 0;
-      white-space: nowrap;
-    }
-
     button {
       margin: 0;
 
-- 
cgit v1.2.3-70-g09d2


From 0be86304d24a5f11a64e9120c8ae1ce9121e64e8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 6 Oct 2019 23:28:30 +0300
Subject: Fix tests, more replacing with mergedConfig

---
 src/App.js                                               |  4 ++--
 src/components/attachment/attachment.js                  |  8 ++++----
 src/components/emoji_input/emoji_input.js                |  2 +-
 src/components/gallery/gallery.js                        |  2 +-
 .../interface_language_switcher.vue                      |  2 +-
 src/components/mobile_nav/mobile_nav.js                  |  2 +-
 .../mobile_post_status_button.js                         |  2 +-
 src/components/notification/notification.js              |  2 +-
 src/components/post_status_form/post_status_form.js      |  2 +-
 src/components/settings/settings.js                      |  2 +-
 src/components/still-image/still-image.js                |  2 +-
 src/components/style_switcher/style_switcher.js          |  8 ++++----
 src/components/timeline/timeline.js                      |  6 +++---
 src/components/user_card/user_card.js                    | 12 ++++++------
 src/components/video_attachment/video_attachment.js      |  8 ++++----
 .../notifications_fetcher.service.js                     |  5 ++---
 .../timeline_fetcher/timeline_fetcher.service.js         | 16 ++++++++++++----
 test/unit/specs/components/emoji_input.spec.js           |  4 ++--
 test/unit/specs/components/user_profile.spec.js          | 16 ++++++++--------
 19 files changed, 56 insertions(+), 49 deletions(-)

(limited to 'src/components/user_card/user_card.js')

diff --git a/src/App.js b/src/App.js
index fe63b54c..04a40e30 100644
--- a/src/App.js
+++ b/src/App.js
@@ -45,7 +45,7 @@ export default {
   }),
   created () {
     // Load the locale from the storage
-    this.$i18n.locale = this.$store.state.config.interfaceLanguage
+    this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
     window.addEventListener('resize', this.updateMobileState)
   },
   destroyed () {
@@ -93,7 +93,7 @@ export default {
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () {
       return this.$store.state.instance.showInstanceSpecificPanel &&
-        !this.$store.state.config.hideISP &&
+        !this.$store.getters.mergedConfig.hideISP &&
         this.$store.state.instance.instanceSpecificPanelContent
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index e93921fe..21cd0351 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -15,8 +15,8 @@ const Attachment = {
   data () {
     return {
       nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
-      hideNsfwLocal: this.$store.state.config.hideNsfw,
-      preloadImage: this.$store.state.config.preloadImage,
+      hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
+      preloadImage: this.$store.getters.mergedConfig.preloadImage,
       loading: false,
       img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
       modalOpen: false,
@@ -57,7 +57,7 @@ const Attachment = {
       }
     },
     openModal (event) {
-      const modalTypes = this.$store.state.config.playVideosInModal
+      const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
         ? ['image', 'video']
         : ['image']
       if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
@@ -70,7 +70,7 @@ const Attachment = {
       }
     },
     toggleHidden (event) {
-      if (this.$store.state.config.useOneClickNsfw && !this.showHidden) {
+      if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
         this.openModal(event)
         return
       }
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index a586b819..366951c0 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -99,7 +99,7 @@ const EmojiInput = {
   },
   computed: {
     padEmoji () {
-      return this.$store.state.config.padEmoji
+      return this.$store.getters.mergedConfig.padEmoji
     },
     suggestions () {
       const firstchar = this.textAtCaret.charAt(0)
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 7f33a81b..96ac1b93 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -37,7 +37,7 @@ const Gallery = {
       return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
     },
     useContainFit () {
-      return this.$store.state.config.useContainFit
+      return this.$store.getters.mergedConfig.useContainFit
     }
   },
   methods: {
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 83df9a0b..1ca22001 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -40,7 +40,7 @@ export default {
     },
 
     language: {
-      get: function () { return this.$store.state.config.interfaceLanguage },
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
       set: function (val) {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
         this.$i18n.locale = val
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index c2bb76ee..5a90c31f 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -63,7 +63,7 @@ const MobileNav = {
       this.$refs.notifications.markAsSeen()
     },
     onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
-      if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) {
+      if (this.$store.getters.mergedConfig.autoLoad && scrollTop + clientHeight >= scrollHeight) {
         this.$refs.notifications.fetchOlderNotifications()
       }
     }
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 3e77148a..0ad12bb1 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -30,7 +30,7 @@ const MobilePostStatusButton = {
       return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
     },
     autohideFloatingPostButton () {
-      return !!this.$store.state.config.autohideFloatingPostButton
+      return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
     }
   },
   watch: {
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 8e817f3b..7d46eb5a 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -39,7 +39,7 @@ const Notification = {
       return highlightClass(this.notification.from_profile)
     },
     userStyle () {
-      const highlight = this.$store.state.config.highlight
+      const highlight = this.$store.getters.mergedConfig.highlight
       const user = this.notification.from_profile
       return highlightStyle(highlight[user.screen_name])
     },
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 46afc79c..db501dc1 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -152,7 +152,7 @@ const PostStatusForm = {
         this.$store.state.instance.pollLimits.max_options >= 2
     },
     hideScopeNotice () {
-      return this.$store.state.config.hideScopeNotice
+      return this.$store.getters.mergedConfig.hideScopeNotice
     },
     pollContentError () {
       return this.pollFormVisible &&
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index a327ab28..98ceb164 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -99,7 +99,7 @@ const settings = {
       handler (value) {
         this.$store.dispatch('setOption', {
           name: 'notificationVisibility',
-          value: this.$store.state.config.notificationVisibility
+          value: this.$store.getters.mergedConfig.notificationVisibility
         })
       },
       deep: true
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 02e98f19..a5559d5d 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -7,7 +7,7 @@ const StillImage = {
   ],
   data () {
     return {
-      stopGifs: this.$store.state.config.stopGifs
+      stopGifs: this.$store.getters.mergedConfig.stopGifs
     }
   },
   computed: {
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 8c3d4861..c19aaaec 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -27,7 +27,7 @@ export default {
   data () {
     return {
       availableStyles: [],
-      selected: this.$store.state.config.theme,
+      selected: this.$store.getters.mergedConfig.theme,
 
       previewShadows: {},
       previewColors: {},
@@ -111,7 +111,7 @@ export default {
     })
   },
   mounted () {
-    this.normalizeLocalState(this.$store.state.config.customTheme)
+    this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
     if (typeof this.shadowSelected === 'undefined') {
       this.shadowSelected = this.shadowsAvailable[0]
     }
@@ -365,9 +365,9 @@ export default {
       return version >= 1 || version <= 2
     },
     clearAll () {
-      const state = this.$store.state.config.customTheme
+      const state = this.$store.getters.mergedConfig.customTheme
       const version = state.colors ? 2 : 'l1'
-      this.normalizeLocalState(this.$store.state.config.customTheme, version)
+      this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version)
     },
 
     // Clears all the extra stuff when loading V1 theme
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 0594576c..27a9a55e 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -141,7 +141,7 @@ const Timeline = {
       const bodyBRect = document.body.getBoundingClientRect()
       const height = Math.max(bodyBRect.height, -(bodyBRect.y))
       if (this.timeline.loading === false &&
-          this.$store.state.config.autoLoad &&
+          this.$store.getters.mergedConfig.autoLoad &&
           this.$el.offsetHeight > 0 &&
           (window.innerHeight + window.pageYOffset) >= (height - 750)) {
         this.fetchOlderStatuses()
@@ -153,7 +153,7 @@ const Timeline = {
   },
   watch: {
     newStatusCount (count) {
-      if (!this.$store.state.config.streaming) {
+      if (!this.$store.getters.mergedConfig.streaming) {
         return
       }
       if (count > 0) {
@@ -162,7 +162,7 @@ const Timeline = {
         const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
         if (top < 15 &&
             !this.paused &&
-            !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
+            !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
         ) {
           this.showNewStatuses()
         } else {
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 12f9f9e8..c84afe77 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -27,9 +27,9 @@ export default {
       }]
     },
     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
@@ -61,11 +61,11 @@ export default {
     },
     userHighlightType: {
       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.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 })
         } else {
@@ -76,7 +76,7 @@ export default {
     },
     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) {
diff --git a/src/components/video_attachment/video_attachment.js b/src/components/video_attachment/video_attachment.js
index 76b19a02..f0ca7e89 100644
--- a/src/components/video_attachment/video_attachment.js
+++ b/src/components/video_attachment/video_attachment.js
@@ -3,7 +3,7 @@ const VideoAttachment = {
   props: ['attachment', 'controls'],
   data () {
     return {
-      loopVideo: this.$store.state.config.loopVideo
+      loopVideo: this.$store.getters.mergedConfig.loopVideo
     }
   },
   methods: {
@@ -12,16 +12,16 @@ const VideoAttachment = {
       if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
         // non-zero if video has audio track
         if (target.webkitAudioDecodedByteCount > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
         }
       } else if (typeof target.mozHasAudio !== 'undefined') {
         // true if video has audio track
         if (target.mozHasAudio) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
         }
       } else if (typeof target.audioTracks !== 'undefined') {
         if (target.audioTracks.length > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+          this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
         }
       }
     }
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index b6c4cf80..47008026 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -8,11 +8,10 @@ const update = ({ store, notifications, older }) => {
 
 const fetchAndUpdate = ({ store, credentials, older = false }) => {
   const args = { credentials }
+  const { getters } = store
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.notifications
-  const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined'
-    ? rootState.instance.hideMutedPosts
-    : rootState.config.hideMutedPosts
+  const hideMutedPosts = getters.mergedConfig.hideMutedPosts
 
   args['withMuted'] = !hideMutedPosts
 
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index f72688f8..9eb30c2d 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -15,13 +15,21 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => {
   })
 }
 
-const fetchAndUpdate = ({ store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until }) => {
+const fetchAndUpdate = ({
+  store,
+  credentials,
+  timeline = 'friends',
+  older = false,
+  showImmediately = false,
+  userId = false,
+  tag = false,
+  until
+}) => {
   const args = { timeline, credentials }
   const rootState = store.rootState || store.state
+  const { getters } = store
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
-  const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined'
-    ? rootState.instance.hideMutedPosts
-    : rootState.config.hideMutedPosts
+  const hideMutedPosts = getters.mergedConfig.hideMutedPosts
 
   if (older) {
     args['until'] = until || timelineData.minId
diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index 368d623d..b1b98802 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -12,8 +12,8 @@ const generateInput = (value, padEmoji = true) => {
     },
     mocks: {
       $store: {
-        state: {
-          config: {
+        getters: {
+          mergedConfig: {
             padEmoji
           }
         }
diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 6de9491a..1b6a47d7 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -18,7 +18,14 @@ const actions = {
 }
 
 const testGetters = {
-  findUser: state => getters.findUser(state.users)
+  findUser: state => getters.findUser(state.users),
+  mergedConfig: state => ({
+    colors: '',
+    highlight: {},
+    customTheme: {
+      colors: []
+    }
+  })
 }
 
 const localUser = {
@@ -45,13 +52,6 @@ const externalProfileStore = new Vuex.Store({
     interface: {
       browserSupport: ''
     },
-    config: {
-      colors: '',
-      highlight: {},
-      customTheme: {
-        colors: []
-      }
-    },
     instance: {
       hideUserStats: true
     },
-- 
cgit v1.2.3-70-g09d2


From 9c305c5f93b2ffee0a98ff8cc6770df052d4b71e Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Tue, 8 Oct 2019 10:21:40 +0300
Subject: Revert "added acccount_actions component"

This reverts commit 188b6f56ed2f983d8f0fba4dc8f7327ebbee321d.
---
 src/components/account_actions/account_actions.js  |  59 ---------
 src/components/account_actions/account_actions.vue | 133 --------------------
 src/components/follow_button/follow_button.js      |  58 ---------
 src/components/follow_button/follow_button.vue     |  13 --
 src/components/user_card/user_card.js              |  48 +++++++-
 src/components/user_card/user_card.vue             | 135 ++++++++++++++++++++-
 6 files changed, 178 insertions(+), 268 deletions(-)
 delete mode 100644 src/components/account_actions/account_actions.js
 delete mode 100644 src/components/account_actions/account_actions.vue
 delete mode 100644 src/components/follow_button/follow_button.js
 delete mode 100644 src/components/follow_button/follow_button.vue

(limited to 'src/components/user_card/user_card.js')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
deleted file mode 100644
index 1092a96a..00000000
--- a/src/components/account_actions/account_actions.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import FollowButton from '../follow_button/follow_button.vue'
-import ProgressButton from '../progress_button/progress_button.vue'
-
-const AccountActions = {
-  props: [
-    'user'
-  ],
-  data () {
-    return {
-      showDropDown: false
-    }
-  },
-  components: {
-    FollowButton,
-    ProgressButton
-  },
-  computed: {
-    tagsSet () {
-      return new Set(this.user.tags)
-    },
-    hasTagPolicy () {
-      return this.$store.state.instance.tagPolicyAvailable
-    }
-  },
-  methods: {
-    subscribeUser () {
-      return this.$store.dispatch('subscribeUser', this.user.id)
-    },
-    unsubscribeUser () {
-      return this.$store.dispatch('unsubscribeUser', this.user.id)
-    },
-    showRepeats () {
-      this.$store.dispatch('showReblogs', this.user.id)
-    },
-    hideRepeats () {
-      this.$store.dispatch('hideReblogs', this.user.id)
-    },
-    muteUser () {
-      this.$store.dispatch('muteUser', this.user.id)
-    },
-    unmuteUser () {
-      this.$store.dispatch('unmuteUser', 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
deleted file mode 100644
index ce508b0a..00000000
--- a/src/components/account_actions/account_actions.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <div class="account-actions">
-    <FollowButton :user="user" />
-    <v-popover
-      trigger="click"
-      class="account-tools-popover"
-      :container="false"
-      placement="bottom-end"
-      :offset="5"
-      @show="showDropDown = true"
-      @hide="showDropDown = false"
-    >
-      <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"
-            />
-            <ProgressButton
-              v-if="!user.subscribed"
-              class="btn btn-default dropdown-item"
-              :click="subscribeUser"
-              :title="$t('user_card.subscribe')"
-            >
-              {{ $t('user_card.subscribe') }}
-            </ProgressButton>
-            <ProgressButton
-              v-else
-              class="btn btn-default pressed dropdown-item"
-              :click="unsubscribeUser"
-              :title="$t('user_card.unsubscribe')"
-            >
-              {{ $t('user_card.unsubscribe') }}
-            </ProgressButton>
-
-            <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 pressed dropdown-item"
-              @click="showRepeats"
-            >
-              {{ $t('user_card.show_repeats') }}
-            </button>
-          </template>
-          <div
-            role="separator"
-            class="dropdown-divider"
-          />
-          <button
-            v-if="user.muted"
-            class="btn btn-default btn-block pressed dropdown-item"
-            @click="unmuteUser"
-          >
-            {{ $t('user_card.muted') }}
-          </button>
-          <button
-            v-else
-            class="btn btn-default btn-block dropdown-item"
-            @click="muteUser"
-          >
-            {{ $t('user_card.mute') }}
-          </button>
-          <button
-            v-if="user.statusnet_blocking"
-            class="btn btn-default btn-block pressed dropdown-item"
-            @click="unblockUser"
-          >
-            {{ $t('user_card.blocked') }}
-          </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>
-      <button class="btn btn-default ellipsis-button">
-        <i class="icon-ellipsis" />
-      </button>
-    </v-popover>
-  </div>
-</template>
-
-<script src="./account_actions.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-@import '../popper/popper.scss';
-
-.account-tools-popover {
-  height: 100%;
-  .trigger {
-    display: flex !important;
-    height: 100%;
-  }
-}
-.account-actions {
-  display: flex;
-  flex: 0 0 0 !important;
-  margin: 0 3em 0 0 !important;
-}
-.account-actions .follow-button {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-.account-actions .ellipsis-button {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-.account-actions .button-icon {
-}
-</style>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
deleted file mode 100644
index 9d2834ab..00000000
--- a/src/components/follow_button/follow_button.js
+++ /dev/null
@@ -1,58 +0,0 @@
-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 'user_card.follow_unfollow'
-      } else if (this.user.requested) {
-        return 'user_card.follow_again'
-      } else {
-        return ''
-      }
-    },
-    label () {
-      if (this.inProgress) {
-        return 'user_card.follow_progress'
-      } else if (this.user.following) {
-        return 'user_card.following'
-      } else if (this.user.requested) {
-        return 'user_card.follow_sent'
-      } else {
-        return 'user_card.follow'
-      }
-    }
-  },
-  methods: {
-    doClick () {
-      if (this.user.following) {
-        this.unfollowUser()
-      } else {
-        this.followUser()
-      }
-    },
-    followUser () {
-      const store = this.$store
-      this.inProgress = true
-      requestFollow(this.user, store).then(() => {
-        this.inProgress = false
-      })
-    },
-    unfollowUser () {
-      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
deleted file mode 100644
index 61aa75a0..00000000
--- a/src/components/follow_button/follow_button.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <button
-    class="btn btn-default btn-block follow-button"
-    :class="{ pressed: isPressed }"
-    :disabled="inProgress"
-    :title="$t(title)"
-    @click="doClick"
-  >
-    {{ $t(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 c09e5654..015a5762 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -2,8 +2,8 @@ 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 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 {
@@ -98,10 +98,48 @@ export default {
     UserAvatar,
     RemoteFollow,
     ModerationTools,
-    AccountActions,
     ProgressButton
   },
   methods: {
+    showRepeats () {
+      this.$store.dispatch('showReblogs', this.user.id)
+    },
+    hideRepeats () {
+      this.$store.dispatch('hideReblogs', this.user.id)
+    },
+    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)
+    },
+    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) {
         const store = this.$store
@@ -122,6 +160,9 @@ export default {
         this.$store.state.instance.restrictedNicknames
       )
     },
+    reportUser () {
+      this.$store.dispatch('openUserReportingModal', this.user.id)
+    },
     zoomAvatar () {
       const attachment = {
         url: this.user.profile_image_url_original,
@@ -129,6 +170,9 @@ 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 abaef85f..f465467c 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -131,12 +131,135 @@
             </label>
           </div>
         </div>
-
         <div
           v-if="loggedIn && isOtherUser"
           class="user-interactions"
         >
-          <AccountActions :user="user" />
+          <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>
+          <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>
+            <button
+              v-if="user.showing_reblogs"
+              class="btn btn-default"
+              :title="$t('user_card.hide_repeats')"
+              @click="hideRepeats"
+            >
+              <i class="icon-eye" />
+            </button>
+            <button
+              v-if="!user.showing_reblogs"
+              class="btn btn-default pressed"
+              :title="$t('user_card.show_repeats')"
+              @click="showRepeats"
+            >
+              <i class="icon-eye-off" />
+            </button>
+          </div>
+
+          <div>
+            <button
+              class="btn btn-default btn-block"
+              @click="mentionUser"
+            >
+              {{ $t('user_card.mention') }}
+            </button>
+          </div>
+
+          <div>
+            <button
+              v-if="user.muted"
+              class="btn btn-default btn-block pressed"
+              @click="unmuteUser"
+            >
+              {{ $t('user_card.muted') }}
+            </button>
+            <button
+              v-else
+              class="btn btn-default btn-block"
+              @click="muteUser"
+            >
+              {{ $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 === &quot;admin&quot;"
             :user="user"
@@ -480,9 +603,15 @@
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    justify-content: flex-end;
+    justify-content: space-between;
     margin-right: -.75em;
 
+    > * {
+      flex: 1 0 0;
+      margin: 0 .75em .6em 0;
+      white-space: nowrap;
+    }
+
     button {
       margin: 0;
 
-- 
cgit v1.2.3-70-g09d2


From a26d55013779d7b41e4a4aa0dc2477a6926116ae Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Tue, 8 Oct 2019 10:21:48 +0300
Subject: updated user_card

---
 src/components/account_actions/account_actions.js  |  45 +++++++
 src/components/account_actions/account_actions.vue |  88 ++++++++++++++
 src/components/follow_button/follow_button.js      |  57 +++++++++
 src/components/follow_button/follow_button.vue     |  13 ++
 src/components/user_card/user_card.js              |  40 +-----
 src/components/user_card/user_card.vue             | 134 ++++-----------------
 src/services/api/api.service.js                    |  13 +-
 7 files changed, 240 insertions(+), 150 deletions(-)
 create mode 100644 src/components/account_actions/account_actions.js
 create mode 100644 src/components/account_actions/account_actions.vue
 create mode 100644 src/components/follow_button/follow_button.js
 create mode 100644 src/components/follow_button/follow_button.vue

(limited to 'src/components/user_card/user_card.js')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
new file mode 100644
index 00000000..453e1f46
--- /dev/null
+++ b/src/components/account_actions/account_actions.js
@@ -0,0 +1,45 @@
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const AccountActions = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      showDropDown: false
+    }
+  },
+  components: {
+    ProgressButton
+  },
+  computed: {
+    tagsSet () {
+      return new Set(this.user.tags)
+    },
+    hasTagPolicy () {
+      return this.$store.state.instance.tagPolicyAvailable
+    }
+  },
+  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..5786a502
--- /dev/null
+++ b/src/components/account_actions/account_actions.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="account-actions">
+    <v-popover
+      trigger="click"
+      class="account-tools-popover"
+      :container="false"
+      placement="bottom-end"
+      :offset="5"
+      @show="showDropDown = true"
+      @hide="showDropDown = false"
+    >
+      <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.blocked') }}
+          </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-link-ext 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 button.dropdown-item {
+  margin-left: 0;
+}
+.account-actions .trigger-button {
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
+  opacity: .8;
+}
+
+</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..708d15a2
--- /dev/null
+++ b/src/components/follow_button/follow_button.js
@@ -0,0 +1,57 @@
+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 () {
+      if (this.user.following) {
+        this.unfollow()
+      } else {
+        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 015a5762..0107cfa6 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,9 +1,10 @@
 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 {
@@ -98,36 +99,11 @@ export default {
     UserAvatar,
     RemoteFollow,
     ModerationTools,
-    ProgressButton
+    AccountActions,
+    ProgressButton,
+    FollowButton
   },
   methods: {
-    showRepeats () {
-      this.$store.dispatch('showReblogs', this.user.id)
-    },
-    hideRepeats () {
-      this.$store.dispatch('hideReblogs', this.user.id)
-    },
-    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)
     },
@@ -160,9 +136,6 @@ export default {
         this.$store.state.instance.restrictedNicknames
       )
     },
-    reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
-    },
     zoomAvatar () {
       const attachment = {
         url: this.user.profile_image_url_original,
@@ -170,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 f465467c..119079b2 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -59,6 +59,10 @@
                   :title="$t('tool_tip.user_settings')"
                 />
               </router-link>
+              <AccountActions
+                v-if="loggedIn && isOtherUser"
+                :user="user"
+              />
               <a
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
@@ -135,88 +139,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>
-          <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>
-            <button
-              v-if="user.showing_reblogs"
-              class="btn btn-default"
-              :title="$t('user_card.hide_repeats')"
-              @click="hideRepeats"
-            >
-              <i class="icon-eye" />
-            </button>
-            <button
-              v-if="!user.showing_reblogs"
-              class="btn btn-default pressed"
-              :title="$t('user_card.show_repeats')"
-              @click="showRepeats"
-            >
-              <i class="icon-eye-off" />
-            </button>
-          </div>
-
-          <div>
-            <button
-              class="btn btn-default btn-block"
-              @click="mentionUser"
-            >
-              {{ $t('user_card.mention') }}
-            </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>
             <button
               v-if="user.muted"
@@ -233,33 +176,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 === &quot;admin&quot;"
             :user="user"
@@ -603,11 +519,9 @@
     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;
     }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 80e94a50..61cd4f16 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -219,13 +219,16 @@ const authHeaders = (accessToken) => {
   }
 }
 
-const followUser = ({ id, reblogs, credentials }) => {
+const followUser = ({ id, credentials, ...options }) => {
   let url = MASTODON_FOLLOW_URL(id)
-  const form = new FormData()
-  if (reblogs !== undefined) { form.append('reblogs', reblogs) }
+  const form = {}
+  if (options.reblogs !== undefined) { form['reblogs'] = options.reblogs }
   return fetch(url, {
-    body: form,
-    headers: authHeaders(credentials),
+    body: JSON.stringify(form),
+    headers: {
+      ...authHeaders(credentials),
+      'Content-Type': 'application/json'
+    },
     method: 'POST'
   }).then((data) => data.json())
 }
-- 
cgit v1.2.3-70-g09d2