Squashed commit of the following:
commitd361a4d7dc
Author: Henry Jameson <me@hjkos.com> Date: Fri Feb 4 14:20:56 2022 +0200 fix overflows commit571e73a346
Author: Henry Jameson <me@hjkos.com> Date: Thu Feb 3 23:13:28 2022 +0200 better approach to unescaping commit39ecb33883
Author: Henry Jameson <me@hjkos.com> Date: Thu Feb 3 22:58:12 2022 +0200 fix amps in links commit0f01931309
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 commita9830ff491
Author: Henry Jameson <me@hjkos.com> Date: Thu Feb 3 22:50:32 2022 +0200 support width/height img attributes commit9a6363431d
Author: Henry Jameson <me@hjkos.com> Date: Thu Feb 3 22:41:38 2022 +0200 lint commitea6114f63c
Author: Henry Jameson <me@hjkos.com> Date: Thu Feb 3 22:36:13 2022 +0200 better phrasing? commitbfb3a4364b
Author: Henry Jameson <me@hjkos.com> Date: Thu Feb 3 22:34:57 2022 +0200 options to disable (You)s and highlighting of yourself commit6d3229b1a1
Author: Henry Jameson <me@hjkos.com> Date: Thu Feb 3 22:23:28 2022 +0200 fix poast mentions tripping commit06042569f1
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:
parent
ab8629f2d8
commit
4b1a1c7db9
17 changed files with 70 additions and 21 deletions
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.popover-trigger-button {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.popover {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -252,7 +252,7 @@
|
|||
>
|
||||
<span
|
||||
v-if="isReply"
|
||||
class="glued-label"
|
||||
class="glued-label reply-glued-label"
|
||||
>
|
||||
<StatusPopover
|
||||
v-if="!isPreview"
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<div
|
||||
class="still-image"
|
||||
:class="{ animated: animated }"
|
||||
:style="style"
|
||||
>
|
||||
<canvas
|
||||
v-if="animated"
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue