basic first version

src/components/notification/notification.js

@@ -25,9 +25,6 @@ const Notification = {
     Status
   },
   methods: {
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
-    },
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },

src/components/notification/notification.vue

@@ -29,7 +29,6 @@
       <a
         class="avatar-container"
         :href="notification.from_profile.statusnet_profile_url"
-        @click.stop.prevent.capture="toggleUserExpanded"
       >
         <UserAvatar
           :compact="true"
@@ -38,12 +37,6 @@
         />
       </a>
       <div class="notification-right">
-        <UserCard
-          v-if="userExpanded"
-          :user-id="getUser(notification).id"
-          :rounded="true"
-          :bordered="true"
-        />
         <span class="notification-details">
           <div class="name-and-action">
             <!-- eslint-disable vue/no-v-html -->

src/components/popover/popover.js

@@ -19,11 +19,14 @@ const Popover = {
     // anchor point on either axis
     offset: Object,
     // Additional styles you may want for the popover container
-    popoverClass: String
+    popoverClass: String,
+    // Time in milliseconds until the popup appears, default is 100ms
+    delay: Number
   },
   data () {
     return {
       hidden: true,
+      hovered: false, 
       styles: { opacity: 0 },
       oldSize: { width: 0, height: 0 }
     }
@@ -110,6 +113,7 @@ const Popover = {
       }
     },
     showPopover () {
+      if (this.trigger === 'hover' && !this.hovered) return
       if (this.hidden) this.$emit('show')
       this.hidden = false
       this.$nextTick(this.updateStyles)
@@ -120,10 +124,16 @@ const Popover = {
       this.styles = { opacity: 0 }
     },
     onMouseenter (e) {
-      if (this.trigger === 'hover') this.showPopover()
+      if (this.trigger === 'hover') {
+        this.hovered = true
+        setTimeout(this.showPopover, this.delay || 100)
+      }
     },
     onMouseleave (e) {
-      if (this.trigger === 'hover') this.hidePopover()
+      if (this.trigger === 'hover') {
+        this.hovered = false
+        this.hidePopover()
+      }
     },
     onClick (e) {
       if (this.trigger === 'click') {

src/components/status/status.js

@@ -9,6 +9,7 @@ import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusContent from '../status_content/status_content.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
@@ -37,7 +38,6 @@ const Status = {
     return {
       replying: false,
       unmuted: false,
-      userExpanded: false,
       error: null
     }
   },
@@ -203,13 +203,13 @@ const Status = {
     RetweetButton,
     ExtraButtons,
     PostStatusForm,
-    UserCard,
     UserAvatar,
     AvatarList,
     Timeago,
     StatusPopover,
     EmojiReactions,
-    StatusContent
+    StatusContent,
+    UserPopover
   },
   methods: {
     visibilityIcon (visibility) {
@@ -244,9 +244,6 @@ const Status = {
     toggleMute () {
       this.unmuted = !this.unmuted
     },
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     }

src/components/status/status.vue

@@ -22,9 +22,11 @@
             v-if="muted && retweet"
             class="button-icon icon-retweet"
           />
-          <router-link :to="userProfileLink">
+          <UserPopover :user-id="status.user.id">
-            {{ status.user.screen_name }}
+            <router-link :to="userProfileLink">
-          </router-link>
+              {{ status.user.screen_name }}
+            </router-link>
+          </UserPopover>
         </small>
         <small
           v-if="showReasonMutedThread"
@@ -73,15 +75,17 @@
         />
         <div class="media-body faint">
           <span class="user-name">
-            <router-link
+            <UserPopover :user-id="statusoid.user.id">
-              v-if="retweeterHtml"
+              <router-link
-              :to="retweeterProfileLink"
+                v-if="retweeterHtml"
-              v-html="retweeterHtml"
+                :to="retweeterProfileLink"
-            />
+                v-html="retweeterHtml"
-            <router-link
+              />
-              v-else
+              <router-link
-              :to="retweeterProfileLink"
+                v-else
-            >{{ retweeter }}</router-link>
+                :to="retweeterProfileLink"
+              >{{ retweeter }}</router-link>
+            </UserPopover>
           </span>
           <i
             class="fa icon-retweet retweeted"
@@ -101,10 +105,7 @@
           v-if="!noHeading"
           class="media-left"
         >
-          <router-link
+          <router-link :to="userProfileLink">
-            :to="userProfileLink"
-            @click.stop.prevent.capture.native="toggleUserExpanded"
-          >
             <UserAvatar
               :compact="compact"
               :better-shadow="betterShadow"
@@ -113,13 +114,6 @@
           </router-link>
         </div>
         <div class="status-body">
-          <UserCard
-            v-if="userExpanded"
-            :user-id="status.user.id"
-            :rounded="true"
-            :bordered="true"
-            class="status-usercard"
-          />
           <div
             v-if="!noHeading"
             class="media-heading"
@@ -137,12 +131,14 @@
                 >
                   {{ status.user.name }}
                 </h4>
-                <router-link
+                <UserPopover :user-id="status.user.id">
-                  class="account-name"
+                  <router-link
-                  :to="userProfileLink"
+                    class="account-name"
-                >
+                    :to="userProfileLink"
-                  {{ status.user.screen_name }}
+                  >
-                </router-link>
+                    {{ status.user.screen_name }}
+                  </router-link>
+                </UserPopover>
               </div>
 
               <span class="heading-right">
@@ -222,9 +218,11 @@
                 >
                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
                 </span>
-                <router-link :to="replyProfileLink">
+                <UserPopover :user-id="status.in_reply_to_user_id">
-                  {{ replyToName }}
+                  <router-link :to="replyProfileLink">
-                </router-link>
+                    {{ replyToName }}
+                  </router-link>
+                </UserPopover>
                 <span
                   v-if="replies && replies.length"
                   class="faint replies-separator"

src/components/user_avatar/user_avatar.js

@@ -1,10 +1,12 @@
 import StillImage from '../still-image/still-image.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 
 const UserAvatar = {
   props: [
     'user',
     'betterShadow',
-    'compact'
+    'compact',
+    'noPopover'
   ],
   data () {
     return {
@@ -13,7 +15,8 @@ const UserAvatar = {
     }
   },
   components: {
-    StillImage
+    StillImage,
+    UserPopover
   },
   methods: {
     imgSrc (src) {

src/components/user_avatar/user_avatar.vue

@@ -1,5 +1,6 @@
 <template>
   <StillImage
+    v-if="noPopover"
     class="avatar"
     :alt="user.screen_name"
     :title="user.screen_name"
@@ -7,6 +8,19 @@
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
   />
+  <UserPopover
+    v-else
+    :user-id="user.id"
+  >
+    <StillImage
+      class="avatar"
+      :alt="user.screen_name"
+      :title="user.screen_name"
+      :src="imgSrc(user.profile_image_url_original)"
+      :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
+      :image-load-error="imageLoadError"
+    />
+  </UserPopover>
 </template>
 
 <script src="./user_avatar.js"></script>

src/components/user_card/user_card.js

@@ -9,7 +9,13 @@ import { mapGetters } from 'vuex'
 
 export default {
   props: [
-    'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+    'userId',
+    'switcher',
+    'selected',
+    'hideBio',
+    'rounded',
+    'bordered',
+    'allowZoomingAvatar'
   ],
   data () {
     return {

src/components/user_card/user_card.vue

@@ -19,6 +19,7 @@
             <UserAvatar
               :better-shadow="betterShadow"
               :user="user"
+              no-popover="true"
             />
             <div class="user-info-avatar-link-overlay">
               <i class="button-icon icon-zoom-in" />
@@ -31,6 +32,7 @@
             <UserAvatar
               :better-shadow="betterShadow"
               :user="user"
+              no-popover="true"
             />
           </router-link>
           <div class="user-summary">

src/components/user_popover/user_popover.js

@@ -0,0 +1,35 @@
+
+const UserPopover = {
+  name: 'UserPopover',
+  props: [
+    'userId'
+  ],
+  data () {
+    return {
+      error: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.findUser(this.userId)
+    }
+  },
+  components: {
+    Popover: () => import('../popover/popover.vue'),
+    UserCard: () => import('../user_card/user_card.vue')
+  },
+  methods: {
+    enter () {
+      if (!this.user) {
+        if (!this.userId) {
+          return
+        }
+        this.$store.dispatch('fetchUser', this.userId)
+          .then(data => (this.error = false))
+          .catch(e => (this.error = true))
+      }
+    }
+  }
+}
+
+export default UserPopover

src/components/user_popover/user_popover.vue

@@ -0,0 +1,68 @@
+<template>
+  <Popover
+    trigger="hover"
+    popover-class="user-popover"
+    :bound-to="{ x: 'container' }"
+    :delay="200"
+    @show="enter"
+  >
+    <template slot="trigger">
+      <slot />
+    </template>
+    <div
+      slot="content"
+      @click.stop.prevent=""
+    >
+      <span v-if="user">
+        <UserCard
+          :user-id="userId"
+          hide-bio="true"
+        />
+      </span>
+      <div
+        v-else-if="error"
+        class="user-preview-no-content faint"
+      >
+        {{ $t('status.status_unavailable') }}
+      </div>
+      <div
+        v-else
+        class="status-preview-no-content"
+      >
+        <i class="icon-spin4 animate-spin" />
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<script src="./user_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.user-popover {
+  font-size: 1rem;
+  min-width: 15em;
+  max-width: 95%;
+  cursor: default;
+
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
+
+  .user-preview-no-content {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
+}
+
+</style>