From fa03943f59822a13a8a794466903f39054357230 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 17 Jul 2021 16:42:24 +0200 Subject: [PATCH 01/27] Give reply tile an avatar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 25 ++++++++++++++---------- src/components/views/rooms/ReplyTile.tsx | 19 ++++++++++++++---- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index f3e204e415a..71bff153ef4 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -103,17 +103,22 @@ limitations under the License. padding-top: 0; } - .mx_SenderProfile { - font-size: $font-14px; - line-height: $font-17px; + .mx_ReplyTile_sender { + display: flex; + gap: 4px; - display: inline-block; // anti-zalgo, with overflow hidden - padding: 0; - margin: 0; + .mx_SenderProfile { + font-size: $font-14px; + line-height: $font-17px; - // truncate long display names - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + display: inline-block; // anti-zalgo, with overflow hidden + padding: 0; + margin: 0; + + // truncate long display names + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } } diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 18b30d33d5a..30d3c4b395a 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -27,6 +27,7 @@ import { EventType, MsgType } from 'matrix-js-sdk/src/@types/event'; import { replaceableComponent } from '../../../utils/replaceableComponent'; import { getEventDisplayInfo } from '../../../utils/EventUtils'; import MFileBody from "../messages/MFileBody"; +import MemberAvatar from '../avatars/MemberAvatar'; interface IProps { mxEvent: MatrixEvent; @@ -116,10 +117,20 @@ export default class ReplyTile extends React.PureComponent { ); if (needsSenderProfile) { - sender = ; + sender = ( +
+ + +
+ ); } const msgtypeOverrides = { From 1173e42c3bd830532d84a9f0ede4b534039e6cb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 17 Jul 2021 17:39:14 +0200 Subject: [PATCH 02/27] Improve `in reply to` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_ReplyThread.scss | 36 +++++++++++++++++++ src/components/views/elements/ReplyThread.tsx | 29 +++++++-------- src/i18n/strings/en_EN.json | 3 +- 3 files changed, 51 insertions(+), 17 deletions(-) diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss index 44532ea6a74..488ed849124 100644 --- a/res/css/views/elements/_ReplyThread.scss +++ b/res/css/views/elements/_ReplyThread.scss @@ -24,37 +24,73 @@ limitations under the License. .mx_ReplyThread_show { cursor: pointer; + + &:hover { + filter: brightness(1.5); + } } &.mx_ReplyThread_color1 { border-left-color: $username-variant1-color; + + .mx_ReplyThread_show { + color: $username-variant1-color; + } } &.mx_ReplyThread_color2 { border-left-color: $username-variant2-color; + + .mx_ReplyThread_show { + color: $username-variant2-color; + } } &.mx_ReplyThread_color3 { border-left-color: $username-variant3-color; + + .mx_ReplyThread_show { + color: $username-variant3-color; + } } &.mx_ReplyThread_color4 { border-left-color: $username-variant4-color; + + .mx_ReplyThread_show { + color: $username-variant4-color; + } } &.mx_ReplyThread_color5 { border-left-color: $username-variant5-color; + + .mx_ReplyThread_show { + color: $username-variant5-color; + } } &.mx_ReplyThread_color6 { border-left-color: $username-variant6-color; + + .mx_ReplyThread_show { + color: $username-variant6-color; + } } &.mx_ReplyThread_color7 { border-left-color: $username-variant7-color; + + .mx_ReplyThread_show { + color: $username-variant7-color; + } } &.mx_ReplyThread_color8 { border-left-color: $username-variant8-color; + + .mx_ReplyThread_show { + color: $username-variant8-color; + } } } diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx index 0eb795e2579..adafc874617 100644 --- a/src/components/views/elements/ReplyThread.tsx +++ b/src/components/views/elements/ReplyThread.tsx @@ -20,7 +20,6 @@ import { _t } from '../../../languageHandler'; import dis from '../../../dispatcher/dispatcher'; import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; -import SettingsStore from "../../../settings/SettingsStore"; import { Layout } from "../../../settings/Layout"; import escapeHtml from "escape-html"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -31,7 +30,6 @@ import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import Spinner from './Spinner'; import ReplyTile from "../rooms/ReplyTile"; -import Pill from './Pill'; import { Room } from 'matrix-js-sdk/src/models/room'; interface IProps { @@ -333,21 +331,20 @@ export default class ReplyThread extends React.Component { ; } else if (this.state.loadedEv) { const ev = this.state.loadedEv; - const room = this.context.getRoom(ev.getRoomId()); + const senderName = ev.sender ? ev.sender.name : _t('Someone'); + const text = this.state.events[0].getSender() === ev.getSender() + ? _t( + 'In reply to themselves', + { }, + { 'a': (sub) => { sub } }, + ) + : _t( + 'In reply to %(senderName)s', + { senderName }, + { 'a': (sub) => { sub } }, + ); header =
- { - _t('In reply to ', {}, { - 'a': (sub) => { sub }, - 'pill': ( - - ), - }) - } + { text }
; } else if (this.state.loading) { header = ; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2790e17eed9..0854aa2d3f7 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2056,7 +2056,8 @@ "Custom level": "Custom level", "QR Code": "QR Code", "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.", - "In reply to ": "In reply to ", + "In reply to themselves": "In reply to themselves", + "In reply to %(senderName)s": "In reply to %(senderName)s", "Room address": "Room address", "e.g. my-room": "e.g. my-room", "Some characters not allowed": "Some characters not allowed", From 1823d301fe50fc9bf068ae8a389b9b398e3aac6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 09:38:03 +0200 Subject: [PATCH 03/27] Drop `In reply to` for `Expand thread` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyThread.tsx | 23 +++++++------------ src/i18n/strings/en_EN.json | 3 +-- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx index adafc874617..88eb86b8eaa 100644 --- a/src/components/views/elements/ReplyThread.tsx +++ b/src/components/views/elements/ReplyThread.tsx @@ -330,21 +330,14 @@ export default class ReplyThread extends React.Component { } ; } else if (this.state.loadedEv) { - const ev = this.state.loadedEv; - const senderName = ev.sender ? ev.sender.name : _t('Someone'); - const text = this.state.events[0].getSender() === ev.getSender() - ? _t( - 'In reply to themselves', - { }, - { 'a': (sub) => { sub } }, - ) - : _t( - 'In reply to %(senderName)s', - { senderName }, - { 'a': (sub) => { sub } }, - ); - header =
- { text } + header =
+ { + _t( + 'Expand thread', + {}, + { 'a': (sub) => { sub } }, + ) + }
; } else if (this.state.loading) { header = ; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0854aa2d3f7..aa99765768c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2056,8 +2056,7 @@ "Custom level": "Custom level", "QR Code": "QR Code", "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.", - "In reply to themselves": "In reply to themselves", - "In reply to %(senderName)s": "In reply to %(senderName)s", + "Expand thread": "Expand thread", "Room address": "Room address", "e.g. my-room": "e.g. my-room", "Some characters not allowed": "Some characters not allowed", From f5947d89beed24061af9e32eacd1d4b82097d4e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 09:45:13 +0200 Subject: [PATCH 04/27] Fix avatar alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 71bff153ef4..1563a05bff9 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -105,11 +105,11 @@ limitations under the License. .mx_ReplyTile_sender { display: flex; + align-items: center; gap: 4px; .mx_SenderProfile { font-size: $font-14px; - line-height: $font-17px; display: inline-block; // anti-zalgo, with overflow hidden padding: 0; From 48ecd173f04fd2758a5ed6d7e4249ede9c97d14b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 17:26:00 +0200 Subject: [PATCH 05/27] Fix default avatar alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 1563a05bff9..b48c76a3dc5 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -120,5 +120,9 @@ limitations under the License. white-space: nowrap; text-overflow: ellipsis; } + + .mx_BaseAvatar { + line-height: 14px; // To match size + } } } From 115ef89457bdd7078eda998a5498f1dea290ef34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 19 Jul 2021 18:36:11 +0200 Subject: [PATCH 06/27] Simplifie code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyThread.tsx | 16 +++++++--------- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx index 88eb86b8eaa..6962c5384b7 100644 --- a/src/components/views/elements/ReplyThread.tsx +++ b/src/components/views/elements/ReplyThread.tsx @@ -330,15 +330,13 @@ export default class ReplyThread extends React.Component { }
; } else if (this.state.loadedEv) { - header =
- { - _t( - 'Expand thread', - {}, - { 'a': (sub) => { sub } }, - ) - } -
; + header = ( +
+ + { _t("Expand thread") } + +
+ ); } else if (this.state.loading) { header = ; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index aa99765768c..eaf44f94ee4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2056,7 +2056,7 @@ "Custom level": "Custom level", "QR Code": "QR Code", "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.", - "Expand thread": "Expand thread", + "Expand thread": "Expand thread", "Room address": "Room address", "e.g. my-room": "e.g. my-room", "Some characters not allowed": "Some characters not allowed", From 447ffc0e51c239e182ca6cb231a5dcf78e77e181 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 19 Jul 2021 18:59:20 +0200 Subject: [PATCH 07/27] Simplifie some more code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_ReplyThread.scss | 50 +++++------------------- 1 file changed, 10 insertions(+), 40 deletions(-) diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss index 488ed849124..95f3c037bcc 100644 --- a/res/css/views/elements/_ReplyThread.scss +++ b/res/css/views/elements/_ReplyThread.scss @@ -21,9 +21,11 @@ limitations under the License. margin-bottom: 8px; padding-left: 10px; border-left: 4px solid $button-bg-color; + border-left-color: var(--username-color); .mx_ReplyThread_show { cursor: pointer; + color: var(--username-color); &:hover { filter: brightness(1.5); @@ -31,66 +33,34 @@ limitations under the License. } &.mx_ReplyThread_color1 { - border-left-color: $username-variant1-color; - - .mx_ReplyThread_show { - color: $username-variant1-color; - } + --username-color: $username-variant1-color; } &.mx_ReplyThread_color2 { - border-left-color: $username-variant2-color; - - .mx_ReplyThread_show { - color: $username-variant2-color; - } + --username-color: $username-variant2-color; } &.mx_ReplyThread_color3 { - border-left-color: $username-variant3-color; - - .mx_ReplyThread_show { - color: $username-variant3-color; - } + --username-color: $username-variant3-color; } &.mx_ReplyThread_color4 { - border-left-color: $username-variant4-color; - - .mx_ReplyThread_show { - color: $username-variant4-color; - } + --username-color: $username-variant4-color; } &.mx_ReplyThread_color5 { - border-left-color: $username-variant5-color; - - .mx_ReplyThread_show { - color: $username-variant5-color; - } + --username-color: $username-variant5-color; } &.mx_ReplyThread_color6 { - border-left-color: $username-variant6-color; - - .mx_ReplyThread_show { - color: $username-variant6-color; - } + --username-color: $username-variant6-color; } &.mx_ReplyThread_color7 { - border-left-color: $username-variant7-color; - - .mx_ReplyThread_show { - color: $username-variant7-color; - } + --username-color: $username-variant7-color; } &.mx_ReplyThread_color8 { - border-left-color: $username-variant8-color; - - .mx_ReplyThread_show { - color: $username-variant8-color; - } + --username-color: $username-variant8-color; } } From ce5d9738d5f1b9e267ab7648d6bc0b56a5f6f27c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 23 Jul 2021 17:55:16 +0200 Subject: [PATCH 08/27] Make replies lighter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index b48c76a3dc5..556a4b15665 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -42,7 +42,7 @@ limitations under the License. display: flex; flex-direction: column; text-decoration: none; - color: $primary-fg-color; + color: $blockquote-fg-color; } .mx_RedactedBody { @@ -119,6 +119,10 @@ limitations under the License. overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + + .mx_SenderProfile_displayName { + font-weight: 400; + } } .mx_BaseAvatar { From 527ad32bc981d641d8a5c283dfacf6c92afb5170 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 23 Jul 2021 17:56:49 +0200 Subject: [PATCH 09/27] Give replies a hover effect MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 556a4b15665..f6581012d9f 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -20,6 +20,10 @@ limitations under the License. font-size: $font-14px; line-height: $font-16px; + &:hover { + filter: brightness(1.5); + } + &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before { mask-image: url("$(res)/img/element-icons/speaker.svg"); } From 2344ed84d1b46930a25889c33e67986778e085c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 23 Jul 2021 18:28:53 +0200 Subject: [PATCH 10/27] Revert changes to sender profile in replies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index f6581012d9f..a33f6504905 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -123,10 +123,6 @@ limitations under the License. overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - - .mx_SenderProfile_displayName { - font-weight: 400; - } } .mx_BaseAvatar { From f2d0a9a6c76c0b369b811bcc684b2cbd2a94c9c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 26 Jul 2021 09:03:30 +0200 Subject: [PATCH 11/27] Improve padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index a33f6504905..4071e7cec8a 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -47,6 +47,7 @@ limitations under the License. flex-direction: column; text-decoration: none; color: $blockquote-fg-color; + gap: 4px; } .mx_RedactedBody { @@ -70,7 +71,6 @@ limitations under the License. display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $reply-lines; - line-height: $line-height; .mx_EventTile_body.mx_EventTile_bigEmoji { line-height: $line-height !important; From 286b851295ceb15bb0f657c541fa13cc52d62557 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 28 Jul 2021 19:17:43 -0400 Subject: [PATCH 12/27] Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend --- res/css/views/rooms/_ReplyTile.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index c3076829b7e..35e039c1f25 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -63,12 +63,13 @@ limitations under the License. // We do reply size limiting with CSS to avoid duplicating the TextualBody component. .mx_EventTile_content { $reply-lines: 2; - $line-height: $font-22px; + $line-height: $font-18px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $reply-lines; + line-height: $line-height; .mx_EventTile_body.mx_EventTile_bigEmoji { line-height: $line-height !important; From 6c5b0c35b2b7c78754f9f236044dec4eebe67004 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 28 Jul 2021 19:18:47 -0400 Subject: [PATCH 13/27] Replace reply hover effect with a color change Signed-off-by: Robin Townsend --- res/css/views/rooms/_ReplyTile.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 35e039c1f25..a192e79aded 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -20,10 +20,6 @@ limitations under the License. font-size: $font-14px; line-height: $font-16px; - &:hover { - filter: brightness(1.5); - } - &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before { mask-image: url("$(res)/img/element-icons/speaker.svg"); } @@ -48,6 +44,10 @@ limitations under the License. text-decoration: none; color: $blockquote-fg-color; gap: 4px; + + &:hover { + color: $primary-fg-color; + } } .mx_RedactedBody { From 47b03dda5b11ba9b21cbcaf94e32cf6bffe8d5d2 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 28 Jul 2021 19:21:06 -0400 Subject: [PATCH 14/27] Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend --- res/css/views/elements/_ReplyThread.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_ReplyThread.scss b/res/css/views/elements/_ReplyThread.scss index 240758365d1..ae85778bd62 100644 --- a/res/css/views/elements/_ReplyThread.scss +++ b/res/css/views/elements/_ReplyThread.scss @@ -28,7 +28,7 @@ limitations under the License. color: var(--username-color); &:hover { - filter: brightness(1.5); + opacity: 0.65; } } From 2862e0e48b709772ad41175156278de2963b697f Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 28 Jul 2021 23:12:29 -0400 Subject: [PATCH 15/27] Simplify image and sticker reply designs Signed-off-by: Robin Townsend --- .../views/messages/MImageReplyBody.tsx | 19 ------------------- src/components/views/rooms/ReplyTile.tsx | 11 ++--------- 2 files changed, 2 insertions(+), 28 deletions(-) diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index 8d929202266..ee0a52b91ca 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.tsx @@ -16,11 +16,7 @@ limitations under the License. import React from "react"; import MImageBody from "./MImageBody"; -import { presentableTextForFile } from "../../../utils/FileUtils"; import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; -import SenderProfile from "./SenderProfile"; -import { EventType } from "matrix-js-sdk/src/@types/event"; -import { _t } from "../../../languageHandler"; const FORCED_IMAGE_HEIGHT = 44; @@ -33,12 +29,6 @@ export default class MImageReplyBody extends MImageBody { return children; } - // Don't show "Download this_file.png ..." - public getFileBody(): string { - const sticker = this.props.mxEvent.getType() === EventType.Sticker; - return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker); - } - render() { if (this.state.error !== null) { return super.render(); @@ -48,18 +38,9 @@ export default class MImageReplyBody extends MImageBody { const contentUrl = this.getContentUrl(); const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, FORCED_IMAGE_HEIGHT); - const fileBody = this.getFileBody(); - const sender = ; return
{ thumbnail } -
-
{ sender }
-
{ fileBody }
-
; } } diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index b5c2bcc2655..2084f4b2522 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -88,7 +88,6 @@ export default class ReplyTile extends React.PureComponent { render() { const mxEvent = this.props.mxEvent; const msgType = mxEvent.getContent().msgtype; - const evType = mxEvent.getType() as EventType; const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent); // This shouldn't happen: the caller should check we support this type @@ -115,14 +114,8 @@ export default class ReplyTile extends React.PureComponent { } let sender; - const needsSenderProfile = ( - !isInfoMessage && - msgType !== MsgType.Image && - tileHandler !== EventType.RoomCreate && - evType !== EventType.Sticker - ); - - if (needsSenderProfile) { + const hasOwnSender = isInfoMessage || tileHandler === EventType.RoomCreate; + if (!hasOwnSender) { sender = (
Date: Wed, 28 Jul 2021 23:39:13 -0400 Subject: [PATCH 16/27] Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend --- res/css/views/rooms/_ReplyTile.scss | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index a192e79aded..0857113edcc 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -28,14 +28,8 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/call/video-call.svg"); } - .mx_MFileBody { - .mx_MFileBody_info { - margin: 5px 0; - } - - .mx_MFileBody_download { - display: none; - } + .mx_MFileBody .mx_MFileBody_download { + display: none; } > a { @@ -51,12 +45,12 @@ limitations under the License. } .mx_RedactedBody { - padding: 4px 0 2px 20px; + line-height: $font-18px; &::before { height: 13px; width: 13px; - top: 5px; + top: 3px; } } From afd9600d4e96b1e532faf229779477e2278b7bfd Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 28 Jul 2021 23:40:11 -0400 Subject: [PATCH 17/27] Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend --- res/css/views/rooms/_ReplyTile.scss | 4 ---- src/components/views/rooms/ReplyTile.tsx | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 0857113edcc..5068c3e68b3 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -28,10 +28,6 @@ limitations under the License. mask-image: url("$(res)/img/element-icons/call/video-call.svg"); } - .mx_MFileBody .mx_MFileBody_download { - display: none; - } - > a { display: flex; flex-direction: column; diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index 2084f4b2522..15b1d9d15e4 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -134,7 +134,7 @@ export default class ReplyTile extends React.PureComponent { const msgtypeOverrides = { [MsgType.Image]: MImageReplyBody, - // Override audio and video body with file body. We also hide the download/decrypt button using CSS + // Override audio and video body with file body [MsgType.Audio]: MFileBody, [MsgType.Video]: MFileBody, }; From 16a79437aaaaf483350b98ba9adf4ed7779b3f1c Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 28 Jul 2021 23:41:16 -0400 Subject: [PATCH 18/27] Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend --- res/css/views/rooms/_ReplyTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 5068c3e68b3..7951324f43f 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -66,8 +66,8 @@ limitations under the License. font-size: $font-14px !important; // Override the big emoji override } - // Hide line numbers - .mx_EventTile_lineNumbers { + // Hide line numbers and edited indicator + .mx_EventTile_lineNumbers, .mx_EventTile_edited { display: none; } From 3bb7aff8e4d2037568d5eb281ecb59a859b15a69 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Wed, 28 Jul 2021 23:50:27 -0400 Subject: [PATCH 19/27] Fix i18n Signed-off-by: Robin Townsend --- src/i18n/strings/en_EN.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c328dcb6b43..9fb2db0c55c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1905,8 +1905,6 @@ "Invalid file%(extra)s": "Invalid file%(extra)s", "Error decrypting image": "Error decrypting image", "Show image": "Show image", - "Sticker": "Sticker", - "Image": "Image", "Join the conference at the top of this room": "Join the conference at the top of this room", "Join the conference from the room information card on the right": "Join the conference from the room information card on the right", "Video conference ended by %(senderName)s": "Video conference ended by %(senderName)s", From 9cd4187ac858608d008eafda569978527b8043b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 16 Oct 2021 16:40:44 +0200 Subject: [PATCH 20/27] "Expand thread" -> "Expand replies" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyThread.tsx | 4 ++-- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/ReplyThread.tsx b/src/components/views/elements/ReplyThread.tsx index 41eb33ef1cd..a843526b685 100644 --- a/src/components/views/elements/ReplyThread.tsx +++ b/src/components/views/elements/ReplyThread.tsx @@ -370,7 +370,7 @@ export default class ReplyThread extends React.Component { header = (
- { _t("Expand thread") } + { _t("Expand replies") }
); @@ -378,7 +378,7 @@ export default class ReplyThread extends React.Component { const eventId = ReplyThread.getParentEventId(this.props.parentEv); header =

- { _t("Expand thread") } + { _t("Expand replies") }

; } else if (this.state.loading) { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 89efe8fd4e0..18f02600d2f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2160,7 +2160,7 @@ "Custom level": "Custom level", "QR Code": "QR Code", "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.", - "Expand thread": "Expand thread", + "Expand replies": "Expand replies", "Room address": "Room address", "e.g. my-room": "e.g. my-room", "Some characters not allowed": "Some characters not allowed", From 3825fbe5fee82bcbad42ff96921dca2b4990f09d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 15 Nov 2021 18:20:41 +0100 Subject: [PATCH 21/27] Add a missing import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyChain.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index 6ddf98e6864..5bda8a9c9cc 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.tsx @@ -34,6 +34,7 @@ import Spinner from './Spinner'; import ReplyTile from "../rooms/ReplyTile"; import { Room } from 'matrix-js-sdk/src/models/room'; import { RelationType } from 'matrix-js-sdk/src/@types/event'; +import SettingsStore from "../../../settings/SettingsStore"; /** * This number is based on the previous behavior - if we have message of height From 7e2ed725f36767899e378b333778521ad3a5ad5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 19 Jan 2022 17:49:55 +0100 Subject: [PATCH 22/27] Remove unused import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyChain.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index fcd474b6b1e..c27fe8056d4 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.tsx @@ -35,7 +35,6 @@ import { PERMITTED_URL_SCHEMES } from "../../../HtmlUtils"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import Spinner from './Spinner'; import ReplyTile from "../rooms/ReplyTile"; -import SettingsStore from "../../../settings/SettingsStore"; import { ButtonEvent } from './AccessibleButton'; /** From 57ba2c48e27cbe9c21de5915e1f6175cf4de26a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 3 Mar 2022 20:00:35 +0100 Subject: [PATCH 23/27] Remove unused import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/ReplyChain.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index fb669ca28a3..fc894e44e46 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.tsx @@ -23,7 +23,7 @@ import { Relations } from 'matrix-js-sdk/src/models/relations'; import { _t } from '../../../languageHandler'; import dis from '../../../dispatcher/dispatcher'; -import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; +import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { Layout } from "../../../settings/enums/Layout"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; From 14f7f52b199720170a17d12ddb016785beee4105 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Mar 2022 16:12:23 +0100 Subject: [PATCH 24/27] Use `this.state` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/messages/MImageReplyBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index 5067e4c4d05..0c384e68011 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.tsx @@ -36,7 +36,7 @@ export default class MImageReplyBody extends MImageBody { } const content = this.props.mxEvent.getContent(); - const thumbnail = this.messageContent(this.getContentUrl(), this.getThumbUrl(), content, FORCED_IMAGE_HEIGHT); + const thumbnail = this.messageContent(this.state.contentUrl, this.state.thumbUrl, content, FORCED_IMAGE_HEIGHT); return
{ thumbnail } From 9a5e71c147057c25d29acef841fd66def2a5e07e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Mar 2022 16:13:44 +0100 Subject: [PATCH 25/27] Fix sender profile confusion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_ReplyTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 03fbe82dbc7..ef12ac71344 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -103,12 +103,12 @@ limitations under the License. padding-top: 0; } - .mx_DisambiguatedProfile { + .mx_ReplyTile_sender { display: flex; align-items: center; gap: 4px; - .mx_SenderProfile { + .mx_DisambiguatedProfile { font-size: $font-14px; display: inline-block; // anti-zalgo, with overflow hidden From e6197d88d36858256337d9d475200bc3a87417a3 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Thu, 17 Nov 2022 15:34:11 -0500 Subject: [PATCH 26/27] Implement suggested changes --- res/css/views/elements/_ReplyChain.pcss | 12 ++--- res/css/views/rooms/_ReplyTile.pcss | 5 +- src/components/views/elements/ReplyChain.tsx | 50 +++++++++++++++----- src/components/views/rooms/ReplyTile.tsx | 4 +- src/i18n/strings/en_EN.json | 3 +- 5 files changed, 50 insertions(+), 24 deletions(-) diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss index 72b9afc3c63..92683c5d5a2 100644 --- a/res/css/views/elements/_ReplyChain.pcss +++ b/res/css/views/elements/_ReplyChain.pcss @@ -21,13 +21,13 @@ limitations under the License. border-radius: 2px; // TODO: Use a spacing variable .mx_ReplyChain_show { - @mixin ButtonResetDefault; + &.mx_AccessibleButton_kind_link_inline { + color: unset; + white-space: nowrap; /* Enforce 'In reply to' to be a single line */ - cursor: pointer; - color: var(--username-color); - - &:hover { - opacity: 0.65; + &:hover { + color: $links; + } } } diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss index 1f8de8d80e1..fe6235eb1e8 100644 --- a/res/css/views/rooms/_ReplyTile.pcss +++ b/res/css/views/rooms/_ReplyTile.pcss @@ -31,8 +31,9 @@ limitations under the License. display: flex; flex-direction: column; text-decoration: none; - color: $tertiary-content; - gap: 4px; + color: $secondary-content; + transition: color ease 0.15s; + gap: 2px; &:hover { color: $primary-content; diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index 81f64f92bd5..6ecfc91d842 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.tsx @@ -24,13 +24,15 @@ import { MatrixClient } from 'matrix-js-sdk/src/client'; import { _t } from '../../../languageHandler'; import dis from '../../../dispatcher/dispatcher'; -import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; +import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; +import SettingsStore from "../../../settings/SettingsStore"; import { Layout } from "../../../settings/enums/Layout"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import { Action } from "../../../dispatcher/actions"; import Spinner from './Spinner'; import ReplyTile from "../rooms/ReplyTile"; -import { ButtonEvent } from './AccessibleButton'; +import Pill, { PillType } from './Pill'; +import AccessibleButton, { ButtonEvent } from './AccessibleButton'; import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply'; import RoomContext from "../../../contexts/RoomContext"; import { MatrixClientPeg } from '../../../MatrixClientPeg'; @@ -199,7 +201,7 @@ export default class ReplyChain extends React.Component { return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyChain"); } - public render(): JSX.Element { + render() { let header = null; if (this.state.err) { header =
@@ -209,19 +211,41 @@ export default class ReplyChain extends React.Component { }
; } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0])) { - header = ( -
- -
- ); + const ev = this.state.loadedEv; + const room = this.matrixClient.getRoom(ev.getRoomId()); + header =
+ { + _t('In reply to ', {}, { + 'a': (sub) => ( + + { sub } + + ), + 'pill': ( + + ), + }) + } +
; } else if (this.props.forExport) { const eventId = getParentEventId(this.props.parentEv); header =

- - { _t("Expand replies") } - + { _t("In reply to this message", + {}, + { a: (sub) => ( + { sub } + ), + }) + }

; } else if (this.state.loading) { header = ; diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index eafb00ab826..564310e4824 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -143,8 +143,8 @@ export default class ReplyTile extends React.PureComponent { In reply to ": "In reply to ", + "In reply to this message": "In reply to this message", "Room address": "Room address", "e.g. my-room": "e.g. my-room", "Missing domain separator e.g. (:domain.org)": "Missing domain separator e.g. (:domain.org)", From 06890506c15e7f1dd6e7b68ddf742d8e2cfca6f0 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Mon, 28 Nov 2022 17:00:29 -0500 Subject: [PATCH 27/27] Make "In reply to" the same color as reply previews --- res/css/views/elements/_ReplyChain.pcss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss index 92683c5d5a2..00334466009 100644 --- a/res/css/views/elements/_ReplyChain.pcss +++ b/res/css/views/elements/_ReplyChain.pcss @@ -22,11 +22,12 @@ limitations under the License. .mx_ReplyChain_show { &.mx_AccessibleButton_kind_link_inline { - color: unset; white-space: nowrap; /* Enforce 'In reply to' to be a single line */ + color: $secondary-content; + transition: color ease 0.15s; &:hover { - color: $links; + color: $primary-content; } } }