added acccount_actions component

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

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>

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 })
+      })
+    }
+  }
+}

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>

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 })
     }
   }
 }

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">
+          <AccountActions :user="user" />
-            <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"
@@ -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;