Add customisation point for mxid display (#7595)

* add wrapping component for hiding UI

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add Setting

Signed-off-by: Kerry Archibald <kerrya@element.io>

* apply setting to profile settings, user menu, invite dialog, userinfo

Signed-off-by: Kerry Archibald <kerrya@element.io>

* hide mxids in user autocomplete

* remove mxids from title in memeber list and timeline

Signed-off-by: Kerry Archibald <kerrya@element.io>

* hide mxid in ConfirmUserActionDialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use name in power level event message when displayMxids is falsy

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add customisation point for mxid display

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use userid customisation

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use customisation in sender profile

Signed-off-by: Kerry Archibald <kerrya@element.io>

* hide profile settings mxid if falsy

Signed-off-by: Kerry Archibald <kerrya@element.io>

* rename and move to components

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove change to UIFeature.ts

Signed-off-by: Kerry Archibald <kerrya@element.io>

* improvements from pr

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint fix

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-01-25 10:40:02 +01:00 committed by GitHub
parent b481fc069e
commit 502b805164
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 154 additions and 23 deletions

View file

@ -34,6 +34,7 @@ import { makeUserPermalink } from "../utils/permalinks/Permalinks";
import { ICompletion, ISelectionRange } from "./Autocompleter";
import MemberAvatar from '../components/views/avatars/MemberAvatar';
import { TimelineRenderingType } from '../contexts/RoomContext';
import UserIdentifierCustomisations from '../customisations/UserIdentifier';
const USER_REGEX = /\B@\S*/g;
@ -127,6 +128,9 @@ export default class UserProvider extends AutocompleteProvider {
// Don't include the '@' in our search query - it's only used as a way to trigger completion
const query = fullMatch.startsWith('@') ? fullMatch.substring(1) : fullMatch;
completions = this.matcher.match(query, limit).map((user) => {
const description = UserIdentifierCustomisations.getDisplayUserIdentifier(
user.userId, { roomId: this.room.roomId, withDisplayName: true },
);
const displayName = (user.name || user.userId || '');
return {
// Length of completion should equal length of text in decorator. draft-js
@ -137,7 +141,7 @@ export default class UserProvider extends AutocompleteProvider {
suffix: (selection.beginning && range.start === 0) ? ': ' : ' ',
href: makeUserPermalink(user.userId),
component: (
<PillCompletion title={displayName} description={user.userId}>
<PillCompletion title={displayName} description={description}>
<MemberAvatar member={user} width={24} height={24} />
</PillCompletion>
),