From 0f862e3512df2c98bcfc324929226623794d7aa1 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 22 Jul 2020 14:26:08 +0300
Subject: [PATCH] polish things, enable user popover hover triggers on touch on
 mobile

---
 .../basic_user_card/basic_user_card.js        |  8 ----
 .../basic_user_card/basic_user_card.vue       | 22 +----------
 src/components/notification/notification.vue  |  6 +--
 src/components/popover/popover.js             | 38 +++++++++++++------
 src/components/popover/popover.vue            |  2 +-
 .../status_content/status_content.js          |  1 +
 .../status_content/status_content.vue         |  2 +-
 src/components/user_popover/user_popover.js   | 13 +++++--
 src/components/user_popover/user_popover.vue  |  9 +++--
 9 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index 87085a28..da87ba4a 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/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)
     }
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 9e410610..fede18c6 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/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-expanded-content"
-    >
-      <UserCard
-        :user-id="user.id"
-        :rounded="true"
-        :bordered="true"
-      />
-    </div>
-    <div
-      v-else
-      class="basic-user-card-collapsed-content"
+      class="basic-user-card-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>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a276cfef..56aa055c 100644
--- a/src/components/notification/notification.vue
+++ b/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">
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5fbc15dd..76c5387b 100644
--- a/src/components/popover/popover.js
+++ b/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) {
-        this.styles = {
-          opacity: 0
-        }
+      if (this.hidden || !(this.$el && this.$el.offsetParent)) {
+        this.hidePopover()
         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
-        setTimeout(this.showPopover, this.delay || 100)
+        this.$emit('enter')
+        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) {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index fc055af1..ad901967 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,7 @@
   >
     <div
       ref="trigger"
-      @click="onClick"
+      @click.capture="onClick"
     >
       <slot name="trigger" />
     </div>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 7cf30f83..34eeda9a 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -177,6 +177,7 @@ const StatusContent = {
           }
         }
         window.open(target.href, '_blank')
+        event.preventDefault()
       }
     },
     linkHover (event) {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index abb1f6b8..f4e7d57c 100644
--- a/src/components/status_content/status_content.vue
+++ b/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"
         />
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index c1be0b4d..c7fce3ff 100644
--- a/src/components/user_popover/user_popover.js
+++ b/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))
+      }
     }
   }
 }
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 43462c18..8029eace 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/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>