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