mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-16 23:01:46 +03:00
eed5efdbe1
This just disables audio notifications and the popup, which is the easiest way to do "do not disturb" for a device. This needs spec changes to be done properly, as it's a shame that mobile devices for the user will still go off. Disabling all of push doesn't sound ideal as it would potentially mean missing highlights for when leaving DND mode.
628 lines
25 KiB
TypeScript
628 lines
25 KiB
TypeScript
/*
|
|
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
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, { createRef } from "react";
|
|
import { Room } from "matrix-js-sdk/src/models/room";
|
|
import classNames from "classnames";
|
|
import * as fbEmitter from "fbemitter";
|
|
|
|
import { MatrixClientPeg } from "../../MatrixClientPeg";
|
|
import defaultDispatcher from "../../dispatcher/dispatcher";
|
|
import dis from "../../dispatcher/dispatcher";
|
|
import { ActionPayload } from "../../dispatcher/payloads";
|
|
import { Action } from "../../dispatcher/actions";
|
|
import { _t } from "../../languageHandler";
|
|
import { ContextMenuButton } from "./ContextMenu";
|
|
import { USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB } from "../views/dialogs/UserSettingsDialog";
|
|
import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
|
|
import FeedbackDialog from "../views/dialogs/FeedbackDialog";
|
|
import Modal from "../../Modal";
|
|
import LogoutDialog from "../views/dialogs/LogoutDialog";
|
|
import SettingsStore from "../../settings/SettingsStore";
|
|
import {getCustomTheme} from "../../theme";
|
|
import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
|
|
import SdkConfig from "../../SdkConfig";
|
|
import { getHomePageUrl } from "../../utils/pages";
|
|
import { OwnProfileStore } from "../../stores/OwnProfileStore";
|
|
import { UPDATE_EVENT } from "../../stores/AsyncStore";
|
|
import BaseAvatar from '../views/avatars/BaseAvatar';
|
|
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
|
|
import { SettingLevel } from "../../settings/SettingLevel";
|
|
import IconizedContextMenu, {
|
|
IconizedContextMenuOption,
|
|
IconizedContextMenuOptionList,
|
|
} from "../views/context_menus/IconizedContextMenu";
|
|
import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
|
|
import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore";
|
|
import { showCommunityInviteDialog } from "../../RoomInvite";
|
|
import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
|
|
import ErrorDialog from "../views/dialogs/ErrorDialog";
|
|
import EditCommunityPrototypeDialog from "../views/dialogs/EditCommunityPrototypeDialog";
|
|
import { UIFeature } from "../../settings/UIFeature";
|
|
import HostSignupAction from "./HostSignupAction";
|
|
import { IHostSignupConfig } from "../views/dialogs/HostSignupDialogTypes";
|
|
import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
|
|
import RoomName from "../views/elements/RoomName";
|
|
import {replaceableComponent} from "../../utils/replaceableComponent";
|
|
|
|
interface IProps {
|
|
isMinimized: boolean;
|
|
}
|
|
|
|
type PartialDOMRect = Pick<DOMRect, "width" | "left" | "top" | "height">;
|
|
|
|
interface IState {
|
|
contextMenuPosition: PartialDOMRect;
|
|
isDarkTheme: boolean;
|
|
selectedSpace?: Room;
|
|
}
|
|
|
|
@replaceableComponent("structures.UserMenu")
|
|
export default class UserMenu extends React.Component<IProps, IState> {
|
|
private dispatcherRef: string;
|
|
private themeWatcherRef: string;
|
|
private dndWatcherRef: string;
|
|
private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
|
|
private tagStoreRef: fbEmitter.EventSubscription;
|
|
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
contextMenuPosition: null,
|
|
isDarkTheme: this.isUserOnDarkTheme(),
|
|
};
|
|
|
|
OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
|
|
if (SettingsStore.getValue("feature_spaces")) {
|
|
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
|
|
}
|
|
|
|
// Force update is the easiest way to trigger the UI update (we don't store state for this)
|
|
this.dndWatcherRef = SettingsStore.watchSetting("doNotDisturb", null, () => this.forceUpdate());
|
|
}
|
|
|
|
private get hasHomePage(): boolean {
|
|
return !!getHomePageUrl(SdkConfig.get());
|
|
}
|
|
|
|
public componentDidMount() {
|
|
this.dispatcherRef = defaultDispatcher.register(this.onAction);
|
|
this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
|
|
this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
|
|
if (this.dndWatcherRef) SettingsStore.unwatchSetting(this.dndWatcherRef);
|
|
if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
|
|
OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
|
|
this.tagStoreRef.remove();
|
|
if (SettingsStore.getValue("feature_spaces")) {
|
|
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
|
|
}
|
|
}
|
|
|
|
private onTagStoreUpdate = () => {
|
|
this.forceUpdate(); // we don't have anything useful in state to update
|
|
};
|
|
|
|
private isUserOnDarkTheme(): boolean {
|
|
if (SettingsStore.getValue("use_system_theme")) {
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
} else {
|
|
const theme = SettingsStore.getValue("theme");
|
|
if (theme.startsWith("custom-")) {
|
|
return getCustomTheme(theme.substring("custom-".length)).is_dark;
|
|
}
|
|
return theme === "dark";
|
|
}
|
|
}
|
|
|
|
private onProfileUpdate = async () => {
|
|
// the store triggered an update, so force a layout update. We don't
|
|
// have any state to store here for that to magically happen.
|
|
this.forceUpdate();
|
|
};
|
|
|
|
private onSelectedSpaceUpdate = async (selectedSpace?: Room) => {
|
|
this.setState({ selectedSpace });
|
|
};
|
|
|
|
private onThemeChanged = () => {
|
|
this.setState({isDarkTheme: this.isUserOnDarkTheme()});
|
|
};
|
|
|
|
private onAction = (ev: ActionPayload) => {
|
|
if (ev.action !== Action.ToggleUserMenu) return; // not interested
|
|
|
|
if (this.state.contextMenuPosition) {
|
|
this.setState({contextMenuPosition: null});
|
|
} else {
|
|
if (this.buttonRef.current) this.buttonRef.current.click();
|
|
}
|
|
};
|
|
|
|
private onOpenMenuClick = (ev: React.MouseEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
const target = ev.target as HTMLButtonElement;
|
|
this.setState({contextMenuPosition: target.getBoundingClientRect()});
|
|
};
|
|
|
|
private onContextMenu = (ev: React.MouseEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
this.setState({
|
|
contextMenuPosition: {
|
|
left: ev.clientX,
|
|
top: ev.clientY,
|
|
width: 20,
|
|
height: 0,
|
|
},
|
|
});
|
|
};
|
|
|
|
private onCloseMenu = () => {
|
|
this.setState({contextMenuPosition: null});
|
|
};
|
|
|
|
private onSwitchThemeClick = (ev: React.MouseEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
// 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.DEVICE, newTheme); // set at same level as Appearance tab
|
|
};
|
|
|
|
private onSettingsOpen = (ev: ButtonEvent, tabId: string) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId};
|
|
defaultDispatcher.dispatch(payload);
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onShowArchived = (ev: ButtonEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
// TODO: Archived room view: https://github.com/vector-im/element-web/issues/14038
|
|
// Note: You'll need to uncomment the button too.
|
|
console.log("TODO: Show archived rooms");
|
|
};
|
|
|
|
private onProvideFeedback = (ev: ButtonEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
Modal.createTrackedDialog('Feedback Dialog', '', FeedbackDialog);
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onSignOutClick = async (ev: ButtonEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
if (!cli || !cli.isCryptoEnabled() || !(await cli.exportRoomKeys())?.length) {
|
|
// log out without user prompt if they have no local megolm sessions
|
|
dis.dispatch({action: 'logout'});
|
|
} else {
|
|
Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
|
|
}
|
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onSignInClick = () => {
|
|
dis.dispatch({ action: 'start_login' });
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onRegisterClick = () => {
|
|
dis.dispatch({ action: 'start_registration' });
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onHomeClick = (ev: ButtonEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
defaultDispatcher.dispatch({action: 'view_home_page'});
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onCommunitySettingsClick = (ev: ButtonEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
Modal.createTrackedDialog('Edit Community', '', EditCommunityPrototypeDialog, {
|
|
communityId: CommunityPrototypeStore.instance.getSelectedCommunityId(),
|
|
});
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onCommunityMembersClick = (ev: ButtonEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
// We'd ideally just pop open a right panel with the member list, but the current
|
|
// way the right panel is structured makes this exceedingly difficult. Instead, we'll
|
|
// switch to the general room and open the member list there as it should be in sync
|
|
// anyways.
|
|
const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
|
|
if (chat) {
|
|
dis.dispatch({
|
|
action: 'view_room',
|
|
room_id: chat.roomId,
|
|
}, true);
|
|
dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList});
|
|
} else {
|
|
// "This should never happen" clauses go here for the prototype.
|
|
Modal.createTrackedDialog('Failed to find general chat', '', ErrorDialog, {
|
|
title: _t('Failed to find the general chat for this community'),
|
|
description: _t("Failed to find the general chat for this community"),
|
|
});
|
|
}
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onCommunityInviteClick = (ev: ButtonEvent) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
|
|
showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId());
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
};
|
|
|
|
private onDndToggle = (ev) => {
|
|
ev.stopPropagation();
|
|
const current = SettingsStore.getValue("doNotDisturb");
|
|
SettingsStore.setValue("doNotDisturb", null, SettingLevel.DEVICE, !current);
|
|
};
|
|
|
|
private renderContextMenu = (): React.ReactNode => {
|
|
if (!this.state.contextMenuPosition) return null;
|
|
|
|
const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
|
|
|
|
let topSection;
|
|
const hostSignupConfig: IHostSignupConfig = SdkConfig.get().hostSignup;
|
|
if (MatrixClientPeg.get().isGuest()) {
|
|
topSection = (
|
|
<div className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_guestPrompts">
|
|
{_t("Got an account? <a>Sign in</a>", {}, {
|
|
a: sub => (
|
|
<AccessibleButton kind="link" onClick={this.onSignInClick}>
|
|
{sub}
|
|
</AccessibleButton>
|
|
),
|
|
})}
|
|
{_t("New here? <a>Create an account</a>", {}, {
|
|
a: sub => (
|
|
<AccessibleButton kind="link" onClick={this.onRegisterClick}>
|
|
{sub}
|
|
</AccessibleButton>
|
|
),
|
|
})}
|
|
</div>
|
|
)
|
|
} else if (hostSignupConfig) {
|
|
if (hostSignupConfig && hostSignupConfig.url) {
|
|
// If hostSignup.domains is set to a non-empty array, only show
|
|
// dialog if the user is on the domain or a subdomain.
|
|
const hostSignupDomains = hostSignupConfig.domains || [];
|
|
const mxDomain = MatrixClientPeg.get().getDomain();
|
|
const validDomains = hostSignupDomains.filter(d => (d === mxDomain || mxDomain.endsWith(`.${d}`)));
|
|
if (!hostSignupConfig.domains || validDomains.length > 0) {
|
|
topSection = <div onClick={this.onCloseMenu}>
|
|
<HostSignupAction />
|
|
</div>;
|
|
}
|
|
}
|
|
}
|
|
|
|
let homeButton = null;
|
|
if (this.hasHomePage) {
|
|
homeButton = (
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconHome"
|
|
label={_t("Home")}
|
|
onClick={this.onHomeClick}
|
|
/>
|
|
);
|
|
}
|
|
|
|
let feedbackButton;
|
|
if (SettingsStore.getValue(UIFeature.Feedback)) {
|
|
feedbackButton = <IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconMessage"
|
|
label={_t("Feedback")}
|
|
onClick={this.onProvideFeedback}
|
|
/>;
|
|
}
|
|
|
|
let primaryHeader = (
|
|
<div className="mx_UserMenu_contextMenu_name">
|
|
<span className="mx_UserMenu_contextMenu_displayName">
|
|
{OwnProfileStore.instance.displayName}
|
|
</span>
|
|
<span className="mx_UserMenu_contextMenu_userId">
|
|
{MatrixClientPeg.get().getUserId()}
|
|
</span>
|
|
</div>
|
|
);
|
|
let primaryOptionList = (
|
|
<React.Fragment>
|
|
<IconizedContextMenuOptionList>
|
|
{homeButton}
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconBell"
|
|
label={_t("Notification settings")}
|
|
onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
|
|
/>
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconLock"
|
|
label={_t("Security & privacy")}
|
|
onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}
|
|
/>
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconSettings"
|
|
label={_t("All settings")}
|
|
onClick={(e) => this.onSettingsOpen(e, null)}
|
|
/>
|
|
{/* <IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconArchive"
|
|
label={_t("Archived rooms")}
|
|
onClick={this.onShowArchived}
|
|
/> */}
|
|
{ feedbackButton }
|
|
</IconizedContextMenuOptionList>
|
|
<IconizedContextMenuOptionList red>
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconSignOut"
|
|
label={_t("Sign out")}
|
|
onClick={this.onSignOutClick}
|
|
/>
|
|
</IconizedContextMenuOptionList>
|
|
</React.Fragment>
|
|
);
|
|
let secondarySection = null;
|
|
|
|
if (prototypeCommunityName) {
|
|
const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId();
|
|
primaryHeader = (
|
|
<div className="mx_UserMenu_contextMenu_name">
|
|
<span className="mx_UserMenu_contextMenu_displayName">
|
|
{prototypeCommunityName}
|
|
</span>
|
|
</div>
|
|
);
|
|
let settingsOption;
|
|
let inviteOption;
|
|
if (CommunityPrototypeStore.instance.canInviteTo(communityId)) {
|
|
inviteOption = (
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconInvite"
|
|
label={_t("Invite")}
|
|
onClick={this.onCommunityInviteClick}
|
|
/>
|
|
);
|
|
}
|
|
if (CommunityPrototypeStore.instance.isAdminOf(communityId)) {
|
|
settingsOption = (
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconSettings"
|
|
label={_t("Settings")}
|
|
aria-label={_t("Community settings")}
|
|
onClick={this.onCommunitySettingsClick}
|
|
/>
|
|
);
|
|
}
|
|
primaryOptionList = (
|
|
<IconizedContextMenuOptionList>
|
|
{settingsOption}
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconMembers"
|
|
label={_t("Members")}
|
|
onClick={this.onCommunityMembersClick}
|
|
/>
|
|
{inviteOption}
|
|
</IconizedContextMenuOptionList>
|
|
);
|
|
secondarySection = (
|
|
<React.Fragment>
|
|
<hr />
|
|
<div className="mx_UserMenu_contextMenu_header">
|
|
<div className="mx_UserMenu_contextMenu_name">
|
|
<span className="mx_UserMenu_contextMenu_displayName">
|
|
{OwnProfileStore.instance.displayName}
|
|
</span>
|
|
<span className="mx_UserMenu_contextMenu_userId">
|
|
{MatrixClientPeg.get().getUserId()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<IconizedContextMenuOptionList>
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconSettings"
|
|
label={_t("Settings")}
|
|
aria-label={_t("User settings")}
|
|
onClick={(e) => this.onSettingsOpen(e, null)}
|
|
/>
|
|
{ feedbackButton }
|
|
</IconizedContextMenuOptionList>
|
|
<IconizedContextMenuOptionList red>
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconSignOut"
|
|
label={_t("Sign out")}
|
|
onClick={this.onSignOutClick}
|
|
/>
|
|
</IconizedContextMenuOptionList>
|
|
</React.Fragment>
|
|
)
|
|
} else if (MatrixClientPeg.get().isGuest()) {
|
|
primaryOptionList = (
|
|
<React.Fragment>
|
|
<IconizedContextMenuOptionList>
|
|
{ homeButton }
|
|
<IconizedContextMenuOption
|
|
iconClassName="mx_UserMenu_iconSettings"
|
|
label={_t("Settings")}
|
|
onClick={(e) => this.onSettingsOpen(e, null)}
|
|
/>
|
|
{ feedbackButton }
|
|
</IconizedContextMenuOptionList>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
const classes = classNames({
|
|
"mx_UserMenu_contextMenu": true,
|
|
"mx_UserMenu_contextMenu_prototype": !!prototypeCommunityName,
|
|
});
|
|
|
|
return <IconizedContextMenu
|
|
// numerical adjustments to overlap the context menu by just over the width of the
|
|
// menu icon and make it look connected
|
|
left={this.state.contextMenuPosition.width + this.state.contextMenuPosition.left - 10}
|
|
top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height + 8}
|
|
onFinished={this.onCloseMenu}
|
|
className={classes}
|
|
>
|
|
<div className="mx_UserMenu_contextMenu_header">
|
|
{primaryHeader}
|
|
<AccessibleTooltipButton
|
|
className="mx_UserMenu_contextMenu_themeButton"
|
|
onClick={this.onSwitchThemeClick}
|
|
title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
|
|
>
|
|
<img
|
|
src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
|
|
alt={_t("Switch theme")}
|
|
width={16}
|
|
/>
|
|
</AccessibleTooltipButton>
|
|
</div>
|
|
{topSection}
|
|
{primaryOptionList}
|
|
{secondarySection}
|
|
</IconizedContextMenu>;
|
|
};
|
|
|
|
public render() {
|
|
const avatarSize = 32; // should match border-radius of the avatar
|
|
|
|
const userId = MatrixClientPeg.get().getUserId();
|
|
const displayName = OwnProfileStore.instance.displayName || userId;
|
|
const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
|
|
|
|
const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
|
|
|
|
let isPrototype = false;
|
|
let menuName = _t("User menu");
|
|
let name = <span className="mx_UserMenu_userName">{displayName}</span>;
|
|
let buttons = (
|
|
<span className="mx_UserMenu_headerButtons">
|
|
{/* masked image in CSS */}
|
|
</span>
|
|
);
|
|
let dnd;
|
|
if (this.state.selectedSpace) {
|
|
name = (
|
|
<div className="mx_UserMenu_doubleName">
|
|
<span className="mx_UserMenu_userName">{displayName}</span>
|
|
<RoomName room={this.state.selectedSpace}>
|
|
{(roomName) => <span className="mx_UserMenu_subUserName">{roomName}</span>}
|
|
</RoomName>
|
|
</div>
|
|
);
|
|
} else if (prototypeCommunityName) {
|
|
name = (
|
|
<div className="mx_UserMenu_doubleName">
|
|
<span className="mx_UserMenu_userName">{prototypeCommunityName}</span>
|
|
<span className="mx_UserMenu_subUserName">{displayName}</span>
|
|
</div>
|
|
);
|
|
menuName = _t("Community and user menu");
|
|
isPrototype = true;
|
|
} else if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
|
|
name = (
|
|
<div className="mx_UserMenu_doubleName">
|
|
<span className="mx_UserMenu_userName">{_t("Home")}</span>
|
|
<span className="mx_UserMenu_subUserName">{displayName}</span>
|
|
</div>
|
|
);
|
|
isPrototype = true;
|
|
} else if (SettingsStore.getValue("feature_dnd")) {
|
|
const isDnd = SettingsStore.getValue("doNotDisturb");
|
|
dnd = <AccessibleButton
|
|
onClick={this.onDndToggle}
|
|
className={classNames({
|
|
"mx_UserMenu_dnd": true,
|
|
"mx_UserMenu_dnd_noisy": !isDnd,
|
|
"mx_UserMenu_dnd_muted": isDnd,
|
|
})}
|
|
/>;
|
|
}
|
|
if (this.props.isMinimized) {
|
|
name = null;
|
|
buttons = null;
|
|
}
|
|
|
|
const classes = classNames({
|
|
'mx_UserMenu': true,
|
|
'mx_UserMenu_minimized': this.props.isMinimized,
|
|
'mx_UserMenu_prototype': isPrototype,
|
|
});
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<ContextMenuButton
|
|
className={classes}
|
|
onClick={this.onOpenMenuClick}
|
|
inputRef={this.buttonRef}
|
|
label={menuName}
|
|
isExpanded={!!this.state.contextMenuPosition}
|
|
onContextMenu={this.onContextMenu}
|
|
>
|
|
<div className="mx_UserMenu_row">
|
|
<span className="mx_UserMenu_userAvatarContainer">
|
|
<BaseAvatar
|
|
idName={userId}
|
|
name={displayName}
|
|
url={avatarUrl}
|
|
width={avatarSize}
|
|
height={avatarSize}
|
|
resizeMethod="crop"
|
|
className="mx_UserMenu_userAvatar"
|
|
/>
|
|
</span>
|
|
{name}
|
|
{dnd}
|
|
{buttons}
|
|
</div>
|
|
</ContextMenuButton>
|
|
{this.renderContextMenu()}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|