Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Space creation prompt user to add existing rooms for "Just Me" spaces #5923

Merged
merged 2 commits into from
Apr 28, 2021
Merged

Space creation prompt user to add existing rooms for "Just Me" spaces #5923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8656212
Space creation prompt user to add existing rooms instead of creating …
t3chguy Apr 26, 2021
9f8955f
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Apr 28, 2021
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions res/css/structures/_SpaceRoomView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,16 @@ $SpaceRoomViewInnerWidth: 428px;
color: $secondary-fg-color;
margin-top: 12px;
margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth;
}

.mx_AddExistingToSpace {
max-width: $SpaceRoomViewInnerWidth;

.mx_AddExistingToSpace_content {
height: calc(100vh - 360px);
max-height: 400px;
}
}

.mx_SpaceRoomView_buttons {
Expand Down
118 changes: 62 additions & 56 deletions res/css/views/dialogs/_AddExistingToSpaceDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,66 @@ limitations under the License.
}
}

.mx_AddExistingToSpace {
.mx_SearchBox {
// To match the space around the title
margin: 0 0 15px 0;
flex-grow: 0;
}

.mx_AddExistingToSpace_content {
flex-grow: 1;
}

.mx_AddExistingToSpace_noResults {
display: block;
margin-top: 24px;
}

.mx_AddExistingToSpace_section {
&:not(:first-child) {
margin-top: 24px;
}

> h3 {
margin: 0;
color: $secondary-fg-color;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
}

.mx_AddExistingToSpace_entry {
display: flex;
margin-top: 12px;

.mx_BaseAvatar {
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 {
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
}

.mx_AddExistingToSpaceDialog {
width: 480px;
color: $primary-fg-color;
Expand Down Expand Up @@ -100,12 +160,6 @@ limitations under the License.
}
}

.mx_SearchBox {
// To match the space around the title
margin: 0 0 15px 0;
flex-grow: 0;
}

.mx_AddExistingToSpaceDialog_errorText {
font-weight: $font-semi-bold;
font-size: $font-12px;
Expand All @@ -114,56 +168,8 @@ limitations under the License.
margin-bottom: 28px;
}

.mx_AddExistingToSpaceDialog_content {
flex-grow: 1;

.mx_AddExistingToSpaceDialog_noResults {
display: block;
margin-top: 24px;
}
}

.mx_AddExistingToSpaceDialog_section {
&:not(:first-child) {
margin-top: 24px;
}

> h3 {
margin: 0;
color: $secondary-fg-color;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
}

.mx_AddExistingToSpaceDialog_entry {
display: flex;
margin-top: 12px;

.mx_BaseAvatar {
margin-right: 12px;
}

.mx_AddExistingToSpaceDialog_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_AddExistingToSpaceDialog_section_spaces {
.mx_BaseAvatar_image {
border-radius: 8px;
}
.mx_AddExistingToSpace {
display: contents;
}

.mx_AddExistingToSpaceDialog_footer {
Expand Down
71 changes: 69 additions & 2 deletions src/components/structures/SpaceRoomView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ import MemberAvatar from "../views/avatars/MemberAvatar";
import {useStateToggle} from "../../hooks/useStateToggle";
import SpaceStore from "../../stores/SpaceStore";
import FacePile from "../views/elements/FacePile";
import {AddExistingToSpace} from "../views/dialogs/AddExistingToSpaceDialog";
import {allSettled} from "../../utils/promise";
import {calculateRoomVia} from "../../utils/permalinks/Permalinks";

interface IProps {
space: Room;
Expand Down Expand Up @@ -354,7 +357,7 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
let buttonLabel = _t("Skip for now");
if (roomNames.some(name => name.trim())) {
onClick = onNextClick;
buttonLabel = busy ? _t("Creating rooms...") : _t("Continue")
buttonLabel = busy ? _t("Creating rooms...") : _t("Continue");
}

return <div>
Expand All @@ -376,6 +379,65 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
</div>;
};

const SpaceAddExistingRooms = ({ space, onFinished }) => {
const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());

const [busy, setBusy] = useState(false);
const [error, setError] = useState("");

let onClick = onFinished;
let buttonLabel = _t("Skip for now");
if (selectedToAdd.size > 0) {
onClick = async () => {
// TODO rate limiting
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, should it have an issue to track...?
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does and is slated for the immediate future element-hq/element-web#16891
setBusy(true);
try {
await allSettled(Array.from(selectedToAdd).map((room) =>
SpaceStore.instance.addRoomToSpace(space, room.roomId, calculateRoomVia(room))));
onFinished(true);
} catch (e) {
console.error("Failed to add rooms to space", e);
setError(_t("Failed to add rooms to space"));
}
setBusy(false);
};
buttonLabel = busy ? _t("Adding...") : _t("Add");
}

return <div>
<h1>{ _t("What do you want to organise?") }</h1>
<div className="mx_SpaceRoomView_description">
{ _t("Pick rooms or conversations to add. This is just a space for you, " +
"no one will be informed. You can add more later.") }
</div>

{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }

<AddExistingToSpace
space={space}
selected={selectedToAdd}
onChange={(checked, room) => {
if (checked) {
selectedToAdd.add(room);
} else {
selectedToAdd.delete(room);
}
setSelectedToAdd(new Set(selectedToAdd));
}}
/>

<div className="mx_SpaceRoomView_buttons">
<AccessibleButton
kind="primary"
disabled={busy}
onClick={onClick}
>
{ buttonLabel }
</AccessibleButton>
</div>
</div>;
};

const SpaceSetupPublicShare = ({ space, onFinished }) => {
return <div className="mx_SpaceRoomView_publicShare">
<h1>{ _t("Share %(name)s", { name: space.name }) }</h1>
Expand Down Expand Up @@ -659,7 +721,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
return <SpaceSetupPrivateScope
space={this.props.space}
onFinished={(invite: boolean) => {
this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateExistingRooms });
}}
/>;
case Phase.PrivateInvite:
Expand All @@ -675,6 +737,11 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
"You can add more later too, including already existing ones.")}
onFinished={() => this.setState({ phase: Phase.Landing })}
/>;
case Phase.PrivateExistingRooms:
return <SpaceAddExistingRooms
space={this.props.space}
onFinished={() => this.setState({ phase: Phase.Landing })}
/>;
}
}

Expand Down
Loading