From e83e25eb72d43f472d2168294e6f25f5e43d8ea5 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 24 Mar 2022 13:54:10 +0000 Subject: [PATCH 01/22] Apply tweaks to Thread list as per design spec --- res/css/views/right_panel/_ThreadPanel.scss | 5 ++--- res/css/views/rooms/_EventTile.scss | 10 +++++----- src/components/views/rooms/EventTile.tsx | 17 +++++++++-------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index cb438c47068..2172deaca33 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -99,11 +99,10 @@ limitations under the License. } .mx_AutoHideScrollbar { - background: #fff; background-color: $background; border-radius: 8px; - width: calc(100% - 16px); - padding-right: 16px; + width: calc(100% - 24px); + padding-right: 24px; } &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 310465837bd..8b4b63d5afd 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -61,11 +61,11 @@ $left-gutter: 64px; &[data-shape=ThreadsList][data-notification]::before { content: ""; position: absolute; - width: 8px; - height: 8px; + width: 10px; + height: 10px; border-radius: 50%; - right: -16px; - top: 6px; + right: -25px; // center it in the gutter (16px margin + 4px padding + half 10px width) + top: 4px; left: auto; } @@ -857,7 +857,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); padding-top: 0; .mx_EventTile_avatar { - top: -4px; + top: 0; left: 0; } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index b73ec31e293..2e7d7be1e43 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1146,16 +1146,17 @@ export class UnwrappedEventTile extends React.Component { ? undefined : this.props.mxEvent.getId(); - let avatar; - let sender; - let avatarSize; - let needsSenderProfile; + let avatar: JSX.Element; + let sender: JSX.Element; + let avatarSize: number; + let needsSenderProfile: boolean; - if (this.context.timelineRenderingType === TimelineRenderingType.Notification || - this.context.timelineRenderingType === TimelineRenderingType.ThreadsList - ) { + if (this.context.timelineRenderingType === TimelineRenderingType.Notification) { avatarSize = 24; needsSenderProfile = true; + } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { + avatarSize = 32; + needsSenderProfile = true; } else if (tileHandler === 'messages.RoomCreate' || isBubbleMessage) { avatarSize = 0; needsSenderProfile = false; @@ -1436,7 +1437,7 @@ export class UnwrappedEventTile extends React.Component { "data-shape": this.context.timelineRenderingType, "data-self": isOwnEvent, "data-has-reply": !!replyChain, - "data-notification": this.state.threadNotification, + "data-notification": this.state.threadNotification || "total", "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), "onClick": (ev: MouseEvent) => { From 2bac9bab0d209b97045519ba0bf30a5e8b21c059 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 24 Mar 2022 15:50:38 +0000 Subject: [PATCH 02/22] Apply tweaks to Thread view as per design spec --- res/css/views/rooms/_EventTile.scss | 3 ++- src/components/views/context_menus/MessageContextMenu.tsx | 8 ++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 8b4b63d5afd..2cf86a0ba53 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -972,7 +972,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_RedactedBody, .mx_MPollBody, .mx_ReplyChain_wrapper { - margin-left: 36px; + margin-left: 48px; margin-right: 8px; .mx_EventTile_content, @@ -1006,6 +1006,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); align-items: center; .mx_DisambiguatedProfile { + margin-left: 8px; flex: 1; } } diff --git a/src/components/views/context_menus/MessageContextMenu.tsx b/src/components/views/context_menus/MessageContextMenu.tsx index 4f08139840d..39225a0a5d9 100644 --- a/src/components/views/context_menus/MessageContextMenu.tsx +++ b/src/components/views/context_menus/MessageContextMenu.tsx @@ -44,7 +44,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { ChevronFace, IPosition } from '../../structures/ContextMenu'; import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext'; import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload"; -import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore'; import EndPollDialog from '../dialogs/EndPollDialog'; import { isPollEnded } from '../messages/MPollBody'; import { createMapSiteLink } from "../messages/MLocationBody"; @@ -472,14 +471,11 @@ export default class MessageContextMenu extends React.Component timelineRenderingType === TimelineRenderingType.Thread || timelineRenderingType === TimelineRenderingType.ThreadsList ); - const isThreadRootEvent = isThread && this.props.mxEvent?.getThread()?.rootEvent === this.props.mxEvent; + const isThreadRootEvent = isThread && this.props.mxEvent.isThreadRoot; - const isMainSplitTimelineShown = !WidgetLayoutStore.instance.hasMaximisedWidget( - MatrixClientPeg.get().getRoom(mxEvent.getRoomId()), - ); const commonItemsList = ( - { (isThreadRootEvent && isMainSplitTimelineShown) && Date: Fri, 25 Mar 2022 09:28:14 +0000 Subject: [PATCH 03/22] Apply tweaks to Thread list empty state and dropdown as per design spec --- res/css/views/right_panel/_ThreadPanel.scss | 19 ++++++--- src/components/structures/ThreadPanel.tsx | 46 +++++++++++++++------ src/i18n/strings/en_EN.json | 4 +- 3 files changed, 50 insertions(+), 19 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 2172deaca33..25e7bc5bb93 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -189,10 +189,6 @@ limitations under the License. float: right; } - .mx_ThreadPanel_dropdown[aria-expanded=true]::before { - transform: rotate(180deg); - } - .mx_MessageTimestamp { font-size: $font-12px; color: $secondary-content; @@ -271,19 +267,23 @@ limitations under the License. h2 { color: $primary-content; - font-weight: 600; + font-weight: $font-semi-bold; font-size: $font-18px; + margin-top: 24px; + margin-bottom: 10px; } p { font-size: $font-15px; color: $secondary-content; + margin: 10px 0; } button { border: none; background: none; color: $accent; + font-size: $font-15px; &:hover, &:active { @@ -291,6 +291,15 @@ limitations under the License. cursor: pointer; } } + + .mx_ThreadPanel_empty_tip { + font-size: $font-12px; + line-height: $font-15px; + + > b { + font-weight: $font-semi-bold; + } + } } .mx_ThreadPanel_largeIcon { diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 5d272827e91..86d3f2471d2 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -101,7 +101,7 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: { isSelected={opt === value} />); const contextMenu = menuDisplayed ? void; } -const EmptyThread: React.FC = ({ filterOption, showAllThreadsCallback }) => { +const EmptyThread: React.FC = ({ hasThreads, filterOption, showAllThreadsCallback }) => { + let body: JSX.Element; + if (hasThreads) { + body = <> +

+ { _t("Reply to an ongoing thread or use “%(replyInThread)s” " + + "when hovering over a message to start a new one.", { + replyInThread: _t("Reply in thread"), + }) } +

+

+ { /* Always display that paragraph to prevent layout shift when hiding the button */ } + { (filterOption === ThreadFilterType.My) + ? + : <>  + } +

+ ; + } else { + body = <> +

{ _t("Threads help keep your conversations on-topic and easy to track.") }

+

+ { _t('Tip: Use "Reply in thread" when hovering over a message.', {}, { + b: sub => { sub }, + }) } +

+ ; + } + return ; }; @@ -246,6 +265,7 @@ const ThreadPanel: React.FC = ({ timelineSet={timelineSet} showUrlPreview={false} // No URL previews at the threads list level empty={ 0} filterOption={filterOption} showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)} />} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 6d6699045c3..7664291bce0 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3084,8 +3084,10 @@ "My threads": "My threads", "Shows all threads you've participated in": "Shows all threads you've participated in", "Show:": "Show:", - "Keep discussions organised with threads": "Keep discussions organised with threads", "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.": "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.", + "Threads help keep your conversations on-topic and easy to track.": "Threads help keep your conversations on-topic and easy to track.", + "Tip: Use \"Reply in thread\" when hovering over a message.": "Tip: Use \"Reply in thread\" when hovering over a message.", + "Keep discussions organised with threads": "Keep discussions organised with threads", "Show all threads": "Show all threads", "Thread": "Thread", "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.", From 6ded4e76be447ae5d86147b3f7b8963a13bacdc7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 25 Mar 2022 09:47:42 +0000 Subject: [PATCH 04/22] Apply tweaks to Thread list as per design spec --- res/css/views/right_panel/_ThreadPanel.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 25e7bc5bb93..0868e6d527d 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -156,6 +156,10 @@ limitations under the License. .mx_EventTile_e2eIcon { left: 8px; } + + &:hover .mx_EventTile_line { + box-shadow: unset !important; // don't show the verification left stroke in the thread list + } } .mx_MessageComposer { From 73349bac17fa39521e5ef71d8a750d7cc939d3da Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 25 Mar 2022 09:48:49 +0000 Subject: [PATCH 05/22] Remove debug --- src/components/views/rooms/EventTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 2e7d7be1e43..bbf1e26607a 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1437,7 +1437,7 @@ export class UnwrappedEventTile extends React.Component { "data-shape": this.context.timelineRenderingType, "data-self": isOwnEvent, "data-has-reply": !!replyChain, - "data-notification": this.state.threadNotification || "total", + "data-notification": this.state.threadNotification, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), "onClick": (ev: MouseEvent) => { From 4123c100307a6a2818a831a707ff82a0e1da4711 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 25 Mar 2022 10:13:24 +0000 Subject: [PATCH 06/22] i18n --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7664291bce0..35a5785f347 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3085,10 +3085,10 @@ "Shows all threads you've participated in": "Shows all threads you've participated in", "Show:": "Show:", "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.": "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.", + "Show all threads": "Show all threads", "Threads help keep your conversations on-topic and easy to track.": "Threads help keep your conversations on-topic and easy to track.", "Tip: Use \"Reply in thread\" when hovering over a message.": "Tip: Use \"Reply in thread\" when hovering over a message.", "Keep discussions organised with threads": "Keep discussions organised with threads", - "Show all threads": "Show all threads", "Thread": "Thread", "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.", "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.", From 085809acb2135b6b5976746cbf771d16d3829d1c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 28 Mar 2022 14:09:34 +0100 Subject: [PATCH 07/22] More visual threads tweaks to match designs --- res/css/views/rooms/_EventTile.scss | 5 ++++- src/components/views/messages/TextualBody.tsx | 15 +++++++++------ src/components/views/rooms/EventTile.tsx | 17 ++++++++++++++--- 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2cf86a0ba53..d25568c9139 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -700,9 +700,12 @@ $left-gutter: 64px; .mx_ThreadSummaryIcon { font-size: $font-12px; color: $secondary-content; + margin-top: 8px; + margin-bottom: 8px; + &::before { vertical-align: middle; - margin-left: 8px; + margin-right: 8px; } } diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index 9ec9980fb83..cbc0ad4f5df 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -607,9 +607,14 @@ export default class TextualBody extends React.Component { if (this.props.highlightLink) { body = { body }; } else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") { - body = { body }; + body = ( + + { body } + + ); } let widgets; @@ -651,9 +656,7 @@ export default class TextualBody extends React.Component { ); } return ( -
+
{ body } { widgets }
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index bbf1e26607a..941d16e1c51 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -631,12 +631,22 @@ export class UnwrappedEventTile extends React.Component { } private renderThreadInfo(): React.ReactNode { + if (this.state.thread?.id === this.props.mxEvent.getId()) { + return ; + } + if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) { + if (this.props.highlightLink) { + return ( + + { _t("From a thread") } + + ); + } + return (

{ _t("From a thread") }

); - } else if (this.state.thread?.id === this.props.mxEvent.getId()) { - return ; } } @@ -1365,7 +1375,8 @@ export class UnwrappedEventTile extends React.Component {
,
- Date: Mon, 28 Mar 2022 18:19:46 +0100 Subject: [PATCH 08/22] Fix non-continuation gap in ThreadView --- res/css/views/rooms/_EventTile.scss | 2 +- src/components/views/rooms/EventTile.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index d25568c9139..2888cdf3552 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -921,7 +921,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_EventTile { display: flex; flex-direction: column; - padding-top: 0; + padding-top: 11px; // due to layout differences, this odd number matches the 18px padding-top of main tl events .mx_EventTile_line { padding-left: 0; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 941d16e1c51..11397fdf08a 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1110,6 +1110,7 @@ export class UnwrappedEventTile extends React.Component { let isContinuation = this.props.continuation; if (this.context.timelineRenderingType !== TimelineRenderingType.Room && this.context.timelineRenderingType !== TimelineRenderingType.Search && + this.context.timelineRenderingType !== TimelineRenderingType.Thread && this.props.layout !== Layout.Bubble ) { isContinuation = false; From 226ca2817ca4498d7417bf58f89e002e01b85d51 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 29 Mar 2022 09:41:04 +0100 Subject: [PATCH 09/22] Fix permalinks around wrong element in thread view --- src/components/views/rooms/EventTile.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 11397fdf08a..0aeb3884923 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1412,9 +1412,7 @@ export class UnwrappedEventTile extends React.Component {
,
{ avatar } - - { sender } - + { sender }
,
{ replyChain } @@ -1430,7 +1428,9 @@ export class UnwrappedEventTile extends React.Component { isSeeingThroughMessageHiddenForModeration={isSeeingThroughMessageHiddenForModeration} /> { actionBar } - { timestamp } + + { timestamp } +
, reactionsRow, ]); From dc7c08aef34423c4a87d8ef9ec41302616f125e4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 29 Mar 2022 14:28:35 +0100 Subject: [PATCH 10/22] Align edit composer in thread view properly --- res/css/views/rooms/_EventTile.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2888cdf3552..71a61fcd5d4 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1003,7 +1003,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); a { flex: 1; - min-width: none; + min-width: unset; max-width: 100%; display: flex; align-items: center; @@ -1029,4 +1029,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_MessageComposer_sendMessage { margin-right: 0; } + + .mx_EditMessageComposer { + margin-left: 38px; // align start of first letter with that of the event body + } + + .mx_EditMessageComposer_buttons { + padding-right: 11px; // align with right edge of input + margin-right: 0; // align with right edge of background + } } From c8b8496123870210f5bcb5e59d7b5704fe79a2c3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 29 Mar 2022 14:33:02 +0100 Subject: [PATCH 11/22] More alignment tweaks --- res/css/views/rooms/_EventTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 71a61fcd5d4..5e4a1ebdff8 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -975,7 +975,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_RedactedBody, .mx_MPollBody, .mx_ReplyChain_wrapper { - margin-left: 48px; + margin-left: 40px; margin-right: 8px; .mx_EventTile_content, @@ -1031,7 +1031,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); } .mx_EditMessageComposer { - margin-left: 38px; // align start of first letter with that of the event body + margin-left: 30px !important; // align start of first letter with that of the event body } .mx_EditMessageComposer_buttons { From a2b155d2c59f6ed4254de3c29141186395b80e80 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 29 Mar 2022 15:13:22 +0100 Subject: [PATCH 12/22] Fix border-radius inconsistency in thread list --- res/css/views/rooms/_EventTile.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 5e4a1ebdff8..8cc76baeaa9 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -813,9 +813,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_EventTile[data-shape=ThreadsList] { --topOffset: 20px; --leftOffset: 46px; + $borderRadius: 8px; margin: var(--topOffset) 16px var(--topOffset) 0; - border-radius: 8px; + border-radius: $borderRadius; display: flex; flex-flow: wrap; @@ -895,7 +896,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); width: 100%; box-sizing: border-box; padding-left: var(--leftOffset) !important; - padding-bottom: 0; + border-radius: $borderRadius !important; // override 4px } .mx_MessageTimestamp { From dd964a645540fe43637f09ba58ec0e92eecc7f87 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 30 Mar 2022 10:40:15 +0100 Subject: [PATCH 13/22] Fix issue with thread summary sender wrap --- res/css/views/rooms/_EventTile.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 8cc76baeaa9..44c004620a6 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -785,6 +785,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_ThreadInfo_sender { font-weight: $font-semi-bold; line-height: $threadInfoLineHeight; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .mx_ThreadInfo_content { From b5ed48b5d928ab3744c1516bb4e7ef426e9969ce Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 30 Mar 2022 10:56:36 +0100 Subject: [PATCH 14/22] Leave appropriate space to right of thread summary for the read receipt column --- res/css/views/rooms/_EventTile.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 44c004620a6..57da1fe3448 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -79,7 +79,6 @@ $left-gutter: 64px; .mx_ThreadInfo, .mx_ThreadSummaryIcon { - margin-right: 110px; margin-left: 64px; } @@ -308,10 +307,16 @@ $left-gutter: 64px; .mx_RoomView_timeline_rr_enabled { .mx_EventTile[data-layout=group] { + .mx_ThreadInfo, + .mx_ThreadSummaryIcon, .mx_EventTile_line { /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ margin-right: 110px; } + + .mx_ThreadInfo { + max-width: min(calc(100% - $left-gutter - 110px), 600px); // leave space on both left & right gutters + } } // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter } @@ -711,7 +716,7 @@ $left-gutter: 64px; .mx_ThreadInfo { min-width: 267px; - max-width: min(calc(100% - $left-gutter - 64px), 600px); // leave space on both left & right gutters + max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters width: fit-content; height: 40px; position: relative; From b2fed2c469a51b61b29e44e5592cb9c42e0cf49f Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 5 Apr 2022 09:57:50 +0100 Subject: [PATCH 15/22] Change threads list sender avatar size --- src/components/views/rooms/EventTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 0aeb3884923..e811a375084 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1166,7 +1166,7 @@ export class UnwrappedEventTile extends React.Component { avatarSize = 24; needsSenderProfile = true; } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) { - avatarSize = 32; + avatarSize = 36; needsSenderProfile = true; } else if (tileHandler === 'messages.RoomCreate' || isBubbleMessage) { avatarSize = 0; From 0c38ecddaa6fa18cee706fb2af9c92bd437e7ab4 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 5 Apr 2022 09:59:36 +0100 Subject: [PATCH 16/22] Change thread list right gutter size --- res/css/views/right_panel/_ThreadPanel.scss | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 0868e6d527d..6c45a6b76e6 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -20,20 +20,23 @@ limitations under the License. .mx_BaseCard_header { margin-bottom: 12px; + .mx_BaseCard_close, .mx_BaseCard_back { width: 24px; height: 24px; } + .mx_BaseCard_back { left: -4px; } + .mx_BaseCard_close { right: -4px; } } - .mx_BaseCard_back ~ .mx_ThreadPanel__header { + .mx_BaseCard_back~.mx_ThreadPanel__header { width: calc(100% - 60px); margin-left: 30px; } @@ -66,6 +69,7 @@ limitations under the License. --size: 24px; width: var(--size); height: var(--size); + &::after { mask-size: var(--size); mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); @@ -102,7 +106,7 @@ limitations under the License. background-color: $background; border-radius: 8px; width: calc(100% - 24px); - padding-right: 24px; + padding-right: 18px; } &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper { @@ -124,13 +128,15 @@ limitations under the License. padding-right: 0; } - .mx_EventTile, .mx_GenericEventListSummary { + .mx_EventTile, + .mx_GenericEventListSummary { // Account for scrollbar when hovering padding-top: 0; .mx_ThreadInfo { position: relative; padding-right: 11px; + &::after { content: ''; display: block; @@ -300,7 +306,7 @@ limitations under the License. font-size: $font-12px; line-height: $font-15px; - > b { + >b { font-weight: $font-semi-bold; } } @@ -329,6 +335,7 @@ limitations under the License. .mx_ContextualMenu_wrapper.mx_ThreadPanel__header { .mx_ContextualMenu { position: initial; + span:first-of-type { font-weight: $font-semi-bold; font-size: inherit; @@ -348,6 +355,7 @@ limitations under the License. left: auto; right: 22px; border-bottom-color: $quinary-content; + &::after { content: ""; border: inherit; @@ -369,10 +377,12 @@ limitations under the License. &:hover { background-color: $event-selected-color; } + &[aria-checked="true"] { :first-child { margin-left: -20px; } + :first-child::before { content: ""; width: 12px; From fe6a937a9c8467cfb5c65946f3e0074873b7870b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 5 Apr 2022 10:05:14 +0100 Subject: [PATCH 17/22] Fix contextual menu gutter --- src/components/structures/ThreadPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 86d3f2471d2..5e38c5eaef9 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -101,7 +101,7 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: { isSelected={opt === value} />); const contextMenu = menuDisplayed ? Date: Tue, 5 Apr 2022 10:06:33 +0100 Subject: [PATCH 18/22] Fix vertical spacing between message tiles --- res/css/views/rooms/_EventTile.scss | 42 +++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 57da1fe3448..e30ffda2787 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -43,9 +43,11 @@ $left-gutter: 64px; right: 0; } } + .mx_EventTile_receiptSent::before { mask-image: url('$(res)/img/element-icons/circle-sent.svg'); } + .mx_EventTile_receiptSending::before { mask-image: url('$(res)/img/element-icons/circle-sending.svg'); } @@ -114,7 +116,8 @@ $left-gutter: 64px; .mx_DisambiguatedProfile { color: $primary-content; font-size: $font-14px; - display: inline-block; /* anti-zalgo, with overflow hidden */ + display: inline-block; + /* anti-zalgo, with overflow hidden */ overflow: hidden; padding-bottom: 0px; padding-top: 0px; @@ -141,7 +144,8 @@ $left-gutter: 64px; clear: both; } - .mx_EventTile_line, .mx_EventTile_reply { + .mx_EventTile_line, + .mx_EventTile_reply { position: relative; padding-left: $left-gutter; border-radius: 8px; @@ -154,7 +158,7 @@ $left-gutter: 64px; /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ - &.mx_EventTile_selected > .mx_EventTile_line { + &.mx_EventTile_selected>.mx_EventTile_line { box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent; background-color: $event-selected-color; } @@ -271,7 +275,7 @@ $left-gutter: 64px; } .mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line, -.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { +.mx_GenericEventListSummary:not([data-layout=bubble])>.mx_GenericEventListSummary_unstyledList>.mx_EventTile_info .mx_EventTile_avatar~.mx_EventTile_line { padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter } @@ -301,12 +305,13 @@ $left-gutter: 64px; transition-duration: 0.5s; } -.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content { +.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content { filter: none; } .mx_RoomView_timeline_rr_enabled { .mx_EventTile[data-layout=group] { + .mx_ThreadInfo, .mx_ThreadSummaryIcon, .mx_EventTile_line { @@ -318,6 +323,7 @@ $left-gutter: 64px; max-width: min(calc(100% - $left-gutter - 110px), 600px); // leave space on both left & right gutters } } + // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter } @@ -413,7 +419,8 @@ $left-gutter: 64px; background-repeat: no-repeat; background-size: contain; - &::before, &::after { + &::before, + &::after { content: ""; display: block; position: absolute; @@ -438,6 +445,7 @@ $left-gutter: 64px; mask-image: url('$(res)/img/e2e/warning.svg'); background-color: $alert; } + opacity: 1; } @@ -446,6 +454,7 @@ $left-gutter: 64px; mask-image: url('$(res)/img/e2e/normal.svg'); background-color: $header-panel-text-primary-color; } + opacity: 1; } @@ -484,7 +493,8 @@ $left-gutter: 64px; color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) font-size: $font-14px; - pre, code { + pre, + code { font-family: $monospace-font-family !important; background-color: $codeblock-background-color; } @@ -497,7 +507,7 @@ $left-gutter: 64px; pre code { white-space: pre; // we want code blocks to be scrollable and not wrap - > * { + >* { display: inline; } } @@ -519,6 +529,7 @@ $left-gutter: 64px; float: left; margin: 0 0.5em 0 -1.5em; color: gray; + & span { text-align: right; display: block; @@ -552,18 +563,22 @@ $left-gutter: 64px; height: 19px; background-color: $message-action-bar-fg-color; } + .mx_EventTile_buttonBottom { top: 33px; } + .mx_EventTile_copyButton { mask-image: url($copy-button-url); } + .mx_EventTile_collapseButton { mask-size: 75%; mask-position: center; mask-repeat: no-repeat; mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); } + .mx_EventTile_expandButton { mask-size: 75%; mask-position: center; @@ -679,10 +694,13 @@ $left-gutter: 64px; } @media only screen and (max-width: 480px) { - .mx_EventTile_line, .mx_EventTile_reply { + + .mx_EventTile_line, + .mx_EventTile_reply { padding-left: 0; margin-right: 0; } + .mx_EventTile_content { margin-top: 10px; margin-right: 0; @@ -764,7 +782,8 @@ $left-gutter: 64px; } } - &:hover, &:focus { + &:hover, + &:focus { cursor: pointer; border-color: $quinary-content; @@ -859,6 +878,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); &::after { content: unset; } + margin-bottom: 0; } @@ -930,7 +950,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_EventTile { display: flex; flex-direction: column; - padding-top: 11px; // due to layout differences, this odd number matches the 18px padding-top of main tl events + padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events .mx_EventTile_line { padding-left: 0; From 94cbc48587d7cd6d4d65d857a36f71f2727acc3b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 5 Apr 2022 10:17:08 +0100 Subject: [PATCH 19/22] fix left gutter on thread view --- res/css/views/rooms/_EventTile.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index e30ffda2787..d6c7f42f4b5 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1004,7 +1004,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_RedactedBody, .mx_MPollBody, .mx_ReplyChain_wrapper { - margin-left: 40px; + margin-left: 48px; margin-right: 8px; .mx_EventTile_content, @@ -1028,7 +1028,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); .mx_EventTile_senderDetails { display: flex; align-items: center; - gap: calc(6px + $selected-message-border-width); + gap: calc(14px + $selected-message-border-width); a { flex: 1; From 5acbff37e96aa7679a71c5d046be2d41664438e7 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 5 Apr 2022 10:26:03 +0100 Subject: [PATCH 20/22] fix from a thread layout and alignment --- res/css/views/rooms/_EventTile.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index d6c7f42f4b5..a6a329affb8 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -715,20 +715,22 @@ $left-gutter: 64px; mask-position: center; height: 18px; min-width: 18px; - background-color: $secondary-content; + background-color: $secondary-content !important; mask-repeat: no-repeat; mask-size: contain; } .mx_ThreadSummaryIcon { + display: inline-block; font-size: $font-12px; - color: $secondary-content; + color: $secondary-content !important; margin-top: 8px; margin-bottom: 8px; &::before { vertical-align: middle; margin-right: 8px; + margin-top: -2px; } } From ac55055cf3693cd86b4a453c22dc311be672ad23 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 5 Apr 2022 10:30:04 +0100 Subject: [PATCH 21/22] Fix thread info content --- res/css/views/rooms/_EventTile.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 69b7c3247ef..645b0bd80a1 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -824,6 +824,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); font-size: $font-12px; line-height: $threadInfoLineHeight; color: $secondary-content; + flex: 1; } .mx_ThreadInfo_avatar { From 7493935e5132225beb67241590a0e4dde2167bfd Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 5 Apr 2022 10:44:52 +0100 Subject: [PATCH 22/22] lint fix --- res/css/views/right_panel/_ThreadPanel.scss | 2 +- res/css/views/rooms/_EventTile.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 6c45a6b76e6..280404a6497 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -36,7 +36,7 @@ limitations under the License. } } - .mx_BaseCard_back~.mx_ThreadPanel__header { + .mx_BaseCard_back ~ .mx_ThreadPanel__header { width: calc(100% - 60px); margin-left: 30px; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 645b0bd80a1..ccd6b88d024 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -158,7 +158,7 @@ $left-gutter: 64px; /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ - &.mx_EventTile_selected>.mx_EventTile_line { + &.mx_EventTile_selected > .mx_EventTile_line { box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent; background-color: $event-selected-color; } @@ -275,7 +275,7 @@ $left-gutter: 64px; } .mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line, -.mx_GenericEventListSummary:not([data-layout=bubble])>.mx_GenericEventListSummary_unstyledList>.mx_EventTile_info .mx_EventTile_avatar~.mx_EventTile_line { +.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter } @@ -305,7 +305,7 @@ $left-gutter: 64px; transition-duration: 0.5s; } -.mx_EventTile_spoiler.visible>.mx_EventTile_spoiler_content { +.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content { filter: none; }