+ { children }
+
;
+};
diff --git a/src/accessibility/context_menu/MenuItem.tsx b/src/accessibility/context_menu/MenuItem.tsx
new file mode 100644
index 0000000000..64233e51ad
--- /dev/null
+++ b/src/accessibility/context_menu/MenuItem.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+
+interface IProps extends React.ComponentProps
- ;
+ className?: string;
+}
+
+const useImageUrl = ({url, urls}): [string, () => void] => {
+ const [imageUrls, setUrls] = useState([]);
+ const [urlsIndex, setIndex] = useState();
const onError = useCallback(() => {
setIndex(i => i + 1); // try the next one
@@ -70,19 +86,20 @@ const useImageUrl = ({url, urls}) => {
return [imageUrl, onError];
};
-const BaseAvatar = (props) => {
+const BaseAvatar = (props: IProps) => {
const {
name,
idName,
title,
url,
urls,
- width=40,
- height=40,
- resizeMethod="crop", // eslint-disable-line no-unused-vars
- defaultToInitialLetter=true,
+ width = 40,
+ height = 40,
+ resizeMethod = "crop", // eslint-disable-line no-unused-vars
+ defaultToInitialLetter = true,
onClick,
inputRef,
+ className,
...otherProps
} = props;
@@ -117,12 +134,12 @@ const BaseAvatar = (props) => {
aria-hidden="true" />
);
- if (onClick != null) {
+ if (onClick !== null) {
return (
@@ -132,7 +149,12 @@ const BaseAvatar = (props) => {
);
} else {
return (
-
+
{ textNode }
{ imgNode }
@@ -140,10 +162,10 @@ const BaseAvatar = (props) => {
}
}
- if (onClick != null) {
+ if (onClick !== null) {
return (
{
} else {
return (
{
}
};
-BaseAvatar.displayName = "BaseAvatar";
-
-BaseAvatar.propTypes = {
- name: PropTypes.string.isRequired, // The name (first initial used as default)
- idName: PropTypes.string, // ID for generating hash colours
- title: PropTypes.string, // onHover title text
- url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
- urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
- width: PropTypes.number,
- height: PropTypes.number,
- // XXX resizeMethod not actually used.
- resizeMethod: PropTypes.string,
- defaultToInitialLetter: PropTypes.bool, // true to add default url
- onClick: PropTypes.func,
- inputRef: PropTypes.oneOfType([
- // Either a function
- PropTypes.func,
- // Or the instance of a DOM native element
- PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
- ]),
-};
-
export default BaseAvatar;
+export type BaseAvatarType = React.FC;
\ No newline at end of file
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index e0ad3202b8..40ba15af33 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -21,8 +21,8 @@ import { TagID } from '../../../stores/room-list/models';
import RoomAvatar from "./RoomAvatar";
import RoomTileIcon from "../rooms/RoomTileIcon";
import NotificationBadge from '../rooms/NotificationBadge';
-import { INotificationState } from "../../../stores/notifications/INotificationState";
-import { TagSpecificNotificationState } from "../../../stores/notifications/TagSpecificNotificationState";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { NotificationState } from "../../../stores/notifications/NotificationState";
interface IProps {
room: Room;
@@ -33,7 +33,7 @@ interface IProps {
}
interface IState {
- notificationState?: INotificationState;
+ notificationState?: NotificationState;
}
export default class DecoratedRoomAvatar extends React.PureComponent {
@@ -42,7 +42,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent {
+ public static defaultProps = {
+ width: 36,
+ height: 36,
+ resizeMethod: 'crop',
+ };
- getDefaultProps: function() {
- return {
- width: 36,
- height: 36,
- resizeMethod: 'crop',
- };
- },
-
- getGroupAvatarUrl: function() {
+ getGroupAvatarUrl() {
return MatrixClientPeg.get().mxcUrlToHttp(
this.props.groupAvatarUrl,
this.props.width,
this.props.height,
this.props.resizeMethod,
);
- },
+ }
- render: function() {
- const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+ render() {
// extract the props we use from props so we can pass any others through
// should consider adding this as a global rule in js-sdk?
/*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
@@ -65,5 +58,5 @@ export default createReactClass({
{...otherProps}
/>
);
- },
-});
+ }
+}
diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.tsx
similarity index 64%
rename from src/components/views/avatars/MemberAvatar.js
rename to src/components/views/avatars/MemberAvatar.tsx
index b763129dd8..1d23d85b0f 100644
--- a/src/components/views/avatars/MemberAvatar.js
+++ b/src/components/views/avatars/MemberAvatar.tsx
@@ -16,48 +16,50 @@ limitations under the License.
*/
import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as sdk from "../../../index";
import dis from "../../../dispatcher/dispatcher";
import {Action} from "../../../dispatcher/actions";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import BaseAvatar from "./BaseAvatar";
-export default createReactClass({
- displayName: 'MemberAvatar',
+interface IProps {
+ // TODO: replace with correct type
+ member: any;
+ fallbackUserId: string;
+ width: number;
+ height: number;
+ resizeMethod: string;
+ // The onClick to give the avatar
+ onClick: React.MouseEventHandler;
+ // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
+ viewUserOnClick: boolean;
+ title: string;
+}
- propTypes: {
- member: PropTypes.object,
- fallbackUserId: PropTypes.string,
- width: PropTypes.number,
- height: PropTypes.number,
- resizeMethod: PropTypes.string,
- // The onClick to give the avatar
- onClick: PropTypes.func,
- // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
- viewUserOnClick: PropTypes.bool,
- title: PropTypes.string,
- },
+interface IState {
+ name: string;
+ title: string;
+ imageUrl?: string;
+}
- getDefaultProps: function() {
- return {
- width: 40,
- height: 40,
- resizeMethod: 'crop',
- viewUserOnClick: false,
- };
- },
+export default class MemberAvatar extends React.Component {
+ public static defaultProps = {
+ width: 40,
+ height: 40,
+ resizeMethod: 'crop',
+ viewUserOnClick: false,
+ };
- getInitialState: function() {
- return this._getState(this.props);
- },
+ constructor(props: IProps) {
+ super(props);
- // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- UNSAFE_componentWillReceiveProps: function(nextProps) {
- this.setState(this._getState(nextProps));
- },
+ this.state = MemberAvatar.getState(props);
+ }
- _getState: function(props) {
+ public static getDerivedStateFromProps(nextProps: IProps): IState {
+ return MemberAvatar.getState(nextProps);
+ }
+
+ private static getState(props: IProps): IState {
if (props.member && props.member.name) {
return {
name: props.member.name,
@@ -79,11 +81,9 @@ export default createReactClass({
} else {
console.error("MemberAvatar called somehow with null member or fallbackUserId");
}
- },
-
- render: function() {
- const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+ }
+ render() {
let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
const userId = member ? member.userId : fallbackUserId;
@@ -100,5 +100,5 @@ export default createReactClass({
= (props) => {
+ return {
+ public static defaultProps = {
+ width: 36,
+ height: 36,
+ resizeMethod: 'crop',
+ oobData: {},
+ };
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ urls: RoomAvatar.getImageUrls(this.props),
};
- },
+ }
- getInitialState: function() {
- return {
- urls: this.getImageUrls(this.props),
- };
- },
-
- componentDidMount: function() {
+ public componentDidMount() {
MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
- },
+ }
- componentWillUnmount: function() {
+ public componentWillUnmount() {
const cli = MatrixClientPeg.get();
if (cli) {
cli.removeListener("RoomState.events", this.onRoomStateEvents);
}
- },
+ }
- // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- UNSAFE_componentWillReceiveProps: function(newProps) {
- this.setState({
- urls: this.getImageUrls(newProps),
- });
- },
+ public static getDerivedStateFromProps(nextProps: IProps): IState {
+ return {
+ urls: RoomAvatar.getImageUrls(nextProps),
+ };
+ }
- onRoomStateEvents: function(ev) {
+ // TODO: type when js-sdk has types
+ private onRoomStateEvents = (ev: any) => {
if (!this.props.room ||
ev.getRoomId() !== this.props.room.roomId ||
ev.getType() !== 'm.room.avatar'
) return;
this.setState({
- urls: this.getImageUrls(this.props),
+ urls: RoomAvatar.getImageUrls(this.props),
});
- },
+ };
- getImageUrls: function(props) {
+ private static getImageUrls(props: IProps): string[] {
return [
getHttpUriForMxc(
MatrixClientPeg.get().getHomeserverUrl(),
+ // Default props don't play nicely with getDerivedStateFromProps
+ //props.oobData !== undefined ? props.oobData.avatarUrl : {},
props.oobData.avatarUrl,
Math.floor(props.width * window.devicePixelRatio),
Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod,
), // highest priority
- this.getRoomAvatarUrl(props),
+ RoomAvatar.getRoomAvatarUrl(props),
].filter(function(url) {
- return (url != null && url != "");
+ return (url !== null && url !== "");
});
- },
+ }
- getRoomAvatarUrl: function(props) {
+ private static getRoomAvatarUrl(props: IProps): string {
if (!props.room) return null;
return Avatar.avatarUrlForRoom(
@@ -105,35 +111,32 @@ export default createReactClass({
Math.floor(props.height * window.devicePixelRatio),
props.resizeMethod,
);
- },
+ }
- onRoomAvatarClick: function() {
+ private onRoomAvatarClick = () => {
const avatarUrl = this.props.room.getAvatarUrl(
MatrixClientPeg.get().getHomeserverUrl(),
null, null, null, false);
- const ImageView = sdk.getComponent("elements.ImageView");
const params = {
src: avatarUrl,
name: this.props.room.name,
};
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
- },
+ };
- render: function() {
- const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-
- /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
+ public render() {
const {room, oobData, viewAvatarOnClick, ...otherProps} = this.props;
const roomName = room ? room.name : oobData.name;
return (
-
+ {
}
break;
}
- case 'view_prev_room':
- this.viewNextRoom(-1);
- break;
case 'view_next_room':
this.viewNextRoom(1);
break;
- case 'view_indexed_room':
- this.viewIndexedRoom(payload.roomIndex);
- break;
case Action.ViewUserSettings: {
const tabPayload = payload as OpenToTabPayload;
const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
@@ -812,19 +806,6 @@ export default class MatrixChat extends React.PureComponent {
});
}
- // TODO: Move to RoomViewStore
- private viewIndexedRoom(roomIndex: number) {
- const allRooms = RoomListSorter.mostRecentActivityFirst(
- MatrixClientPeg.get().getRooms(),
- );
- if (allRooms[roomIndex]) {
- dis.dispatch({
- action: 'view_room',
- room_id: allRooms[roomIndex].roomId,
- });
- }
- }
-
// switch view to the given room
//
// @param {Object} roomInfo Object containing data about the room to be joined
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index 7ed2acf276..231bd92ddf 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -25,7 +25,7 @@ import { Key } from "../../Keyboard";
import AccessibleButton from "../views/elements/AccessibleButton";
import { Action } from "../../dispatcher/actions";
-// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231
+// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
/*******************************************************************
* CAUTION *
@@ -39,6 +39,7 @@ interface IProps {
onQueryUpdate: (newQuery: string) => void;
isMinimized: boolean;
onVerticalArrow(ev: React.KeyboardEvent);
+ onEnter(ev: React.KeyboardEvent);
}
interface IState {
@@ -81,6 +82,7 @@ export default class RoomSearch extends React.PureComponent {
private openSearch = () => {
defaultDispatcher.dispatch({action: "show_left_panel"});
+ defaultDispatcher.dispatch({action: "focus_room_filter"});
};
private onChange = () => {
@@ -104,7 +106,7 @@ export default class RoomSearch extends React.PureComponent {
ev.target.select();
};
- private onBlur = () => {
+ private onBlur = (ev: React.FocusEvent) => {
this.setState({focused: false});
};
@@ -114,6 +116,8 @@ export default class RoomSearch extends React.PureComponent {
defaultDispatcher.fire(Action.FocusComposer);
} else if (ev.key === Key.ARROW_UP || ev.key === Key.ARROW_DOWN) {
this.props.onVerticalArrow(ev);
+ } else if (ev.key === Key.ENTER) {
+ this.props.onEnter(ev);
}
};
@@ -149,7 +153,8 @@ export default class RoomSearch extends React.PureComponent {
let clearButton = (
{
if (this.props.isMinimized) {
icon = (
0}
numUnreadMessages={this.state.numUnreadMessages}
onScrollToBottomClick={this.jumpToLiveTimeline}
/>);
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 5955a046a4..a6eabe25f7 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -14,14 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import * as React from "react";
+import React, { createRef } from "react";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { ActionPayload } from "../../dispatcher/payloads";
import { Action } from "../../dispatcher/actions";
-import { createRef } from "react";
import { _t } from "../../languageHandler";
-import {ContextMenu, ContextMenuButton, MenuItem} from "./ContextMenu";
+import { ChevronFace, ContextMenu, ContextMenuButton, MenuItem } from "./ContextMenu";
import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
@@ -122,7 +121,7 @@ export default class UserMenu extends React.Component {
}
};
- private onOpenMenuClick = (ev: InputEvent) => {
+ private onOpenMenuClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -235,7 +234,7 @@ export default class UserMenu extends React.Component {
return (
{
label={_t("All settings")}
onClick={(e) => this.onSettingsOpen(e, null)}
/>
- {
className={classes}
onClick={this.onOpenMenuClick}
inputRef={this.buttonRef}
- label={_t("Account settings")}
+ label={_t("User menu")}
isExpanded={!!this.state.contextMenuPosition}
onContextMenu={this.onContextMenu}
>
@@ -348,8 +347,8 @@ export default class UserMenu extends React.Component {
{name}
{buttons}
- {this.renderContextMenu()}
+ {this.renderContextMenu()}
);
}
diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.tsx
similarity index 75%
rename from src/components/views/avatars/BaseAvatar.js
rename to src/components/views/avatars/BaseAvatar.tsx
index 508691e5fd..7f30a7a377 100644
--- a/src/components/views/avatars/BaseAvatar.js
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -18,7 +18,7 @@ limitations under the License.
*/
import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
import * as AvatarLogic from '../../../Avatar';
import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from '../elements/AccessibleButton';
@@ -26,9 +26,25 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
import {toPx} from "../../../utils/units";
-const useImageUrl = ({url, urls}) => {
- const [imageUrls, setUrls] = useState([]);
- const [urlsIndex, setIndex] = useState();
+interface IProps {
+ name: string; // The name (first initial used as default)
+ idName?: string; // ID for generating hash colours
+ title?: string; // onHover title text
+ url?: string; // highest priority of them all, shortcut to set in urls[0]
+ urls?: string[]; // [highest_priority, ... , lowest_priority]
+ width?: number;
+ height?: number;
+ // XXX: resizeMethod not actually used.
+ resizeMethod?: string;
+ defaultToInitialLetter?: boolean; // true to add default url
+ onClick?: React.MouseEventHandler;
+ inputRef?: React.RefObject
+
- { children }
-
- );
-};
-ContextMenuButton.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string,
- isExpanded: PropTypes.bool.isRequired, // whether or not the context menu is currently open
-};
-
-// Semantic component for representing a role=menuitem
-export const MenuItem = ({children, label, ...props}) => {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return (
-
- { children }
-
- );
-};
-MenuItem.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string, // optional
- className: PropTypes.string, // optional
- onClick: PropTypes.func.isRequired,
-};
-
-// Semantic component for representing a role=group for grouping menu radios/checkboxes
-export const MenuGroup = ({children, label, ...props}) => {
- return
- { children }
-
- );
-};
-MenuItemCheckbox.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string, // optional
- active: PropTypes.bool.isRequired,
- disabled: PropTypes.bool, // optional
- className: PropTypes.string, // optional
- onClick: PropTypes.func.isRequired,
-};
-
-// Semantic component for representing a role=menuitemradio
-export const MenuItemRadio = ({children, label, active=false, disabled=false, ...props}) => {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return (
-
- { children }
-
- );
-};
-MenuItemRadio.propTypes = {
- ...AccessibleButton.propTypes,
- label: PropTypes.string, // optional
- active: PropTypes.bool.isRequired,
- disabled: PropTypes.bool, // optional
- className: PropTypes.string, // optional
- onClick: PropTypes.func.isRequired,
-};
-
// Placement method for {
private listContainerRef: React.RefObject = createRef();
private tagPanelWatcherRef: string;
private focusedElement = null;
-
- // TODO: a11y: https://github.com/vector-im/riot-web/issues/14180
+ private isDoingStickyHeaders = false;
constructor(props: IProps) {
super(props);
@@ -105,40 +115,131 @@ export default class LeftPanel2 extends React.Component {
};
private handleStickyHeaders(list: HTMLDivElement) {
- const rlRect = list.getBoundingClientRect();
- const bottom = rlRect.bottom;
- const top = rlRect.top;
+ if (this.isDoingStickyHeaders) return;
+ this.isDoingStickyHeaders = true;
+ window.requestAnimationFrame(() => {
+ this.doStickyHeaders(list);
+ this.isDoingStickyHeaders = false;
+ });
+ }
+
+ private doStickyHeaders(list: HTMLDivElement) {
+ const topEdge = list.scrollTop;
+ const bottomEdge = list.offsetHeight + list.scrollTop;
const sublists = list.querySelectorAll(".mx_RoomSublist2");
- const headerHeight = 32; // Note: must match the CSS!
- const headerRightMargin = 24; // calculated from margins and widths to align with non-sticky tiles
- const headerStickyWidth = rlRect.width - headerRightMargin;
+ const headerRightMargin = 16; // calculated from margins and widths to align with non-sticky tiles
+ const headerStickyWidth = list.clientWidth - headerRightMargin;
- let gotBottom = false;
+ // We track which styles we want on a target before making the changes to avoid
+ // excessive layout updates.
+ const targetStyles = new Map();
+
+ let lastTopHeader;
+ let firstBottomHeader;
for (const sublist of sublists) {
- const slRect = sublist.getBoundingClientRect();
-
const header = sublist.querySelector(".mx_RoomSublist2_stickable");
+ header.style.removeProperty("display"); // always clear display:none first
- if (slRect.top + headerHeight > bottom && !gotBottom) {
- header.classList.add("mx_RoomSublist2_headerContainer_sticky");
- header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
- header.style.width = `${headerStickyWidth}px`;
- header.style.top = `unset`;
- gotBottom = true;
- } else if (slRect.top < top) {
- header.classList.add("mx_RoomSublist2_headerContainer_sticky");
- header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
- header.style.width = `${headerStickyWidth}px`;
- header.style.top = `${rlRect.top}px`;
+ // When an element is <=40% off screen, make it take over
+ const offScreenFactor = 0.4;
+ const isOffTop = (sublist.offsetTop + (offScreenFactor * HEADER_HEIGHT)) <= topEdge;
+ const isOffBottom = (sublist.offsetTop + (offScreenFactor * HEADER_HEIGHT)) >= bottomEdge;
+
+ if (isOffTop || sublist === sublists[0]) {
+ targetStyles.set(header, { stickyTop: true });
+ if (lastTopHeader) {
+ lastTopHeader.style.display = "none";
+ targetStyles.set(lastTopHeader, { makeInvisible: true });
+ }
+ lastTopHeader = header;
+ } else if (isOffBottom && !firstBottomHeader) {
+ targetStyles.set(header, { stickyBottom: true });
+ firstBottomHeader = header;
} else {
- header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
- header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
- header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
- header.style.width = `unset`;
- header.style.top = `unset`;
+ targetStyles.set(header, {}); // nothing == clear
}
}
+
+ // Run over the style changes and make them reality. We check to see if we're about to
+ // cause a no-op update, as adding/removing properties that are/aren't there cause
+ // layout updates.
+ for (const header of targetStyles.keys()) {
+ const style = targetStyles.get(header);
+ const headerContainer = header.parentElement; // .mx_RoomSublist2_headerContainer
+
+ if (style.makeInvisible) {
+ // we will have already removed the 'display: none', so add it back.
+ header.style.display = "none";
+ continue; // nothing else to do, even if sticky somehow
+ }
+
+ if (style.stickyTop) {
+ if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
+ header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
+ }
+
+ const newTop = `${list.parentElement.offsetTop}px`;
+ if (header.style.top !== newTop) {
+ header.style.top = newTop;
+ }
+ } else if (style.stickyBottom) {
+ if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
+ header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
+ }
+ }
+
+ if (style.stickyTop || style.stickyBottom) {
+ if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
+ header.classList.add("mx_RoomSublist2_headerContainer_sticky");
+ }
+ if (!headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
+ headerContainer.classList.add("mx_RoomSublist2_headerContainer_hasSticky");
+ }
+
+ const newWidth = `${headerStickyWidth}px`;
+ if (header.style.width !== newWidth) {
+ header.style.width = newWidth;
+ }
+ } else if (!style.stickyTop && !style.stickyBottom) {
+ if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
+ header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
+ }
+ if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
+ header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
+ }
+ if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
+ header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
+ }
+ if (headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
+ headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky");
+ }
+ if (header.style.width) {
+ header.style.removeProperty('width');
+ }
+ if (header.style.top) {
+ header.style.removeProperty('top');
+ }
+ }
+ }
+
+ // add appropriate sticky classes to wrapper so it has
+ // the necessary top/bottom padding to put the sticky header in
+ const listWrapper = list.parentElement; // .mx_LeftPanel2_roomListWrapper
+ if (lastTopHeader) {
+ listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyTop");
+ } else {
+ listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyTop");
+ }
+ if (firstBottomHeader) {
+ listWrapper.classList.add("mx_LeftPanel2_roomListWrapper_stickyBottom");
+ } else {
+ listWrapper.classList.remove("mx_LeftPanel2_roomListWrapper_stickyBottom");
+ }
}
// TODO: Improve header reliability: https://github.com/vector-im/riot-web/issues/14232
@@ -173,6 +274,14 @@ export default class LeftPanel2 extends React.Component {
}
};
+ private onEnter = () => {
+ const firstRoom = this.listContainerRef.current.querySelector(".mx_RoomTile2");
+ if (firstRoom) {
+ firstRoom.click();
+ this.onSearch(""); // clear the search field
+ }
+ };
+
private onMoveFocus = (up: boolean) => {
let element = this.focusedElement;
@@ -204,10 +313,7 @@ export default class LeftPanel2 extends React.Component {
if (element) {
classes = element.classList;
}
- } while (element && !(
- classes.contains("mx_RoomTile2") ||
- classes.contains("mx_RoomSublist2_headerText") ||
- classes.contains("mx_RoomSearch_input")));
+ } while (element && !cssClasses.some(c => classes.contains(c)));
if (element) {
element.focus();
@@ -217,11 +323,14 @@ export default class LeftPanel2 extends React.Component {
private renderHeader(): React.ReactNode {
let breadcrumbs;
- if (this.state.showBreadcrumbs) {
+ if (this.state.showBreadcrumbs && !this.props.isMinimized) {
breadcrumbs = (
-
+
);
}
@@ -235,17 +344,22 @@ export default class LeftPanel2 extends React.Component {
private renderSearchExplore(): React.ReactNode {
return (
-
+
{ chevron }
{ props.children }
@@ -348,99 +382,13 @@ export class ContextMenu extends React.Component {
);
}
- render() {
+ render(): React.ReactChild {
return ReactDOM.createPortal(this.renderMenu(), getOrCreateContainer());
}
}
-// Semantic component for representing the AccessibleButton which launches a
- { children }
-
;
-};
-MenuGroup.propTypes = {
- label: PropTypes.string.isRequired,
- className: PropTypes.string, // optional
-};
-
-// Semantic component for representing a role=menuitemcheckbox
-export const MenuItemCheckbox = ({children, label, active=false, disabled=false, ...props}) => {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return (
-
- {this.props.isMinimized ? null :
+
+
{
onFocus={this.onFocus}
onBlur={this.onBlur}
isMinimized={this.props.isMinimized}
+ onResize={this.onResize}
/>;
// TODO: Conference handling / calls: https://github.com/vector-im/riot-web/issues/14177
@@ -287,15 +402,17 @@ export default class LeftPanel2 extends React.Component {
+ {props.children}
+
;
+};
+
+export default PulsedAvatar;
\ No newline at end of file
diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.tsx
similarity index 56%
rename from src/components/views/avatars/RoomAvatar.js
rename to src/components/views/avatars/RoomAvatar.tsx
index a72d318b8d..3317ed3a60 100644
--- a/src/components/views/avatars/RoomAvatar.js
+++ b/src/components/views/avatars/RoomAvatar.tsx
@@ -13,90 +13,96 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import React from 'react';
+import Room from 'matrix-js-sdk/src/models/room';
+import {getHttpUriForMxc} from 'matrix-js-sdk/src/content-repo';
+
+import BaseAvatar from './BaseAvatar';
+import ImageView from '../elements/ImageView';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
-import * as sdk from "../../../index";
import * as Avatar from '../../../Avatar';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
-
-export default createReactClass({
- displayName: 'RoomAvatar',
+interface IProps {
// Room may be left unset here, but if it is,
// oobData.avatarUrl should be set (else there
// would be nowhere to get the avatar from)
- propTypes: {
- room: PropTypes.object,
- oobData: PropTypes.object,
- width: PropTypes.number,
- height: PropTypes.number,
- resizeMethod: PropTypes.string,
- viewAvatarOnClick: PropTypes.bool,
- },
+ room?: Room;
+ // TODO: type when js-sdk has types
+ oobData?: any;
+ width?: number;
+ height?: number;
+ resizeMethod?: string;
+ viewAvatarOnClick?: boolean;
+}
- getDefaultProps: function() {
- return {
- width: 36,
- height: 36,
- resizeMethod: 'crop',
- oobData: {},
+interface IState {
+ urls: string[];
+}
+
+export default class RoomAvatar extends React.Component{props.numUnreadMessages}
);
}
- return (
+ return (
diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
index 829b05fbfc..941a057927 100644
--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@@ -22,11 +22,10 @@ import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { readReceiptChangeIsFor } from "../../../utils/read-receipts";
import AccessibleButton from "../elements/AccessibleButton";
import { XOR } from "../../../@types/common";
-import { INotificationState, NOTIFICATION_STATE_UPDATE } from "../../../stores/notifications/INotificationState";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState";
interface IProps {
- notification: INotificationState;
+ notification: NotificationState;
/**
* If true, the badge will show a count if at all possible. This is typically
@@ -97,19 +96,17 @@ export default class NotificationBadge extends React.PureComponent= NotificationColor.Red;
- const hasCount = notification.color >= NotificationColor.Grey;
const hasAnySymbol = notification.symbol || notification.count > 0;
- let isEmptyBadge = !hasAnySymbol || !hasCount;
+ let isEmptyBadge = !hasAnySymbol || !notification.hasUnreadCount;
if (forceCount) {
isEmptyBadge = false;
- if (!hasCount) return null; // Can't render a badge
+ if (!notification.hasUnreadCount) return null; // Can't render a badge
}
let symbol = notification.symbol || formatMinimalBadgeCount(notification.count);
@@ -117,8 +114,8 @@ export default class NotificationBadge extends React.PureComponent 0 && symbol.length < 3,
'mx_NotificationBadge_3char': symbol.length > 2,
diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx
index 687f4dd73e..7d0584ef66 100644
--- a/src/components/views/rooms/RoomBreadcrumbs2.tsx
+++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx
@@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
-import AccessibleButton from "../elements/AccessibleButton";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import { _t } from "../../../languageHandler";
import { Room } from "matrix-js-sdk/src/models/room";
@@ -28,8 +27,8 @@ import RoomListStore from "../../../stores/room-list/RoomListStore2";
import { DefaultTagID } from "../../../stores/room-list/models";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
/*******************************************************************
* CAUTION *
@@ -92,9 +91,6 @@ export default class RoomBreadcrumbs2 extends React.PureComponent {
const roomTags = RoomListStore.instance.getTagsForRoom(r);
const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
diff --git a/src/components/views/rooms/RoomList2.tsx b/src/components/views/rooms/RoomList2.tsx
index b0bb70c9a0..67787963a3 100644
--- a/src/components/views/rooms/RoomList2.tsx
+++ b/src/components/views/rooms/RoomList2.tsx
@@ -17,27 +17,32 @@ limitations under the License.
*/
import * as React from "react";
+import { Dispatcher } from "flux";
+import { Room } from "matrix-js-sdk/src/models/room";
+
import { _t, _td } from "../../../languageHandler";
import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
import { ResizeNotifier } from "../../../utils/ResizeNotifier";
-import RoomListStore, { LISTS_UPDATE_EVENT, RoomListStore2 } from "../../../stores/room-list/RoomListStore2";
+import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore2";
+import RoomViewStore from "../../../stores/RoomViewStore";
import { ITagMap } from "../../../stores/room-list/algorithms/models";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
-import { Dispatcher } from "flux";
import dis from "../../../dispatcher/dispatcher";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import RoomSublist2 from "./RoomSublist2";
import { ActionPayload } from "../../../dispatcher/payloads";
import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition";
-import { ListLayout } from "../../../stores/room-list/ListLayout";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import GroupAvatar from "../avatars/GroupAvatar";
import TemporaryTile from "./TemporaryTile";
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { Action } from "../../../dispatcher/actions";
+import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
/*******************************************************************
* CAUTION *
@@ -51,6 +56,7 @@ interface IProps {
onKeyDown: (ev: React.KeyboardEvent) => void;
onFocus: (ev: React.FocusEvent) => void;
onBlur: (ev: React.FocusEvent) => void;
+ onResize: () => void;
resizeNotifier: ResizeNotifier;
collapsed: boolean;
searchFilter: string;
@@ -59,12 +65,9 @@ interface IProps {
interface IState {
sublists: ITagMap;
- layouts: Map;
}
const TAG_ORDER: TagID[] = [
- // -- Community Invites Placeholder --
-
DefaultTagID.Invite,
DefaultTagID.Favourite,
DefaultTagID.DM,
@@ -76,7 +79,6 @@ const TAG_ORDER: TagID[] = [
DefaultTagID.ServerNotice,
DefaultTagID.Archived,
];
-const COMMUNITY_TAGS_BEFORE_TAG = DefaultTagID.Invite;
const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
const ALWAYS_VISIBLE_TAGS: TagID[] = [
DefaultTagID.DM,
@@ -140,14 +142,16 @@ const TAG_AESTHETICS: {
export default class RoomList2 extends React.Component {
private searchFilter: NameFilterCondition = new NameFilterCondition();
+ private dispatcherRef;
constructor(props: IProps) {
super(props);
this.state = {
sublists: {},
- layouts: new Map(),
};
+
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
}
public componentDidUpdate(prevProps: Readonly): void {
@@ -172,25 +176,64 @@ export default class RoomList2 extends React.Component {
public componentWillUnmount() {
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
+ defaultDispatcher.unregister(this.dispatcherRef);
}
+ private onAction = (payload: ActionPayload) => {
+ if (payload.action === Action.ViewRoomDelta) {
+ const viewRoomDeltaPayload = payload as ViewRoomDeltaPayload;
+ const currentRoomId = RoomViewStore.getRoomId();
+ const room = this.getRoomDelta(currentRoomId, viewRoomDeltaPayload.delta, viewRoomDeltaPayload.unread);
+ if (room) {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: room.roomId,
+ show_room_tile: true, // to make sure the room gets scrolled into view
+ });
+ }
+ }
+ };
+
+ private getRoomDelta = (roomId: string, delta: number, unread = false) => {
+ const lists = RoomListStore.instance.orderedLists;
+ let rooms: Room = [];
+ TAG_ORDER.forEach(t => {
+ let listRooms = lists[t];
+
+ if (unread) {
+ // filter to only notification rooms (and our current active room so we can index properly)
+ listRooms = listRooms.filter(r => {
+ const state = RoomNotificationStateStore.instance.getRoomState(r, t);
+ return state.room.roomId === roomId || state.isUnread;
+ });
+ }
+
+ rooms.push(...listRooms);
+ });
+
+ const currentIndex = rooms.findIndex(r => r.roomId === roomId);
+ // use slice to account for looping around the start
+ const [room] = rooms.slice((currentIndex + delta) % rooms.length);
+ return room;
+ };
+
private updateLists = () => {
const newLists = RoomListStore.instance.orderedLists;
- console.log("new lists", newLists);
-
- const layoutMap = new Map();
- for (const tagId of Object.keys(newLists)) {
- layoutMap.set(tagId, new ListLayout(tagId));
+ if (!window.mx_QuietRoomListLogging) {
+ // TODO: Remove debug: https://github.com/vector-im/riot-web/issues/14035
+ console.log("new lists", newLists);
}
- this.setState({sublists: newLists, layouts: layoutMap});
+ this.setState({sublists: newLists}, () => {
+ this.props.onResize();
+ });
};
private renderCommunityInvites(): React.ReactElement[] {
// TODO: Put community invites in a more sensible place (not in the room list)
return MatrixClientPeg.get().getGroups().filter(g => {
if (g.myMembership !== 'invite') return false;
- return !this.searchFilter || this.searchFilter.matches(g.name);
+ return !this.searchFilter || this.searchFilter.matches(g.name || "");
}).map(g => {
const avatar = (
{
const components: React.ReactElement[] = [];
for (const orderedTagId of TAG_ORDER) {
- if (COMMUNITY_TAGS_BEFORE_TAG === orderedTagId) {
- // Populate community invites if we have the chance
- // TODO: Community invites: https://github.com/vector-im/riot-web/issues/14179
- }
if (CUSTOM_TAGS_BEFORE_TAG === orderedTagId) {
// Populate custom tags if needed
// TODO: Custom tags: https://github.com/vector-im/riot-web/issues/14091
}
const orderedRooms = this.state.sublists[orderedTagId] || [];
- if (orderedRooms.length === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
+ const extraTiles = orderedTagId === DefaultTagID.Invite ? this.renderCommunityInvites() : null;
+ const totalTiles = orderedRooms.length + (extraTiles ? extraTiles.length : 0);
+ if (totalTiles === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
continue; // skip tag - not needed
}
@@ -242,7 +283,6 @@ export default class RoomList2 extends React.Component {
if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null;
- const extraTiles = orderedTagId === DefaultTagID.Invite ? this.renderCommunityInvites() : null;
components.push(
{
label={_t(aesthetics.sectionLabel)}
onAddRoom={onAddRoomFn}
addRoomLabel={aesthetics.addRoomLabel}
- isInvite={aesthetics.isInvite}
- layout={this.state.layouts.get(orderedTagId)}
isMinimized={this.props.isMinimized}
+ onResize={this.props.onResize}
extraBadTilesThatShouldntExist={extraTiles}
+ isFiltered={!!this.searchFilter.search}
/>
);
}
@@ -276,9 +316,6 @@ export default class RoomList2 extends React.Component {
className="mx_RoomList2"
role="tree"
aria-label={_t("Rooms")}
- // Firefox sometimes makes this element focusable due to
- // overflow:scroll;, so force it out of tab order.
- tabIndex={-1}
>{sublists}
)}
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 21e7c581f0..3623b8d48d 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -17,30 +17,39 @@ limitations under the License.
*/
import * as React from "react";
-import { createRef } from "react";
+import {createRef, UIEventHandler} from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import classNames from 'classnames';
-import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../../views/elements/AccessibleButton";
import RoomTile2 from "./RoomTile2";
-import { ResizableBox, ResizeCallbackData } from "react-resizable";
import { ListLayout } from "../../../stores/room-list/ListLayout";
-import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
-import StyledCheckbox from "../elements/StyledCheckbox";
-import StyledRadioButton from "../elements/StyledRadioButton";
+import {
+ ChevronFace,
+ ContextMenu,
+ ContextMenuButton,
+ StyledMenuItemCheckbox,
+ StyledMenuItemRadio,
+} from "../../structures/ContextMenu";
import RoomListStore from "../../../stores/room-list/RoomListStore2";
import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorithms/models";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import dis from "../../../dispatcher/dispatcher";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
import NotificationBadge from "./NotificationBadge";
import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
-import Tooltip from "../elements/Tooltip";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { Key } from "../../../Keyboard";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import { Enable, Resizable } from "re-resizable";
+import { Direction } from "re-resizable/lib/resizer";
+import { polyfillTouchEvent } from "../../../@types/polyfill";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
-// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
/*******************************************************************
* CAUTION *
@@ -50,11 +59,15 @@ import { Key } from "../../../Keyboard";
* warning disappears. *
*******************************************************************/
-const SHOW_N_BUTTON_HEIGHT = 32; // As defined by CSS
+const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
+export const HEADER_HEIGHT = 32; // As defined by CSS
const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
+// HACK: We really shouldn't have to do this.
+polyfillTouchEvent();
+
interface IProps {
forRooms: boolean;
rooms?: Room[];
@@ -62,10 +75,10 @@ interface IProps {
label: string;
onAddRoom?: () => void;
addRoomLabel: string;
- isInvite: boolean;
- layout: ListLayout;
isMinimized: boolean;
tagId: TagID;
+ onResize: () => void;
+ isFiltered: 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.
@@ -74,78 +87,178 @@ interface IProps {
// TODO: Account for https://github.com/vector-im/riot-web/issues/14179
}
+// TODO: Use re-resizer's NumberSize when it is exposed as the type
+interface ResizeDelta {
+ width: number;
+ height: number;
+}
+
type PartialDOMRect = Pick;
interface IState {
notificationState: ListNotificationState;
contextMenuPosition: PartialDOMRect;
isResizing: boolean;
+ isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
+ height: number;
}
export default class RoomSublist2 extends React.Component {
private headerButton = createRef();
private sublistRef = createRef();
+ private dispatcherRef: string;
+ private layout: ListLayout;
+ private heightAtStart: number;
constructor(props: IProps) {
super(props);
+ this.layout = RoomListLayoutStore.instance.getLayoutFor(this.props.tagId);
+ this.heightAtStart = 0;
+ const height = this.calculateInitialHeight();
this.state = {
- notificationState: new ListNotificationState(this.props.isInvite, this.props.tagId),
+ notificationState: RoomNotificationStateStore.instance.getListState(this.props.tagId),
contextMenuPosition: null,
isResizing: false,
+ isExpanded: this.props.isFiltered ? this.props.isFiltered : !this.layout.isCollapsed,
+ height,
};
this.state.notificationState.setRooms(this.props.rooms);
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
+ }
+
+ private calculateInitialHeight() {
+ const requestedVisibleTiles = Math.max(Math.floor(this.layout.visibleTiles), this.layout.minVisibleTiles);
+ const tileCount = Math.min(this.numTiles, requestedVisibleTiles);
+ return this.layout.tilesToPixelsWithPadding(tileCount, this.padding);
+ }
+
+ private get padding() {
+ let padding = RESIZE_HANDLE_HEIGHT;
+ // this is used for calculating the max height of the whole container,
+ // and takes into account whether there should be room reserved for the show less button
+ // when fully expanded. Note that the show more button might still be shown when not fully expanded,
+ // but in this case it will take the space of a tile and we don't need to reserve space for it.
+ if (this.numTiles > this.layout.defaultVisibleTiles) {
+ padding += SHOW_N_BUTTON_HEIGHT;
+ }
+ return padding;
}
private get numTiles(): number {
- return (this.props.rooms || []).length + (this.props.extraBadTilesThatShouldntExist || []).length;
+ return RoomSublist2.calcNumTiles(this.props);
+ }
+
+ private static calcNumTiles(props) {
+ return (props.rooms || []).length + (props.extraBadTilesThatShouldntExist || []).length;
}
private get numVisibleTiles(): number {
- if (!this.props.layout) return 0;
- const nVisible = Math.floor(this.props.layout.visibleTiles);
+ const nVisible = Math.ceil(this.layout.visibleTiles);
return Math.min(nVisible, this.numTiles);
}
- public componentDidUpdate() {
+ public componentDidUpdate(prevProps: Readonly) {
this.state.notificationState.setRooms(this.props.rooms);
+ if (prevProps.isFiltered !== this.props.isFiltered) {
+ if (this.props.isFiltered) {
+ this.setState({isExpanded: true});
+ } else {
+ this.setState({isExpanded: !this.layout.isCollapsed});
+ }
+ }
+ // 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 (RoomSublist2.calcNumTiles(prevProps) !== this.numTiles) {
+ this.setState({height: this.calculateInitialHeight()});
+ }
}
public componentWillUnmount() {
this.state.notificationState.destroy();
+ defaultDispatcher.unregister(this.dispatcherRef);
}
+ private onAction = (payload: ActionPayload) => {
+ if (payload.action === "view_room" && payload.show_room_tile && this.props.rooms) {
+ // XXX: we have to do this a tick later because we have incorrect intermediate props during a room change
+ // where we lose the room we are changing from temporarily and then it comes back in an update right after.
+ setImmediate(() => {
+ const roomIndex = this.props.rooms.findIndex((r) => r.roomId === payload.room_id);
+
+ if (!this.state.isExpanded && roomIndex > -1) {
+ this.toggleCollapsed();
+ }
+ // extend the visible section to include the room if it is entirely invisible
+ if (roomIndex >= this.numVisibleTiles) {
+ this.layout.visibleTiles = this.layout.tilesWithPadding(roomIndex + 1, MAX_PADDING_HEIGHT);
+ this.forceUpdate(); // because the layout doesn't trigger a re-render
+ }
+ });
+ }
+ };
+
private onAddRoom = (e) => {
e.stopPropagation();
if (this.props.onAddRoom) this.props.onAddRoom();
};
- private onResize = (e: React.MouseEvent, data: ResizeCallbackData) => {
- const direction = e.movementY < 0 ? -1 : +1;
- const tileDiff = this.props.layout.pixelsToTiles(Math.abs(e.movementY)) * direction;
- this.props.layout.setVisibleTilesWithin(tileDiff, this.numTiles);
- this.forceUpdate(); // because the layout doesn't trigger a re-render
+ private applyHeightChange(newHeight: number) {
+ const heightInTiles = Math.ceil(this.layout.pixelsToTiles(newHeight - this.padding));
+ this.layout.visibleTiles = Math.min(this.numTiles, heightInTiles);
+ }
+
+ private onResize = (
+ e: MouseEvent | TouchEvent,
+ travelDirection: Direction,
+ refToElement: HTMLDivElement,
+ delta: ResizeDelta,
+ ) => {
+ const newHeight = this.heightAtStart + delta.height;
+ this.applyHeightChange(newHeight);
+ this.setState({height: newHeight});
};
private onResizeStart = () => {
+ this.heightAtStart = this.state.height;
this.setState({isResizing: true});
};
- private onResizeStop = () => {
- this.setState({isResizing: false});
+ private onResizeStop = (
+ e: MouseEvent | TouchEvent,
+ travelDirection: Direction,
+ refToElement: HTMLDivElement,
+ delta: ResizeDelta,
+ ) => {
+ const newHeight = this.heightAtStart + delta.height;
+ this.applyHeightChange(newHeight);
+ this.setState({isResizing: false, height: newHeight});
};
private onShowAllClick = () => {
- this.props.layout.visibleTiles = this.props.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT);
- this.forceUpdate(); // because the layout doesn't trigger a re-render
+ const newHeight = this.layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
+ this.applyHeightChange(newHeight);
+ this.setState({height: newHeight}, () => {
+ this.focusRoomTile(this.numTiles - 1);
+ });
};
private onShowLessClick = () => {
- this.props.layout.visibleTiles = this.props.layout.defaultVisibleTiles;
- this.forceUpdate(); // because the layout doesn't trigger a re-render
+ const newHeight = this.layout.tilesToPixelsWithPadding(this.layout.defaultVisibleTiles, this.padding);
+ this.applyHeightChange(newHeight);
+ this.setState({height: newHeight});
};
- private onOpenMenuClick = (ev: InputEvent) => {
+ private focusRoomTile = (index: number) => {
+ if (!this.sublistRef.current) return;
+ const elements = this.sublistRef.current.querySelectorAll(".mx_RoomTile2");
+ const element = elements && elements[index];
+ if (element) {
+ element.focus();
+ }
+ };
+
+ private onOpenMenuClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -179,7 +292,7 @@ export default class RoomSublist2 extends React.Component {
};
private onMessagePreviewChanged = () => {
- this.props.layout.showPreviews = !this.props.layout.showPreviews;
+ this.layout.showPreviews = !this.layout.showPreviews;
this.forceUpdate(); // because the layout doesn't trigger a re-render
};
@@ -203,6 +316,7 @@ export default class RoomSublist2 extends React.Component {
dis.dispatch({
action: 'view_room',
room_id: room.roomId,
+ show_room_tile: true, // to make sure the room gets scrolled into view
});
}
};
@@ -216,7 +330,11 @@ export default class RoomSublist2 extends React.Component {
const possibleSticky = target.parentElement;
const sublist = possibleSticky.parentElement.parentElement;
- if (possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_sticky')) {
+ const list = sublist.parentElement.parentElement;
+ // the scrollTop is capped at the height of the header in LeftPanel2
+ const isAtTop = list.scrollTop <= HEADER_HEIGHT;
+ const isSticky = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_sticky');
+ if (isSticky && !isAtTop) {
// is sticky - jump to list
sublist.scrollIntoView({behavior: 'smooth'});
} else {
@@ -226,23 +344,23 @@ export default class RoomSublist2 extends React.Component {
};
private toggleCollapsed = () => {
- this.props.layout.isCollapsed = !this.props.layout.isCollapsed;
- this.forceUpdate(); // because the layout doesn't trigger an update
+ this.layout.isCollapsed = this.state.isExpanded;
+ this.setState({isExpanded: !this.layout.isCollapsed});
+ setImmediate(() => this.props.onResize()); // needs to happen when the DOM is updated
};
private onHeaderKeyDown = (ev: React.KeyboardEvent) => {
- const isCollapsed = this.props.layout && this.props.layout.isCollapsed;
switch (ev.key) {
case Key.ARROW_LEFT:
ev.stopPropagation();
- if (!isCollapsed) {
+ if (this.state.isExpanded) {
// On ARROW_LEFT collapse the room sublist if it isn't already
this.toggleCollapsed();
}
break;
case Key.ARROW_RIGHT: {
ev.stopPropagation();
- if (isCollapsed) {
+ if (!this.state.isExpanded) {
// On ARROW_RIGHT expand the room sublist if it isn't already
this.toggleCollapsed();
} else if (this.sublistRef.current) {
@@ -271,17 +389,13 @@ export default class RoomSublist2 extends React.Component {
};
private renderVisibleTiles(): React.ReactElement[] {
- if (this.props.layout && this.props.layout.isCollapsed) {
+ if (!this.state.isExpanded) {
// don't waste time on rendering
return [];
}
const tiles: React.ReactElement[] = [];
- if (this.props.extraBadTilesThatShouldntExist) {
- tiles.push(...this.props.extraBadTilesThatShouldntExist);
- }
-
if (this.props.rooms) {
const visibleRooms = this.props.rooms.slice(0, this.numVisibleTiles);
for (const room of visibleRooms) {
@@ -289,7 +403,7 @@ export default class RoomSublist2 extends React.Component {
{
}
}
+ if (this.props.extraBadTilesThatShouldntExist) {
+ tiles.push(...this.props.extraBadTilesThatShouldntExist);
+ }
+
// We only have to do this because of the extra tiles. We do it conditionally
// to avoid spending cycles on slicing. It's generally fine to do this though
// as users are unlikely to have more than a handful of tiles when the extra
@@ -309,18 +427,45 @@ export default class RoomSublist2 extends React.Component {
}
private renderMenu(): React.ReactElement {
- // TODO: Get a proper invite context menu, or take invites out of the room list.
- if (this.props.tagId === DefaultTagID.Invite) {
- return null;
- }
-
let contextMenu = null;
if (this.state.contextMenuPosition) {
const isAlphabetical = RoomListStore.instance.getTagSorting(this.props.tagId) === SortAlgorithm.Alphabetic;
const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
+
+ // Invites don't get some nonsense options, so only add them if we have to.
+ let otherSections = null;
+ if (this.props.tagId !== DefaultTagID.Invite) {
+ otherSections = (
+
+
+
+
+ );
+ }
+
contextMenu = (
{
this.onTagSortChanged(SortAlgorithm.Recent)}
checked={!isAlphabetical}
name={`mx_${this.props.tagId}_sortBy`}
>
{_t("Activity")}
-
-
+ this.onTagSortChanged(SortAlgorithm.Alphabetic)}
checked={isAlphabetical}
name={`mx_${this.props.tagId}_sortBy`}
>
{_t("A-Z")}
-
-
-
-
-
);
@@ -383,16 +511,22 @@ export default class RoomSublist2 extends React.Component {
private renderHeader(): React.ReactElement {
return (
-
+
{({onFocus, isActive, ref}) => {
const tabIndex = isActive ? 0 : -1;
+ let ariaLabel = _t("Jump to first unread room.");
+ if (this.props.tagId === DefaultTagID.Invite) {
+ ariaLabel = _t("Jump to first invite.");
+ }
+
const badge = (
{
const collapseClasses = classNames({
'mx_RoomSublist2_collapseBtn': true,
- 'mx_RoomSublist2_collapseBtn_collapsed': this.props.layout && this.props.layout.isCollapsed,
+ 'mx_RoomSublist2_collapseBtn_collapsed': !this.state.isExpanded,
});
const classes = classNames({
@@ -426,14 +560,13 @@ export default class RoomSublist2 extends React.Component {
);
- // TODO: a11y (see old component): https://github.com/vector-im/riot-web/issues/14180
// Note: the addRoomButton conditionally gets moved around
// the DOM depending on whether or not the list is minimized.
// If we're minimized, we want it below the header so it
// doesn't become sticky.
// The same applies to the notification badge.
return (
- +
+
+ {_t("Always show first")}
+
+
+ {_t("Unread rooms")}
+ +
+
+ {_t("Message preview")}
+
+
+ {_t("Show")}
+ {_t("Sort by")}
- -
-
- {_t("Always show first")}
-
-
- {_t("Unread rooms")}
- -
-
- {_t("Message preview")}
-
+
+ {otherSections}
{_t("Show")}
-
+
{
tabIndex={tabIndex}
className="mx_RoomSublist2_headerText"
role="treeitem"
+ aria-expanded={this.state.isExpanded}
aria-level={1}
onClick={this.onHeaderClick}
onContextMenu={this.onContextMenu}
@@ -461,11 +595,16 @@ export default class RoomSublist2 extends React.Component {
);
}
+ private onScrollPrevent(e: React.UIEvent) {
+ // the RoomTile calls scrollIntoView and the browser may scroll a div we do not wish to be scrollable
+ // this fixes https://github.com/vector-im/riot-web/issues/14413
+ (e.target as HTMLDivElement).scrollTop = 0;
+ }
+
public render(): React.ReactElement {
// TODO: Error boundary: https://github.com/vector-im/riot-web/issues/14185
const visibleTiles = this.renderVisibleTiles();
-
const classes = classNames({
'mx_RoomSublist2': true,
'mx_RoomSublist2_hasMenuOpen': !!this.state.contextMenuPosition,
@@ -474,21 +613,26 @@ export default class RoomSublist2 extends React.Component {
let content = null;
if (visibleTiles.length > 0) {
- const layout = this.props.layout; // to shorten calls
+ const layout = this.layout; // to shorten calls
- const maxTilesFactored = layout.tilesWithResizerBoxFactor(this.numTiles);
+ const minTiles = Math.min(layout.minVisibleTiles, this.numTiles);
+ const showMoreAtMinHeight = minTiles < this.numTiles;
+ const minHeightPadding = RESIZE_HANDLE_HEIGHT + (showMoreAtMinHeight ? SHOW_N_BUTTON_HEIGHT : 0);
+ const minTilesPx = layout.tilesToPixelsWithPadding(minTiles, minHeightPadding);
+ const maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
const showMoreBtnClasses = classNames({
'mx_RoomSublist2_showNButton': true,
- 'mx_RoomSublist2_isCutting': this.state.isResizing && layout.visibleTiles < maxTilesFactored,
});
// If we're hiding rooms, show a 'show more' button to the user. This button
// floats above the resize handle, if we have one present. If the user has all
// tiles visible, it becomes 'show less'.
let showNButton = null;
- if (this.numTiles > visibleTiles.length) {
- // we have a cutoff condition - add the button to show all
- const numMissing = this.numTiles - visibleTiles.length;
+
+ if (maxTilesPx > this.state.height) {
+ const nonPaddedHeight = this.state.height - RESIZE_HANDLE_HEIGHT - SHOW_N_BUTTON_HEIGHT;
+ const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight);
+ const numMissing = this.numTiles - amountFullyShown;
let showMoreText = (
{_t("Show %(count)s more", {count: numMissing})}
@@ -496,14 +640,14 @@ export default class RoomSublist2 extends React.Component {
);
if (this.props.isMinimized) showMoreText = null;
showNButton = (
- {
);
if (this.props.isMinimized) showLessText = null;
showNButton = (
- {
// goes backwards and can become wildly incorrect (visibleTiles says 18 when there's
// only mathematically 7 possible).
- // The padding is variable though, so figure out what we need padding for.
- let padding = 0;
- if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
- padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
-
- const relativeTiles = layout.tilesWithPadding(this.numTiles, padding);
- const minTilesPx = layout.calculateTilesToPixelsMin(relativeTiles, layout.minVisibleTiles, padding);
- const maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, padding);
- const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
- const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);
+ const handleWrapperClasses = classNames({
+ 'mx_RoomSublist2_resizerHandles': true,
+ 'mx_RoomSublist2_resizerHandles_showNButton': !!showNButton,
+ });
content = (
-
- {visibleTiles}
- {showNButton}
-
+
+
+
+
);
}
diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx
index 8a9712b5a4..ed188e996b 100644
--- a/src/components/views/rooms/RoomTile2.tsx
+++ b/src/components/views/rooms/RoomTile2.tsx
@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from "react";
+import React, {createRef} from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import classNames from "classnames";
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@@ -26,20 +26,37 @@ import dis from '../../../dispatcher/dispatcher';
import { Key } from "../../../Keyboard";
import ActiveRoomObserver from "../../../ActiveRoomObserver";
import { _t } from "../../../languageHandler";
-import { ContextMenu, ContextMenuButton, MenuItemRadio } from "../../structures/ContextMenu";
+import {
+ ChevronFace,
+ ContextMenu,
+ ContextMenuButton,
+ MenuItemRadio,
+ MenuItemCheckbox,
+ MenuItem,
+} from "../../structures/ContextMenu";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { getRoomNotifsState, ALL_MESSAGES, ALL_MESSAGES_LOUD, MENTIONS_ONLY, MUTE } from "../../../RoomNotifs";
+import {
+ getRoomNotifsState,
+ setRoomNotifsState,
+ ALL_MESSAGES,
+ ALL_MESSAGES_LOUD,
+ MENTIONS_ONLY,
+ MUTE,
+} from "../../../RoomNotifs";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { setRoomNotifsState } from "../../../RoomNotifs";
-import { TagSpecificNotificationState } from "../../../stores/notifications/TagSpecificNotificationState";
-import { INotificationState } from "../../../stores/notifications/INotificationState";
import NotificationBadge from "./NotificationBadge";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { Volume } from "../../../RoomNotifsTypes";
+import RoomListStore from "../../../stores/room-list/RoomListStore2";
+import RoomListActions from "../../../actions/RoomListActions";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import {ActionPayload} from "../../../dispatcher/payloads";
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { NotificationState } from "../../../stores/notifications/NotificationState";
-// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231
-// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14367
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
/*******************************************************************
* CAUTION *
@@ -62,17 +79,19 @@ type PartialDOMRect = Pick;
interface IState {
hover: boolean;
- notificationState: INotificationState;
+ notificationState: NotificationState;
selected: boolean;
notificationsMenuPosition: PartialDOMRect;
generalMenuPosition: PartialDOMRect;
}
+const messagePreviewId = (roomId: string) => `mx_RoomTile2_messagePreview_${roomId}`;
+
const contextMenuBelow = (elementRect: PartialDOMRect) => {
// align the context menu's icons with the icon which opened the context menu
const left = elementRect.left + window.pageXOffset - 9;
const top = elementRect.bottom + window.pageYOffset + 17;
- const chevronFace = "none";
+ const chevronFace = ChevronFace.None;
return {left, top, chevronFace};
};
@@ -103,6 +122,8 @@ const NotifOption: React.FC = ({active, onClick, iconClassNam
};
export default class RoomTile2 extends React.Component {
+ private dispatcherRef: string;
+ private roomTileRef = createRef();
// TODO: a11y: https://github.com/vector-im/riot-web/issues/14180
constructor(props: IProps) {
@@ -110,25 +131,54 @@ export default class RoomTile2 extends React.Component {
this.state = {
hover: false,
- notificationState: new TagSpecificNotificationState(this.props.room, this.props.tag),
+ notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room, this.props.tag),
selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
notificationsMenuPosition: null,
generalMenuPosition: null,
};
ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
}
private get showContextMenu(): boolean {
return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite;
}
+ private get showMessagePreview(): boolean {
+ return !this.props.isMinimized && this.props.showMessagePreview;
+ }
+
+ public componentDidMount() {
+ // when we're first rendered (or our sublist is expanded) make sure we are visible if we're active
+ if (this.state.selected) {
+ this.scrollIntoView();
+ }
+ }
+
public componentWillUnmount() {
if (this.props.room) {
ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
}
+ defaultDispatcher.unregister(this.dispatcherRef);
}
+ private onAction = (payload: ActionPayload) => {
+ if (payload.action === "view_room" && payload.room_id === this.props.room.roomId && payload.show_room_tile) {
+ setImmediate(() => {
+ this.scrollIntoView();
+ });
+ }
+ };
+
+ private scrollIntoView = () => {
+ if (!this.roomTileRef.current) return;
+ this.roomTileRef.current.scrollIntoView({
+ block: "nearest",
+ behavior: "auto",
+ });
+ };
+
private onTileMouseEnter = () => {
this.setState({hover: true});
};
@@ -142,7 +192,6 @@ export default class RoomTile2 extends React.Component {
ev.stopPropagation();
dis.dispatch({
action: 'view_room',
- // TODO: Support show_room_tile in new room list: https://github.com/vector-im/riot-web/issues/14233
show_room_tile: true, // make sure the room is visible in the list
room_id: this.props.room.roomId,
clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
@@ -153,7 +202,7 @@ export default class RoomTile2 extends React.Component {
this.setState({selected: isActive});
};
- private onNotificationsMenuOpenClick = (ev: InputEvent) => {
+ private onNotificationsMenuOpenClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -164,7 +213,7 @@ export default class RoomTile2 extends React.Component {
this.setState({notificationsMenuPosition: null});
};
- private onGeneralMenuOpenClick = (ev: InputEvent) => {
+ private onGeneralMenuOpenClick = (ev: React.MouseEvent) => {
ev.preventDefault();
ev.stopPropagation();
const target = ev.target as HTMLButtonElement;
@@ -193,8 +242,27 @@ export default class RoomTile2 extends React.Component {
ev.preventDefault();
ev.stopPropagation();
- // TODO: Support tagging: https://github.com/vector-im/riot-web/issues/14211
- // TODO: XOR favourites and low priority: https://github.com/vector-im/riot-web/issues/14210
+ if (tagId === DefaultTagID.Favourite) {
+ const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
+ const isFavourite = roomTags.includes(DefaultTagID.Favourite);
+ const removeTag = isFavourite ? DefaultTagID.Favourite : DefaultTagID.LowPriority;
+ const addTag = isFavourite ? null : DefaultTagID.Favourite;
+ dis.dispatch(RoomListActions.tagRoom(
+ MatrixClientPeg.get(),
+ this.props.room,
+ removeTag,
+ addTag,
+ undefined,
+ 0
+ ));
+ } else {
+ console.warn(`Unexpected tag ${tagId} applied to ${this.props.room.room_id}`);
+ }
+
+ if ((ev as React.KeyboardEvent).key === Key.ENTER) {
+ // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+ this.setState({generalMenuPosition: null}); // hide the menu
+ }
};
private onLeaveRoomClick = (ev: ButtonEvent) => {
@@ -219,11 +287,13 @@ export default class RoomTile2 extends React.Component {
this.setState({generalMenuPosition: null}); // hide the menu
};
- private async saveNotifState(ev: ButtonEvent, newState: ALL_MESSAGES_LOUD | ALL_MESSAGES | MENTIONS_ONLY | MUTE) {
+ private async saveNotifState(ev: ButtonEvent, newState: Volume) {
ev.preventDefault();
ev.stopPropagation();
if (MatrixClientPeg.get().isGuest()) return;
+ // get key before we go async and React discards the nativeEvent
+ const key = (ev as React.KeyboardEvent).key;
try {
// TODO add local echo - https://github.com/vector-im/riot-web/issues/14280
await setRoomNotifsState(this.props.room.roomId, newState);
@@ -233,7 +303,10 @@ export default class RoomTile2 extends React.Component {
console.error(error);
}
- this.setState({notificationsMenuPosition: null}); // Close the context menu
+ if (key === Key.ENTER) {
+ // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
+ this.setState({notificationsMenuPosition: null}); // hide the menu
+ }
}
private onClickAllNotifs = ev => this.saveNotifState(ev, ALL_MESSAGES);
@@ -316,26 +389,38 @@ export default class RoomTile2 extends React.Component {
// TODO: We could do with a proper invite context menu, unlike what showContextMenu suggests
+ const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
+
+ const isFavorite = roomTags.includes(DefaultTagID.Favourite);
+ const favouriteIconClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar";
+ const favouriteLabelClassName = isFavorite ? "mx_RoomTile2_contextMenu_activeRow" : "";
+ const favouriteLabel = isFavorite ? _t("Favourited") : _t("Favourite");
+
let contextMenu = null;
if (this.state.generalMenuPosition) {
contextMenu = (
@@ -357,7 +442,6 @@ export default class RoomTile2 extends React.Component {
public render(): React.ReactElement {
// TODO: Invites: https://github.com/vector-im/riot-web/issues/14198
- // TODO: a11y proper: https://github.com/vector-im/riot-web/issues/14180
const classes = classNames({
'mx_RoomTile2': true,
@@ -375,8 +459,9 @@ export default class RoomTile2 extends React.Component {
let badge: React.ReactNode;
if (!this.props.isMinimized) {
+ // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
badge = (
- {
+ public render() {
+ return {
+ private roomStoreToken: any;
+ private dispatcherRef: string;
+ private settingsWatcherRef: string;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ roomId: RoomViewStore.getRoomId(),
+ activeCall: CallHandler.getAnyActiveCall(),
+ newRoomListActive: SettingsStore.getValue("feature_new_room_list"),
+ };
+
+ this.settingsWatcherRef = SettingsStore.watchSetting("feature_new_room_list", null, (name, roomId, level, valAtLevel, newVal) => this.setState({
+ newRoomListActive: newVal,
+ }));
+ }
+
+ public componentDidMount() {
+ this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
+ this.dispatcherRef = dis.register(this.onAction);
+ }
+
+ public componentWillUnmount() {
+ if (this.roomStoreToken) {
+ this.roomStoreToken.remove();
+ }
+ dis.unregister(this.dispatcherRef);
+ SettingsStore.unwatchSetting(this.settingsWatcherRef);
+ }
+
+ private onRoomViewStoreUpdate = (payload) => {
+ if (RoomViewStore.getRoomId() === this.state.roomId) return;
+ this.setState({
+ roomId: RoomViewStore.getRoomId(),
+ });
+ };
+
+ private onAction = (payload: ActionPayload) => {
+ switch (payload.action) {
+ // listen for call state changes to prod the render method, which
+ // may hide the global CallView if the call it is tracking is dead
+ case 'call_state':
+ this.setState({
+ activeCall: CallHandler.getAnyActiveCall(),
+ });
+ break;
+ }
+ };
+
+ private onCallViewClick = () => {
+ const call = CallHandler.getAnyActiveCall();
+ if (call) {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: call.groupRoomId || call.roomId,
+ });
+ }
+ };
+
+ public render() {
+ if (this.state.newRoomListActive) {
+ const callForRoom = CallHandler.getCallForRoom(this.state.roomId);
+ const showCall = (
+ this.state.activeCall &&
+ this.state.activeCall.call_state === 'connected' &&
+ !callForRoom
+ );
+
+ if (showCall) {
+ return (
+ {
+ private videoref: React.RefObject;
+ private dispatcherRef: string;
+ public call: any;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ // the call this view is displaying (if any)
+ call: null,
+ };
+
+ this.videoref = createRef();
+ }
+
+ public componentDidMount() {
+ this.dispatcherRef = dis.register(this.onAction);
+ this.showCall();
+ }
+
+ public componentWillUnmount() {
+ dis.unregister(this.dispatcherRef);
+ }
+
+ private onAction = (payload) => {
+ // don't filter out payloads for room IDs other than props.room because
+ // we may be interested in the conf 1:1 room
+ if (payload.action !== 'call_state') {
+ return;
+ }
+ this.showCall();
+ };
+
+ private showCall() {
+ let call;
+
+ if (this.props.room) {
+ const roomId = this.props.room.roomId;
+ call = CallHandler.getCallForRoom(roomId) ||
+ (this.props.ConferenceHandler ?
+ this.props.ConferenceHandler.getConferenceCallForRoom(roomId) :
+ null
+ );
+
+ if (this.call) {
+ this.setState({ call: call });
+ }
+ } else {
+ call = CallHandler.getAnyActiveCall();
+ // Ignore calls if we can't get the room associated with them.
+ // I think the underlying problem is that the js-sdk sends events
+ // for calls before it has made the rooms available in the store,
+ // although this isn't confirmed.
+ if (MatrixClientPeg.get().getRoom(call.roomId) === null) {
+ call = null;
+ }
+ this.setState({ call: call });
+ }
+
+ if (call) {
+ call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
+ call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
+ // always use a separate element for audio stream playback.
+ // this is to let us move CallView around the DOM without interrupting remote audio
+ // during playback, by having the audio rendered by a top-level element.
+ // rather than being rendered by the main remoteVideo element.
+ call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
+ }
+ if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {
+ // if this call is a conf call, don't display local video as the
+ // conference will have us in it
+ this.getVideoView().getLocalVideoElement().style.display = (
+ call.confUserId ? "none" : "block"
+ );
+ this.getVideoView().getRemoteVideoElement().style.display = "block";
+ } else {
+ this.getVideoView().getLocalVideoElement().style.display = "none";
+ this.getVideoView().getRemoteVideoElement().style.display = "none";
+ dis.dispatch({action: 'video_fullscreen', fullscreen: false});
+ }
+
+ if (this.props.onResize) {
+ this.props.onResize();
+ }
+ }
+
+ private getVideoView() {
+ return this.videoref.current;
+ }
+
+ public render() {
+ let view: React.ReactNode;
+ if (this.state.call && this.state.call.type === "voice") {
+ const client = MatrixClientPeg.get();
+ const callRoom = client.getRoom(this.state.call.roomId);
+
+ view =
+
+
+ ;
+ } else {
+ view =
+
{/* set by CSS masking */}
{showMoreText}
-
+
);
- } else if (this.numTiles <= visibleTiles.length && this.numTiles > this.props.layout.defaultVisibleTiles) {
+ } else if (this.numTiles > this.layout.defaultVisibleTiles) {
// we have all tiles visible - add a button to show less
let showLessText = (
@@ -512,19 +656,29 @@ export default class RoomSublist2 extends React.Component
+
{/* set by CSS masking */}
{showLessText}
-
+
);
}
// Figure out if we need a handle
- let handles = ['s'];
+ const handles: Enable = {
+ bottom: true, // the only one we need, but the others must be explicitly false
+ bottomLeft: false,
+ bottomRight: false,
+ left: false,
+ right: false,
+ top: false,
+ topLeft: false,
+ topRight: false,
+ };
if (layout.visibleTiles >= this.numTiles && this.numTiles <= layout.minVisibleTiles) {
- handles = []; // no handles, we're at a minimum
+ // we're at a minimum, don't have a bottom handle
+ handles.bottom = false;
}
// We have to account for padding so we can accommodate a 'show more' button and
@@ -537,33 +691,31 @@ export default class RoomSublist2 extends React.Component
+ {visibleTiles}
+
+ {showNButton}
+
- this.onTagRoom(e, DefaultTagID.Favourite)}>
-
- {_t("Favourite")}
-
-
+ this.onTagRoom(e, DefaultTagID.Favourite)}
+ active={isFavorite}
+ label={favouriteLabel}
+ >
+
+ {favouriteLabel}
+
+
+
-
+
+
+
);
}
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 325d5cede6..6826eed7b7 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -402,6 +402,12 @@ export default class AppearanceUserSettingsTab extends React.Component this.setState({useIRCLayout: checked})}
+ />
{this.renderThemeSection()}
{this.renderFontSection()}
- {SettingsStore.isFeatureEnabled("feature_irc_ui") ? this.renderLayoutSection() : null}
{this.renderAdvancedSection()}
);
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
index 40b622cf37..abe6b48712 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
@@ -32,12 +32,12 @@ export default class PreferencesUserSettingsTab extends React.Component {
'breadcrumbs',
];
- // TODO: Remove temp structures: https://github.com/vector-im/riot-web/issues/14231
+ // TODO: Remove temp structures: https://github.com/vector-im/riot-web/issues/14367
static ROOM_LIST_2_SETTINGS = [
'breadcrumbs',
];
- // TODO: Remove temp structures: https://github.com/vector-im/riot-web/issues/14231
+ // TODO: Remove temp structures: https://github.com/vector-im/riot-web/issues/14367
static eligibleRoomListSettings = () => {
if (RoomListStoreTempProxy.isUsingNewStore()) {
return PreferencesUserSettingsTab.ROOM_LIST_2_SETTINGS;
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index 9f8885ba47..6cd881b9eb 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, {ReactChild} from "react";
+import React, {ReactNode} from "react";
import FormButton from "../elements/FormButton";
import {XOR} from "../../../@types/common";
export interface IProps {
- description: ReactChild;
+ description: ReactNode;
acceptLabel: string;
onAccept();
diff --git a/src/components/views/voip/CallContainer.tsx b/src/components/views/voip/CallContainer.tsx
new file mode 100644
index 0000000000..0e901fac7d
--- /dev/null
+++ b/src/components/views/voip/CallContainer.tsx
@@ -0,0 +1,37 @@
+/*
+Copyright 2020 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import IncomingCallBox2 from './IncomingCallBox2';
+import CallPreview from './CallPreview2';
+import * as VectorConferenceHandler from '../../../VectorConferenceHandler';
+
+interface IProps {
+
+}
+
+interface IState {
+
+}
+
+export default class CallContainer extends React.PureComponent
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/components/views/voip/CallPreview2.tsx b/src/components/views/voip/CallPreview2.tsx
new file mode 100644
index 0000000000..1f2caf5ef8
--- /dev/null
+++ b/src/components/views/voip/CallPreview2.tsx
@@ -0,0 +1,129 @@
+/*
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2019, 2020 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
+import React from 'react';
+
+import CallView from "./CallView2";
+import RoomViewStore from '../../../stores/RoomViewStore';
+import CallHandler from '../../../CallHandler';
+import dis from '../../../dispatcher/dispatcher';
+import { ActionPayload } from '../../../dispatcher/payloads';
+import PersistentApp from "../elements/PersistentApp";
+import SettingsStore from "../../../settings/SettingsStore";
+
+interface IProps {
+ // A Conference Handler implementation
+ // Must have a function signature:
+ // getConferenceCallForRoom(roomId: string): MatrixCall
+ ConferenceHandler: any;
+}
+
+interface IState {
+ roomId: string;
+ activeCall: any;
+ newRoomListActive: boolean;
+}
+
+export default class CallPreview extends React.Component
+
+ {callRoom.name}
+{ _t("Active call") }
+ {
+ dis.dispatch({
+ action: 'hangup',
+ room_id: this.state.call.roomId,
+ });
+ }}
+ />;
+ }
+
+ return {
+ private dispatcherRef: string;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.dispatcherRef = dis.register(this.onAction);
+ this.state = {
+ incomingCall: null,
+ };
+ }
+
+ public componentWillUnmount() {
+ dis.unregister(this.dispatcherRef);
+ }
+
+ private onAction = (payload: ActionPayload) => {
+ switch (payload.action) {
+ case 'call_state':
+ const call = CallHandler.getCall(payload.room_id);
+ if (call && call.call_state === 'ringing') {
+ this.setState({
+ incomingCall: call,
+ });
+ } else {
+ this.setState({
+ incomingCall: null,
+ });
+ }
+ }
+ };
+
+ private onAnswerClick: React.MouseEventHandler = (e) => {
+ e.stopPropagation();
+ dis.dispatch({
+ action: 'answer',
+ room_id: this.state.incomingCall.roomId,
+ });
+ };
+
+ private onRejectClick: React.MouseEventHandler = (e) => {
+ e.stopPropagation();
+ dis.dispatch({
+ action: 'hangup',
+ room_id: this.state.incomingCall.roomId,
+ });
+ };
+
+ public render() {
+ if (!this.state.incomingCall) {
+ return null;
+ }
+
+ let room = null;
+ if (this.state.incomingCall) {
+ room = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId);
+ }
+
+ const caller = room ? room.name : _t("Unknown caller");
+
+ let incomingCallText = null;
+ if (this.state.incomingCall) {
+ if (this.state.incomingCall.type === "voice") {
+ incomingCallText = _t("Incoming voice call");
+ } else if (this.state.incomingCall.type === "video") {
+ incomingCallText = _t("Incoming video call");
+ } else {
+ incomingCallText = _t("Incoming call");
+ }
+ }
+
+ return (undefined);
MatrixClientContext.displayName = "MatrixClientContext";
export default MatrixClientContext;
diff --git a/src/createRoom.js b/src/createRoom.ts
similarity index 81%
rename from src/createRoom.js
rename to src/createRoom.ts
index affdf196a7..c436196c27 100644
--- a/src/createRoom.js
+++ b/src/createRoom.ts
@@ -15,6 +15,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {Room} from "matrix-js-sdk/src/models/room";
+
import {MatrixClientPeg} from './MatrixClientPeg';
import Modal from './Modal';
import * as sdk from './index';
@@ -26,6 +29,56 @@ import {getAddressType} from "./UserAddress";
const E2EE_WK_KEY = "im.vector.riot.e2ee";
+// TODO move these interfaces over to js-sdk once it has been typescripted enough to accept them
+enum Visibility {
+ Public = "public",
+ Private = "private",
+}
+
+enum Preset {
+ PrivateChat = "private_chat",
+ TrustedPrivateChat = "trusted_private_chat",
+ PublicChat = "public_chat",
+}
+
+interface Invite3PID {
+ id_server: string;
+ id_access_token?: string; // this gets injected by the js-sdk
+ medium: string;
+ address: string;
+}
+
+interface IStateEvent {
+ type: string;
+ state_key?: string; // defaults to an empty string
+ content: object;
+}
+
+interface ICreateOpts {
+ visibility?: Visibility;
+ room_alias_name?: string;
+ name?: string;
+ topic?: string;
+ invite?: string[];
+ invite_3pid?: Invite3PID[];
+ room_version?: string;
+ creation_content?: object;
+ initial_state?: IStateEvent[];
+ preset?: Preset;
+ is_direct?: boolean;
+ power_level_content_override?: object;
+}
+
+interface IOpts {
+ dmUserId?: string;
+ createOpts?: ICreateOpts;
+ spinner?: boolean;
+ guestAccess?: boolean;
+ encryption?: boolean;
+ inlineErrors?: boolean;
+ andView?: boolean;
+}
+
/**
* Create a new room, and switch to it.
*
@@ -40,11 +93,12 @@ const E2EE_WK_KEY = "im.vector.riot.e2ee";
* Default: False
* @param {bool=} opts.inlineErrors True to raise errors off the promise instead of resolving to null.
* Default: False
+ * @param {bool=} opts.andView True to dispatch an action to view the room once it has been created.
*
* @returns {Promise} which resolves to the room id, or null if the
* action was aborted or failed.
*/
-export default function createRoom(opts) {
+export default function createRoom(opts: IOpts): Promise {
opts = opts || {};
if (opts.spinner === undefined) opts.spinner = true;
if (opts.guestAccess === undefined) opts.guestAccess = true;
@@ -59,12 +113,12 @@ export default function createRoom(opts) {
return Promise.resolve(null);
}
- const defaultPreset = opts.dmUserId ? 'trusted_private_chat' : 'private_chat';
+ const defaultPreset = opts.dmUserId ? Preset.TrustedPrivateChat : Preset.PrivateChat;
// set some defaults for the creation
const createOpts = opts.createOpts || {};
createOpts.preset = createOpts.preset || defaultPreset;
- createOpts.visibility = createOpts.visibility || 'private';
+ createOpts.visibility = createOpts.visibility || Visibility.Private;
if (opts.dmUserId && createOpts.invite === undefined) {
switch (getAddressType(opts.dmUserId)) {
case 'mx-user-id':
@@ -166,7 +220,7 @@ export default function createRoom(opts) {
});
}
-export function findDMForUser(client, userId) {
+export function findDMForUser(client: MatrixClient, userId: string): Room {
const roomIds = DMRoomMap.shared().getDMRoomsForUserId(userId);
const rooms = roomIds.map(id => client.getRoom(id));
const suitableDMRooms = rooms.filter(r => {
@@ -189,7 +243,7 @@ export function findDMForUser(client, userId) {
* NOTE: this assumes you've just created the room and there's not been an opportunity
* for other code to run, so we shouldn't miss RoomState.newMember when it comes by.
*/
-export async function _waitForMember(client, roomId, userId, opts = { timeout: 1500 }) {
+export async function _waitForMember(client: MatrixClient, roomId: string, userId: string, opts = { timeout: 1500 }) {
const { timeout } = opts;
let handler;
return new Promise((resolve) => {
@@ -212,7 +266,7 @@ export async function _waitForMember(client, roomId, userId, opts = { timeout: 1
* Ensure that for every user in a room, there is at least one device that we
* can encrypt to.
*/
-export async function canEncryptToAllUsers(client, userIds) {
+export async function canEncryptToAllUsers(client: MatrixClient, userIds: string[]) {
const usersDeviceMap = await client.downloadKeys(userIds);
// { "@user:host": { "DEVICE": {...}, ... }, ... }
return Object.values(usersDeviceMap).every((userDevices) =>
@@ -221,7 +275,7 @@ export async function canEncryptToAllUsers(client, userIds) {
);
}
-export async function ensureDMExists(client, userId) {
+export async function ensureDMExists(client: MatrixClient, userId: string): Promise {
const existingDMRoom = findDMForUser(client, userId);
let roomId;
if (existingDMRoom) {
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index 379a0a4451..9be674b59e 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -79,4 +79,9 @@ export enum Action {
* Sets a system font. Should be used with UpdateSystemFontPayload
*/
UpdateSystemFont = "update_system_font",
+
+ /**
+ * Changes room based on room list order and payload parameters. Should be used with ViewRoomDeltaPayload.
+ */
+ ViewRoomDelta = "view_room_delta",
}
diff --git a/src/dispatcher/payloads/ViewRoomDeltaPayload.ts b/src/dispatcher/payloads/ViewRoomDeltaPayload.ts
new file mode 100644
index 0000000000..de33a88b2e
--- /dev/null
+++ b/src/dispatcher/payloads/ViewRoomDeltaPayload.ts
@@ -0,0 +1,32 @@
+/*
+Copyright 2020 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ActionPayload } from "../payloads";
+import { Action } from "../actions";
+
+export interface ViewRoomDeltaPayload extends ActionPayload {
+ action: Action.ViewRoomDelta;
+
+ /**
+ * The delta index of the room to view.
+ */
+ delta: number;
+
+ /**
+ * Optionally, whether or not to filter to unread (Bold/Grey/Red) rooms only. (Default: false)
+ */
+ unread?: boolean;
+}
diff --git a/src/groups.js b/src/groups.js
index 860cf71fff..e73af15c79 100644
--- a/src/groups.js
+++ b/src/groups.js
@@ -15,7 +15,8 @@ limitations under the License.
*/
import PropTypes from 'prop-types';
-import { _t } from './languageHandler.js';
+
+import { _t } from './languageHandler';
export const GroupMemberType = PropTypes.shape({
userId: PropTypes.string.isRequired,
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5a79b01003..4b1dfe2b8e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -488,7 +488,6 @@
"Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
"Use the improved room list (will refresh to apply changes)": "Use the improved room list (will refresh to apply changes)",
"Support adding custom themes": "Support adding custom themes",
- "Enable IRC layout option in the appearance tab": "Enable IRC layout option in the appearance tab",
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Font size": "Font size",
"Use custom size": "Use custom size",
@@ -538,7 +537,7 @@
"How fast should messages be downloaded.": "How fast should messages be downloaded.",
"Manually verify all remote sessions": "Manually verify all remote sessions",
"IRC display name width": "IRC display name width",
- "Use IRC layout": "Use IRC layout",
+ "Enable experimental, compact IRC style layout": "Enable experimental, compact IRC style layout",
"Collecting app version information": "Collecting app version information",
"Collecting logs": "Collecting logs",
"Uploading report": "Uploading report",
@@ -557,12 +556,17 @@
"My Ban List": "My Ban List",
"This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!",
"Active call (%(roomName)s)": "Active call (%(roomName)s)",
+ "Active call": "Active call",
"unknown caller": "unknown caller",
"Incoming voice call from %(name)s": "Incoming voice call from %(name)s",
"Incoming video call from %(name)s": "Incoming video call from %(name)s",
"Incoming call from %(name)s": "Incoming call from %(name)s",
"Decline": "Decline",
"Accept": "Accept",
+ "Unknown caller": "Unknown caller",
+ "Incoming voice call": "Incoming voice call",
+ "Incoming video call": "Incoming video call",
+ "Incoming call": "Incoming call",
"The other party cancelled the verification.": "The other party cancelled the verification.",
"Verified!": "Verified!",
"You've successfully verified this user.": "You've successfully verified this user.",
@@ -965,6 +969,8 @@
"Room version:": "Room version:",
"Developer options": "Developer options",
"Open Devtools": "Open Devtools",
+ "Make this room low priority": "Make this room low priority",
+ "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list": "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list",
"This room is bridging messages to the following platforms. Learn more.": "This room is bridging messages to the following platforms. Learn more.",
"This room isn’t bridging messages to any platforms. Learn more.": "This room isn’t bridging messages to any platforms. Learn more.",
"Bridges": "Bridges",
@@ -1199,14 +1205,16 @@
"Securely back up your keys to avoid losing them. Learn more.": "Securely back up your keys to avoid losing them. Learn more.",
"Not now": "Not now",
"Don't ask me again": "Don't ask me again",
- "Sort by": "Sort by",
- "Activity": "Activity",
- "A-Z": "A-Z",
"Unread rooms": "Unread rooms",
"Always show first": "Always show first",
"Show": "Show",
"Message preview": "Message preview",
+ "Sort by": "Sort by",
+ "Activity": "Activity",
+ "A-Z": "A-Z",
"List options": "List options",
+ "Jump to first unread room.": "Jump to first unread room.",
+ "Jump to first invite.": "Jump to first invite.",
"Add room": "Add room",
"Show %(count)s more|other": "Show %(count)s more",
"Show %(count)s more|one": "Show %(count)s more",
@@ -1221,6 +1229,7 @@
"All messages": "All messages",
"Mentions & Keywords": "Mentions & Keywords",
"Notification options": "Notification options",
+ "Favourited": "Favourited",
"Favourite": "Favourite",
"Leave Room": "Leave Room",
"Room options": "Room options",
@@ -2088,6 +2097,8 @@
"Find a room…": "Find a room…",
"Find a room… (e.g. %(exampleRoom)s)": "Find a room… (e.g. %(exampleRoom)s)",
"If you can't find the room you're looking for, ask for an invite or Create a new room.": "If you can't find the room you're looking for, ask for an invite or Create a new room.",
+ "Clear filter": "Clear filter",
+ "Search rooms": "Search rooms",
"You can't send any messages until you review and agree to our terms and conditions .": "You can't send any messages until you review and agree to our terms and conditions .",
"Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please contact your service administrator to continue using the service.": "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please contact your service administrator to continue using the service.",
"Your message wasn't sent because this homeserver has exceeded a resource limit. Please contact your service administrator to continue using the service.": "Your message wasn't sent because this homeserver has exceeded a resource limit. Please contact your service administrator to continue using the service.",
@@ -2097,10 +2108,7 @@
"%(count)s Resend all or cancel all now. You can also select individual messages to resend or cancel.|one": "Resend message or cancel message now.",
"Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
"Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
- "Active call": "Active call",
"There's no one else here! Would you like to invite others or stop warning about the empty room ?": "There's no one else here! Would you like to invite others or stop warning about the empty room ?",
- "Jump to first unread room.": "Jump to first unread room.",
- "Jump to first invite.": "Jump to first invite.",
"You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
"You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?",
"Search failed": "Search failed",
@@ -2115,7 +2123,6 @@
"Click to mute video": "Click to mute video",
"Click to unmute audio": "Click to unmute audio",
"Click to mute audio": "Click to mute audio",
- "Clear filter": "Clear filter",
"Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
"Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",
"Failed to load timeline position": "Failed to load timeline position",
@@ -2128,9 +2135,8 @@
"Switch theme": "Switch theme",
"Security & privacy": "Security & privacy",
"All settings": "All settings",
- "Archived rooms": "Archived rooms",
"Feedback": "Feedback",
- "Account settings": "Account settings",
+ "User menu": "User menu",
"Could not load user profile": "Could not load user profile",
"Verify this login": "Verify this login",
"Session verified": "Session verified",
diff --git a/src/languageHandler.js b/src/languageHandler.tsx
similarity index 87%
rename from src/languageHandler.js
rename to src/languageHandler.tsx
index 79a172015a..91d90d4e6c 100644
--- a/src/languageHandler.js
+++ b/src/languageHandler.tsx
@@ -1,7 +1,7 @@
/*
Copyright 2017 MTRNord and Cooperative EITA
Copyright 2017 Vector Creations Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
@@ -20,10 +20,11 @@ limitations under the License.
import request from 'browser-request';
import counterpart from 'counterpart';
import React from 'react';
+
import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
import PlatformPeg from "./PlatformPeg";
-// $webapp is a webpack resolve alias pointing to the output directory, see webpack config
+// @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
import webpackLangJsonUrl from "$webapp/i18n/languages.json";
const i18nFolder = 'i18n/';
@@ -37,27 +38,31 @@ counterpart.setSeparator('|');
// Fall back to English
counterpart.setFallbackLocale('en');
+interface ITranslatableError extends Error {
+ translatedMessage: string;
+}
+
/**
* Helper function to create an error which has an English message
* with a translatedMessage property for use by the consumer.
* @param {string} message Message to translate.
* @returns {Error} The constructed error.
*/
-export function newTranslatableError(message) {
- const error = new Error(message);
+export function newTranslatableError(message: string) {
+ const error = new Error(message) as ITranslatableError;
error.translatedMessage = _t(message);
return error;
}
// Function which only purpose is to mark that a string is translatable
// Does not actually do anything. It's helpful for automatic extraction of translatable strings
-export function _td(s) {
+export function _td(s: string): string {
return s;
}
// Wrapper for counterpart's translation function so that it handles nulls and undefineds properly
// Takes the same arguments as counterpart.translate()
-function safeCounterpartTranslate(text, options) {
+function safeCounterpartTranslate(text: string, options?: object) {
// Horrible hack to avoid https://github.com/vector-im/riot-web/issues/4191
// The interpolation library that counterpart uses does not support undefined/null
// values and instead will throw an error. This is a problem since everywhere else
@@ -89,6 +94,13 @@ function safeCounterpartTranslate(text, options) {
return translated;
}
+interface IVariables {
+ count?: number;
+ [key: string]: number | string;
+}
+
+type Tags = Record React.ReactNode>;
+
/*
* Translates text and optionally also replaces XML-ish elements in the text with e.g. React components
* @param {string} text The untranslated text, e.g "click here now to %(foo)s".
@@ -105,7 +117,9 @@ function safeCounterpartTranslate(text, options) {
*
* @return a React component if any non-strings were used in substitutions, otherwise a string
*/
-export function _t(text, variables, tags) {
+export function _t(text: string, variables?: IVariables): string;
+export function _t(text: string, variables: IVariables, tags: Tags): React.ReactNode;
+export function _t(text: string, variables?: IVariables, tags?: Tags): string | React.ReactNode {
// Don't do substitutions in counterpart. We handle it ourselves so we can replace with React components
// However, still pass the variables to counterpart so that it can choose the correct plural if count is given
// It is enough to pass the count variable, but in the future counterpart might make use of other information too
@@ -141,23 +155,25 @@ export function _t(text, variables, tags) {
*
* @return a React component if any non-strings were used in substitutions, otherwise a string
*/
-export function substitute(text, variables, tags) {
- let result = text;
+export function substitute(text: string, variables?: IVariables): string;
+export function substitute(text: string, variables: IVariables, tags: Tags): string;
+export function substitute(text: string, variables?: IVariables, tags?: Tags): string | React.ReactNode {
+ let result: React.ReactNode | string = text;
if (variables !== undefined) {
- const regexpMapping = {};
+ const regexpMapping: IVariables = {};
for (const variable in variables) {
regexpMapping[`%\\(${variable}\\)s`] = variables[variable];
}
- result = replaceByRegexes(result, regexpMapping);
+ result = replaceByRegexes(result as string, regexpMapping);
}
if (tags !== undefined) {
- const regexpMapping = {};
+ const regexpMapping: Tags = {};
for (const tag in tags) {
regexpMapping[`(<${tag}>(.*?)<\\/${tag}>|<${tag}>|<${tag}\\s*\\/>)`] = tags[tag];
}
- result = replaceByRegexes(result, regexpMapping);
+ result = replaceByRegexes(result as string, regexpMapping);
}
return result;
@@ -172,7 +188,9 @@ export function substitute(text, variables, tags) {
*
* @return a React component if any non-strings were used in substitutions, otherwise a string
*/
-export function replaceByRegexes(text, mapping) {
+export function replaceByRegexes(text: string, mapping: IVariables): string;
+export function replaceByRegexes(text: string, mapping: Tags): React.ReactNode;
+export function replaceByRegexes(text: string, mapping: IVariables | Tags): string | React.ReactNode {
// We initially store our output as an array of strings and objects (e.g. React components).
// This will then be converted to a string or a at the end
const output = [text];
@@ -189,7 +207,7 @@ export function replaceByRegexes(text, mapping) {
// and everything after the match. Insert all three into the output. We need to do this because we can insert objects.
// Otherwise there would be no need for the splitting and we could do simple replacement.
let matchFoundSomewhere = false; // If we don't find a match anywhere we want to log it
- for (const outputIndex in output) {
+ for (let outputIndex = 0; outputIndex < output.length; outputIndex++) {
const inputText = output[outputIndex];
if (typeof inputText !== 'string') { // We might have inserted objects earlier, don't try to replace them
continue;
@@ -216,7 +234,7 @@ export function replaceByRegexes(text, mapping) {
let replaced;
// If substitution is a function, call it
if (mapping[regexpString] instanceof Function) {
- replaced = mapping[regexpString].apply(null, capturedGroups);
+ replaced = (mapping as Tags)[regexpString].apply(null, capturedGroups);
} else {
replaced = mapping[regexpString];
}
@@ -277,11 +295,11 @@ export function replaceByRegexes(text, mapping) {
// Allow overriding the text displayed when no translation exists
// Currently only used in unit tests to avoid having to load
// the translations in riot-web
-export function setMissingEntryGenerator(f) {
+export function setMissingEntryGenerator(f: (value: string) => void) {
counterpart.setMissingEntryGenerator(f);
}
-export function setLanguage(preferredLangs) {
+export function setLanguage(preferredLangs: string | string[]) {
if (!Array.isArray(preferredLangs)) {
preferredLangs = [preferredLangs];
}
@@ -358,8 +376,8 @@ export function getLanguageFromBrowser() {
* @param {string} language The input language string
* @return {string[]} List of normalised languages
*/
-export function getNormalizedLanguageKeys(language) {
- const languageKeys = [];
+export function getNormalizedLanguageKeys(language: string) {
+ const languageKeys: string[] = [];
const normalizedLanguage = normalizeLanguageKey(language);
const languageParts = normalizedLanguage.split('-');
if (languageParts.length === 2 && languageParts[0] === languageParts[1]) {
@@ -380,7 +398,7 @@ export function getNormalizedLanguageKeys(language) {
* @param {string} language The language string to be normalized
* @returns {string} The normalized language string
*/
-export function normalizeLanguageKey(language) {
+export function normalizeLanguageKey(language: string) {
return language.toLowerCase().replace("_", "-");
}
@@ -396,7 +414,7 @@ export function getCurrentLanguage() {
* @param {string[]} langs List of language codes to pick from
* @returns {string} The most appropriate language code from langs
*/
-export function pickBestLanguage(langs) {
+export function pickBestLanguage(langs: string[]): string {
const currentLang = getCurrentLanguage();
const normalisedLangs = langs.map(normalizeLanguageKey);
@@ -408,13 +426,13 @@ export function pickBestLanguage(langs) {
{
// Failing that, a different dialect of the same language
- const closeLangIndex = normalisedLangs.find((l) => l.substr(0, 2) === currentLang.substr(0, 2));
+ const closeLangIndex = normalisedLangs.findIndex((l) => l.substr(0, 2) === currentLang.substr(0, 2));
if (closeLangIndex > -1) return langs[closeLangIndex];
}
{
// Neither of those? Try an english variant.
- const enIndex = normalisedLangs.find((l) => l.startsWith('en'));
+ const enIndex = normalisedLangs.findIndex((l) => l.startsWith('en'));
if (enIndex > -1) return langs[enIndex];
}
@@ -422,7 +440,7 @@ export function pickBestLanguage(langs) {
return langs[0];
}
-function getLangsJson() {
+function getLangsJson(): Promise
+ {view}
+ {hangup}
+
;
+ }
+}
+
diff --git a/src/components/views/voip/IncomingCallBox2.tsx b/src/components/views/voip/IncomingCallBox2.tsx
new file mode 100644
index 0000000000..6dfcb4bcee
--- /dev/null
+++ b/src/components/views/voip/IncomingCallBox2.tsx
@@ -0,0 +1,141 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019, 2020 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
+
+import React from 'react';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher/dispatcher';
+import { _t } from '../../../languageHandler';
+import { ActionPayload } from '../../../dispatcher/payloads';
+import CallHandler from '../../../CallHandler';
+import PulsedAvatar from '../avatars/PulsedAvatar';
+import RoomAvatar from '../avatars/RoomAvatar';
+import FormButton from '../elements/FormButton';
+
+interface IProps {
+}
+
+interface IState {
+ incomingCall: any;
+}
+
+export default class IncomingCallBox2 extends React.Component
+
;
+ }
+}
+
diff --git a/src/contexts/MatrixClientContext.js b/src/contexts/MatrixClientContext.ts
similarity index 85%
rename from src/contexts/MatrixClientContext.js
rename to src/contexts/MatrixClientContext.ts
index 54a23ca132..7e8a92064d 100644
--- a/src/contexts/MatrixClientContext.js
+++ b/src/contexts/MatrixClientContext.ts
@@ -15,7 +15,8 @@ limitations under the License.
*/
import { createContext } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
-const MatrixClientContext = createContext(undefined);
+const MatrixClientContext = createContext
+
+
+
+
+
+ {caller}
+{incomingCallText}
+
+
+