aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/chat_message/chat_message.scss7
-rw-r--r--src/components/chat_title/chat_title.vue18
-rw-r--r--src/components/mention_link/mention_link.js8
-rw-r--r--src/components/mention_link/mention_link.scss13
-rw-r--r--src/components/mention_link/mention_link.vue16
-rw-r--r--src/components/mentions_line/mentions_line.scss12
-rw-r--r--src/components/popover/popover.vue2
-rw-r--r--src/components/rich_content/rich_content.jsx3
-rw-r--r--src/components/settings_modal/tabs/general_tab.vue10
-rw-r--r--src/components/status/status.scss13
-rw-r--r--src/components/status/status.vue2
-rw-r--r--src/components/still-image/still-image.js11
-rw-r--r--src/components/still-image/still-image.vue1
-rw-r--r--src/components/user_card/user_card.vue1
-rw-r--r--src/components/user_list_popover/user_list_popover.vue9
15 files changed, 86 insertions, 40 deletions
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 @@
<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 {
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"
- />
- <!-- eslint-enable vue/no-v-html -->
- <span
+ /><!-- eslint-enable vue/no-v-html --><span
v-if="user"
class="new"
:style="style"
@@ -43,14 +41,12 @@
class="serverName"
:class="{ '-faded': shouldFadeDomain }"
v-html="'@' + serverName"
- /></span>
- <span
- v-if="isYou"
- class="you"
- >{{ $t('status.you') }}</span>
+ /></span><span
+ v-if="isYou && shouldShowYous"
+ :class="{ '-you': shouldBoldenYou }"
+ > {{ $t('status.you') }}</span>
<!-- eslint-enable vue/no-v-html -->
- </a>
- <span
+ </a><span
v-if="shouldShowTooltip"
class="full popover-default"
:class="[highlightType]"
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index b9d5c14a..9a622e75 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,11 +1,13 @@
.MentionsLine {
+ word-break: break-all;
+
+ .mention-link:not(:first-child)::before {
+ content: ' ';
+ }
+
.showMoreLess {
+ margin-left: 0.5em;
white-space: normal;
color: var(--link);
}
-
- .fullExtraMentions,
- .mention-link:not(:last-child) {
- margin-right: 0.25em;
- }
}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 2e78a09e..8588b351 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -33,7 +33,7 @@
@import '../../_variables.scss';
.popover-trigger-button {
- display: block;
+ display: inline-block;
}
.popover {
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index c0d20c5e..46bc661a 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -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
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 44b1ac92..eba3b268 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -148,6 +148,11 @@
</BooleanSetting>
</li>
<li>
+ <BooleanSetting path="mentionLinkShowYous">
+ {{ $t('settings.show_yous') }}
+ </BooleanSetting>
+ </li>
+ <li>
<ChoiceSetting
id="mentionLinkDisplay"
path="mentionLinkDisplay"
@@ -181,6 +186,11 @@
{{ $t('settings.mention_link_fade_domain') }}
</BooleanSetting>
</li>
+ <li>
+ <BooleanSetting path="mentionLinkBoldenYou">
+ {{ $t('settings.mention_link_bolden_you') }}
+ </BooleanSetting>
+ </li>
</ul>
</ul>
</div>
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 @@
>
<span
v-if="isReply"
- class="glued-label"
+ class="glued-label reply-glued-label"
>
<StatusPopover
v-if="!isPreview"
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 8044e994..d7abbcb5 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -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: {
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 @@
<div
class="still-image"
:class="{ animated: animated }"
+ :style="style"
>
<canvas
v-if="animated"
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5f957003..0708f387 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -275,6 +275,7 @@
class="user-card-bio"
:html="user.description_html"
:emoji="user.emoji"
+ :handle-links="true"
/>
</div>
</div>
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 @@
/>
<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;
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 14:15:21 +0000