Squashed commit of the following:

commit d361a4d7dc
Author: Henry Jameson <me@hjkos.com>
Date:   Fri Feb 4 14:20:56 2022 +0200

    fix overflows

commit 571e73a346
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 23:13:28 2022 +0200

    better approach to unescaping

commit 39ecb33883
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:58:12 2022 +0200

    fix amps in links

commit 0f01931309
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:52:41 2022 +0200

    make chat messages behave same as posts for animated gifs

commit a9830ff491
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:50:32 2022 +0200

    support width/height img attributes

commit 9a6363431d
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:41:38 2022 +0200

    lint

commit ea6114f63c
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:36:13 2022 +0200

    better phrasing?

commit bfb3a4364b
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:34:57 2022 +0200

    options to disable (You)s and highlighting of yourself

commit 6d3229b1a1
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:23:28 2022 +0200

    fix poast mentions tripping

commit 06042569f1
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:10:45 2022 +0200

    fix alignment issues

Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
Sam Therapy 2022-02-05 14:57:00 -06:00
parent ab8629f2d8
commit 4b1a1c7db9
Signed by: sam
GPG key ID: 4D8B07C18F31ACBD
17 changed files with 70 additions and 21 deletions

View file

@ -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 {

View file

@ -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
},

View file

@ -3,12 +3,12 @@
.MentionLink {
position: relative;
white-space: normal;
display: inline-block;
display: inline;
color: var(--link);
& .new,
& .original {
display: inline-block;
display: inline;
border-radius: 2px;
}
@ -38,8 +38,8 @@
user-select: all;
}
.short.-with-tooltip,
.you {
& .short.-with-tooltip,
& .you {
user-select: none;
}
@ -48,6 +48,10 @@
white-space: nowrap;
}
.shortName {
white-space: normal;
}
.new {
&.-you {
& .shortName,

View file

@ -45,8 +45,8 @@
v-html="'@' + serverName"
/></span>
<span
v-if="isYou"
class="you"
v-if="isYou && shouldShowYous"
:class="{ '-you': shouldBoldenYou }"
>{{ $t('status.you') }}</span>
<!-- eslint-enable vue/no-v-html -->
</a>

View file

@ -1,11 +1,8 @@
.MentionsLine {
word-break: break-all;
.showMoreLess {
white-space: normal;
color: var(--link);
}
.fullExtraMentions,
.mention-link:not(:last-child) {
margin-right: 0.25em;
}
}

View file

@ -33,7 +33,7 @@
@import '../../_variables.scss';
.popover-trigger-button {
display: block;
display: inline-block;
}
.popover {

View file

@ -120,7 +120,8 @@ export default Vue.component('RichContent', {
// don't include spaces when processing mentions - we'll include them
// in MentionsLine
lastSpacing = item
return currentMentions !== null ? item.trim() : item
// Don't remove last space in a container (fixes poast mentions)
return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
}
currentMentions = null

View file

@ -194,6 +194,11 @@
</ChoiceSetting>
</li>
</ul>
<li>
<BooleanSetting path="mentionLinkShowYous">
{{ $t('settings.show_yous') }}
</BooleanSetting>
</li>
<li>
<ChoiceSetting
id="mentionLinkDisplay"
@ -228,6 +233,11 @@
{{ $t('settings.mention_link_fade_domain') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="mentionLinkBoldenYou">
{{ $t('settings.mention_link_bolden_you') }}
</BooleanSetting>
</li>
</ul>
</ul>
</div>

View file

@ -3,6 +3,8 @@
.Status {
min-width: 0;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
&:hover {
--_still-image-img-visibility: visible;
@ -155,18 +157,24 @@
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: '';
@ -200,7 +208,6 @@
& .reply-to {
white-space: nowrap;
position: relative;
padding-right: 0.25em;
}
& .mentions-text,

View file

@ -252,7 +252,7 @@
>
<span
v-if="isReply"
class="glued-label"
class="glued-label reply-glued-label"
>
<StatusPopover
v-if="!isPreview"

View file

@ -9,7 +9,7 @@
& .text,
& .summary {
font-family: var(--postFont, sans-serif);
white-space: pre-wrap;
white-space: normal;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;

View file

@ -5,7 +5,9 @@ const StillImage = {
'mimetype',
'imageLoadError',
'imageLoadHandler',
'alt'
'alt',
'height',
'width'
],
data () {
return {
@ -15,6 +17,13 @@ const StillImage = {
computed: {
animated () {
return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
},
style () {
const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
return {
height: this.height ? appendPx(this.height) : null,
width: this.width ? appendPx(this.width) : null
}
}
},
methods: {

View file

@ -2,6 +2,7 @@
<div
class="still-image"
:class="{ animated: animated }"
:style="style"
>
<canvas
v-if="animated"

View file

@ -503,9 +503,11 @@
"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",
"fork_changes": "Fork changes",
"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",

View file

@ -83,6 +83,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

View file

@ -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,

View file

@ -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)
}