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

Merge branch 'better-still-emoji' into shigusegubu

Browse source 
* better-still-emoji:
  cleanup
  restructure and tests
  fix tags gluing
  fix color of reply row, fix overflow in status-popover
  fix long post fader
  change how "first" line is determined. Allow one mention in the beginning for hellthread style
  cleanup
This commit is contained in:
Henry Jameson 2021-06-12 19:56:44 +03:00
commit 95bc2532df
17 changed files with 503 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/chat_list_item/chat_list_item.js
View file

@ -40,12 +40,11 @@ const ChatListItem = {
const message = this.chat.lastMessage
const messageEmojis = message ? message.emojis : []
const isYou = message && message.account_id === this.currentUser.id
const content = message ? (this.attachmentInfo || message.content_raw) : ''
const content = message ? (this.attachmentInfo || message.content) : ''
const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
return {
summary: '',
emojis: messageEmojis,
statusnet_html: messagePreview,
raw_html: messagePreview,
text: messagePreview,
attachments: []

3
src/components/chat_message/chat_message.js
View file

@ -58,8 +58,7 @@ const ChatMessage = {
return {
summary: '',
emojis: this.message.emojis,
raw_html: this.message.content_raw,
statusnet_html: this.message.content,
raw_html: this.message.content,
text: this.message.content,
attachments: this.message.attachments
}

23
src/components/rich_content/rich_content.jsx
View file

@ -1,6 +1,7 @@
import Vue from 'vue'
import { unescape, flattenDeep } from 'lodash'
import { convertHtmlToTree, getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/html_tree_converter.service.js'
import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
import StillImage from 'src/components/still-image/still-image.vue'
import MentionLink from 'src/components/mention_link/mention_link.vue'
@ -31,18 +32,12 @@ export default Vue.component('RichContent', {
required: false,
type: Boolean,
default: false
},
// Whether to hide last mentions (hellthreads)
hideMentions: {
required: false,
type: Boolean,
default: false
}
},
// NEVER EVER TOUCH DATA INSIDE RENDER
render (h) {
// Pre-process HTML
const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.hideMentions)
const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.handleLinks)
const firstMentions = [] // Mentions that appear in the beginning of post body
const lastTags = [] // Tags that appear at the end of post body
const writtenMentions = [] // All mentions that appear in post body
@ -126,7 +121,7 @@ export default Vue.component('RichContent', {
switch (Tag) {
case 'span': // replace images with StillImage
if (attrs['class'] && attrs['class'].includes('lastMentions')) {
if (firstMentions.length > 0) {
if (firstMentions.length > 1) {
break
} else {
return ''
@ -141,6 +136,7 @@ export default Vue.component('RichContent', {
if (attrs['class'] && attrs['class'].includes('mention')) {
return renderMention(attrs, children, encounteredText)
} else if (attrs['class'] && attrs['class'].includes('hashtag')) {
encounteredText = true
return item // We'll handle it later
} else {
attrs.target = '_blank'
@ -167,7 +163,7 @@ export default Vue.component('RichContent', {
// Handle text nodes - just add emoji
if (typeof item === 'string') {
const emptyText = item.trim() === ''
if (emptyText) return encounteredTextReverse ? item : item.trim()
if (emptyText) return item
if (!encounteredTextReverse) encounteredTextReverse = true
return item
} else if (Array.isArray(item)) {
@ -227,10 +223,12 @@ const getLinkData = (attrs, children, index) => {
*
* @param {String} html - raw HTML to process
* @param {Boolean} greentext - whether to enable greentexting or not
* @param {Boolean} handleLinks - whether to handle links or not
*/
export const preProcessPerLine = (html, greentext) => {
export const preProcessPerLine = (html, greentext, handleLinks) => {
const lastMentions = []
let nonEmptyIndex = 0
const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => {
// Going over each line in reverse to detect last mentions,
// keeping non-text stuff as-is
@ -262,6 +260,7 @@ export const preProcessPerLine = (html, greentext) => {
const tag = getTagName(opener)
// If we have a link we probably have mentions
if (tag === 'a') {
if (!handleLinks) return [opener, children, closer]
const attrs = getAttrs(opener)
if (attrs['class'] && attrs['class'].includes('mention')) {
// Got mentions
@ -295,7 +294,7 @@ export const preProcessPerLine = (html, greentext) => {
const result = [...tree].map(process)
// Only check last (first since list is reversed) line
if (hasMentions && !hasLooseText && index === 0) {
if (handleLinks && hasMentions && !hasLooseText && nonEmptyIndex++ === 0) {
let mentionIndex = 0
const process = (item) => {
if (Array.isArray(item)) {

4
src/components/status/status.scss
View file

@ -4,6 +4,7 @@ $status-margin: 0.75em;
.Status {
min-width: 0;
white-space: normal;
&:hover {
--_still-image-img-visibility: visible;
@ -166,6 +167,7 @@ $status-margin: 0.75em;
line-height: 160%;
max-width: 100%;
align-items: stretch;
z-index: 2;
}
& .reply-to-popover,
@ -211,7 +213,9 @@ $status-margin: 0.75em;
padding-right: 0.25em;
}
& .mentions-text,
& .reply-to-text {
color: var(--faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

4
src/components/status/status.vue
View file

@ -247,7 +247,7 @@
flip="horizontal"
/>
<span
class="faint-link reply-to-text"
class="reply-to-text"
>
{{ $t('status.reply_to') }}
</span>
@ -281,7 +281,7 @@
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
<span
class="faint-link mentions-text"
class="mentions-text"
>
{{ $t('status.mentions') }}
</span>

4
src/components/status_body/status_body.js
View file

@ -1,5 +1,5 @@
import fileType from 'src/services/file_type/file_type.service'
import RichContent, { getHeadTailLinks } from 'src/components/rich_content/rich_content.jsx'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
@ -53,7 +53,7 @@ const StatusContent = {
// Using max-height + overflow: auto for status components resulted in false positives
// very often with japanese characters, and it was very annoying.
tallStatus () {
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.status.text.length / 80
return lengthScore > 20
},
longSubject () {

3
src/components/status_body/status_body.scss
View file

@ -62,7 +62,7 @@
overflow-y: hidden;
z-index: 1;
.text-wrapper {
.rich-content-wrapper {
min-height: 0;
mask:
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
@ -123,5 +123,4 @@
vertical-align: middle;
object-fit: contain;
}
}

8
src/components/status_body/status_body.vue
View file

@ -38,7 +38,10 @@
>
{{ $t("general.show_more") }}
</button>
<span v-if="!hideSubjectStatus && !(singleLine && status.summary_html)">
<span
v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
class="rich-content-wrapper"
>
<MentionsLine
v-if="!hideMentions && firstMentions && firstMentions.length > 0"
:mentions="firstMentions"
@ -49,12 +52,11 @@
:html="status.raw_html"
:emoji="status.emojis"
:handle-links="true"
:hide-mentions="hideMentions"
:greentext="mergedConfig.greentext"
@parseReady="setHeadTailLinks"
/>
<MentionsLine
v-if="!hideMentions && lastMentions.length > 0 && firstMentions.length === 0"
v-if="!hideMentions && lastMentions.length > 0 && firstMentions.length <= 1"
:mentions="lastMentions"
/>
</span>