polish things, enable user popover hover triggers on touch on mobile

src/components/basic_user_card/basic_user_card.js

@@ -6,19 +6,11 @@ const BasicUserCard = {
   props: [
     'user'
   ],
-  data () {
-    return {
-      userExpanded: false
-    }
-  },
   components: {
     UserCard,
     UserAvatar
   },
   methods: {
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
-    },
     userProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     }

src/components/basic_user_card/basic_user_card.vue

@@ -4,22 +4,10 @@
       <UserAvatar
         class="avatar"
         :user="user"
-        @click.prevent.native="toggleUserExpanded"
       />
     </router-link>
     <div
-      v-if="userExpanded"
+      class="basic-user-card-content"
-      class="basic-user-card-expanded-content"
-    >
-      <UserCard
-        :user-id="user.id"
-        :rounded="true"
-        :bordered="true"
-      />
-    </div>
-    <div
-      v-else
-      class="basic-user-card-collapsed-content"
     >
       <div
         :title="user.name"
@@ -59,7 +47,7 @@
   margin: 0;
   padding: 0.6em 1em;
 
-  &-collapsed-content {
+  &-content {
     margin-left: 0.7em;
     text-align: left;
     flex: 1;
@@ -83,11 +71,5 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-
-  &-expanded-content {
-    flex: 1;
-    margin-left: 0.7em;
-    min-width: 0;
-  }
 }
 </style>

src/components/notification/notification.vue

@@ -26,16 +26,16 @@
       :class="[userClass, { highlighted: userStyle }]"
       :style="[ userStyle ]"
     >
-      <a
+      <router-link
         class="avatar-container"
-        :href="notification.from_profile.statusnet_profile_url"
+        :to="userProfileLink"
       >
         <UserAvatar
           :compact="true"
           :better-shadow="betterShadow"
           :user="notification.from_profile"
         />
-      </a>
+      </router-link>
       <div class="notification-right">
         <span class="notification-details">
           <div class="name-and-action">

src/components/popover/popover.js

@@ -28,9 +28,14 @@ const Popover = {
   data () {
     return {
       hidden: true,
-      hovered: false,
       styles: { opacity: 0 },
-      oldSize: { width: 0, height: 0 }
+      oldSize: { width: 0, height: 0 },
+      timeout: null
+    }
+  },
+  computed: {
+    isMobileLayout () {
+      return this.$store.state.interface.mobileLayout
     }
   },
   methods: {
@@ -39,10 +44,8 @@ const Popover = {
       return container.getBoundingClientRect()
     },
     updateStyles () {
-      if (this.hidden) {
+      if (this.hidden || !(this.$el && this.$el.offsetParent)) {
-        this.styles = {
+        this.hidePopover()
-          opacity: 0
-        }
         return
       }
 
@@ -124,26 +127,27 @@ const Popover = {
       }
     },
     showPopover () {
-      if (!this.$el) return
-      if (this.trigger === 'hover' && !this.hovered) return
       if (this.hidden) this.$emit('show')
       this.hidden = false
       this.$nextTick(this.updateStyles)
     },
     hidePopover () {
       if (!this.hidden) this.$emit('close')
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+        this.timeout = null
+      }
       this.hidden = true
       this.styles = { opacity: 0 }
     },
     onMouseenter (e) {
       if (this.trigger === 'hover') {
-        this.hovered = true
+        this.$emit('enter')
-        setTimeout(this.showPopover, this.delay || 100)
+        this.timeout = setTimeout(this.showPopover, this.delay || 100)
       }
     },
     onMouseleave (e) {
       if (this.trigger === 'hover') {
-        this.hovered = false
         this.hidePopover()
       }
     },
@@ -154,6 +158,18 @@ const Popover = {
         } else {
           this.hidePopover()
         }
+      } else if (this.trigger === 'hover' && this.isMobileLayout) {
+        // This is to enable using hover stuff with mobile:
+        // on first touch it opens the popover, when touching the trigger
+        // again it will do the click action. Can't use touch events as
+        // we can't stop/prevent the actual click which will be handled
+        // first.
+        if (this.hidden) {
+          this.$emit('enter')
+          this.showPopover()
+          e.preventDefault()
+          e.stopPropagation()
+        }
       }
     },
     onClickOutside (e) {

src/components/popover/popover.vue

@@ -5,7 +5,7 @@
   >
     <div
       ref="trigger"
-      @click="onClick"
+      @click.capture="onClick"
     >
       <slot name="trigger" />
     </div>

src/components/status_content/status_content.js

@@ -177,6 +177,7 @@ const StatusContent = {
           }
         }
         window.open(target.href, '_blank')
+        event.preventDefault()
       }
     },
     linkHover (event) {

src/components/status_content/status_content.vue

@@ -51,7 +51,7 @@
           v-if="!hideSubjectStatus"
           :class="{ 'single-line': singleLine }"
           class="status-content media-body"
-          @click.prevent="linkClicked"
+          @click="linkClicked"
           @mouseover="linkHover"
           v-html="postBodyHtml"
         />

src/components/user_popover/user_popover.js

@@ -13,6 +13,10 @@ const UserPopover = {
   computed: {
     user () {
       return this.$store.getters.findUser(this.userId)
+    },
+    relationshipAvailable () {
+      const relationship = this.$store.getters.relationship(this.userId)
+      return relationship && !relationship.loading
     }
   },
   components: {
@@ -21,14 +25,17 @@ const UserPopover = {
   },
   methods: {
     enter () {
+      if (!this.userId) return
       if (!this.user) {
-        if (!this.userId) {
-          return
-        }
         this.$store.dispatch('fetchUser', this.userId)
           .then(data => (this.error = false))
           .catch(e => (this.error = true))
       }
+      if (!this.relationship) {
+        this.$store.dispatch('fetchUserRelationship', this.userId)
+          .then(data => (this.error = false))
+          .catch(e => (this.error = true))
+      }
     }
   }
 }

src/components/user_popover/user_popover.vue

@@ -5,18 +5,19 @@
     trigger="hover"
     popover-class="user-popover"
     :bound-to="{ x: 'container' }"
+    :margin="{ left: 5, right: 5 }"
     :delay="200"
     :anchor-offset="anchorOffset"
-    @show="enter"
+    @enter="enter"
   >
     <template slot="trigger">
       <slot />
     </template>
     <div
       slot="content"
-      @click.stop.prevent=""
+      @click.prevent=""
     >
-      <span v-if="user">
+      <span v-if="user && relationshipAvailable">
         <UserCard
           :user-id="userId"
           hide-bio="true"
@@ -30,7 +31,7 @@
       </div>
       <div
         v-else
-        class="status-preview-no-content"
+        class="user-preview-no-content"
       >
         <i class="icon-spin4 animate-spin" />
       </div>