Prompt user to leave rooms/subspaces in a space when leaving space
Michael Telatynski
parent
364bee9ebd
commit
1b2d70d816
|
|
@ -86,6 +86,7 @@
|
|||
@import "./views/dialogs/_IncomingSasDialog.scss";
|
||||
@import "./views/dialogs/_InviteDialog.scss";
|
||||
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
|
||||
@import "./views/dialogs/_LeaveSpaceDialog.scss";
|
||||
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
|
||||
@import "./views/dialogs/_ModalWidgetDialog.scss";
|
||||
@import "./views/dialogs/_NewSessionReviewDialog.scss";
|
||||
|
|
@ -200,8 +201,8 @@
|
|||
@import "./views/rooms/_E2EIcon.scss";
|
||||
@import "./views/rooms/_EditMessageComposer.scss";
|
||||
@import "./views/rooms/_EntityTile.scss";
|
||||
@import "./views/rooms/_EventTile.scss";
|
||||
@import "./views/rooms/_EventBubbleTile.scss";
|
||||
@import "./views/rooms/_EventTile.scss";
|
||||
@import "./views/rooms/_GroupLayout.scss";
|
||||
@import "./views/rooms/_IRCLayout.scss";
|
||||
@import "./views/rooms/_JumpToBottomButton.scss";
|
||||
|
|
|
|||
|
|
@ -49,30 +49,6 @@ limitations under the License.
|
|||
font-weight: $font-semi-bold;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
// we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
|
||||
.mx_DecoratedRoomAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry_name {
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_section_spaces {
|
||||
|
|
@ -279,3 +255,27 @@ limitations under the License.
|
|||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
// we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
|
||||
.mx_DecoratedRoomAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry_name {
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
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_LeaveSpaceDialog_wrapper {
|
||||
.mx_Dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog {
|
||||
width: 440px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.mx_Dialog_content {
|
||||
flex-grow: 1;
|
||||
margin: 0 0 24px;
|
||||
color: $tertiary-fg-color;
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_Dropdown_input {
|
||||
border-radius: 8px;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
.mx_Dropdown_option {
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog_noResults {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog_section {
|
||||
margin: 16px 0;
|
||||
|
||||
.mx_Dropdown + span {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog_section_warning {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
padding: 12px 8px 12px 42px;
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_Dialog_primary {
|
||||
background-color: $notice-primary-color !important; // override default colour
|
||||
border-color: $notice-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,7 +49,7 @@ interface IProps extends IDialogProps {
|
|||
onCreateRoomClick(cli: MatrixClient, space: Room): void;
|
||||
}
|
||||
|
||||
const Entry = ({ room, checked, onChange }) => {
|
||||
export const Entry = ({ room, checked, onChange }) => {
|
||||
return <label className="mx_AddExistingToSpace_entry">
|
||||
{ room?.isSpaceRoom()
|
||||
? <RoomAvatar room={room} height={32} width={32} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
/*
|
||||
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, { useEffect, useMemo, useState } from "react";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import Dropdown from "../elements/Dropdown";
|
||||
import DialogButtons from "../elements/DialogButtons";
|
||||
import BaseDialog from "../dialogs/BaseDialog";
|
||||
import { JoinRule } from "../settings/tabs/room/SecurityRoomSettingsTab";
|
||||
import SpaceStore from "../../../stores/SpaceStore";
|
||||
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
|
||||
import { Entry } from "./AddExistingToSpaceDialog";
|
||||
import SearchBox from "../../structures/SearchBox";
|
||||
import QueryMatcher from "../../../autocomplete/QueryMatcher";
|
||||
|
||||
enum RoomsToLeave {
|
||||
All = "All",
|
||||
Specific = "Specific",
|
||||
None = "None",
|
||||
}
|
||||
|
||||
const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
|
||||
const [query, setQuery] = useState("");
|
||||
const lcQuery = query.toLowerCase().trim();
|
||||
|
||||
const filteredRooms = useMemo(() => {
|
||||
if (!lcQuery) {
|
||||
return rooms;
|
||||
}
|
||||
|
||||
const matcher = new QueryMatcher<Room>(rooms, {
|
||||
keys: ["name"],
|
||||
funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
|
||||
shouldMatchWordsOnly: false,
|
||||
});
|
||||
|
||||
return matcher.match(lcQuery);
|
||||
}, [rooms, lcQuery]);
|
||||
|
||||
return <div className="mx_LeaveSpaceDialog_section">
|
||||
<SearchBox
|
||||
className="mx_textinput_icon mx_textinput_search"
|
||||
placeholder={filterPlaceholder}
|
||||
onSearch={setQuery}
|
||||
autoComplete={true}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<AutoHideScrollbar className="mx_LeaveSpaceDialog_content">
|
||||
{ filteredRooms.map(room => {
|
||||
return <Entry
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
checked={selected.has(room)}
|
||||
onChange={(checked) => {
|
||||
onChange(checked, room);
|
||||
}}
|
||||
/>;
|
||||
}) }
|
||||
{ filteredRooms.length < 1 ? <span className="mx_LeaveSpaceDialog_noResults">
|
||||
{ _t("No results") }
|
||||
</span> : undefined }
|
||||
</AutoHideScrollbar>
|
||||
</div>;
|
||||
};
|
||||
|
||||
const LeaveRoomsPicker = ({ space, roomsToLeave, setRoomsToLeave }) => {
|
||||
const selected = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
|
||||
const spaceChildren = useMemo(() => SpaceStore.instance.getChildren(space.roomId), [space.roomId]);
|
||||
const [state, setState] = useState<RoomsToLeave>(RoomsToLeave.All);
|
||||
|
||||
useEffect(() => {
|
||||
if (state === RoomsToLeave.All) {
|
||||
setRoomsToLeave(spaceChildren);
|
||||
} else {
|
||||
setRoomsToLeave([]);
|
||||
}
|
||||
}, [setRoomsToLeave, state, spaceChildren]);
|
||||
|
||||
let captionSpan;
|
||||
switch (state) {
|
||||
case RoomsToLeave.All:
|
||||
captionSpan = _t("You will leave all subspaces and rooms in <spaceName/>.", {}, {
|
||||
spaceName: () => <b>{ space.name }</b>,
|
||||
});
|
||||
break;
|
||||
case RoomsToLeave.None:
|
||||
captionSpan = _t("You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.", {}, {
|
||||
spaceName: () => <b>{ space.name }</b>,
|
||||
});
|
||||
break;
|
||||
case RoomsToLeave.Specific:
|
||||
captionSpan = <span>{ _t("Pick which rooms and subspaces you want to leave.") }</span>;
|
||||
break;
|
||||
}
|
||||
|
||||
if (spaceChildren.length < 1) {
|
||||
return <div>
|
||||
BOLD:
|
||||
{ _t("Are you sure you want to leave %(spaceName)s? " +
|
||||
"You won't be able to rejoin unless you are re-invited", { spaceName: space.name }) }
|
||||
</div>;
|
||||
}
|
||||
|
||||
return <div className="mx_LeaveSpaceDialog_section">
|
||||
<Dropdown
|
||||
id="mx_LeaveSpaceDialog_leaveRoomPickerDropdown"
|
||||
onOptionChange={setState}
|
||||
value={state}
|
||||
label={_t("Choose which rooms you wish to leave")}
|
||||
>
|
||||
<div key={RoomsToLeave.All}>
|
||||
{ _t("Leave all subspaces and rooms") }
|
||||
</div>
|
||||
<div key={RoomsToLeave.None}>
|
||||
{ _t("Don't leave any") }
|
||||
</div>
|
||||
<div key={RoomsToLeave.Specific}>
|
||||
{ _t("Leave specific rooms and subspaces") }
|
||||
</div>
|
||||
</Dropdown>
|
||||
{ captionSpan }
|
||||
|
||||
{ state === RoomsToLeave.Specific && (
|
||||
<SpaceChildPicker
|
||||
filterPlaceholder={_t("Search %(spaceName)s", { spaceName: space.name })}
|
||||
rooms={spaceChildren}
|
||||
selected={selected}
|
||||
onChange={(selected: boolean, room: Room) => {
|
||||
if (selected) {
|
||||
setRoomsToLeave([room, ...roomsToLeave]);
|
||||
} else {
|
||||
setRoomsToLeave(roomsToLeave.filter(r => r !== room));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) }
|
||||
</div>;
|
||||
};
|
||||
|
||||
interface IProps {
|
||||
space: Room;
|
||||
onFinished(leave: boolean, rooms?: Room[]): void;
|
||||
}
|
||||
|
||||
const isOnlyAdmin = (room: Room): boolean => {
|
||||
return !room.getJoinedMembers().some(member => {
|
||||
return member.userId !== room.client.credentials.userId && member.powerLevelNorm === 100;
|
||||
});
|
||||
};
|
||||
|
||||
const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
|
||||
const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
|
||||
|
||||
let rejoinWarning;
|
||||
if (space.getJoinRule() !== JoinRule.Public) {
|
||||
rejoinWarning = _t("You won't be able to rejoin unless you are re-invited.");
|
||||
}
|
||||
|
||||
let onlyAdminWarning;
|
||||
if (isOnlyAdmin(space)) {
|
||||
onlyAdminWarning = _t("You're the only admin of this space. " +
|
||||
"Leaving it will mean no one has control over it.");
|
||||
} else {
|
||||
const numChildrenOnlyAdminIn = roomsToLeave.filter(isOnlyAdmin).length;
|
||||
if (numChildrenOnlyAdminIn > 0) {
|
||||
onlyAdminWarning = _t("You're the only admin of some of the rooms or subspaces you wish to leave. " +
|
||||
"Leaving them will leave them without any admins.");
|
||||
}
|
||||
}
|
||||
|
||||
return <BaseDialog
|
||||
title={_t("Leave %(spaceName)s", { spaceName: space.name })}
|
||||
className="mx_LeaveSpaceDialog"
|
||||
contentId="mx_LeaveSpaceDialog"
|
||||
onFinished={() => onFinished(false)}
|
||||
fixedWidth={false}
|
||||
>
|
||||
<div className="mx_Dialog_content" id="mx_LeaveSpaceDialog">
|
||||
<p>
|
||||
{ _t("Are you sure you want to leave <spaceName/>?", {}, {
|
||||
spaceName: () => <b>{ space.name }</b>,
|
||||
}) }
|
||||
|
||||
{ rejoinWarning }
|
||||
</p>
|
||||
|
||||
<LeaveRoomsPicker space={space} roomsToLeave={roomsToLeave} setRoomsToLeave={setRoomsToLeave} />
|
||||
|
||||
{ onlyAdminWarning && <div className="mx_LeaveSpaceDialog_section_warning">
|
||||
{ onlyAdminWarning }
|
||||
</div> }
|
||||
</div>
|
||||
<DialogButtons
|
||||
primaryButton={_t("Leave space")}
|
||||
onPrimaryButtonClick={() => onFinished(true, roomsToLeave)}
|
||||
hasCancel={true}
|
||||
onCancel={onFinished}
|
||||
/>
|
||||
</BaseDialog>;
|
||||
};
|
||||
|
||||
export default LeaveSpaceDialog;
|
||||
|
|
@ -26,7 +26,7 @@ import SpaceBasicSettings from "./SpaceBasicSettings";
|
|||
import { avatarUrlForRoom } from "../../../Avatar";
|
||||
import { IDialogProps } from "../dialogs/IDialogProps";
|
||||
import { getTopic } from "../elements/RoomTopic";
|
||||
import { defaultDispatcher } from "../../../dispatcher/dispatcher";
|
||||
import { leaveSpace } from "../../../utils/space";
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
matrixClient: MatrixClient;
|
||||
|
|
@ -128,10 +128,7 @@ const SpaceSettingsGeneralTab = ({ matrixClient: cli, space, onFinished }: IProp
|
|||
<AccessibleButton
|
||||
kind="danger"
|
||||
onClick={() => {
|
||||
defaultDispatcher.dispatch({
|
||||
action: "leave_room",
|
||||
room_id: space.roomId,
|
||||
});
|
||||
leaveSpace(space);
|
||||
}}
|
||||
>
|
||||
{ _t("Leave Space") }
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import { _t } from "../../../languageHandler";
|
|||
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
|
||||
import { toRightOf } from "../../structures/ContextMenu";
|
||||
import {
|
||||
leaveSpace,
|
||||
shouldShowSpaceSettings,
|
||||
showAddExistingRooms,
|
||||
showCreateNewRoom,
|
||||
|
|
@ -211,10 +212,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
|
|||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
defaultDispatcher.dispatch({
|
||||
action: "leave_room",
|
||||
room_id: this.props.space.roomId,
|
||||
});
|
||||
leaveSpace(this.props.space);
|
||||
this.setState({ contextMenuPosition: null }); // also close the menu
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2331,6 +2331,20 @@
|
|||
"Clear cache and resync": "Clear cache and resync",
|
||||
"%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!": "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!",
|
||||
"Updating %(brand)s": "Updating %(brand)s",
|
||||
"You will leave all subspaces and rooms in <spaceName/>.": "You will leave all subspaces and rooms in <spaceName/>.",
|
||||
"You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.": "You'll still be a part of all rooms and subspaces in <spaceName/> you've joined.",
|
||||
"Pick which rooms and subspaces you want to leave.": "Pick which rooms and subspaces you want to leave.",
|
||||
"Are you sure you want to leave %(spaceName)s? You won't be able to rejoin unless you are re-invited": "Are you sure you want to leave %(spaceName)s? You won't be able to rejoin unless you are re-invited",
|
||||
"Choose which rooms you wish to leave": "Choose which rooms you wish to leave",
|
||||
"Leave all subspaces and rooms": "Leave all subspaces and rooms",
|
||||
"Don't leave any": "Don't leave any",
|
||||
"Leave specific rooms and subspaces": "Leave specific rooms and subspaces",
|
||||
"Search %(spaceName)s": "Search %(spaceName)s",
|
||||
"You won't be able to rejoin unless you are re-invited.": "You won't be able to rejoin unless you are re-invited.",
|
||||
"You're the only admin of this space. Leaving it will mean no one has control over it.": "You're the only admin of this space. Leaving it will mean no one has control over it.",
|
||||
"You're the only admin of some of the rooms or subspaces you wish to leave. Leaving them will leave them without any admins.": "You're the only admin of some of the rooms or subspaces you wish to leave. Leaving them will leave them without any admins.",
|
||||
"Leave %(spaceName)s": "Leave %(spaceName)s",
|
||||
"Are you sure you want to leave <spaceName/>?": "Are you sure you want to leave <spaceName/>?",
|
||||
"Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.",
|
||||
"Start using Key Backup": "Start using Key Backup",
|
||||
"I don't want my encrypted messages": "I don't want my encrypted messages",
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
|
|||
}, roomId);
|
||||
}
|
||||
|
||||
private getChildren(spaceId: string): Room[] {
|
||||
public getChildren(spaceId: string): Room[] {
|
||||
const room = this.matrixClient?.getRoom(spaceId);
|
||||
const childEvents = room?.currentState.getStateEvents(EventType.SpaceChild).filter(ev => ev.getContent()?.via);
|
||||
return sortBy(childEvents, ev => {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@ import { _t } from "../languageHandler";
|
|||
import SpacePublicShare from "../components/views/spaces/SpacePublicShare";
|
||||
import InfoDialog from "../components/views/dialogs/InfoDialog";
|
||||
import { showRoomInviteDialog } from "../RoomInvite";
|
||||
import { leaveRoomBehaviour } from "./membership";
|
||||
import Spinner from "../components/views/elements/Spinner";
|
||||
import dis from "../dispatcher/dispatcher";
|
||||
import LeaveSpaceDialog from "../components/views/dialogs/LeaveSpaceDialog";
|
||||
|
||||
export const shouldShowSpaceSettings = (cli: MatrixClient, space: Room) => {
|
||||
const userId = cli.getUserId();
|
||||
|
|
@ -103,3 +107,24 @@ export const showSpaceInvite = (space: Room, initialText = "") => {
|
|||
showRoomInviteDialog(space.roomId, initialText);
|
||||
}
|
||||
};
|
||||
|
||||
export const leaveSpace = (space: Room) => {
|
||||
Modal.createTrackedDialog("Leave Space", "", LeaveSpaceDialog, {
|
||||
space,
|
||||
onFinished: async (leave: boolean, rooms: Room[]) => {
|
||||
if (!leave) return;
|
||||
const modal = Modal.createDialog(Spinner, null, "mx_Dialog_spinner");
|
||||
try {
|
||||
await Promise.all(rooms.map(r => leaveRoomBehaviour(r.roomId)));
|
||||
await leaveRoomBehaviour(space.roomId);
|
||||
} finally {
|
||||
modal.close();
|
||||
}
|
||||
|
||||
dis.dispatch({
|
||||
action: "after_leave_room",
|
||||
room_id: space.roomId,
|
||||
});
|
||||
},
|
||||
}, "mx_LeaveSpaceDialog_wrapper");
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue