diff --git a/res/css/_components.scss b/res/css/_components.scss index f318d88e3a..f0d78df5bc 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -192,7 +192,6 @@ @import "./views/messages/_CallEvent.scss"; @import "./views/messages/_CreateEvent.scss"; @import "./views/messages/_DateSeparator.scss"; -@import "./views/messages/_DisambiguatedProfile.scss"; @import "./views/messages/_EventTileBubble.scss"; @import "./views/messages/_HiddenBody.scss"; @import "./views/messages/_JumpToDatePicker.scss"; @@ -215,6 +214,7 @@ @import "./views/messages/_ReactionsRowButton.scss"; @import "./views/messages/_RedactedBody.scss"; @import "./views/messages/_RoomAvatarEvent.scss"; +@import "./views/messages/_SenderProfile.scss"; @import "./views/messages/_TextualEvent.scss"; @import "./views/messages/_UnknownBody.scss"; @import "./views/messages/_ViewSourceEvent.scss"; diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index 634ce9604c..c180a8a02d 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -93,7 +93,7 @@ limitations under the License. text-decoration: none; } -.mx_FilePanel .mx_EventTile .mx_DisambiguatedProfile { +.mx_FilePanel .mx_EventTile .mx_SenderProfile { flex: 1 1 auto; line-height: initial; padding: 0px; diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index be953a750f..68e1dd6a9a 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -77,7 +77,7 @@ limitations under the License. display: none; // we don't need this in this view } -.mx_NotificationPanel .mx_EventTile .mx_DisambiguatedProfile, +.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { color: $primary-content; font-size: $font-12px; diff --git a/res/css/views/messages/_DisambiguatedProfile.scss b/res/css/views/messages/_SenderProfile.scss similarity index 60% rename from res/css/views/messages/_DisambiguatedProfile.scss rename to res/css/views/messages/_SenderProfile.scss index c079fd48f6..08644b14e3 100644 --- a/res/css/views/messages/_DisambiguatedProfile.scss +++ b/res/css/views/messages/_SenderProfile.scss @@ -1,6 +1,5 @@ /* Copyright 2015, 2016 OpenMarket Ltd -Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,18 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_DisambiguatedProfile { - overflow: hidden; - text-overflow: ellipsis; - - .mx_DisambiguatedProfile_displayName { - font-weight: 600; - } - - .mx_DisambiguatedProfile_mxid { - font-weight: 600; - font-size: 1.1rem; - margin-left: 5px; - opacity: 0.5; // Match mx_TextualEvent - } +.mx_SenderProfile_displayName { + font-weight: 600; +} + +.mx_SenderProfile_mxid { + font-weight: 600; + font-size: 1.1rem; + margin-left: 5px; + opacity: 0.5; // Match mx_TextualEvent } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 89ad3b40a0..afa05668ec 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -126,7 +126,7 @@ $left-gutter: 64px; max-width: calc(100% - $left-gutter); } - .mx_DisambiguatedProfile .mx_Flair { + .mx_SenderProfile .mx_Flair { opacity: 0.7; margin-left: 5px; display: inline-block; @@ -141,21 +141,6 @@ $left-gutter: 64px; } } - .mx_DisambiguatedProfile { - color: $primary-content; - font-size: $font-14px; - display: inline-block; /* anti-zalgo, with overflow hidden */ - overflow: hidden; - cursor: pointer; - padding-bottom: 0px; - padding-top: 0px; - margin: 0px; - /* the next three lines, along with overflow hidden, truncate long display names */ - white-space: nowrap; - text-overflow: ellipsis; - max-width: calc(100% - $left-gutter); - } - &.mx_EventTile_isEditing .mx_MessageTimestamp { visibility: hidden; } diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index c054256b6a..ebb7f99e45 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -19,7 +19,7 @@ $left-gutter: 64px; .mx_GroupLayout { .mx_EventTile { - > .mx_DisambiguatedProfile { + > .mx_SenderProfile { line-height: $font-20px; margin-left: $left-gutter; } @@ -65,7 +65,7 @@ $left-gutter: 64px; } } - .mx_DisambiguatedProfile { + .mx_SenderProfile { font-size: $font-13px; } diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 1189bbd05b..14b1c4ad60 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -173,7 +173,7 @@ $irc-line-height: $font-18px; border-left: 0; } - .mx_DisambiguatedProfile { + .mx_SenderProfile { width: var(--name-width); display: flex; order: 2; @@ -181,14 +181,14 @@ $irc-line-height: $font-18px; justify-content: flex-start; align-items: center; - > .mx_DisambiguatedProfile_displayName { + > .mx_SenderProfile_displayName { width: 100%; text-align: end; overflow: hidden; text-overflow: ellipsis; } - > .mx_DisambiguatedProfile_mxid { + > .mx_SenderProfile_mxid { visibility: collapse; // Override the inherited margin. margin-left: 0; @@ -196,11 +196,11 @@ $irc-line-height: $font-18px; } } - .mx_DisambiguatedProfile:hover { + .mx_SenderProfile:hover { overflow: visible; z-index: 10; - > .mx_DisambiguatedProfile_displayName { + > .mx_SenderProfile_displayName { overflow: visible; display: inline; background-color: $event-selected-color; @@ -208,7 +208,7 @@ $irc-line-height: $font-18px; padding-right: 8px; } - > .mx_DisambiguatedProfile_mxid { + > .mx_SenderProfile_mxid { visibility: visible; opacity: 1; background-color: $event-selected-color; @@ -217,7 +217,7 @@ $irc-line-height: $font-18px; .mx_ReplyChain { margin: 0; - .mx_DisambiguatedProfile { + .mx_SenderProfile { order: unset; max-width: unset; width: unset; diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx deleted file mode 100644 index b5e64d999f..0000000000 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/* -Copyright 2021 Šimon Brandner -Copyright 2022 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import React from 'react'; -import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; -import classNames from 'classnames'; - -import { getUserNameColorClass } from '../../../utils/FormattingUtils'; -import UserIdentifier from "../../../customisations/UserIdentifier"; - -interface IProps { - member?: RoomMember; - fallbackName: string; - flair?: JSX.Element; - onClick?(): void; - colored?: boolean; - emphasizeDisplayName?: boolean; -} - -export default class DisambiguatedProfile extends React.Component { - render() { - const { fallbackName, member, flair, colored, emphasizeDisplayName, onClick } = this.props; - const rawDisplayName = member?.rawDisplayName || fallbackName; - const mxid = member?.userId; - - let colorClass; - if (colored) { - colorClass = getUserNameColorClass(fallbackName); - } - - let mxidElement; - if (member?.disambiguate && mxid) { - mxidElement = ( - - { UserIdentifier.getDisplayUserIdentifier( - mxid, { withDisplayName: true, roomId: member.roomId }, - ) } - - ); - } - - const displayNameClasses = classNames({ - "mx_DisambiguatedProfile_displayName": emphasizeDisplayName, - [colorClass]: true, - }); - - return ( -
- - { rawDisplayName } - - { mxidElement } - { flair } -
- ); - } -} diff --git a/src/components/views/messages/SenderProfile.tsx b/src/components/views/messages/SenderProfile.tsx index 1f0c07a077..8bd9c43098 100644 --- a/src/components/views/messages/SenderProfile.tsx +++ b/src/components/views/messages/SenderProfile.tsx @@ -21,9 +21,10 @@ import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state"; import Flair from '../elements/Flair'; import FlairStore from '../../../stores/FlairStore'; +import { getUserNameColorClass } from '../../../utils/FormattingUtils'; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import DisambiguatedProfile from "./DisambiguatedProfile"; +import UserIdentifier from '../../../customisations/UserIdentifier'; import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext'; import SettingsStore from "../../../settings/SettingsStore"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; @@ -105,8 +106,9 @@ export default class SenderProfile extends React.Component { } render() { - const { mxEvent, onClick } = this.props; - const msgtype = mxEvent.getContent().msgtype; + const { mxEvent } = this.props; + const colorClass = getUserNameColorClass(mxEvent.getSender()); + const { msgtype } = mxEvent.getContent(); let member = mxEvent.sender; if (SettingsStore.getValue("feature_use_only_current_profiles")) { @@ -116,6 +118,10 @@ export default class SenderProfile extends React.Component { } } + const disambiguate = member?.disambiguate || mxEvent.sender?.disambiguate; + const displayName = member?.rawDisplayName || mxEvent.getSender() || ""; + const mxid = member?.userId || mxEvent.getSender() || ""; + return { roomContext => { if (msgtype === MsgType.Emote && @@ -124,6 +130,17 @@ export default class SenderProfile extends React.Component { return null; // emote message must include the name so don't duplicate it } + let mxidElement; + if (disambiguate) { + mxidElement = ( + + { UserIdentifier.getDisplayUserIdentifier( + mxid, { withDisplayName: true, roomId: mxEvent.getRoomId() }, + ) } + + ); + } + let flair; if (this.props.enableFlair) { const displayedGroups = this.getDisplayedGroups( @@ -134,14 +151,13 @@ export default class SenderProfile extends React.Component { } return ( - +
+ + { displayName } + + { mxidElement } + { flair } +
); } } ; diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx index 1b459008de..8bd907f885 100644 --- a/src/components/views/rooms/EntityTile.tsx +++ b/src/components/views/rooms/EntityTile.tsx @@ -64,7 +64,6 @@ function presenceClassForMember(presenceState: string, lastActiveAgo: number, sh interface IProps { name?: string; - nameJSX?: JSX.Element; title?: string; avatarJsx?: JSX.Element; // className?: string; @@ -118,7 +117,7 @@ export default class EntityTile extends React.PureComponent { mainClassNames[presenceClass] = true; let nameEl; - const name = this.props.nameJSX || this.props.name; + const { name } = this.props; if (!this.props.suppressOnHover) { const activeAgo = this.props.presenceLastActiveAgo ? diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx index 24039adef2..36d6555d21 100644 --- a/src/components/views/rooms/MemberTile.tsx +++ b/src/components/views/rooms/MemberTile.tsx @@ -33,7 +33,6 @@ import { Action } from "../../../dispatcher/actions"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import EntityTile, { PowerStatus } from "./EntityTile"; import MemberAvatar from "./../avatars/MemberAvatar"; -import DisambiguatedProfile from "../messages/DisambiguatedProfile"; import UserIdentifierCustomisations from '../../../customisations/UserIdentifier'; interface IProps { @@ -259,13 +258,6 @@ export default class MemberTile extends React.Component { e2eStatus = this.state.e2eStatus; } - const nameJSX = ( - - ); - return ( { avatarJsx={av} title={this.getPowerLabel()} name={name} - nameJSX={nameJSX} powerStatus={powerStatus} showPresence={this.props.showPresence} subtextLabel={statusMessage} diff --git a/test/end-to-end-tests/src/usecases/timeline.ts b/test/end-to-end-tests/src/usecases/timeline.ts index d12ccf9e19..e0b3710b42 100644 --- a/test/end-to-end-tests/src/usecases/timeline.ts +++ b/test/end-to-end-tests/src/usecases/timeline.ts @@ -132,7 +132,7 @@ function getAllEventTiles(session: ElementSession): Promise { } async function getMessageFromEventTile(eventTile: ElementHandle): Promise { - const senderElement = await eventTile.$(".mx_DisambiguatedProfile_displayName"); + const senderElement = await eventTile.$(".mx_SenderProfile_displayName"); const className: string = await (await eventTile.getProperty("className")).jsonValue(); const classNames = className.split(" "); const bodyElement = await eventTile.$(".mx_EventTile_body");