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

Commit

Permalink
Use styled mxids in member list v2 (#8110)
Browse files Browse the repository at this point in the history
* Revert "Revert "Use styled mxids in member list (#6328)" (#8107)"

This reverts commit 709e6e7.

* Fix disambiguated profile for bubbles

Signed-off-by: Šimon Brandner <[email protected]>
  • Loading branch information
SimonBrandner authored Mar 22, 2022
1 parent cfabcdd commit bff1ef3
Show file tree
Hide file tree
Showing 13 changed files with 141 additions and 55 deletions.
2 changes: 1 addition & 1 deletion res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@
@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,7 +216,6 @@
@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_SenderProfile {
.mx_FilePanel .mx_EventTile .mx_DisambiguatedProfile {
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_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_DisambiguatedProfile,
.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,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2021 Šimon Brandner <[email protected]>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -14,13 +15,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_SenderProfile_displayName {
font-weight: 600;
}
.mx_DisambiguatedProfile {
overflow: hidden;
text-overflow: ellipsis;

.mx_DisambiguatedProfile_displayName {
font-weight: 600;
}

.mx_SenderProfile_mxid {
font-weight: 600;
font-size: 1.1rem;
margin-left: 5px;
opacity: 0.5; // Match mx_TextualEvent
.mx_DisambiguatedProfile_mxid {
font-weight: 600;
font-size: 1.1rem;
margin-left: 5px;
opacity: 0.5; // Match mx_TextualEvent
}
}
10 changes: 5 additions & 5 deletions res/css/views/rooms/_EventBubbleTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,15 @@ limitations under the License.
}
}

.mx_SenderProfile,
.mx_DisambiguatedProfile,
.mx_EventTile_line {
width: fit-content;
max-width: 70%;
// fixed line height to prevent emoji from being taller than text
line-height: $font-18px;
}

> .mx_SenderProfile {
> .mx_DisambiguatedProfile {
position: relative;
top: -2px;
left: 2px;
Expand Down Expand Up @@ -168,11 +168,11 @@ limitations under the License.
margin-right: calc(-1 * var(--gutterSize));
}

.mx_SenderProfile {
.mx_DisambiguatedProfile {
display: none;
}

.mx_ReplyTile .mx_SenderProfile {
.mx_ReplyTile .mx_DisambiguatedProfile {
display: block;
}

Expand Down Expand Up @@ -379,7 +379,7 @@ limitations under the License.
.mx_EventTile_avatar {
position: static;
}
.mx_SenderProfile {
.mx_DisambiguatedProfile {
display: none;
}
}
Expand Down
17 changes: 16 additions & 1 deletion 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_SenderProfile .mx_Flair {
.mx_DisambiguatedProfile .mx_Flair {
opacity: 0.7;
margin-left: 5px;
display: inline-block;
Expand All @@ -141,6 +141,21 @@ $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_SenderProfile {
> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
}
Expand Down Expand Up @@ -65,7 +65,7 @@ $left-gutter: 64px;
}
}

.mx_SenderProfile {
.mx_DisambiguatedProfile {
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_SenderProfile {
.mx_DisambiguatedProfile {
width: var(--name-width);
display: flex;
order: 2;
flex-shrink: 0;
justify-content: flex-start;
align-items: center;

> .mx_SenderProfile_displayName {
> .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}

> .mx_SenderProfile_mxid {
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
// Override the inherited margin.
margin-left: 0;
padding: 0 5px;
}
}

.mx_SenderProfile:hover {
.mx_DisambiguatedProfile:hover {
overflow: visible;
z-index: 10;

> .mx_SenderProfile_displayName {
> .mx_DisambiguatedProfile_displayName {
overflow: visible;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: 8px;
}

> .mx_SenderProfile_mxid {
> .mx_DisambiguatedProfile_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_SenderProfile {
.mx_DisambiguatedProfile {
order: unset;
max-width: unset;
width: unset;
Expand Down
71 changes: 71 additions & 0 deletions src/components/views/messages/DisambiguatedProfile.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
Copyright 2021 Šimon Brandner <[email protected]>
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<IProps> {
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 = (
<span className="mx_DisambiguatedProfile_mxid">
{ UserIdentifier.getDisplayUserIdentifier(
mxid, { withDisplayName: true, roomId: member.roomId },
) }
</span>
);
}

const displayNameClasses = classNames({
"mx_DisambiguatedProfile_displayName": emphasizeDisplayName,
[colorClass]: true,
});

return (
<div className="mx_DisambiguatedProfile" dir="auto" onClick={onClick}>
<span className={displayNameClasses}>
{ rawDisplayName }
</span>
{ mxidElement }
{ flair }
</div>
);
}
}
38 changes: 11 additions & 27 deletions src/components/views/messages/SenderProfile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ 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 UserIdentifier from '../../../customisations/UserIdentifier';
import DisambiguatedProfile from "./DisambiguatedProfile";
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
import SettingsStore from "../../../settings/SettingsStore";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
Expand Down Expand Up @@ -106,9 +105,8 @@ export default class SenderProfile extends React.Component<IProps, IState> {
}

render() {
const { mxEvent } = this.props;
const colorClass = getUserNameColorClass(mxEvent.getSender());
const { msgtype } = mxEvent.getContent();
const { mxEvent, onClick } = this.props;
const msgtype = mxEvent.getContent().msgtype;

let member = mxEvent.sender;
if (SettingsStore.getValue("feature_use_only_current_profiles")) {
Expand All @@ -118,10 +116,6 @@ 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 @@ -130,17 +124,6 @@ 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 @@ -151,13 +134,14 @@ export default class SenderProfile extends React.Component<IProps, IState> {
}

return (
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
<span className={`mx_SenderProfile_displayName ${colorClass}`}>
{ displayName }
</span>
{ mxidElement }
{ flair }
</div>
<DisambiguatedProfile
fallbackName={mxEvent.getSender() || ""}
flair={flair}
onClick={onClick}
member={member}
colored={true}
emphasizeDisplayName={true}
/>
);
} }
</RoomContext.Consumer>;
Expand Down
3 changes: 2 additions & 1 deletion src/components/views/rooms/EntityTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ 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 @@ -117,7 +118,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
mainClassNames[presenceClass] = true;

let nameEl;
const { name } = this.props;
const name = this.props.nameJSX || this.props.name;

if (!this.props.suppressOnHover) {
const activeAgo = this.props.presenceLastActiveAgo ?
Expand Down
Loading

0 comments on commit bff1ef3

Please sign in to comment.