OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Tidy up TemporaryTile now that it isn't temporary

pull/21833/head
Michael Telatynski 2021-03-08 17:48:08 +00:00
parent 6a5efad142
commit 81e1f36c4b
4 changed files with 23 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
res/css/views/avatars/_DecoratedRoomAvatar.scss
View File

@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
.mx_DecoratedRoomAvatar, .mx_ExtraTile {
position: relative;
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {

7
src/components/views/rooms/TemporaryTile.tsx → src/components/views/rooms/ExtraTile.tsx
View File

@ -1,5 +1,5 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2020, 2021 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.
@ -36,8 +36,7 @@ interface IState {
hover: boolean;
}
// TODO: Remove with community invites in the room list: https://github.com/vector-im/element-web/issues/14456
export default class TemporaryTile extends React.Component<IProps, IState> {
export default class ExtraTile extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
@ -57,8 +56,8 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
public render(): React.ReactElement {
// XXX: We copy classes because it's easier
const classes = classNames({
'mx_ExtraTile': true,
'mx_RoomTile': true,
'mx_TemporaryTile': true,
'mx_RoomTile_selected': this.props.isSelected,
'mx_RoomTile_minimized': this.props.isMinimized,
});

14
src/components/views/rooms/RoomList.tsx
View File

@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as React from "react";
import React, { ReactComponentElement } from "react";
import { Dispatcher } from "flux";
import { Room } from "matrix-js-sdk/src/models/room";
import * as fbEmitter from "fbemitter";
@ -34,7 +34,7 @@ import RoomSublist from "./RoomSublist";
import { ActionPayload } from "../../../dispatcher/payloads";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import GroupAvatar from "../avatars/GroupAvatar";
import TemporaryTile from "./TemporaryTile";
import ExtraTile from "./ExtraTile";
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { Action } from "../../../dispatcher/actions";
@ -422,7 +422,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
dis.dispatch({ action: Action.ViewRoomDirectory, initialText });
};
private renderSuggestedRooms(): JSX.Element[] {
private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {
return this.state.suggestedRooms.map(room => {
const name = room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room");
const avatar = (
@ -443,7 +443,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
});
};
return (
<TemporaryTile
<ExtraTile
isMinimized={this.props.isMinimized}
isSelected={this.state.currentRoomId === room.room_id}
displayName={name}
@ -455,7 +455,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
});
}
private renderCommunityInvites(): TemporaryTile[] {
private renderCommunityInvites(): ReactComponentElement<typeof ExtraTile>[] {
// TODO: Put community invites in a more sensible place (not in the room list)
// See https://github.com/vector-im/element-web/issues/14456
return MatrixClientPeg.get().getGroups().filter(g => {
@ -476,7 +476,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
});
};
return (
<TemporaryTile
<ExtraTile
isMinimized={this.props.isMinimized}
isSelected={false}
displayName={g.name}
@ -538,7 +538,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
isMinimized={this.props.isMinimized}
onResize={this.props.onResize}
showSkeleton={showSkeleton}
extraBadTilesThatShouldntExist={extraTiles}
extraTiles={extraTiles}
/>);
}

26
src/components/views/rooms/RoomSublist.tsx
View File

@ -17,7 +17,7 @@ limitations under the License.
*/
import * as React from "react";
import {createRef} from "react";
import { createRef, ReactComponentElement } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import classNames from 'classnames';
import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@ -48,7 +48,7 @@ import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNo
import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays";
import { objectExcluding, objectHasDiff } from "../../../utils/objects";
import TemporaryTile from "./TemporaryTile";
import ExtraTile from "./ExtraTile";
import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
import IconizedContextMenu from "../context_menus/IconizedContextMenu";
@ -73,9 +73,7 @@ interface IProps {
onResize: () => void;
showSkeleton?: boolean;
// TODO: Don't use this. It's for community invites, and community invites shouldn't be here.
// You should feel bad if you use this.
extraBadTilesThatShouldntExist?: TemporaryTile[];
extraTiles?: ReactComponentElement<typeof ExtraTile>[];
// TODO: Account for https://github.com/vector-im/element-web/issues/14179
}
@ -95,7 +93,7 @@ interface IState {
isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
height: number;
rooms: Room[];
filteredExtraTiles?: TemporaryTile[];
filteredExtraTiles?: ReactComponentElement<typeof ExtraTile>[];
}
export default class RoomSublist extends React.Component<IProps, IState> {
@ -153,12 +151,12 @@ export default class RoomSublist extends React.Component<IProps, IState> {
return padding;
}
private get extraTiles(): TemporaryTile[] | null {
private get extraTiles(): ReactComponentElement<typeof ExtraTile>[] | null {
if (this.state.filteredExtraTiles) {
return this.state.filteredExtraTiles;
}
if (this.props.extraBadTilesThatShouldntExist) {
return this.props.extraBadTilesThatShouldntExist;
if (this.props.extraTiles) {
return this.props.extraTiles;
}
return null;
}
@ -177,7 +175,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
}
public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>) {
const prevExtraTiles = prevState.filteredExtraTiles || prevProps.extraBadTilesThatShouldntExist;
const prevExtraTiles = prevState.filteredExtraTiles || prevProps.extraTiles;
// as the rooms can come in one by one we need to reevaluate
// the amount of available rooms to cap the amount of requested visible rooms by the layout
if (RoomSublist.calcNumTiles(prevState.rooms, prevExtraTiles) !== this.numTiles) {
@ -200,8 +198,8 @@ export default class RoomSublist extends React.Component<IProps, IState> {
// If we're supposed to handle extra tiles, take the performance hit and re-render all the
// time so we don't have to consider them as part of the visible room optimization.
const prevExtraTiles = this.props.extraBadTilesThatShouldntExist || [];
const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraBadTilesThatShouldntExist) || [];
const prevExtraTiles = this.props.extraTiles || [];
const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraTiles) || [];
if (prevExtraTiles.length > 0 || nextExtraTiles.length > 0) {
return true;
}
@ -249,10 +247,10 @@ export default class RoomSublist extends React.Component<IProps, IState> {
private onListsUpdated = () => {
const stateUpdates: IState & any = {}; // &any is to avoid a cast on the initializer
if (this.props.extraBadTilesThatShouldntExist) {
if (this.props.extraTiles) {
const nameCondition = RoomListStore.instance.getFirstNameFilterCondition();
if (nameCondition) {
stateUpdates.filteredExtraTiles = this.props.extraBadTilesThatShouldntExist
stateUpdates.filteredExtraTiles = this.props.extraTiles
.filter(t => nameCondition.matches(t.props.displayName || ""));
} else if (this.state.filteredExtraTiles) {
stateUpdates.filteredExtraTiles = null;