diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 1dbe1cad..1913479f 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -1,6 +1,7 @@ @import '../../_variables.scss'; .chat-message-wrapper { + &.hovered-message-chain { .animated.Avatar { canvas { @@ -40,6 +41,12 @@ .chat-message { display: flex; padding-bottom: 0.5em; + + .status-body:hover { + --_still-image-img-visibility: visible; + --_still-image-canvas-visibility: hidden; + --_still-image-label-visibility: hidden; + } } .avatar-wrapper { diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue index b16ed39d..a92028e8 100644 --- a/src/components/chat_title/chat_title.vue +++ b/src/components/chat_title/chat_title.vue @@ -1,5 +1,4 @@ @@ -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 { diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 5209907d..55eea195 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -87,7 +87,7 @@ const MentionLink = { classnames () { return [ { - '-you': this.isYou, + '-you': this.isYou && this.shouldBoldenYou, '-highlighted': this.highlight }, this.highlightType @@ -115,6 +115,12 @@ const MentionLink = { shouldShowAvatar () { return this.mergedConfig.mentionLinkShowAvatar }, + shouldShowYous () { + return this.mergedConfig.mentionLinkShowYous + }, + shouldBoldenYou () { + return this.mergedConfig.mentionLinkBoldenYou + }, shouldFadeDomain () { return this.mergedConfig.mentionLinkFadeDomain }, diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 03306dcc..a4326296 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -3,12 +3,13 @@ .MentionLink { position: relative; white-space: normal; - display: inline-block; + display: inline; color: var(--link); + word-break: normal; & .new, & .original { - display: inline-block; + display: inline; border-radius: 2px; } @@ -38,8 +39,8 @@ user-select: all; } - .short.-with-tooltip, - .you { + & .short.-with-tooltip, + & .you { user-select: none; } @@ -48,6 +49,10 @@ white-space: nowrap; } + .shortName { + white-space: normal; + } + .new { &.-you { & .shortName, diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index ac20eb5a..3562f511 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -9,9 +9,7 @@ class="original" target="_blank" v-html="content" - /> - - - {{ $t('status.you') }} + /> {{ $t('status.you') }} - - +
  • + + {{ $t('settings.show_yous') }} + +
    • +
  • + + {{ $t('settings.mention_link_bolden_you') }} + +
    • diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 71305dd7..2028ade9 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -5,6 +5,8 @@ $status-margin: 0.75em; .Status { min-width: 0; white-space: normal; + word-wrap: break-word; + word-break: break-word; &:hover { --_still-image-img-visibility: visible; @@ -164,18 +166,24 @@ $status-margin: 0.75em; position: relative; align-content: baseline; font-size: 12px; - line-height: 160%; + margin-top: 0.2em; + line-height: 130%; max-width: 100%; align-items: stretch; } & .reply-to-popover, - & .reply-to-no-popover { + & .reply-to-no-popover, + & .mentions { min-width: 0; margin-right: 0.4em; flex-shrink: 0; } + .reply-glued-label { + margin-right: 0.5em; + } + .reply-to-popover { .reply-to:hover::before { content: ''; @@ -209,7 +217,6 @@ $status-margin: 0.75em; & .reply-to { white-space: nowrap; position: relative; - padding-right: 0.25em; } & .mentions-text, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 2684e415..3bb29db6 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -227,7 +227,7 @@ > /\d$/.test(str) ? str + 'px' : str + return { + height: this.height ? appendPx(this.height) : null, + width: this.width ? appendPx(this.width) : null + } } }, methods: { diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index 0623b42e..cca75fcb 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -2,6 +2,7 @@
    diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index f4b93c9a..8706d0ff 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -22,7 +22,12 @@ />
    - + {{ user.screen_name_ui }}
    @@ -48,6 +53,8 @@ .user-list-popover { padding: 0.5em; + --emoji-size: 16px; + .user-list-row { padding: 0.25em; display: flex; diff --git a/src/i18n/en.json b/src/i18n/en.json index 84d1d314..716fff66 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -493,8 +493,10 @@ "mention_link_show_tooltip": "Show full user names as tooltip for remote users", "mention_link_show_avatar": "Show user avatar beside the link", "mention_link_fade_domain": "Fade domains (e.g. @example.org in @foo@example.org)", + "mention_link_bolden_you": "Highlight mention of you when you are mentioned", "fun": "Fun", "greentext": "Meme arrows", + "show_yous": "Show (You)s", "notifications": "Notifications", "notification_setting_filters": "Filters", "notification_setting_block_from_strangers": "Block notifications from users who you do not follow", diff --git a/src/modules/config.js b/src/modules/config.js index 9f2d4ef3..20979174 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -76,6 +76,8 @@ export const defaultState = { mentionLinkShowTooltip: undefined, // instance default mentionLinkShowAvatar: undefined, // instance default mentionLinkFadeDomain: undefined, // instance default + mentionLinkShowYous: undefined, // instance default + mentionLinkBoldenYou: undefined, // instance default hidePostStats: undefined, // instance default hideUserStats: undefined, // instance default virtualScrolling: undefined, // instance default diff --git a/src/modules/instance.js b/src/modules/instance.js index d686f258..1abd784f 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -25,6 +25,8 @@ const defaultState = { mentionLinkShowTooltip: true, mentionLinkShowAvatar: false, mentionLinkFadeDomain: true, + mentionLinkShowYous: false, + mentionLinkBoldenYou: true, hideFilteredStatuses: false, // bad name: actually hides posts of muted USERS hideMutedPosts: false, diff --git a/src/services/html_converter/html_tree_converter.service.js b/src/services/html_converter/html_tree_converter.service.js index 6a8796c4..247a8173 100644 --- a/src/services/html_converter/html_tree_converter.service.js +++ b/src/services/html_converter/html_tree_converter.service.js @@ -1,4 +1,5 @@ import { getTagName } from './utility.service.js' +import { unescape } from 'lodash' /** * This is a not-so-tiny purpose-built HTML parser/processor. This parses html @@ -49,7 +50,7 @@ export const convertHtmlToTree = (html = '') => { const handleOpen = (tag) => { const curBuf = getCurrentBuffer() - const newLevel = [tag, []] + const newLevel = [unescape(tag), []] levels.push(newLevel) curBuf.push(newLevel) } diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index f6c478a9..30c66a33 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -350,7 +350,6 @@ describe('RichContent', () => { '', '', '', - ' ', '', // v-if placeholder, mentionlink's "new" (i.e. rich) display '    ', '', // 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( + '', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + ' ', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + '' + ), + p( + 'Testing' + ) + ].join('') + const expected = [ + p( + '', + '', + '', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + '', // v-if placeholder, mentionlink's "new" (i.e. rich) display + '', + '', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + '', // v-if placeholder, mentionlink's "new" (i.e. rich) display + '', + '', // v-if placeholder, mentionsline's extra mentions and stuff + '', + '' + ), + ' ', + 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 = [ '

    ',