diff options
Diffstat (limited to 'src/components/status')
| -rw-r--r-- | src/components/status/status.js | 40 | ||||
| -rw-r--r-- | src/components/status/status.vue | 22 |
2 files changed, 45 insertions, 17 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js index 9730eded..ec4de516 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -6,10 +6,12 @@ import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCardContent from '../user_card_content/user_card_content.vue' import StillImage from '../still-image/still-image.vue' import Gallery from '../gallery/gallery.vue' -import { filter, find } from 'lodash' -import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' +import LinkPreview from '../link-preview/link-preview.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 { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' +import { mentionMatchesUrl } from 'src/services/mention_matcher/mention_matcher.js' +import { filter, find } from 'lodash' const Status = { name: 'Status', @@ -33,7 +35,7 @@ const Status = { userExpanded: false, preview: null, showPreview: false, - showingTall: false, + showingTall: this.inConversation && this.focused, expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' ? !this.$store.state.instance.collapseMessageWithSubject : !this.$store.state.config.collapseMessageWithSubject, @@ -81,7 +83,7 @@ const Status = { }, replyProfileLink () { if (this.isReply) { - return this.generateUserProfileLink(this.status.in_reply_to_status_id, this.replyToName) + return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName) } }, retweet () { return !!this.statusoid.retweeted_status }, @@ -181,7 +183,7 @@ const Status = { return this.tallStatus }, showingMore () { - return this.showingTall || (this.status.summary && this.expandingSubject) + return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject) }, nsfwClickthrough () { if (!this.status.nsfw) { @@ -243,7 +245,8 @@ const Status = { PostStatusForm, UserCardContent, StillImage, - Gallery + Gallery, + LinkPreview }, methods: { visibilityIcon (visibility) { @@ -258,11 +261,23 @@ const Status = { return 'icon-globe' } }, - linkClicked ({target}) { + linkClicked (event) { + let { target } = event if (target.tagName === 'SPAN') { target = target.parentNode } if (target.tagName === 'A') { + if (target.className.match(/mention/)) { + const href = target.getAttribute('href') + const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href)) + if (attn) { + event.stopPropagation() + event.preventDefault() + const link = this.generateUserProfileLink(attn.id, attn.screen_name) + this.$router.push(link) + return + } + } window.open(target.href, '_blank') } }, @@ -287,11 +302,11 @@ const Status = { toggleShowMore () { if (this.showingTall) { this.showingTall = false - } else if (this.expandingSubject) { + } else if (this.expandingSubject && this.status.summary) { this.expandingSubject = false } else if (this.hideTallStatus) { this.showingTall = true - } else if (this.hideSubjectStatus) { + } else if (this.hideSubjectStatus && this.status.summary) { this.expandingSubject = true } }, @@ -329,8 +344,13 @@ const Status = { if (this.status.id === id) { let rect = this.$el.getBoundingClientRect() if (rect.top < 100) { - window.scrollBy(0, rect.top - 200) + // Post is above screen, match its top to screen top + window.scrollBy(0, rect.top - 100) + } else if (rect.height >= (window.innerHeight - 50)) { + // Post we want to see is taller than screen so match its top to screen top + window.scrollBy(0, rect.top - 100) } else if (rect.bottom > window.innerHeight - 50) { + // Post is below screen, match its bottom to screen bottom window.scrollBy(0, rect.bottom - window.innerHeight + 50) } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index c1800d64..c6e73e4e 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -24,9 +24,9 @@ <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status"> <div v-if="!noHeading" class="media-left"> - <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> + <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded"> <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}" :src="status.user.profile_image_url_original"/> - </a> + </router-link> </div> <div class="status-body"> <div class="usercard media-body" v-if="userExpanded"> @@ -112,6 +112,10 @@ /> </div> + <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body"> + <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" /> + </div> + <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'> <div v-if="loggedIn"> <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')"> @@ -235,6 +239,11 @@ vertical-align: bottom; flex-basis: 100%; + a { + display: inline-block; + word-break: break-all; + } + small { font-weight: lighter; } @@ -310,11 +319,6 @@ } } - a { - display: inline-block; - word-break: break-all; - } - .tall-status { position: relative; height: 220px; @@ -323,6 +327,8 @@ } .tall-status-hider { + display: inline-block; + word-break: break-all; position: absolute; height: 70px; margin-top: 150px; @@ -340,6 +346,8 @@ .status-unhider, .cw-status-hider { width: 100%; text-align: center; + display: inline-block; + word-break: break-all; } .status-content { |