diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss index 437044cc8f..4e3d90cffe 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.pcss +++ b/res/css/views/dialogs/_CreateRoomDialog.pcss @@ -113,3 +113,8 @@ limitations under the License. font-size: $font-12px; } } + +.mx_CreateRoomDialog_labelledCheckbox { + color: $muted-fg-color; + margin-top: var(--cpd-space-6x); +} diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx index 276f1195b3..459d54d037 100644 --- a/src/components/views/dialogs/CreateRoomDialog.tsx +++ b/src/components/views/dialogs/CreateRoomDialog.tsx @@ -33,6 +33,7 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; import { privateShouldBeEncrypted } from "../../../utils/rooms"; import SettingsStore from "../../../settings/SettingsStore"; +import LabelledCheckbox from "../elements/LabelledCheckbox"; interface IProps { type?: RoomType; @@ -45,15 +46,46 @@ interface IProps { } interface IState { + /** + * The selected room join rule. + */ joinRule: JoinRule; - isPublic: boolean; + /** + * Indicates whether the created room should have public visibility (ie, it should be + * shown in the public room list). Only applicable if `joinRule` == `JoinRule.Knock`. + */ + isPublicKnockRoom: boolean; + /** + * Indicates whether end-to-end encryption is enabled for the room. + */ isEncrypted: boolean; + /** + * The room name. + */ name: string; + /** + * The room topic. + */ topic: string; + /** + * The room alias. + */ alias: string; + /** + * Indicates whether the details section is open. + */ detailsOpen: boolean; + /** + * Indicates whether federation is disabled for the room. + */ noFederate: boolean; + /** + * Indicates whether the room name is valid. + */ nameIsValid: boolean; + /** + * Indicates whether the user can change encryption settings for the room. + */ canChangeEncryption: boolean; } @@ -78,7 +110,7 @@ export default class CreateRoomDialog extends React.Component { const cli = MatrixClientPeg.safeGet(); this.state = { - isPublic: this.props.defaultPublic || false, + isPublicKnockRoom: this.props.defaultPublic || false, isEncrypted: this.props.defaultEncrypted ?? privateShouldBeEncrypted(cli), joinRule, name: this.props.defaultName || "", @@ -129,6 +161,7 @@ export default class CreateRoomDialog extends React.Component { if (this.state.joinRule === JoinRule.Knock) { opts.joinRule = JoinRule.Knock; + createOpts.visibility = this.state.isPublicKnockRoom ? Visibility.Public : Visibility.Private; } return opts; @@ -215,6 +248,10 @@ export default class CreateRoomDialog extends React.Component { return result; }; + private onIsPublicKnockRoomChange = (isPublicKnockRoom: boolean): void => { + this.setState({ isPublicKnockRoom }); + }; + private static validateRoomName = withValidation({ rules: [ { @@ -298,6 +335,18 @@ export default class CreateRoomDialog extends React.Component { ); } + let visibilitySection: JSX.Element | undefined; + if (this.state.joinRule === JoinRule.Knock) { + visibilitySection = ( + + ); + } + let e2eeSection: JSX.Element | undefined; if (this.state.joinRule !== JoinRule.Public) { let microcopy: string; @@ -383,6 +432,7 @@ export default class CreateRoomDialog extends React.Component { /> {publicPrivateLabel} + {visibilitySection} {e2eeSection} {aliasField}
diff --git a/src/components/views/elements/LabelledCheckbox.tsx b/src/components/views/elements/LabelledCheckbox.tsx index 86604d0989..e6f7499ecf 100644 --- a/src/components/views/elements/LabelledCheckbox.tsx +++ b/src/components/views/elements/LabelledCheckbox.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React from "react"; +import classnames from "classnames"; import StyledCheckbox from "./StyledCheckbox"; @@ -29,11 +30,13 @@ interface IProps { disabled?: boolean; // The function to call when the value changes onChange(checked: boolean): void; + // Optional additional CSS class to apply to the label + className?: string; } -const LabelledCheckbox: React.FC = ({ value, label, byline, disabled, onChange }) => { +const LabelledCheckbox: React.FC = ({ value, label, byline, disabled, onChange, className }) => { return ( -