diff --git a/res/css/_components.scss b/res/css/_components.scss index f59da633d7..e02c4c823b 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -266,6 +266,7 @@ @import "./views/settings/_UpdateCheckButton.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss"; +@import "./views/settings/tabs/room/_NotificationSettingsTab.scss"; @import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss"; @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss"; @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss"; diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss index e6b56c5037..ef7a547650 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.scss +++ b/res/css/views/context_menus/_IconizedContextMenu.scss @@ -17,6 +17,7 @@ limitations under the License. // A context menu that largely fits the | [icon] [label] | format. .mx_IconizedContextMenu { min-width: 146px; + width: max-content; .mx_IconizedContextMenu_optionList { & > * { @@ -119,7 +120,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-content; + background-color: $secondary-content; } } @@ -133,6 +134,14 @@ limitations under the License. } } + .mx_IconizedContextMenu_option_red { + color: $alert !important; + + .mx_IconizedContextMenu_icon::before { + background-color: $alert; + } + } + .mx_IconizedContextMenu_active { &.mx_AccessibleButton, .mx_AccessibleButton { color: $accent !important; @@ -162,4 +171,9 @@ limitations under the License. .mx_IconizedContextMenu_unchecked::before { content: unset; } + + .mx_IconizedContextMenu_sublabel { + margin-left: 20px; + color: $tertiary-content; + } } diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 4c5594ce6d..305ab824eb 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -99,7 +99,7 @@ limitations under the License. } .mx_BaseCard_Button { - padding: 10px 38px 10px 12px; + padding: 10px 32px 10px 12px; margin: 0; position: relative; font-size: $font-13px; @@ -109,6 +109,12 @@ limitations under the License. overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + display: flex; + + .mx_BaseCard_Button_sublabel { + color: $tertiary-content; + margin-left: auto; + } &:hover { background-color: rgba(141, 151, 165, 0.1); diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index b98c71b923..20369830c6 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -33,12 +33,13 @@ limitations under the License. } .mx_RoomHeader_wrapper { - margin: auto; - height: 50px; + height: 44px; display: flex; align-items: center; min-width: 0; - padding: 0 10px 0 18px; + margin: 0 20px 0 16px; + padding-top: 8px; + border-bottom: 1px solid $system; .mx_InviteOnlyIcon_large { margin: 0; @@ -85,40 +86,65 @@ limitations under the License. .mx_RoomHeader_simpleHeader { line-height: $font-52px; - color: $roomheader-color; + color: $primary-content; font-size: $font-18px; - font-weight: 600; + font-weight: $font-semi-bold; overflow: hidden; margin-left: 63px; text-overflow: ellipsis; width: 100%; -} -.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton { - float: right; -} + .mx_RoomHeader_cancelButton { + float: right; + } -.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon { - margin-left: 14px; - margin-right: 24px; - vertical-align: -4px; + .mx_RoomHeader_icon { + margin-left: 14px; + margin-right: 24px; + vertical-align: -4px; + } } .mx_RoomHeader_name { flex: 0 1 auto; overflow: hidden; - color: $roomheader-color; - font-weight: 600; + color: $primary-content; + font-weight: $font-semi-bold; font-size: $font-18px; + border-radius: 6px; margin: 0 7px; - border-bottom: 1px solid transparent; + padding: 1px 4px; display: flex; -} + user-select: none; -.mx_RoomHeader_nametext { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + &:hover { + background-color: $quinary-content; + } + + .mx_RoomHeader_nametext { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .mx_RoomHeader_chevron { + align-self: center; + width: 16px; + height: 16px; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); + background-color: $tertiary-content; + } + + &[aria-expanded=true] { + background-color: $quinary-content; + + .mx_RoomHeader_chevron { + transform: rotate(180deg); + } + } } .mx_RoomHeader_settingsHint { @@ -131,46 +157,17 @@ limitations under the License. } .mx_RoomHeader_name, -.mx_RoomHeader_avatar, -.mx_RoomHeader_avatarPicker, -.mx_RoomHeader_avatarPicker_edit, -.mx_RoomHeader_avatarPicker_remove { +.mx_RoomHeader_avatar { cursor: pointer; } -.mx_RoomHeader_avatarPicker_remove { - position: absolute; - top: -11px; - right: -9px; -} - -.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) { - color: $accent; -} - -.mx_RoomHeader_placeholder { - color: $settings-grey-fg-color !important; -} - -.mx_RoomHeader_editable { - border-bottom: 1px solid $strong-input-border-color !important; - min-width: 150px; - cursor: text; -} - -.mx_RoomHeader_editable:focus { - border-bottom: 1px solid $accent !important; - outline: none; - box-shadow: none; -} - .mx_RoomHeader_topic { flex: 1; color: $roomtopic-color; font-weight: 400; font-size: $font-13px; - margin: 0 7px; - margin-top: 4px; // to align baseline of topic with room name + // to align baseline of topic with room name + margin: 4px 7px 0; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid transparent; @@ -188,24 +185,6 @@ limitations under the License. object-fit: cover; } -.mx_RoomHeader_avatarPicker { - position: relative; -} - -.mx_RoomHeader_avatarPicker_edit { - position: absolute; - left: 16px; - top: 18px; -} - -.mx_RoomHeader_avatarPicker_edit > label { - cursor: pointer; -} - -.mx_RoomHeader_avatarPicker_edit > input { - display: none; -} - .mx_RoomHeader_button { position: relative; margin-left: 1px; @@ -265,21 +244,10 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/call/video-call.svg'); } -.mx_RoomHeader_showPanel { - height: 16px; -} - -.mx_RoomHeader_voipButton { - display: table-cell; -} - -.mx_RoomHeader_voipButtons { - margin-top: 18px; -} - @media only screen and (max-width: 480px) { .mx_RoomHeader_wrapper { padding: 0; + margin: 0; } .mx_RoomHeader { overflow: hidden; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 5cd75fd69e..e11bde1f52 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -189,10 +189,42 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg'); } + .mx_RoomTile_iconNotificationsDefault::before { + mask-image: url('$(res)/img/element-icons/notifications.svg'); + } + + .mx_RoomTile_iconNotificationsAllMessages::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg'); + } + + .mx_RoomTile_iconNotificationsMentionsKeywords::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg'); + } + + .mx_RoomTile_iconNotificationsNone::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg'); + } + + .mx_RoomTile_iconPeople::before { + mask-image: url('$(res)/img/element-icons/room/members.svg'); + } + + .mx_RoomTile_iconFiles::before { + mask-image: url('$(res)/img/element-icons/room/files.svg'); + } + + .mx_RoomTile_iconWidgets::before { + mask-image: url('$(res)/img/element-icons/room/apps.svg'); + } + .mx_RoomTile_iconSettings::before { mask-image: url('$(res)/img/element-icons/settings.svg'); } + .mx_RoomTile_iconExport::before { + mask-image: url('$(res)/img/element-icons/export.svg'); + } + .mx_RoomTile_iconCopyLink::before { mask-image: url('$(res)/img/element-icons/link.svg'); } diff --git a/res/css/views/settings/tabs/room/_NotificationSettingsTab.scss b/res/css/views/settings/tabs/room/_NotificationSettingsTab.scss new file mode 100644 index 0000000000..97b807863f --- /dev/null +++ b/res/css/views/settings/tabs/room/_NotificationSettingsTab.scss @@ -0,0 +1,76 @@ +/* +Copyright 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. +*/ + +.mx_NotificationSettingsTab_notificationsSection { + width: 360px; + + .mx_StyledRadioButton { + flex-direction: row-reverse; + color: $primary-content; + font-size: $font-15px; + line-height: $font-18px; + font-weight: $font-semi-bold; + margin-top: 16px; + position: relative; + padding-left: 8px; + align-items: center; + + &::before { + content: ""; + position: absolute; + height: 24px; + width: 24px; + left: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + background-color: $secondary-content; + } + + input + div { + margin-top: 8px; + } + + .mx_NotificationSettingsTab_microCopy { + color: $secondary-content; + font-weight: normal; + font-size: $font-12px; + line-height: $font-15px; + margin-right: 32px; + + .mx_AccessibleButton_kind_link { + padding: 0; + font-size: inherit; + } + } + } + + .mx_NotificationSettingsTab_defaultEntry::before { + mask-image: url('$(res)/img/element-icons/notifications.svg'); + } + + .mx_NotificationSettingsTab_allMessagesEntry::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg'); + } + + .mx_NotificationSettingsTab_mentionsKeywordsEntry::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg'); + } + + .mx_NotificationSettingsTab_noneEntry::before { + mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg'); + } +} diff --git a/res/img/element-icons/export.svg b/res/img/element-icons/export.svg index 49899e9520..038866c294 100644 --- a/res/img/element-icons/export.svg +++ b/res/img/element-icons/export.svg @@ -1,14 +1,8 @@ - - + + + + + + + diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index dce31820bd..6ed249a138 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -43,7 +43,6 @@ $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); $event-selected-color: $system; $progressbar-bg-color: $system; $topleftmenu-color: $primary-content; -$roomheader-color: $primary-content; $roomheader-addroom-fg-color: $primary-content; $h3-color: $primary-content; $focus-bg-color: $room-highlight-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index b9afbc5134..19ab021a78 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -84,7 +84,6 @@ $settings-profile-button-bg-color: #e7e7e7; $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; -$roomheader-color: $text-primary-color; $roomheader-addroom-bg-color: #3c4556; $roomheader-addroom-fg-color: $text-primary-color; $groupFilterPanel-button-color: $header-panel-text-primary-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 83255da36d..07a0400e24 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -125,7 +125,6 @@ $rte-room-pill-color: #aaa; $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; -$roomheader-color: #45474a; $roomheader-bg-color: $primary-bg-color; $roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-fg-color: $accent-fg-color; diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 7ad3d9a254..106eb9209d 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -83,7 +83,6 @@ $dialog-title-fg-color: var(--timeline-text-color); $tab-label-fg-color: var(--timeline-text-color); // was #4e5054 $authpage-lang-color: var(--timeline-text-color); -$roomheader-color: var(--timeline-text-color); // was #232f32 $authpage-primary-color: var(--timeline-text-color); // --roomlist-text-secondary-color diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 044c5aca42..dea0763f37 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -124,7 +124,6 @@ $settings-subsection-fg-color: #61708b; // RoomHeader // ******************** -$roomheader-color: #45474a; $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); $roomheader-addroom-fg-color: #5c6470; // ******************** diff --git a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx index 49f57ca7b6..74a45a57ee 100644 --- a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx +++ b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx @@ -40,6 +40,7 @@ export const ContextMenuTooltipButton: React.FC = ({ onContextMenu={onContextMenu || onClick} aria-haspopup={true} aria-expanded={isExpanded} + forceHide={isExpanded} > { children } diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 3cf87e1bea..d6ec1ca980 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -1486,10 +1486,6 @@ export class RoomView extends React.Component { }); }; - private onSettingsClick = () => { - dis.dispatch({ action: "open_room_settings" }); - }; - private onAppsClick = () => { dis.dispatch({ action: "appsDrawer", @@ -2111,7 +2107,6 @@ export class RoomView extends React.Component { oobData={this.props.oobData} inRoom={myMembership === 'join'} onSearchClick={this.onSearchClick} - onSettingsClick={this.onSettingsClick} onForgetClick={(myMembership === "leave") ? this.onForgetClick : null} e2eStatus={this.state.e2eStatus} onAppsClick={this.state.hasPinnedWidgets ? this.onAppsClick : null} diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx new file mode 100644 index 0000000000..f0aa5ab133 --- /dev/null +++ b/src/components/views/context_menus/RoomContextMenu.tsx @@ -0,0 +1,308 @@ +/* +Copyright 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, { useContext } from "react"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { logger } from "matrix-js-sdk/src/logger"; + +import { IProps as IContextMenuProps } from "../../structures/ContextMenu"; +import IconizedContextMenu, { + IconizedContextMenuCheckbox, + IconizedContextMenuOption, + IconizedContextMenuOptionList, +} from "./IconizedContextMenu"; +import { _t } from "../../../languageHandler"; +import MatrixClientContext from "../../../contexts/MatrixClientContext"; +import { ButtonEvent } from "../elements/AccessibleButton"; +import { DefaultTagID, TagID } from "../../../stores/room-list/models"; +import RoomListStore from "../../../stores/room-list/RoomListStore"; +import dis from "../../../dispatcher/dispatcher"; +import RoomListActions from "../../../actions/RoomListActions"; +import { Key } from "../../../Keyboard"; +import { EchoChamber } from "../../../stores/local-echo/EchoChamber"; +import { RoomNotifState } from "../../../RoomNotifs"; +import Modal from "../../../Modal"; +import ExportDialog from "../dialogs/ExportDialog"; +import { onRoomFilesClick, onRoomMembersClick } from "../right_panel/RoomSummaryCard"; +import RoomViewStore from "../../../stores/RoomViewStore"; +import defaultDispatcher from "../../../dispatcher/dispatcher"; +import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; +import { Action } from "../../../dispatcher/actions"; +import { RightPanelPhases } from "../../../stores/RightPanelStorePhases"; +import { ROOM_NOTIFICATIONS_TAB } from "../dialogs/RoomSettingsDialog"; + +interface IProps extends IContextMenuProps { + room: Room; +} + +const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => { + const cli = useContext(MatrixClientContext); + const roomTags = RoomListStore.instance.getTagsForRoom(room); + + let leaveOption: JSX.Element; + if (roomTags.includes(DefaultTagID.Archived)) { + const onForgetRoomClick = (ev: ButtonEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + dis.dispatch({ + action: "forget_room", + room_id: room.roomId, + }); + onFinished(); + }; + + leaveOption = ; + } else { + const onLeaveRoomClick = (ev: ButtonEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + dis.dispatch({ + action: "leave_room", + room_id: room.roomId, + }); + onFinished(); + }; + + leaveOption = ; + } + + let inviteOption: JSX.Element; + if (room.canInvite(cli.getUserId())) { + const onInviteClick = (ev: ButtonEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + dis.dispatch({ + action: "view_invite", + roomId: room.roomId, + }); + onFinished(); + }; + + inviteOption = ; + } + + let favouriteOption: JSX.Element; + let lowPriorityOption: JSX.Element; + let notificationOption: JSX.Element; + if (room.getMyMembership() === "join") { + const isFavorite = roomTags.includes(DefaultTagID.Favourite); + favouriteOption = onTagRoom(e, DefaultTagID.Favourite)} + active={isFavorite} + label={isFavorite ? _t("Favourited") : _t("Favourite")} + iconClassName="mx_RoomTile_iconStar" + />; + + const isLowPriority = roomTags.includes(DefaultTagID.LowPriority); + lowPriorityOption = onTagRoom(e, DefaultTagID.LowPriority)} + active={isLowPriority} + label={_t("Low priority")} + iconClassName="mx_RoomTile_iconArrowDown" + />; + + const echoChamber = EchoChamber.forRoom(room); + let notificationLabel: string; + let iconClassName: string; + switch (echoChamber.notificationVolume) { + case RoomNotifState.AllMessages: + notificationLabel = _t("Default"); + iconClassName = "mx_RoomTile_iconNotificationsDefault"; + break; + case RoomNotifState.AllMessagesLoud: + notificationLabel = _t("All messages"); + iconClassName = "mx_RoomTile_iconNotificationsAllMessages"; + break; + case RoomNotifState.MentionsOnly: + notificationLabel = _t("Mentions only"); + iconClassName = "mx_RoomTile_iconNotificationsMentionsKeywords"; + break; + case RoomNotifState.Mute: + notificationLabel = _t("Mute"); + iconClassName = "mx_RoomTile_iconNotificationsNone"; + break; + } + + notificationOption = { + ev.preventDefault(); + ev.stopPropagation(); + + dis.dispatch({ + action: "open_room_settings", + room_id: room.roomId, + initial_tab_id: ROOM_NOTIFICATIONS_TAB, + }); + onFinished(); + }} + label={_t("Notifications")} + iconClassName={iconClassName} + > + + { notificationLabel } + + ; + } + + const onTagRoom = (ev: ButtonEvent, tagId: TagID) => { + ev.preventDefault(); + ev.stopPropagation(); + + if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) { + const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite; + const isApplied = RoomListStore.instance.getTagsForRoom(room).includes(tagId); + const removeTag = isApplied ? tagId : inverseTag; + const addTag = isApplied ? null : tagId; + dis.dispatch(RoomListActions.tagRoom(cli, room, removeTag, addTag, undefined, 0)); + } else { + logger.warn(`Unexpected tag ${tagId} applied to ${room.roomId}`); + } + + if ((ev as React.KeyboardEvent).key === Key.ENTER) { + // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12 + onFinished(); + } + }; + + const ensureViewingRoom = () => { + if (RoomViewStore.getRoomId() === room.roomId) return; + dis.dispatch({ + action: "view_room", + room_id: room.roomId, + }, true); + }; + + return + + { inviteOption } + { notificationOption } + { favouriteOption } + + { + ev.preventDefault(); + ev.stopPropagation(); + + ensureViewingRoom(); + onRoomMembersClick(false); + onFinished(); + }} + label={_t("People")} + iconClassName="mx_RoomTile_iconPeople" + > + + { room.getJoinedMemberCount() } + + + + { + ev.preventDefault(); + ev.stopPropagation(); + + ensureViewingRoom(); + onRoomFilesClick(false); + onFinished(); + }} + label={_t("Files")} + iconClassName="mx_RoomTile_iconFiles" + /> + + { + ev.preventDefault(); + ev.stopPropagation(); + + ensureViewingRoom(); + defaultDispatcher.dispatch({ + action: Action.SetRightPanelPhase, + phase: RightPanelPhases.RoomSummary, + allowClose: false, + }); + onFinished(); + }} + label={_t("Widgets")} + iconClassName="mx_RoomTile_iconWidgets" + /> + + { lowPriorityOption } + + { + ev.preventDefault(); + ev.stopPropagation(); + + dis.dispatch({ + action: "copy_room", + room_id: room.roomId, + }); + onFinished(); + }} + label={_t("Copy link")} + iconClassName="mx_RoomTile_iconCopyLink" + /> + + { + ev.preventDefault(); + ev.stopPropagation(); + + dis.dispatch({ + action: "open_room_settings", + room_id: room.roomId, + }); + onFinished(); + }} + label={_t("Settings")} + iconClassName="mx_RoomTile_iconSettings" + /> + + { + ev.preventDefault(); + ev.stopPropagation(); + + Modal.createTrackedDialog('Export room dialog', '', ExportDialog, { room }); + onFinished(); + }} + label={_t("Export chat")} + iconClassName="mx_RoomTile_iconExport" + /> + + { leaveOption } + + ; +}; + +export default RoomContextMenu; + diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx index b0c6fc4050..be4d935477 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.tsx +++ b/src/components/views/dialogs/RoomSettingsDialog.tsx @@ -113,7 +113,7 @@ export default class RoomSettingsDialog extends React.Component ROOM_NOTIFICATIONS_TAB, _td("Notifications"), "mx_RoomSettingsDialog_notificationsIcon", - , + this.props.onFinished(true)} />, )); if (SettingsStore.getValue("feature_bridge_state")) { diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 47dd4ba844..64a6148767 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -207,17 +207,19 @@ const AppsSection: React.FC = ({ room }) => { ; }; -const onRoomMembersClick = () => { +export const onRoomMembersClick = (allowClose = true) => { defaultDispatcher.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList, + allowClose, }); }; -const onRoomFilesClick = () => { +export const onRoomFilesClick = (allowClose = true) => { defaultDispatcher.dispatch({ action: Action.SetRightPanelPhase, phase: RightPanelPhases.FilePanel, + allowClose, }); }; @@ -275,10 +277,13 @@ const RoomSummaryCard: React.FC = ({ room, onClose }) => { return