mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 09:46:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

Format mxid

Browse source
This commit is contained in:
Šimon Brandner 2021-04-18 15:40:56 +02:00
parent ac00c80efb
commit 61a260cd40
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
2 changed files with 45 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/messages/_SenderProfile.scss
View file

@ -15,6 +15,18 @@ limitations under the License.
*/
.mx_SenderProfile_name {
display: flex;
align-items: center;
gap: 5px;
}
.mx_SenderProfile_displayName {
font-weight: 600;
}
.mx_SenderProfile_mxid {
font-weight: 600;
font-family: monospace;
font-size: 1rem;
color: gray;
}

43
src/components/views/messages/SenderProfile.js
View file

@ -89,7 +89,21 @@ export default class SenderProfile extends React.Component {
render() {
const {mxEvent} = this.props;
const colorClass = getUserNameColorClass(mxEvent.getSender());
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
let disambiguate;
let displayName;
let mxid;
const sender = mxEvent.sender;
if (sender) {
disambiguate = sender.disambiguate;
displayName = sender.rawDisplayName;
mxid = sender.userId;
} else {
disambiguate = false;
displayName = mxEvent.getSender();
mxid = mxEvent.getSender();
}
const {msgtype} = mxEvent.getContent();
if (msgtype === 'm.emote') {
@ -108,20 +122,29 @@ export default class SenderProfile extends React.Component {
/>;
}
const nameElem = name || '';
// Name + flair
const nameFlair = <span>
<span className={`mx_SenderProfile_name ${colorClass}`}>
{ nameElem }
const displayNameElement = (
<span className={`mx_SenderProfile_displayName ${colorClass}`}>
{ displayName || '' }
</span>
{ flair }
</span>;
);
let mxidElement;
if (disambiguate) {
mxidElement = (
<span className="mx_SenderProfile_mxid">
{ `[${mxid || ""}]` }
</span>
);
}
return (
<div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
<div className="mx_SenderProfile_hover">
{ nameFlair }
<div className="mx_SenderProfile_name">
{ displayNameElement }
{ mxidElement }
{ flair }
</div>
</div>
</div>
);