Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Revert "Use styled mxids in member list (#6328)" (#8107)
Browse files Browse the repository at this point in the history
This reverts commit 5d28e05.
  • Loading branch information
turt2live authored Mar 22, 2022
1 parent 5d28e05 commit 709e6e7
Show file tree
Hide file tree
Showing 12 changed files with 50 additions and 136 deletions.
2 changes: 1 addition & 1 deletion res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_FilePanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_NotificationPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -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_SenderProfile_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_mxid {
font-weight: 600;
font-size: 1.1rem;
margin-left: 5px;
opacity: 0.5; // Match mx_TextualEvent
}
17 changes: 1 addition & 16 deletions res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/_GroupLayout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $left-gutter: 64px;

.mx_GroupLayout {
.mx_EventTile {
> .mx_DisambiguatedProfile {
> .mx_SenderProfile {
line-height: $font-20px;
margin-left: $left-gutter;
}
Expand Down Expand Up @@ -65,7 +65,7 @@ $left-gutter: 64px;
}
}

.mx_DisambiguatedProfile {
.mx_SenderProfile {
font-size: $font-13px;
}

Expand Down
14 changes: 7 additions & 7 deletions res/css/views/rooms/_IRCLayout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -173,42 +173,42 @@ $irc-line-height: $font-18px;
border-left: 0;
}

.mx_DisambiguatedProfile {
.mx_SenderProfile {
width: var(--name-width);
display: flex;
order: 2;
flex-shrink: 0;
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;
padding: 0 5px;
}
}

.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;
border-radius: 8px 0 0 8px;
padding-right: 8px;
}

> .mx_DisambiguatedProfile_mxid {
> .mx_SenderProfile_mxid {
visibility: visible;
opacity: 1;
background-color: $event-selected-color;
Expand All @@ -217,7 +217,7 @@ $irc-line-height: $font-18px;

.mx_ReplyChain {
margin: 0;
.mx_DisambiguatedProfile {
.mx_SenderProfile {
order: unset;
max-width: unset;
width: unset;
Expand Down
71 changes: 0 additions & 71 deletions src/components/views/messages/DisambiguatedProfile.tsx

This file was deleted.

38 changes: 27 additions & 11 deletions src/components/views/messages/SenderProfile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -105,8 +106,9 @@ export default class SenderProfile extends React.Component<IProps, IState> {
}

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")) {
Expand All @@ -116,6 +118,10 @@ export default class SenderProfile extends React.Component<IProps, IState> {
}
}

const disambiguate = member?.disambiguate || mxEvent.sender?.disambiguate;
const displayName = member?.rawDisplayName || mxEvent.getSender() || "";
const mxid = member?.userId || mxEvent.getSender() || "";

return <RoomContext.Consumer>
{ roomContext => {
if (msgtype === MsgType.Emote &&
Expand All @@ -124,6 +130,17 @@ export default class SenderProfile extends React.Component<IProps, IState> {
return null; // emote message must include the name so don't duplicate it
}

let mxidElement;
if (disambiguate) {
mxidElement = (
<span className="mx_SenderProfile_mxid">
{ UserIdentifier.getDisplayUserIdentifier(
mxid, { withDisplayName: true, roomId: mxEvent.getRoomId() },
) }
</span>
);
}

let flair;
if (this.props.enableFlair) {
const displayedGroups = this.getDisplayedGroups(
Expand All @@ -134,14 +151,13 @@ export default class SenderProfile extends React.Component<IProps, IState> {
}

return (
<DisambiguatedProfile
fallbackName={mxEvent.getSender() || ""}
flair={flair}
onClick={onClick}
member={member}
colored={true}
emphasizeDisplayName={true}
/>
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
<span className={`mx_SenderProfile_displayName ${colorClass}`}>
{ displayName }
</span>
{ mxidElement }
{ flair }
</div>
);
} }
</RoomContext.Consumer>;
Expand Down
3 changes: 1 addition & 2 deletions src/components/views/rooms/EntityTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ function presenceClassForMember(presenceState: string, lastActiveAgo: number, sh

interface IProps {
name?: string;
nameJSX?: JSX.Element;
title?: string;
avatarJsx?: JSX.Element; // <BaseAvatar />
className?: string;
Expand Down Expand Up @@ -118,7 +117,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
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 ?
Expand Down
9 changes: 0 additions & 9 deletions src/components/views/rooms/MemberTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -259,13 +258,6 @@ export default class MemberTile extends React.Component<IProps, IState> {
e2eStatus = this.state.e2eStatus;
}

const nameJSX = (
<DisambiguatedProfile
member={member}
fallbackName={name || ""}
/>
);

return (
<EntityTile
{...this.props}
Expand All @@ -276,7 +268,6 @@ export default class MemberTile extends React.Component<IProps, IState> {
avatarJsx={av}
title={this.getPowerLabel()}
name={name}
nameJSX={nameJSX}
powerStatus={powerStatus}
showPresence={this.props.showPresence}
subtextLabel={statusMessage}
Expand Down
2 changes: 1 addition & 1 deletion test/end-to-end-tests/src/usecases/timeline.ts
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ function getAllEventTiles(session: ElementSession): Promise<ElementHandle[]> {
}

async function getMessageFromEventTile(eventTile: ElementHandle): Promise<Message> {
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");
Expand Down

0 comments on commit 709e6e7

Please sign in to comment.