diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js index 87085a28..8f41e2fb 100644 --- a/src/components/basic_user_card/basic_user_card.js +++ b/src/components/basic_user_card/basic_user_card.js @@ -1,5 +1,6 @@ import UserCard from '../user_card/user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' +import RichContent from 'src/components/rich_content/rich_content.jsx' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' const BasicUserCard = { @@ -13,7 +14,8 @@ const BasicUserCard = { }, components: { UserCard, - UserAvatar + UserAvatar, + RichContent }, methods: { toggleUserExpanded () { diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index c53f6a9c..53deb1df 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -25,17 +25,11 @@ :title="user.name" class="basic-user-card-user-name" > - - - - {{ user.name }}
20 }, longSubject () { @@ -87,8 +88,10 @@ const StatusContent = { }, methods: { onParseReady (event) { + if (this.parseReadyDone) return + this.parseReadyDone = true this.$emit('parseReady', event) - const { writtenMentions } = event + const { writtenMentions, invisibleMentions } = event writtenMentions .filter(mention => !mention.notifying) .forEach(mention => { @@ -99,6 +102,15 @@ const StatusContent = { const host = url.replace(/^https?:\/\//, '').replace(/\/.+?$/, '') this.$store.dispatch('fetchUserIfMissing', `${handle}@${host}`) }) + /* This is a bit of a hack to make current tall status detector work + * with rich mentions. Invisible mentions are detected at RichContent level + * and also we generate plaintext version of mentions by stripping tags + * so here we subtract from post length by each mention that became invisible + * via MentionsLine + */ + this.postLength = invisibleMentions.reduce((acc, mention) => { + return acc - mention.textContent.length - 1 + }, this.postLength) }, toggleShowMore () { if (this.mightHideBecauseTall) { diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 1001508c..a088e6bc 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -48,7 +48,6 @@ :html="status.raw_html" :emoji="status.emojis" :handle-links="true" - :hide-mentions="hideMentions" :greentext="mergedConfig.greentext" :attentions="status.attentions" @parseReady="onParseReady" diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index 9059642e..184f2783 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -31,8 +31,7 @@ const StatusContent = { 'focused', 'noHeading', 'fullContent', - 'singleLine', - 'hideMentions' + 'singleLine' ], computed: { hideAttachments () { diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 86b3c52a..9db176f0 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -8,11 +8,13 @@ :status="status" :compact="compact" :single-line="singleLine" - :hide-mentions="hideMentions" @parseReady="$emit('parseReady', $event)" >
- {{ user.description }} -
@@ -281,9 +264,10 @@ .user-card { position: relative; - &:hover .Avatar { + &:hover { --_still-image-img-visibility: visible; --_still-image-canvas-visibility: hidden; + --_still-image-label-visibility: hidden; } .panel-heading { @@ -327,12 +311,12 @@ } } - p { - margin-bottom: 0; - } - &-bio { text-align: center; + display: block; + line-height: 18px; + padding: 1em; + margin: 0; a { color: $fallback--link; @@ -344,11 +328,6 @@ vertical-align: middle; max-width: 100%; max-height: 400px; - - &.emoji { - width: 32px; - height: 32px; - } } } @@ -450,13 +429,6 @@ // big one z-index: 1; - img { - width: 26px; - height: 26px; - vertical-align: middle; - object-fit: contain - } - .top-line { display: flex; } @@ -469,12 +441,7 @@ margin-right: 1em; font-size: 15px; - img { - object-fit: contain; - height: 16px; - width: 16px; - vertical-align: middle; - } + --emoji-size: 14px; } .bottom-line { diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index c0b55a6c..7a475609 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -4,6 +4,7 @@ import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import Conversation from '../conversation/conversation.vue' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import RichContent from 'src/components/rich_content/rich_content.jsx' import List from '../list/list.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' import { library } from '@fortawesome/fontawesome-svg-core' @@ -164,7 +165,8 @@ const UserProfile = { FriendList, FollowCard, TabSwitcher, - Conversation + Conversation, + RichContent } } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index aef897ae..726216ff 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -20,20 +20,24 @@ :key="index" class="user-profile-field" > - + > +${data.join('')}
` const compwrap = (...data) => `${data.join('')}` -const removedMentionSpan = '' +const mentionsLine = (times) => [ + ')', () => { - const html = [ - p('How are you doing today, fine gentlemen?'), - p( - makeMention('John'), - makeMention('Josh'), - makeMention('Jeremy') - ) - ].join('') - const expected = [ - p( - 'How are you doing today, fine gentlemen?' - ), - // TODO fix this extra line somehow? - p() - ].join('') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('replaces mentions at the end of the hellpost if hideMentions=false (
)', () => {
+ it('replaces mentions at the end of the hellpost', () => {
const html = [
p('How are you doing today, fine gentlemen?'),
p(
@@ -157,184 +104,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: false,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('removes mentions from the end of the hellpost (
)', () => {
- const html = [
- 'How are you doing today, fine gentlemen?',
- [
- makeMention('John'),
- makeMention('Josh'),
- makeMention('Jeremy')
- ].join('')
- ].join('
')
- const expected = [
- 'How are you doing today, fine gentlemen?',
- // TODO fix this extra line somehow?
- '
'
- ].join('')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('removes mentions from the end of the hellpost (\\n)', () => {
- const html = [
- 'How are you doing today, fine gentlemen?',
- [
- makeMention('John'),
- makeMention('Josh'),
- makeMention('Jeremy')
- ].join('')
- ].join('\n')
- const expected = [
- 'How are you doing today, fine gentlemen?',
- // TODO fix this extra line somehow?
- ''
- ].join('\n')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('Does not remove mentions in the middle or at the end of text string', () => {
- const html = [
- [
- makeMention('Jack'),
- 'let\'s meet up with ',
- makeMention('Janet')
- ].join(''),
- [
- 'cc: ',
- makeMention('John'),
- makeMention('Josh'),
- makeMention('Jeremy')
- ].join('')
- ].join('\n')
- const expected = [
- [
- removedMentionSpan,
- 'let\'s meet up with ',
- stubMention('Janet')
- ].join(''),
- [
- 'cc: ',
- stubMention('John'),
- stubMention('Josh'),
- stubMention('Jeremy')
- ].join('')
- ].join('\n')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('removes mentions from the end if there\'s only one first mention', () => {
- const html = [
- p(
- makeMention('Todd'),
- 'so anyway you are wrong'
- ),
- p(
- makeMention('Tom'),
- makeMention('Trace'),
- makeMention('Theodor')
- )
- ].join('')
- const expected = [
- p(
- removedMentionSpan,
- 'so anyway you are wrong'
- ),
- // TODO fix this extra line somehow?
- p()
- ].join('')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('does not remove mentions from the end if there\'s more than one first mention', () => {
- const html = [
- p(
- makeMention('Zacharie'),
- makeMention('Zinaide'),
- 'you guys have cool names, and so do these guys: '
- ),
- p(
- makeMention('Watson'),
- makeMention('Wallace'),
- makeMention('Wakamoto')
- )
- ].join('')
- const expected = [
- p(
- removedMentionSpan,
- removedMentionSpan,
- 'you guys have cool names, and so do these guys: '
- ),
- p(
- lastMentions(
- stubMention('Watson'),
- stubMention('Wallace'),
- stubMention('Wakamoto')
- )
- )
- ].join('')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
+ attentions,
handleLinks: true,
greentext: true,
emoji: [],
@@ -362,7 +132,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: true,
+ attentions,
handleLinks: false,
greentext: true,
emoji: [],
@@ -386,7 +156,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: true,
+ attentions,
handleLinks: false,
greentext: true,
emoji: [],
@@ -406,7 +176,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: true,
+ attentions,
handleLinks: false,
greentext: false,
emoji: [],
@@ -427,7 +197,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: true,
+ attentions,
handleLinks: false,
greentext: false,
emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
@@ -444,7 +214,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: true,
+ attentions,
handleLinks: false,
greentext: false,
emoji: [],
@@ -464,7 +234,7 @@ describe('RichContent', () => {
].join('\n')
const expected = [
'>quote',
- stubMention('lol'),
+ mentionsLine(1),
'>quote',
'>quote'
].join('\n')
@@ -472,6 +242,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
+ attentions,
handleLinks: true,
greentext: true,
emoji: [],
@@ -496,127 +267,14 @@ describe('RichContent', () => {
const expected = [
'Bruh',
'Bruh',
- [
- stubMention('foo'),
- stubMention('bar'),
- stubMention('baz')
- ].join(''),
+ mentionsLine(3),
'Bruh'
].join('
')
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: true,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('Don\'t remove last mention if it\'s the only one', () => {
- const html = [
- 'Bruh',
- 'Bruh',
- makeMention('foo'),
- makeMention('bar'),
- makeMention('baz')
- ].join('
')
- const expected = [
- 'Bruh',
- 'Bruh',
- stubMention('foo'),
- stubMention('bar'),
- stubMention('baz')
- ].join('
')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('Don\'t remove last mentions if there are more than one first mention - remove first instead', () => {
- const html = [
- [
- makeMention('foo'),
- makeMention('bar')
- ].join(' '),
- 'Bruh',
- 'Bruh',
- [
- makeMention('foo'),
- makeMention('bar'),
- makeMention('baz')
- ].join(' ')
- ].join('\n')
-
- const expected = [
- [
- removedMentionSpan,
- removedMentionSpan,
- 'Bruh' // Due to trim we remove extra newline
- ].join(''),
- 'Bruh',
- lastMentions([
- stubMention('foo'),
- stubMention('bar'),
- stubMention('baz')
- ].join(' '))
- ].join('\n')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
- handleLinks: true,
- greentext: true,
- emoji: [],
- html
- }
- })
-
- expect(wrapper.html()).to.eql(compwrap(expected))
- })
-
- it('Remove last mentions if there\'s just one first mention - remove all', () => {
- const html = [
- [
- makeMention('foo')
- ].join(' '),
- 'Bruh',
- 'Bruh',
- [
- makeMention('foo'),
- makeMention('bar'),
- makeMention('baz')
- ].join(' ')
- ].join('\n')
-
- const expected = [
- [
- removedMentionSpan,
- 'Bruh' // Due to trim we remove extra newline
- ].join(''),
- 'Bruh\n' // Can't remove this one yet
- ].join('\n')
-
- const wrapper = shallowMount(RichContent, {
- localVue,
- propsData: {
- hideMentions: true,
+ attentions,
handleLinks: true,
greentext: true,
emoji: [],
@@ -652,7 +310,7 @@ describe('RichContent', () => {
const wrapper = shallowMount(RichContent, {
localVue,
propsData: {
- hideMentions: true,
+ attentions,
handleLinks: true,
greentext: true,
emoji: [],
@@ -664,53 +322,7 @@ describe('RichContent', () => {
})
it('rich contents of a mention are handled properly', () => {
- const html = [
- p(
- 'Testing'
- ),
- p(
- '',
- '',
- 'https://',
- '',
- 'lol.tld/',
- '',
- '',
- ''
- )
- ].join('')
- const expected = [
- p(
- 'Testing'
- ),
- p(
- '