+
+ );
+ }
+
public render(): React.ReactNode {
const tagPanel = (
-
+
+
+
+
+
+
{
// TODO: Conference handling / calls
const containerClasses = classNames({
- "mx_LeftPanel_container": true,
- "mx_fadable": true,
- "collapsed": false, // TODO: Collapsed support
- "mx_LeftPanel_container_hasTagPanel": true, // TODO: TagPanel support
- "mx_fadable_faded": false,
- "mx_LeftPanel2": true, // TODO: Remove flag when RoomList2 ships (used as an indicator)
+ "mx_LeftPanel2": true,
});
return (
{
// composer, so CTRL+` it is
if (ctrlCmdOnly) {
- dis.dispatch({
- action: 'toggle_top_left_menu',
- });
+ dis.fire(Action.ToggleUserMenu);
handled = true;
}
break;
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 69f91047b7..e08381d8fa 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -72,6 +72,7 @@ import {
hideToast as hideAnalyticsToast
} from "../../toasts/AnalyticsToast";
import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
+import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
/** constants for MatrixChat.state.view */
export enum Views {
@@ -604,9 +605,12 @@ export default class MatrixChat extends React.PureComponent {
this.viewIndexedRoom(payload.roomIndex);
break;
case Action.ViewUserSettings: {
+ const tabPayload = payload as OpenToTabPayload;
const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
- Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {},
- /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+ Modal.createTrackedDialog('User settings', '', UserSettingsDialog,
+ {initialTabId: tabPayload.initialTabId},
+ /*className=*/null, /*isPriority=*/false, /*isStatic=*/true
+ );
// View the welcome or home page if we need something to look at
this.viewSomethingBehindModal();
diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx
index c0e0e58db8..704dbf8832 100644
--- a/src/components/structures/TabbedView.tsx
+++ b/src/components/structures/TabbedView.tsx
@@ -27,25 +27,20 @@ import { ReactNode } from "react";
* Represents a tab for the TabbedView.
*/
export class Tab {
- public label: string;
- public icon: string;
- public body: React.ReactNode;
-
/**
* Creates a new tab.
- * @param {string} tabLabel The untranslated tab label.
- * @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
- * @param {React.ReactNode} tabJsx The JSX for the tab container.
+ * @param {string} id The tab's ID.
+ * @param {string} label The untranslated tab label.
+ * @param {string} icon The class for the tab icon. This should be a simple mask.
+ * @param {React.ReactNode} body The JSX for the tab container.
*/
- constructor(tabLabel: string, tabIconClass: string, tabJsx: React.ReactNode) {
- this.label = tabLabel;
- this.icon = tabIconClass;
- this.body = tabJsx;
+ constructor(public id: string, public label: string, public icon: string, public body: React.ReactNode) {
}
}
interface IProps {
tabs: Tab[];
+ initialTabId?: string;
}
interface IState {
@@ -53,16 +48,17 @@ interface IState {
}
export default class TabbedView extends React.Component {
- static propTypes = {
- // The tabs to show
- tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
- };
-
constructor(props: IProps) {
super(props);
+ let activeTabIndex = 0;
+ if (props.initialTabId) {
+ const tabIndex = props.tabs.findIndex(t => t.id === props.initialTabId);
+ if (tabIndex >= 0) activeTabIndex = tabIndex;
+ }
+
this.state = {
- activeTabIndex: 0,
+ activeTabIndex,
};
}
diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js
index 234dc661f9..71e7e61406 100644
--- a/src/components/structures/TopLeftMenuButton.js
+++ b/src/components/structures/TopLeftMenuButton.js
@@ -24,6 +24,7 @@ import * as Avatar from '../../Avatar';
import { _t } from '../../languageHandler';
import dis from "../../dispatcher/dispatcher";
import {ContextMenu, ContextMenuButton} from "./ContextMenu";
+import {Action} from "../../dispatcher/actions";
const AVATAR_SIZE = 28;
@@ -75,7 +76,7 @@ export default class TopLeftMenuButton extends React.Component {
onAction = (payload) => {
// For accessibility
- if (payload.action === "toggle_top_left_menu") {
+ if (payload.action === Action.ToggleUserMenu) {
if (this._buttonRef) this._buttonRef.click();
}
};
diff --git a/src/components/structures/UserMenuButton.tsx b/src/components/structures/UserMenuButton.tsx
new file mode 100644
index 0000000000..d8f96d4a91
--- /dev/null
+++ b/src/components/structures/UserMenuButton.tsx
@@ -0,0 +1,270 @@
+/*
+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 * as React from "react";
+import {User} from "matrix-js-sdk/src/models/user";
+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} 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";
+import Modal from "../../Modal";
+import LogoutDialog from "../views/dialogs/LogoutDialog";
+import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
+import {getCustomTheme} from "../../theme";
+import {getHostingLink} from "../../utils/HostingLink";
+import AccessibleButton from "../views/elements/AccessibleButton";
+
+interface IProps {
+}
+
+interface IState {
+ user: User;
+ menuDisplayed: boolean;
+ isDarkTheme: boolean;
+}
+
+export default class UserMenuButton extends React.Component {
+ private dispatcherRef: string;
+ private themeWatcherRef: string;
+ private buttonRef: React.RefObject = createRef();
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ menuDisplayed: false,
+ user: MatrixClientPeg.get().getUser(MatrixClientPeg.get().getUserId()),
+ isDarkTheme: this.isUserOnDarkTheme(),
+ };
+ }
+
+ private get displayName(): string {
+ if (MatrixClientPeg.get().isGuest()) {
+ return _t("Guest");
+ } else if (this.state.user) {
+ return this.state.user.displayName;
+ } else {
+ return MatrixClientPeg.get().getUserId();
+ }
+ }
+
+ public componentDidMount() {
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
+ this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
+ }
+
+ public componentWillUnmount() {
+ if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
+ if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
+ }
+
+ private isUserOnDarkTheme(): boolean {
+ const theme = SettingsStore.getValue("theme");
+ if (theme.startsWith("custom-")) {
+ return getCustomTheme(theme.substring(0, 7)).is_dark;
+ }
+ return theme === "dark";
+ }
+
+ private onThemeChanged = () => {
+ this.setState({isDarkTheme: this.isUserOnDarkTheme()});
+ };
+
+ private onAction = (ev: ActionPayload) => {
+ if (ev.action !== Action.ToggleUserMenu) return; // not interested
+
+ // For accessibility
+ if (this.buttonRef.current) this.buttonRef.current.click();
+ };
+
+ private onOpenMenuClick = (ev: InputEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+ this.setState({menuDisplayed: true});
+ };
+
+ private onCloseMenu = () => {
+ this.setState({menuDisplayed: false});
+ };
+
+ private onSwitchThemeClick = () => {
+ // Disable system theme matching if the user hits this button
+ SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
+
+ const newTheme = this.state.isDarkTheme ? "light" : "dark";
+ SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
+ };
+
+ private onSettingsOpen = (ev: React.MouseEvent, tabId: string) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
+ defaultDispatcher.dispatch(payload);
+ this.setState({menuDisplayed: false}); // also close the menu
+ };
+
+ private onShowArchived = (ev: React.MouseEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ // TODO: Archived room view (deferred)
+ console.log("TODO: Show archived rooms");
+ };
+
+ private onProvideFeedback = (ev: React.MouseEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+ this.setState({menuDisplayed: false}); // also close the menu
+ };
+
+ private onSignOutClick = (ev: React.MouseEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
+ this.setState({menuDisplayed: false}); // also close the menu
+ };
+
+ public render() {
+ let contextMenu;
+ if (this.state.menuDisplayed) {
+ let hostingLink;
+ const signupLink = getHostingLink("user-context-menu");
+ if (signupLink) {
+ hostingLink = (
+
+ );
+ }
+
+ const elementRect = this.buttonRef.current.getBoundingClientRect();
+ contextMenu = (
+
+
+ );
+ }
+
+ return (
+
+
+ ![...]({require("../../../res/img/feather-customised/more-horizontal.svg")})
+
+ {contextMenu}
+
+ )
+ }
+}
diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js
index c2b98cd9f3..7ad1001f75 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.js
+++ b/src/components/views/dialogs/RoomSettingsDialog.js
@@ -30,6 +30,13 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
import dis from "../../../dispatcher/dispatcher";
import SettingsStore from "../../../settings/SettingsStore";
+export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
+export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
+export const ROOM_ROLES_TAB = "ROOM_ROLES_TAB";
+export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
+export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
+export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
+
export default class RoomSettingsDialog extends React.Component {
static propTypes = {
roomId: PropTypes.string.isRequired,
@@ -56,21 +63,25 @@ export default class RoomSettingsDialog extends React.Component {
const tabs = [];
tabs.push(new Tab(
+ ROOM_GENERAL_TAB,
_td("General"),
"mx_RoomSettingsDialog_settingsIcon",
);
diff --git a/src/components/views/rooms/RoomList2.tsx b/src/components/views/rooms/RoomList2.tsx
index 15aa880109..ce1956f68d 100644
--- a/src/components/views/rooms/RoomList2.tsx
+++ b/src/components/views/rooms/RoomList2.tsx
@@ -96,7 +96,7 @@ const TAG_AESTHETICS: {
defaultHidden: false,
},
[DefaultTagID.DM]: {
- sectionLabel: _td("Direct Messages"),
+ sectionLabel: _td("People"),
isInvite: false,
defaultHidden: false,
addRoomLabel: _td("Start chat"),
@@ -200,6 +200,7 @@ export default class RoomList2 extends React.Component {
addRoomLabel={aesthetics.addRoomLabel}
isInvite={aesthetics.isInvite}
layout={this.state.layouts.get(orderedTagId)}
+ showMessagePreviews={orderedTagId === DefaultTagID.DM}
/>
);
}
@@ -216,7 +217,7 @@ export default class RoomList2 extends React.Component {
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
onKeyDown={onKeyDownHandler}
- className="mx_RoomList mx_RoomList2"
+ className="mx_RoomList2"
role="tree"
aria-label={_t("Rooms")}
// Firefox sometimes makes this element focusable due to
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index d3bb19729d..650a3ae645 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -20,15 +20,13 @@ import * as React from "react";
import { createRef } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import classNames from 'classnames';
-import * as RoomNotifs from '../../../RoomNotifs';
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../../views/elements/AccessibleButton";
-import AccessibleTooltipButton from "../../views/elements/AccessibleTooltipButton";
-import * as FormattingUtils from '../../../utils/FormattingUtils';
import RoomTile2 from "./RoomTile2";
import { ResizableBox, ResizeCallbackData } from "react-resizable";
import { ListLayout } from "../../../stores/room-list/ListLayout";
+import { DefaultTagID, TagID } from "../../../stores/room-list/models";
/*******************************************************************
* CAUTION *
@@ -43,6 +41,7 @@ interface IProps {
rooms?: Room[];
startAsHidden: boolean;
label: string;
+ showMessagePreviews: boolean;
onAddRoom?: () => void;
addRoomLabel: string;
isInvite: boolean;
@@ -93,7 +92,13 @@ export default class RoomSublist2 extends React.Component {
if (this.props.rooms) {
for (const room of this.props.rooms) {
- tiles.push();
+ tiles.push(
+ {
}
private renderHeader(): React.ReactElement {
- const notifications = !this.props.isInvite
- ? RoomNotifs.aggregateNotificationCount(this.props.rooms)
- : {count: 0, highlight: true};
- const notifCount = notifications.count;
- const notifHighlight = notifications.highlight;
+ // TODO: Handle badge count
+ // const notifications = !this.props.isInvite
+ // ? RoomNotifs.aggregateNotificationCount(this.props.rooms)
+ // : {count: 0, highlight: true};
+ // const notifCount = notifications.count;
+ // const notifHighlight = notifications.highlight;
// TODO: Title on collapsed
// TODO: Incoming call box
- let chevron = null;
- if (this.hasTiles()) {
- const chevronClasses = classNames({
- 'mx_RoomSubList_chevron': true,
- 'mx_RoomSubList_chevronRight': false, // isCollapsed
- 'mx_RoomSubList_chevronDown': true, // !isCollapsed
- });
- chevron = (
- dis.dispatch({action: 'view_room_directory'})}>
- {_t("Explore")}
-
-
- );
-
const searchBox = (
{tagPanel}
-
);
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 0504e3a76a..19edf505e0 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -452,9 +452,7 @@ class LoggedInView extends React.PureComponent
+
+
+
+ {hostingLink}
+
+
+ {this.displayName}
+
+
+ {MatrixClientPeg.get().getUserId()}
+
+
+
+ ![{_t("Switch]({require("../../../res/img/feather-customised/sun.svg")})
+
+
+
+
+ -
+
-
+
this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}> + +![]({require("../../../res/img/feather-customised/notifications.svg")})
+ {_t("Notification settings")}
+
+ -
+
this.onSettingsOpen(e, USER_SECURITY_TAB)}> + +![]({require("../../../res/img/feather-customised/lock.svg")})
+ {_t("Security & privacy")}
+
+ -
+
this.onSettingsOpen(e, null)}> + +![]({require("../../../res/img/feather-customised/settings.svg")})
+ {_t("All settings")}
+
+ -
+
+ +![]({require("../../../res/img/feather-customised/archive.svg")})
+ {_t("Archived rooms")}
+
+ -
+
+ +![]({require("../../../res/img/feather-customised/message-circle.svg")})
+ {_t("Feedback")}
+
+
+
+ -
+
-
+
+ +![]({require("../../../res/img/feather-customised/sign-out.svg")})
+ {_t("Sign out")}
+
+
+
-
);
- }
-
return (
{({onFocus, isActive, ref}) => {
@@ -127,68 +123,68 @@ export default class RoomSublist2 extends React.Component {
const tabIndex = isActive ? 0 : -1;
// TODO: Collapsed state
- let badge;
- if (true) { // !isCollapsed
- const badgeClasses = classNames({
- 'mx_RoomSubList_badge': true,
- 'mx_RoomSubList_badgeHighlight': notifHighlight,
- });
- // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
- if (notifCount > 0) {
- badge = (
-
-
- );
- } else if (this.props.isInvite && this.hasTiles()) {
- // Render the `!` badge for invites
- badge = (
-
-
- );
- }
- }
+ // TODO: Handle badge count
+ // let badge;
+ // if (true) { // !isCollapsed
+ // const showCount = localStorage.getItem("mx_rls_count") || notifHighlight;
+ // const badgeClasses = classNames({
+ // 'mx_RoomSublist2_badge': true,
+ // 'mx_RoomSublist2_badgeHighlight': notifHighlight,
+ // 'mx_RoomSublist2_badgeEmpty': !showCount,
+ // });
+ // // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
+ // if (notifCount > 0) {
+ // const count =
+ // {showCount ? count : null}
+ //
+ // );
+ // } else if (this.props.isInvite && this.hasTiles()) {
+ // // Render the `!` badge for invites
+ // badge = (
+ //
+ //
+ // );
+ // }
+ // }
- let addRoomButton = null;
- if (!!this.props.onAddRoom) {
- addRoomButton = (
-
- {FormattingUtils.formatCount(notifCount)}
-
-
- {FormattingUtils.formatCount(this.numTiles)}
-
- {FormattingUtils.formatCount(notifCount)}
;
+ // badge = (
+ //
+ // {FormattingUtils.formatCount(this.numTiles)}
+ //
+ //
+
- {chevron}
{this.props.label}
- {badge}
- {addRoomButton}
);
}}
@@ -204,9 +200,8 @@ export default class RoomSublist2 extends React.Component {
const classes = classNames({
// TODO: Proper collapse support
- 'mx_RoomSubList': true,
- 'mx_RoomSubList_hidden': false, // len && isCollapsed
- 'mx_RoomSubList_nonEmpty': this.hasTiles(), // len && !isCollapsed
+ 'mx_RoomSublist2': true,
+ 'mx_RoomSublist2_collapsed': false, // len && isCollapsed
});
let content = null;
@@ -244,7 +239,7 @@ export default class RoomSublist2 extends React.Component {
visibleTiles.splice(visibleTiles.length - 1, 1, (
{_t("Show %(n)s more", {n: numMissing})}
diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx
index c95cd108dc..09d7b46ba5 100644
--- a/src/components/views/rooms/RoomTile2.tsx
+++ b/src/components/views/rooms/RoomTile2.tsx
@@ -23,7 +23,6 @@ import classNames from "classnames";
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
import AccessibleButton from "../../views/elements/AccessibleButton";
import RoomAvatar from "../../views/avatars/RoomAvatar";
-import Tooltip from "../../views/elements/Tooltip";
import dis from '../../../dispatcher/dispatcher';
import { Key } from "../../../Keyboard";
import * as RoomNotifs from '../../../RoomNotifs';
@@ -32,6 +31,7 @@ import * as Unread from '../../../Unread';
import * as FormattingUtils from "../../../utils/FormattingUtils";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import ActiveRoomObserver from "../../../ActiveRoomObserver";
/*******************************************************************
* CAUTION *
@@ -51,6 +51,7 @@ enum NotificationColor {
interface IProps {
room: Room;
+ showMessagePreview: boolean;
// TODO: Allow falsifying counts (for invites and stuff)
// TODO: Transparency? Was this ever used?
@@ -65,6 +66,7 @@ interface INotificationState {
interface IState {
hover: boolean;
notificationState: INotificationState;
+ selected: boolean;
}
export default class RoomTile2 extends React.Component {
@@ -87,12 +89,14 @@ export default class RoomTile2 extends React.Component {
this.state = {
hover: false,
notificationState: this.getNotificationState(),
+ selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
};
this.props.room.on("Room.receipt", this.handleRoomEventUpdate);
this.props.room.on("Room.timeline", this.handleRoomEventUpdate);
this.props.room.on("Room.redaction", this.handleRoomEventUpdate);
MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
+ ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
}
public componentWillUnmount() {
@@ -100,6 +104,7 @@ export default class RoomTile2 extends React.Component {
this.props.room.removeListener("Room.receipt", this.handleRoomEventUpdate);
this.props.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
this.props.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
+ ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
}
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
@@ -186,39 +191,33 @@ export default class RoomTile2 extends React.Component {
});
};
+ private onActiveRoomUpdate = (isActive: boolean) => {
+ this.setState({selected: isActive});
+ };
+
public render(): React.ReactElement {
// TODO: Collapsed state
// TODO: Invites
// TODO: a11y proper
// TODO: Render more than bare minimum
- const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
- const isUnread = this.state.notificationState.color > NotificationColor.None;
const classes = classNames({
- 'mx_RoomTile': true,
- // 'mx_RoomTile_selected': this.state.selected,
- 'mx_RoomTile_unread': isUnread,
- 'mx_RoomTile_unreadNotify': this.state.notificationState.color >= NotificationColor.Grey,
- 'mx_RoomTile_highlight': this.state.notificationState.color >= NotificationColor.Red,
- 'mx_RoomTile_invited': this.roomIsInvite,
- // 'mx_RoomTile_menuDisplayed': isMenuDisplayed,
- 'mx_RoomTile_noBadges': !hasBadge,
- // 'mx_RoomTile_transparent': this.props.transparent,
- // 'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
+ 'mx_RoomTile2': true,
+ 'mx_RoomTile2_selected': this.state.selected,
});
- const avatarClasses = classNames({
- 'mx_RoomTile_avatar': true,
- });
-
-
let badge;
+ const hasBadge = this.state.notificationState.color > NotificationColor.Bold;
if (hasBadge) {
+ const hasNotif = this.state.notificationState.color >= NotificationColor.Red;
+ const isEmptyBadge = !localStorage.getItem("mx_rl_rt_badgeCount");
const badgeClasses = classNames({
- 'mx_RoomTile_badge': true,
- 'mx_RoomTile_badgeButton': false, // this.state.badgeHover || isMenuDisplayed
+ 'mx_RoomTile2_badge': true,
+ 'mx_RoomTile2_badgeHighlight': hasNotif,
+ 'mx_RoomTile2_badgeEmpty': isEmptyBadge,
});
- badge = {
if (typeof name !== 'string') name = '';
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
- const nameClasses = classNames({
- 'mx_RoomTile_name': true,
- 'mx_RoomTile_invite': this.roomIsInvite,
- 'mx_RoomTile_badgeShown': hasBadge,
- });
-
// TODO: Support collapsed state properly
- let tooltip = null;
- if (false) { // isCollapsed
- if (this.state.hover) {
- tooltip =
@@ -254,20 +254,18 @@ export default class RoomTile2 extends React.Component {
onClick={this.onTileClick}
role="treeitem"
>
-
{this.state.notificationState.symbol}
;
+ const symbol = this.state.notificationState.symbol;
+ badge = {isEmptyBadge ? null : symbol}
;
}
// TODO: the original RoomTile uses state for the room name. Do we need to?
@@ -226,20 +225,21 @@ export default class RoomTile2 extends React.ComponentI just ate a pie.
;
}
+ const nameClasses = classNames({
+ "mx_RoomTile2_name": true,
+ "mx_RoomTile2_nameWithPreview": !!messagePreview,
+ });
+
+ const avatarSize = 32;
return (
-
-
-
+
+
-
-
- 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.",
+ "Add room": "Add room",
"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",
@@ -2041,6 +2042,14 @@
"Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others",
"Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s",
"Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
+ "Switch to light mode": "Switch to light mode",
+ "Switch to dark mode": "Switch to dark mode",
+ "Switch theme": "Switch theme",
+ "Security & privacy": "Security & privacy",
+ "All settings": "All settings",
+ "Archived rooms": "Archived rooms",
+ "Feedback": "Feedback",
+ "Account settings": "Account settings",
"Could not load user profile": "Could not load user profile",
"Verify this login": "Verify this login",
"Session verified": "Session verified",
diff --git a/src/stores/room-list/ListLayout.ts b/src/stores/room-list/ListLayout.ts
index b41d56be3e..a6abb7d37a 100644
--- a/src/stores/room-list/ListLayout.ts
+++ b/src/stores/room-list/ListLayout.ts
@@ -16,7 +16,7 @@ limitations under the License.
import { TagID } from "./models";
-const TILE_HEIGHT_PX = 34;
+const TILE_HEIGHT_PX = 44;
interface ISerializedListLayout {
numTiles: number;
diff --git a/src/theme.js b/src/theme.js
index ccb753d601..6ed0657bbc 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -62,7 +62,7 @@ function setCustomThemeVars(customTheme) {
}
}
-function getCustomTheme(themeName) {
+export function getCustomTheme(themeName) {
// set css variables
const customThemes = SettingsStore.getValue("custom_themes");
if (!customThemes) {
- {name}
-
+
+
+
+ {name}
+ {messagePreview}
+
{badge}
- {tooltip}
}
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index 71493d6e44..c9b5d9e3ad 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -36,6 +36,7 @@ export enum Action {
/**
* Open the user settings. No additional payload information required.
+ * Optionally can include an OpenToTabPayload.
*/
ViewUserSettings = "view_user_settings",
@@ -58,4 +59,9 @@ export enum Action {
* Focuses the user's cursor to the composer. No additional payload information required.
*/
FocusComposer = "focus_composer",
+
+ /**
+ * Opens the user menu (previously known as the top left menu). No additional payload information required.
+ */
+ ToggleUserMenu = "toggle_user_menu",
}
diff --git a/src/dispatcher/payloads/OpenToTabPayload.ts b/src/dispatcher/payloads/OpenToTabPayload.ts
new file mode 100644
index 0000000000..2877ee053e
--- /dev/null
+++ b/src/dispatcher/payloads/OpenToTabPayload.ts
@@ -0,0 +1,27 @@
+/*
+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 OpenToTabPayload extends ActionPayload {
+ action: Action.ViewUserSettings | string, // TODO: Add room settings action
+
+ /**
+ * The tab ID to open in the settings view to start, if possible.
+ */
+ initialTabId?: string;
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 0aa4c3779e..3520446c2b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1090,6 +1090,7 @@
"Low priority": "Low priority",
"Historical": "Historical",
"System Alerts": "System Alerts",
+ "People": "People",
"This room": "This room",
"Joining room …": "Joining room …",
"Loading …": "Loading …",
@@ -1133,9 +1134,6 @@
"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",
- "Jump to first unread room.": "Jump to first unread room.",
- "Jump to first invite.": "Jump to first invite.",
- "Add room": "Add room",
"Show %(n)s more": "Show %(n)s more",
"Options": "Options",
"%(count)s unread messages including mentions.|other": "%(count)s unread messages including mentions.",
@@ -2017,6 +2015,9 @@
"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