hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'fix-mentions-new-bugs' into shigusegubu

Browse source 
* fix-mentions-new-bugs:
  new unit tests
  fix unit tests
  enable link handling in user bios to fix links not having _blank
  add emoji to chat titles
  use rich content in interaction lists
This commit is contained in:
Henry Jameson 2022-02-19 23:05:03 +02:00
commit 5076c96b89
4 changed files with 93 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/chat_title/chat_title.vue
View file

@ -1,5 +1,4 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div
class="chat-title"
:title="title"
@ -14,12 +13,13 @@
height="23px"
/>
</router-link>
<span
<RichContent
class="username"
v-html="htmlTitle"
:title="'@'+user.screen_name_ui"
:html="htmlTitle"
:emoji="user.emoji"
/>
</div>
<!-- eslint-enable vue/no-v-html -->
</template>
<script src="./chat_title.js"></script>
@ -34,6 +34,8 @@
white-space: nowrap;
align-items: center;
--emoji-size: 14px;
.username {
max-width: 100%;
text-overflow: ellipsis;
@ -41,14 +43,6 @@
display: inline;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
.emoji {
width: 14px;
height: 14px;
vertical-align: middle;
object-fit: contain
}
}
.Avatar {

1
src/components/user_card/user_card.vue
View file

@ -275,6 +275,7 @@
class="user-card-bio"
:html="user.description_html"
:emoji="user.emoji"
:handle-links="true"
/>
</div>
</div>

9
src/components/user_list_popover/user_list_popover.vue
View file

@ -22,7 +22,12 @@
/>
<div class="user-list-names">
<!-- eslint-disable vue/no-v-html -->
<span v-html="user.name_html" />
<RichContent
class="username"
:title="'@'+user.screen_name_ui"
:html="user.name_html"
:emoji="user.emoji"
/>
<!-- eslint-enable vue/no-v-html -->
<span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
</div>
@ -48,6 +53,8 @@
.user-list-popover {
padding: 0.5em;
--emoji-size: 16px;
.user-list-row {
padding: 0.25em;
display: flex;

79
test/unit/specs/components/rich_content.spec.js
View file

@ -350,7 +350,6 @@ describe('RichContent', () => {
'<span>',
'</span>',
'</a>',
' ',
'<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
'</span>',
'<!---->', // v-if placeholder, mentionsline's extra mentions and stuff
@ -375,6 +374,84 @@ describe('RichContent', () => {
expect(wrapper.html()).to.eql(compwrap(expected))
})
it('rich contents of nested mentions are handled properly', () => {
attentions.push({ statusnet_profile_url: 'lol' })
const html = [
p(
'<span class="poast-style">',
'<a href="lol" class="mention">',
'<span>',
'https://</span>',
'<span>',
'lol.tld/</span>',
'<span>',
'</span>',
'</a>',
' ',
'<a href="lol" class="mention">',
'<span>',
'https://</span>',
'<span>',
'lol.tld/</span>',
'<span>',
'</span>',
'</a>',
'</span>'
),
p(
'Testing'
)
].join('')
const expected = [
p(
'<span class="poast-style">',
'<span class="MentionsLine">',
'<span class="MentionLink mention-link">',
'<a href="lol" target="_blank" class="original">',
'<span>',
'https://</span>',
'<span>',
'lol.tld/</span>',
'<span>',
'</span>',
'</a>',
'<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
'</span>',
'<span class="MentionLink mention-link">',
'<a href="lol" target="_blank" class="original">',
'<span>',
'https://</span>',
'<span>',
'lol.tld/</span>',
'<span>',
'</span>',
'</a>',
'<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
'</span>',
'<!---->', // v-if placeholder, mentionsline's extra mentions and stuff
'</span>',
'</span>'
),
' ',
p(
'Testing'
)
].join('')
const wrapper = mount(RichContent, {
localVue,
propsData: {
attentions,
handleLinks: true,
greentext: true,
emoji: [],
html
}
})
expect(wrapper.html()).to.eql(compwrap(expected))
})
it('rich contents of a link are handled properly', () => {
const html = [
'<p>',