Merge branch 'travis/room-list/css-layout' into travis/room-list/user-menu
This commit is contained in:
Travis Ralston
commit
bb3cdd3335
15 changed files with 443 additions and 159 deletions
|
|
@ -24,6 +24,9 @@ import SearchBox from "./SearchBox";
|
|||
import RoomList2 from "../views/rooms/RoomList2";
|
||||
import TopLeftMenuButton from "./TopLeftMenuButton";
|
||||
import { Action } from "../../dispatcher/actions";
|
||||
import { MatrixClientPeg } from "../../MatrixClientPeg";
|
||||
import BaseAvatar from '../views/avatars/BaseAvatar';
|
||||
import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
|
||||
|
||||
/*******************************************************************
|
||||
* CAUTION *
|
||||
|
|
@ -82,24 +85,53 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
|
|||
}
|
||||
}
|
||||
|
||||
private renderHeader(): React.ReactNode {
|
||||
// TODO: Update when profile info changes
|
||||
// TODO: Presence
|
||||
// TODO: Breadcrumbs toggle
|
||||
// TODO: Menu button
|
||||
const avatarSize = 32;
|
||||
// TODO: Don't do this profile lookup in render()
|
||||
const client = MatrixClientPeg.get();
|
||||
let displayName = client.getUserId();
|
||||
let avatarUrl: string = null;
|
||||
const myUser = client.getUser(client.getUserId());
|
||||
if (myUser) {
|
||||
displayName = myUser.rawDisplayName;
|
||||
avatarUrl = myUser.avatarUrl;
|
||||
}
|
||||
return (
|
||||
<div className="mx_LeftPanel2_userHeader">
|
||||
<div className="mx_LeftPanel2_headerRow">
|
||||
<span className="mx_LeftPanel2_userAvatarContainer">
|
||||
<BaseAvatar
|
||||
idName={MatrixClientPeg.get().getUserId()}
|
||||
name={displayName}
|
||||
url={avatarUrl}
|
||||
width={avatarSize}
|
||||
height={avatarSize}
|
||||
resizeMethod="crop"
|
||||
className="mx_LeftPanel2_userAvatar"
|
||||
/>
|
||||
</span>
|
||||
<span className="mx_LeftPanel2_userName">{displayName}</span>
|
||||
</div>
|
||||
<div className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer">
|
||||
<RoomBreadcrumbs />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const tagPanel = (
|
||||
<div className="mx_LeftPanel_tagPanelContainer">
|
||||
<div className="mx_LeftPanel2_tagPanelContainer">
|
||||
<TagPanel/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const exploreButton = (
|
||||
<div
|
||||
className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
|
||||
<AccessibleButton onClick={() => dis.dispatch({action: 'view_room_directory'})}>
|
||||
{_t("Explore")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
|
||||
const searchBox = (<SearchBox
|
||||
className="mx_LeftPanel_filterRooms"
|
||||
className="mx_LeftPanel2_filterRoomsSearch"
|
||||
enableRoomSearchFocus={true}
|
||||
blurredPlaceholder={_t('Filter')}
|
||||
placeholder={_t('Filter rooms…')}
|
||||
|
|
@ -124,29 +156,25 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
|
|||
// TODO: Conference handling / calls
|
||||
|
||||
const containerClasses = classNames({
|
||||
"mx_LeftPanel_container": true,
|
||||
"mx_fadable": true,
|
||||
"collapsed": false, // TODO: Collapsed support
|
||||
"mx_LeftPanel_container_hasTagPanel": true, // TODO: TagPanel support
|
||||
"mx_fadable_faded": false,
|
||||
"mx_LeftPanel2": true, // TODO: Remove flag when RoomList2 ships (used as an indicator)
|
||||
"mx_LeftPanel2": true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={containerClasses}>
|
||||
{tagPanel}
|
||||
<aside className="mx_LeftPanel dark-panel">
|
||||
<TopLeftMenuButton collapsed={false}/>
|
||||
<aside className="mx_LeftPanel2_roomListContainer">
|
||||
{this.renderHeader()}
|
||||
<div
|
||||
className="mx_LeftPanel_exploreAndFilterRow"
|
||||
className="mx_LeftPanel2_filterContainer"
|
||||
onKeyDown={() => {/*TODO*/}}
|
||||
onFocus={() => {/*TODO*/}}
|
||||
onBlur={() => {/*TODO*/}}
|
||||
>
|
||||
{exploreButton}
|
||||
{searchBox}
|
||||
</div>
|
||||
{roomList}
|
||||
<div className="mx_LeftPanel2_actualRoomListContainer">
|
||||
{roomList}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ const TAG_AESTHETICS: {
|
|||
defaultHidden: false,
|
||||
},
|
||||
[DefaultTagID.DM]: {
|
||||
sectionLabel: _td("Direct Messages"),
|
||||
sectionLabel: _td("People"),
|
||||
isInvite: false,
|
||||
defaultHidden: false,
|
||||
addRoomLabel: _td("Start chat"),
|
||||
|
|
@ -200,6 +200,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
|
|||
addRoomLabel={aesthetics.addRoomLabel}
|
||||
isInvite={aesthetics.isInvite}
|
||||
layout={this.state.layouts.get(orderedTagId)}
|
||||
showMessagePreviews={orderedTagId === DefaultTagID.DM}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -216,7 +217,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
|
|||
onFocus={this.props.onFocus}
|
||||
onBlur={this.props.onBlur}
|
||||
onKeyDown={onKeyDownHandler}
|
||||
className="mx_RoomList mx_RoomList2"
|
||||
className="mx_RoomList2"
|
||||
role="tree"
|
||||
aria-label={_t("Rooms")}
|
||||
// Firefox sometimes makes this element focusable due to
|
||||
|
|
|
|||
|
|
@ -20,15 +20,13 @@ import * as React from "react";
|
|||
import { createRef } from "react";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import classNames from 'classnames';
|
||||
import * as RoomNotifs from '../../../RoomNotifs';
|
||||
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton from "../../views/elements/AccessibleButton";
|
||||
import AccessibleTooltipButton from "../../views/elements/AccessibleTooltipButton";
|
||||
import * as FormattingUtils from '../../../utils/FormattingUtils';
|
||||
import RoomTile2 from "./RoomTile2";
|
||||
import { ResizableBox, ResizeCallbackData } from "react-resizable";
|
||||
import { ListLayout } from "../../../stores/room-list/ListLayout";
|
||||
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
|
||||
|
||||
/*******************************************************************
|
||||
* CAUTION *
|
||||
|
|
@ -43,6 +41,7 @@ interface IProps {
|
|||
rooms?: Room[];
|
||||
startAsHidden: boolean;
|
||||
label: string;
|
||||
showMessagePreviews: boolean;
|
||||
onAddRoom?: () => void;
|
||||
addRoomLabel: string;
|
||||
isInvite: boolean;
|
||||
|
|
@ -93,7 +92,13 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
|
||||
if (this.props.rooms) {
|
||||
for (const room of this.props.rooms) {
|
||||
tiles.push(<RoomTile2 room={room} key={`room-${room.roomId}`}/>);
|
||||
tiles.push(
|
||||
<RoomTile2
|
||||
room={room}
|
||||
key={`room-${room.roomId}`}
|
||||
showMessagePreview={this.props.showMessagePreviews}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,25 +106,16 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
private renderHeader(): React.ReactElement {
|
||||
const notifications = !this.props.isInvite
|
||||
? RoomNotifs.aggregateNotificationCount(this.props.rooms)
|
||||
: {count: 0, highlight: true};
|
||||
const notifCount = notifications.count;
|
||||
const notifHighlight = notifications.highlight;
|
||||
// TODO: Handle badge count
|
||||
// const notifications = !this.props.isInvite
|
||||
// ? RoomNotifs.aggregateNotificationCount(this.props.rooms)
|
||||
// : {count: 0, highlight: true};
|
||||
// const notifCount = notifications.count;
|
||||
// const notifHighlight = notifications.highlight;
|
||||
|
||||
// TODO: Title on collapsed
|
||||
// TODO: Incoming call box
|
||||
|
||||
let chevron = null;
|
||||
if (this.hasTiles()) {
|
||||
const chevronClasses = classNames({
|
||||
'mx_RoomSubList_chevron': true,
|
||||
'mx_RoomSubList_chevronRight': false, // isCollapsed
|
||||
'mx_RoomSubList_chevronDown': true, // !isCollapsed
|
||||
});
|
||||
chevron = (<div className={chevronClasses}/>);
|
||||
}
|
||||
|
||||
return (
|
||||
<RovingTabIndexWrapper inputRef={this.headerButton}>
|
||||
{({onFocus, isActive, ref}) => {
|
||||
|
|
@ -127,68 +123,68 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
const tabIndex = isActive ? 0 : -1;
|
||||
|
||||
// TODO: Collapsed state
|
||||
let badge;
|
||||
if (true) { // !isCollapsed
|
||||
const badgeClasses = classNames({
|
||||
'mx_RoomSubList_badge': true,
|
||||
'mx_RoomSubList_badgeHighlight': notifHighlight,
|
||||
});
|
||||
// Wrap the contents in a div and apply styles to the child div so that the browser default outline works
|
||||
if (notifCount > 0) {
|
||||
badge = (
|
||||
<AccessibleButton
|
||||
tabIndex={tabIndex}
|
||||
className={badgeClasses}
|
||||
aria-label={_t("Jump to first unread room.")}
|
||||
>
|
||||
<div>
|
||||
{FormattingUtils.formatCount(notifCount)}
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
);
|
||||
} else if (this.props.isInvite && this.hasTiles()) {
|
||||
// Render the `!` badge for invites
|
||||
badge = (
|
||||
<AccessibleButton
|
||||
tabIndex={tabIndex}
|
||||
className={badgeClasses}
|
||||
aria-label={_t("Jump to first invite.")}
|
||||
>
|
||||
<div>
|
||||
{FormattingUtils.formatCount(this.numTiles)}
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
// TODO: Handle badge count
|
||||
// let badge;
|
||||
// if (true) { // !isCollapsed
|
||||
// const showCount = localStorage.getItem("mx_rls_count") || notifHighlight;
|
||||
// const badgeClasses = classNames({
|
||||
// 'mx_RoomSublist2_badge': true,
|
||||
// 'mx_RoomSublist2_badgeHighlight': notifHighlight,
|
||||
// 'mx_RoomSublist2_badgeEmpty': !showCount,
|
||||
// });
|
||||
// // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
|
||||
// if (notifCount > 0) {
|
||||
// const count = <div>{FormattingUtils.formatCount(notifCount)}</div>;
|
||||
// badge = (
|
||||
// <AccessibleButton
|
||||
// tabIndex={tabIndex}
|
||||
// className={badgeClasses}
|
||||
// aria-label={_t("Jump to first unread room.")}
|
||||
// >
|
||||
// {showCount ? count : null}
|
||||
// </AccessibleButton>
|
||||
// );
|
||||
// } else if (this.props.isInvite && this.hasTiles()) {
|
||||
// // Render the `!` badge for invites
|
||||
// badge = (
|
||||
// <AccessibleButton
|
||||
// tabIndex={tabIndex}
|
||||
// className={badgeClasses}
|
||||
// aria-label={_t("Jump to first invite.")}
|
||||
// >
|
||||
// <div>
|
||||
// {FormattingUtils.formatCount(this.numTiles)}
|
||||
// </div>
|
||||
// </AccessibleButton>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
let addRoomButton = null;
|
||||
if (!!this.props.onAddRoom) {
|
||||
addRoomButton = (
|
||||
<AccessibleTooltipButton
|
||||
tabIndex={tabIndex}
|
||||
onClick={this.onAddRoom}
|
||||
className="mx_RoomSubList_addRoom"
|
||||
title={this.props.addRoomLabel || _t("Add room")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
// TODO: Aux button
|
||||
// let addRoomButton = null;
|
||||
// if (!!this.props.onAddRoom) {
|
||||
// addRoomButton = (
|
||||
// <AccessibleTooltipButton
|
||||
// tabIndex={tabIndex}
|
||||
// onClick={this.onAddRoom}
|
||||
// className="mx_RoomSublist2_addButton"
|
||||
// title={this.props.addRoomLabel || _t("Add room")}
|
||||
// />
|
||||
// );
|
||||
// }
|
||||
|
||||
// TODO: a11y (see old component)
|
||||
return (
|
||||
<div className={"mx_RoomSubList_labelContainer"}>
|
||||
<div className={"mx_RoomSublist2_headerContainer"}>
|
||||
<AccessibleButton
|
||||
inputRef={ref}
|
||||
tabIndex={tabIndex}
|
||||
className={"mx_RoomSubList_label"}
|
||||
className={"mx_RoomSublist2_headerText"}
|
||||
role="treeitem"
|
||||
aria-level="1"
|
||||
>
|
||||
{chevron}
|
||||
<span>{this.props.label}</span>
|
||||
</AccessibleButton>
|
||||
{badge}
|
||||
{addRoomButton}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
|
|
@ -204,9 +200,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
|
||||
const classes = classNames({
|
||||
// TODO: Proper collapse support
|
||||
'mx_RoomSubList': true,
|
||||
'mx_RoomSubList_hidden': false, // len && isCollapsed
|
||||
'mx_RoomSubList_nonEmpty': this.hasTiles(), // len && !isCollapsed
|
||||
'mx_RoomSublist2': true,
|
||||
'mx_RoomSublist2_collapsed': false, // len && isCollapsed
|
||||
});
|
||||
|
||||
let content = null;
|
||||
|
|
@ -244,7 +239,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
visibleTiles.splice(visibleTiles.length - 1, 1, (
|
||||
<div
|
||||
onClick={this.onShowAllClick}
|
||||
style={{height: '34px', lineHeight: '34px', cursor: 'pointer'}}
|
||||
className='mx_RoomSublist2_showMoreButton'
|
||||
key='showall'
|
||||
>
|
||||
{_t("Show %(n)s more", {n: numMissing})}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ import classNames from "classnames";
|
|||
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
|
||||
import AccessibleButton from "../../views/elements/AccessibleButton";
|
||||
import RoomAvatar from "../../views/avatars/RoomAvatar";
|
||||
import Tooltip from "../../views/elements/Tooltip";
|
||||
import dis from '../../../dispatcher/dispatcher';
|
||||
import { Key } from "../../../Keyboard";
|
||||
import * as RoomNotifs from '../../../RoomNotifs';
|
||||
|
|
@ -32,6 +31,7 @@ import * as Unread from '../../../Unread';
|
|||
import * as FormattingUtils from "../../../utils/FormattingUtils";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import ActiveRoomObserver from "../../../ActiveRoomObserver";
|
||||
|
||||
/*******************************************************************
|
||||
* CAUTION *
|
||||
|
|
@ -51,6 +51,7 @@ enum NotificationColor {
|
|||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
showMessagePreview: boolean;
|
||||
|
||||
// TODO: Allow falsifying counts (for invites and stuff)
|
||||
// TODO: Transparency? Was this ever used?
|
||||
|
|
@ -65,6 +66,7 @@ interface INotificationState {
|
|||
interface IState {
|
||||
hover: boolean;
|
||||
notificationState: INotificationState;
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
export default class RoomTile2 extends React.Component<IProps, IState> {
|
||||
|
|
@ -87,12 +89,14 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
this.state = {
|
||||
hover: false,
|
||||
notificationState: this.getNotificationState(),
|
||||
selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
|
||||
};
|
||||
|
||||
this.props.room.on("Room.receipt", this.handleRoomEventUpdate);
|
||||
this.props.room.on("Room.timeline", this.handleRoomEventUpdate);
|
||||
this.props.room.on("Room.redaction", this.handleRoomEventUpdate);
|
||||
MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
|
||||
ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
|
|
@ -100,6 +104,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
this.props.room.removeListener("Room.receipt", this.handleRoomEventUpdate);
|
||||
this.props.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
|
||||
this.props.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
|
||||
ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
|
||||
}
|
||||
if (MatrixClientPeg.get()) {
|
||||
MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
|
||||
|
|
@ -186,39 +191,33 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
});
|
||||
};
|
||||
|
||||
private onActiveRoomUpdate = (isActive: boolean) => {
|
||||
this.setState({selected: isActive});
|
||||
};
|
||||
|
||||
public render(): React.ReactElement {
|
||||
// TODO: Collapsed state
|
||||
// TODO: Invites
|
||||
// TODO: a11y proper
|
||||
// TODO: Render more than bare minimum
|
||||
|
||||
const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
|
||||
const isUnread = this.state.notificationState.color > NotificationColor.None;
|
||||
const classes = classNames({
|
||||
'mx_RoomTile': true,
|
||||
// 'mx_RoomTile_selected': this.state.selected,
|
||||
'mx_RoomTile_unread': isUnread,
|
||||
'mx_RoomTile_unreadNotify': this.state.notificationState.color >= NotificationColor.Grey,
|
||||
'mx_RoomTile_highlight': this.state.notificationState.color >= NotificationColor.Red,
|
||||
'mx_RoomTile_invited': this.roomIsInvite,
|
||||
// 'mx_RoomTile_menuDisplayed': isMenuDisplayed,
|
||||
'mx_RoomTile_noBadges': !hasBadge,
|
||||
// 'mx_RoomTile_transparent': this.props.transparent,
|
||||
// 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
|
||||
'mx_RoomTile2': true,
|
||||
'mx_RoomTile2_selected': this.state.selected,
|
||||
});
|
||||
|
||||
const avatarClasses = classNames({
|
||||
'mx_RoomTile_avatar': true,
|
||||
});
|
||||
|
||||
|
||||
let badge;
|
||||
const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
|
||||
if (hasBadge) {
|
||||
const hasNotif = this.state.notificationState.color >= NotificationColor.Red;
|
||||
const isEmptyBadge = !localStorage.getItem("mx_rl_rt_badgeCount");
|
||||
const badgeClasses = classNames({
|
||||
'mx_RoomTile_badge': true,
|
||||
'mx_RoomTile_badgeButton': false, // this.state.badgeHover || isMenuDisplayed
|
||||
'mx_RoomTile2_badge': true,
|
||||
'mx_RoomTile2_badgeHighlight': hasNotif,
|
||||
'mx_RoomTile2_badgeEmpty': isEmptyBadge,
|
||||
});
|
||||
badge = <div className={badgeClasses}>{this.state.notificationState.symbol}</div>;
|
||||
const symbol = this.state.notificationState.symbol;
|
||||
badge = <div className={badgeClasses}>{isEmptyBadge ? null : symbol}</div>;
|
||||
}
|
||||
|
||||
// TODO: the original RoomTile uses state for the room name. Do we need to?
|
||||
|
|
@ -226,20 +225,21 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
if (typeof name !== 'string') name = '';
|
||||
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
|
||||
|
||||
const nameClasses = classNames({
|
||||
'mx_RoomTile_name': true,
|
||||
'mx_RoomTile_invite': this.roomIsInvite,
|
||||
'mx_RoomTile_badgeShown': hasBadge,
|
||||
});
|
||||
|
||||
// TODO: Support collapsed state properly
|
||||
let tooltip = null;
|
||||
if (false) { // isCollapsed
|
||||
if (this.state.hover) {
|
||||
tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} />
|
||||
}
|
||||
// TODO: Tooltip?
|
||||
|
||||
let messagePreview = null;
|
||||
if (this.props.showMessagePreview) {
|
||||
// TODO: Actually get the real message preview from state
|
||||
messagePreview = <div className="mx_RoomTile2_messagePreview">I just ate a pie.</div>;
|
||||
}
|
||||
|
||||
const nameClasses = classNames({
|
||||
"mx_RoomTile2_name": true,
|
||||
"mx_RoomTile2_nameWithPreview": !!messagePreview,
|
||||
});
|
||||
|
||||
const avatarSize = 32;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<RovingTabIndexWrapper inputRef={this.roomTile}>
|
||||
|
|
@ -254,20 +254,18 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
onClick={this.onTileClick}
|
||||
role="treeitem"
|
||||
>
|
||||
<div className={avatarClasses}>
|
||||
<div className="mx_RoomTile_avatar_container">
|
||||
<RoomAvatar room={this.props.room} width={24} height={24}/>
|
||||
</div>
|
||||
<div className="mx_RoomTile2_avatarContainer">
|
||||
<RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize}/>
|
||||
</div>
|
||||
<div className="mx_RoomTile_nameContainer">
|
||||
<div className="mx_RoomTile_labelContainer">
|
||||
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
|
||||
{name}
|
||||
</div>
|
||||
<div className="mx_RoomTile2_nameContainer">
|
||||
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
|
||||
{name}
|
||||
</div>
|
||||
{messagePreview}
|
||||
</div>
|
||||
<div className="mx_RoomTile2_badgeContainer">
|
||||
{badge}
|
||||
</div>
|
||||
{tooltip}
|
||||
</AccessibleButton>
|
||||
}
|
||||
</RovingTabIndexWrapper>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue