{
+ const avatarUploadRef = useRef();
+ const [avatar, setAvatarDataUrl] = useState(avatarUrl); // avatar data url cache
+
+ let avatarSection;
+ if (avatarDisabled) {
+ if (avatar) {
+ avatarSection = 
;
+ } else {
+ avatarSection = ;
+ }
+ } else {
+ if (avatar) {
+ avatarSection =
+ avatarUploadRef.current?.click()}
+ element="img"
+ src={avatar}
+ alt=""
+ />
+ {
+ avatarUploadRef.current.value = "";
+ setAvatarDataUrl(undefined);
+ setAvatar(undefined);
+ }} kind="link" className="mx_SpaceBasicSettings_avatar_remove">
+ { _t("Delete") }
+
+ ;
+ } else {
+ avatarSection =
+ setPanelCollapsed(!isPanelCollapsed)}
title={expandCollapseButtonTitle}
/>
+ { contextMenu }
)}
diff --git a/src/createRoom.ts b/src/createRoom.ts
index 9e3960cdb7..e773c51290 100644
--- a/src/createRoom.ts
+++ b/src/createRoom.ts
@@ -41,7 +41,7 @@ enum Visibility {
Private = "private",
}
-enum Preset {
+export enum Preset {
PrivateChat = "private_chat",
TrustedPrivateChat = "trusted_private_chat",
PublicChat = "public_chat",
@@ -54,7 +54,7 @@ interface Invite3PID {
address: string;
}
-interface IStateEvent {
+export interface IStateEvent {
type: string;
state_key?: string; // defaults to an empty string
content: object;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 38460a5f6e..1b29e65b40 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -978,11 +978,27 @@
"From %(deviceName)s (%(deviceId)s)": "From %(deviceName)s (%(deviceId)s)",
"Decline (%(counter)s)": "Decline (%(counter)s)",
"Accept
Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!", "Long Description (HTML)": "Long Description (HTML)", "Upload avatar": "Upload avatar", - "Description": "Description", "Community %(groupId)s not found": "Community %(groupId)s not found", "This homeserver does not support communities": "This homeserver does not support communities", "Failed to load %(groupId)s": "Failed to load %(groupId)s",
avatarUploadRef.current?.click()} />
+ avatarUploadRef.current?.click()} kind="link">
+ { _t("Upload") }
+
+ ;
+ }
+ }
+
+ return
+
+ );
+};
+
+enum Visibility {
+ Public,
+ Private,
+}
+
+const SpaceCreateMenu = ({ onFinished }) => {
+ const cli = useContext(MatrixClientContext);
+ const [visibility, setVisibility] = useState(null);
+ const [name, setName] = useState("");
+ const [avatar, setAvatar] = useState(null);
+ const [topic, setTopic] = useState("");
+ const [busy, setBusy] = useState(false);
+
+ const onSpaceCreateClick = async () => {
+ if (busy) return;
+ setBusy(true);
+ const initialState: IStateEvent[] = [
+ {
+ type: EventType.RoomHistoryVisibility,
+ content: {
+ "history_visibility": visibility === Visibility.Public ? "world_readable" : "invited",
+ },
+ },
+ ];
+ if (avatar) {
+ const url = await cli.uploadContent(avatar);
+
+ initialState.push({
+ type: EventType.RoomAvatar,
+ content: { url },
+ });
+ }
+ if (topic) {
+ initialState.push({
+ type: EventType.RoomTopic,
+ content: { topic },
+ });
+ }
+
+ try {
+ await createRoom({
+ createOpts: {
+ preset: visibility === Visibility.Public ? Preset.PublicChat : Preset.PrivateChat,
+ name,
+ creation_content: {
+ // Based on MSC1840
+ [RoomCreateTypeField]: RoomType.Space,
+ },
+ initial_state: initialState,
+ power_level_content_override: {
+ // Only allow Admins to write to the timeline to prevent hidden sync spam
+ events_default: 100,
+ },
+ },
+ spinner: false,
+ encryption: false,
+ andView: true,
+ inlineErrors: true,
+ });
+
+ onFinished();
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ let body;
+ if (visibility === null) {
+ body =
+ setVisibility(Visibility.Public)}
+ />
+ setVisibility(Visibility.Private)}
+ />
+
+ {/* ;
+ } else {
+ body =
+ setVisibility(null)}
+ title={_t("Go back")}
+ />
+
+ ;
+ }
+
+ return
+
+ { body }
+
+ ;
+}
+
+export default SpaceCreateMenu;
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 760181e0e0..48e2c86b2c 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -20,6 +20,8 @@ import {Room} from "matrix-js-sdk/src/models/room";
import {_t} from "../../../languageHandler";
import RoomAvatar from "../avatars/RoomAvatar";
+import {useContextMenu} from "../../structures/ContextMenu";
+import SpaceCreateMenu from "./SpaceCreateMenu";
import {SpaceItem} from "./SpaceTreeLevel";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
@@ -112,9 +114,21 @@ const useSpaces = (): [Room[], Room | null] => {
};
const SpacePanel = () => {
+ // We don't need the handle as we position the menu in a constant location
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
const [spaces, activeSpace] = useSpaces();
const [isPanelCollapsed, setPanelCollapsed] = useState(true);
+ const newClasses = classNames("mx_SpaceButton_new", {
+ mx_SpaceButton_newCancel: menuDisplayed,
+ });
+
+ let contextMenu = null;
+ if (menuDisplayed) {
+ contextMenu =
+
+ setName(ev.target.value)}
+ disabled={nameDisabled}
+ />
+
+ setTopic(ev.target.value)}
+ rows={3}
+ disabled={topicDisabled}
+ />
+
;
+};
+
+export default SpaceBasicSettings;
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
new file mode 100644
index 0000000000..9d0543a6c5
--- /dev/null
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -0,0 +1,175 @@
+/*
+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, useState} from "react";
+import classNames from "classnames";
+import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types/event";
+
+import {_t} from "../../../languageHandler";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
+import FormButton from "../elements/FormButton";
+import createRoom, {IStateEvent, Preset} from "../../../createRoom";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import SpaceBasicSettings from "./SpaceBasicSettings";
+import AccessibleButton from "../elements/AccessibleButton";
+import FocusLock from "react-focus-lock";
+
+const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
+ return (
+
+ { avatarSection }
+ {
+ if (!e.target.files?.length) return;
+ const file = e.target.files[0];
+ setAvatar(file);
+ const reader = new FileReader();
+ reader.onload = (ev) => {
+ setAvatarDataUrl(ev.target.result as string);
+ };
+ reader.readAsDataURL(file);
+ }} accept="image/*" />
+
+
+ { title }
+ { description } +{ _t("Create a space") }
+{ _t("Organise rooms into spaces, for just you or anyone") }
+ +{ _t("Looking to join an existing space?") }
*/} ++ { + visibility === Visibility.Public + ? _t("Personalise your public space") + : _t("Personalise your private space") + } +
++ { + _t("Give it a photo, name and description to help you identify it.") + } { + _t("You can change these at any point.") + } +
+ +Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!", "Long Description (HTML)": "Long Description (HTML)", "Upload avatar": "Upload avatar", - "Description": "Description", "Community %(groupId)s not found": "Community %(groupId)s not found", "This homeserver does not support communities": "This homeserver does not support communities", "Failed to load %(groupId)s": "Failed to load %(groupId)s",