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