Revert "added acccount_actions component"

This reverts commit 188b6f56ed.

src/components/account_actions/account_actions.js

@@ -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

src/components/account_actions/account_actions.vue

@@ -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>

src/components/follow_button/follow_button.js

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

src/components/follow_button/follow_button.vue

@@ -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>

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

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;