diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index e1b6e971..a1ba2042 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -8,6 +8,7 @@ > diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 29e13575..b73fb095 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -18,6 +18,8 @@ const Popover = { // Takes a x/y object and tells how many pixels to offset from // anchor point on either axis offset: Object, + // Takes an element to use for positioning over this.$el + offsetElement: null, // Additional styles you may want for the popover container popoverClass: String, // Time in milliseconds until the popup appears, default is 100ms @@ -47,7 +49,9 @@ const Popover = { // Popover will be anchored around this element, trigger ref is the container, so // its children are what are inside the slot. Expect only one slot="trigger". const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el - const screenBox = anchorEl.getBoundingClientRect() + const positionElement = this.offsetElement ? this.offsetElement : anchorEl + const screenBox = positionElement.getBoundingClientRect() + console.log(positionElement, screenBox) // Screen position of the origin point for popover const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top } const content = this.$refs.content @@ -99,11 +103,11 @@ const Popover = { const yOffset = (this.offset && this.offset.y) || 0 const translateY = usingTop - ? -anchorEl.offsetHeight - yOffset - content.offsetHeight + ? -positionElement.offsetHeight - yOffset - content.offsetHeight : yOffset const xOffset = (this.offset && this.offset.x) || 0 - const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset + const translateX = (positionElement.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset // Note, separate translateX and translateY avoids blurry text on chromium, // single translate or translate3d resulted in blurry text. diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 729f9010..5e8b6c8a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -74,7 +74,10 @@ :user="statusoid.user" />
- + {{ retweeter }} +

{{ status.user.name }}

@@ -137,11 +143,17 @@ > +
@@ -225,8 +237,9 @@ :user-id="status.in_reply_to_user_id" > {{ replyToName }} @@ -434,6 +447,12 @@ $status-margin: 0.75em; } } + .status-favicon { + height: 18px; + width: 18px; + margin-right: 0.4em; + } + .media-heading { padding: 0; vertical-align: bottom; diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index df095de3..2be52a17 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -2,6 +2,7 @@ import Attachment from '../attachment/attachment.vue' import Poll from '../poll/poll.vue' import Gallery from '../gallery/gallery.vue' import LinkPreview from '../link-preview/link-preview.vue' +import UserPopover from '../user_popover/user_popover.vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import fileType from 'src/services/file_type/file_type.service' import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js' @@ -10,6 +11,13 @@ import { mapGetters, mapState } from 'vuex' const StatusContent = { name: 'StatusContent', + components: { + Attachment, + Poll, + Gallery, + LinkPreview, + UserPopover + }, props: [ 'status', 'focused', @@ -22,7 +30,9 @@ const StatusContent = { showingTall: this.fullContent || (this.inConversation && this.focused), showingLongSubject: false, // not as computed because it sets the initial state which will be changed later - expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject + expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject, + focusedUserId: null, + focusedUserElement: null } }, computed: { @@ -142,12 +152,6 @@ const StatusContent = { currentUser: state => state.users.currentUser }) }, - components: { - Attachment, - Poll, - Gallery, - LinkPreview - }, methods: { linkClicked (event) { const target = event.target.closest('.status-content a') @@ -175,6 +179,22 @@ const StatusContent = { window.open(target.href, '_blank') } }, + linkHover (event) { + const target = event.target.closest('.status-content a') + this.focusedUserId = null + if (target) { + if (target.className.match(/mention/)) { + const href = target.href + const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href)) + if (attn) { + event.stopPropagation() + event.preventDefault() + this.focusedUserId = attn.id + this.focusedUserElement = target + } + } + } + }, toggleShowMore () { if (this.mightHideBecauseTall) { this.showingTall = !this.showingTall diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index bf8d376e..a67b17c5 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -28,63 +28,68 @@ {{ $t("status.show_full_subject") }} -
- - {{ $t("general.show_more") }} - +
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 533d61c2..9a483210 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -63,6 +63,7 @@
@{{ user.screen_name }} diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js index b9143b89..2771342a 100644 --- a/src/components/user_popover/user_popover.js +++ b/src/components/user_popover/user_popover.js @@ -2,7 +2,8 @@ const UserPopover = { name: 'UserPopover', props: [ - 'userId' + 'userId', + 'focusedElement' ], data () { return { diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue index 784481e7..80379988 100644 --- a/src/components/user_popover/user_popover.vue +++ b/src/components/user_popover/user_popover.vue @@ -1,10 +1,12 @@