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. limitations under the License.
*/ */
// XXX: We shouldn't be using TemporaryTile anywhere - delete it. .mx_DecoratedRoomAvatar, .mx_ExtraTile {
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
position: relative; position: relative;
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar { &.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"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -36,8 +36,7 @@ interface IState {
hover: boolean; hover: boolean;
} }
// TODO: Remove with community invites in the room list: https://github.com/vector-im/element-web/issues/14456 export default class ExtraTile extends React.Component<IProps, IState> {
export default class TemporaryTile extends React.Component<IProps, IState> {
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);
@ -57,8 +56,8 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
public render(): React.ReactElement { public render(): React.ReactElement {
// XXX: We copy classes because it's easier // XXX: We copy classes because it's easier
const classes = classNames({ const classes = classNames({
'mx_ExtraTile': true,
'mx_RoomTile': true, 'mx_RoomTile': true,
'mx_TemporaryTile': true,
'mx_RoomTile_selected': this.props.isSelected, 'mx_RoomTile_selected': this.props.isSelected,
'mx_RoomTile_minimized': this.props.isMinimized, '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. limitations under the License.
*/ */
import * as React from "react"; import React, { ReactComponentElement } from "react";
import { Dispatcher } from "flux"; import { Dispatcher } from "flux";
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import * as fbEmitter from "fbemitter"; import * as fbEmitter from "fbemitter";
@ -34,7 +34,7 @@ import RoomSublist from "./RoomSublist";
import { ActionPayload } from "../../../dispatcher/payloads"; import { ActionPayload } from "../../../dispatcher/payloads";
import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../MatrixClientPeg";
import GroupAvatar from "../avatars/GroupAvatar"; import GroupAvatar from "../avatars/GroupAvatar";
import TemporaryTile from "./TemporaryTile"; import ExtraTile from "./ExtraTile";
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState"; import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
import { NotificationColor } from "../../../stores/notifications/NotificationColor"; import { NotificationColor } from "../../../stores/notifications/NotificationColor";
import { Action } from "../../../dispatcher/actions"; import { Action } from "../../../dispatcher/actions";
@ -422,7 +422,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
dis.dispatch({ action: Action.ViewRoomDirectory, initialText }); dis.dispatch({ action: Action.ViewRoomDirectory, initialText });
}; };
private renderSuggestedRooms(): JSX.Element[] { private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {
return this.state.suggestedRooms.map(room => { return this.state.suggestedRooms.map(room => {
const name = room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room"); const name = room.name || room.canonical_alias || room.aliases.pop() || _t("Empty room");
const avatar = ( const avatar = (
@ -443,7 +443,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
}); });
}; };
return ( return (
<TemporaryTile <ExtraTile
isMinimized={this.props.isMinimized} isMinimized={this.props.isMinimized}
isSelected={this.state.currentRoomId === room.room_id} isSelected={this.state.currentRoomId === room.room_id}
displayName={name} 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) // TODO: Put community invites in a more sensible place (not in the room list)
// See https://github.com/vector-im/element-web/issues/14456 // See https://github.com/vector-im/element-web/issues/14456
return MatrixClientPeg.get().getGroups().filter(g => { return MatrixClientPeg.get().getGroups().filter(g => {
@ -476,7 +476,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
}); });
}; };
return ( return (
<TemporaryTile <ExtraTile
isMinimized={this.props.isMinimized} isMinimized={this.props.isMinimized}
isSelected={false} isSelected={false}
displayName={g.name} displayName={g.name}
@ -538,7 +538,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
isMinimized={this.props.isMinimized} isMinimized={this.props.isMinimized}
onResize={this.props.onResize} onResize={this.props.onResize}
showSkeleton={showSkeleton} 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 * as React from "react";
import {createRef} from "react"; import { createRef, ReactComponentElement } from "react";
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import classNames from 'classnames'; import classNames from 'classnames';
import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex"; import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@ -48,7 +48,7 @@ import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNo
import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore"; import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays"; import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays";
import { objectExcluding, objectHasDiff } from "../../../utils/objects"; import { objectExcluding, objectHasDiff } from "../../../utils/objects";
import TemporaryTile from "./TemporaryTile"; import ExtraTile from "./ExtraTile";
import { ListNotificationState } from "../../../stores/notifications/ListNotificationState"; import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
import IconizedContextMenu from "../context_menus/IconizedContextMenu"; import IconizedContextMenu from "../context_menus/IconizedContextMenu";
@ -73,9 +73,7 @@ interface IProps {
onResize: () => void; onResize: () => void;
showSkeleton?: boolean; showSkeleton?: boolean;
// TODO: Don't use this. It's for community invites, and community invites shouldn't be here. extraTiles?: ReactComponentElement<typeof ExtraTile>[];
// You should feel bad if you use this.
extraBadTilesThatShouldntExist?: TemporaryTile[];
// TODO: Account for https://github.com/vector-im/element-web/issues/14179 // 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 isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
height: number; height: number;
rooms: Room[]; rooms: Room[];
filteredExtraTiles?: TemporaryTile[]; filteredExtraTiles?: ReactComponentElement<typeof ExtraTile>[];
} }
export default class RoomSublist extends React.Component<IProps, IState> { export default class RoomSublist extends React.Component<IProps, IState> {
@ -153,12 +151,12 @@ export default class RoomSublist extends React.Component<IProps, IState> {
return padding; return padding;
} }
private get extraTiles(): TemporaryTile[] | null { private get extraTiles(): ReactComponentElement<typeof ExtraTile>[] | null {
if (this.state.filteredExtraTiles) { if (this.state.filteredExtraTiles) {
return this.state.filteredExtraTiles; return this.state.filteredExtraTiles;
} }
if (this.props.extraBadTilesThatShouldntExist) { if (this.props.extraTiles) {
return this.props.extraBadTilesThatShouldntExist; return this.props.extraTiles;
} }
return null; return null;
} }
@ -177,7 +175,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
} }
public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<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 // 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 // the amount of available rooms to cap the amount of requested visible rooms by the layout
if (RoomSublist.calcNumTiles(prevState.rooms, prevExtraTiles) !== this.numTiles) { 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 // 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. // time so we don't have to consider them as part of the visible room optimization.
const prevExtraTiles = this.props.extraBadTilesThatShouldntExist || []; const prevExtraTiles = this.props.extraTiles || [];
const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraBadTilesThatShouldntExist) || []; const nextExtraTiles = (nextState.filteredExtraTiles || nextProps.extraTiles) || [];
if (prevExtraTiles.length > 0 || nextExtraTiles.length > 0) { if (prevExtraTiles.length > 0 || nextExtraTiles.length > 0) {
return true; return true;
} }
@ -249,10 +247,10 @@ export default class RoomSublist extends React.Component<IProps, IState> {
private onListsUpdated = () => { private onListsUpdated = () => {
const stateUpdates: IState & any = {}; // &any is to avoid a cast on the initializer 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(); const nameCondition = RoomListStore.instance.getFirstNameFilterCondition();
if (nameCondition) { if (nameCondition) {
stateUpdates.filteredExtraTiles = this.props.extraBadTilesThatShouldntExist stateUpdates.filteredExtraTiles = this.props.extraTiles
.filter(t => nameCondition.matches(t.props.displayName || "")); .filter(t => nameCondition.matches(t.props.displayName || ""));
} else if (this.state.filteredExtraTiles) { } else if (this.state.filteredExtraTiles) {
stateUpdates.filteredExtraTiles = null; stateUpdates.filteredExtraTiles = null;