diff --git a/res/css/_components.scss b/res/css/_components.scss index 213d0d714c..40a797dc15 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -99,6 +99,7 @@ @import "./views/elements/_ResizeHandle.scss"; @import "./views/elements/_RichText.scss"; @import "./views/elements/_RoleButton.scss"; +@import "./views/elements/_RoomAliasField.scss"; @import "./views/elements/_Spinner.scss"; @import "./views/elements/_SyntaxHighlight.scss"; @import "./views/elements/_TextWithTooltip.scss"; diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 05d5bfcebf..db59715a77 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -14,8 +14,24 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_CreateRoomDialog_details_summary { - outline: none; +.mx_CreateRoomDialog_details { + .mx_CreateRoomDialog_details_summary { + outline: none; + list-style: none; + font-weight: 600; + cursor: pointer; + color: $accent-color; + } + + > div { + display: flex; + align-items: start; + margin: 5px 0; + + input[type=checkbox] { + margin-right: 10px; + } + } } .mx_CreateRoomDialog_label { @@ -36,3 +52,38 @@ limitations under the License. background-color: $primary-bg-color; width: 100%; } + +// needed to make the alias field only grow as wide as needed +// as opposed to full width +.mx_CreateRoomDialog_aliasContainer { + display: flex; + // put margin on container so it can collapse with siblings + margin: 10px 0; + + .mx_RoomAliasField { + margin: 0; + } +} + +.mx_CreateRoomDialog { + + &.mx_Dialog_fixedWidth { + width: 450px; + } + + .mx_SettingsFlag { + display: flex; + } + + .mx_SettingsFlag_label { + flex: 1 1 0; + min-width: 0; + font-weight: 600; + } + + .mx_ToggleSwitch { + flex: 0 0 auto; + margin-left: 30px; + } +} + diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 0e8252e89d..da896f947d 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -31,6 +31,10 @@ limitations under the License. border-right: 1px solid $input-border-color; } +.mx_Field_postfix { + border-left: 1px solid $input-border-color; +} + .mx_Field input, .mx_Field select, .mx_Field textarea { diff --git a/res/css/views/elements/_RoomAliasField.scss b/res/css/views/elements/_RoomAliasField.scss new file mode 100644 index 0000000000..0fe53b2766 --- /dev/null +++ b/res/css/views/elements/_RoomAliasField.scss @@ -0,0 +1,56 @@ +/* +Copyright 2019 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_RoomAliasField { + // if parent is a flex container, this allows the + // width to be as wide as needed, and not 100% + flex: 0 1 auto; + display: flex; + align-items: stretch; + min-width: 0; + max-width: 100%; + + input { + width: 150px; + padding-left: 0; + padding-right: 0; + } + + input::placeholder { + color: $greyed-fg-color; + font-weight: normal; + } + + .mx_Field_prefix, .mx_Field_postfix { + color: $greyed-fg-color; + border-left: none; + border-right: none; + font-weight: 600; + padding: 9px 10px; + flex: 0 0 auto; + } + + .mx_Field_postfix { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + // this allows the domain name to show + // as long as it doesn't make the input shrink + // if it's too big, it shows an ellipsis + // 180: 28 for prefix, 152 for input + max-width: calc(100% - 180px); + } +} diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 306ef03fb1..774ef21aff 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -962,11 +962,8 @@ export default createReactClass({ const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog'); const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog); - const [shouldCreate, name, noFederate] = await modal.finished; + const [shouldCreate, createOpts] = await modal.finished; if (shouldCreate) { - const createOpts = {}; - if (name) createOpts.name = name; - if (noFederate) createOpts.creation_content = {'m.federate': false}; createRoom({createOpts}).done(); } }, diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js index e1da9f841d..e3070cfef3 100644 --- a/src/components/views/dialogs/CreateRoomDialog.js +++ b/src/components/views/dialogs/CreateRoomDialog.js @@ -19,7 +19,9 @@ import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import sdk from '../../../index'; import SdkConfig from '../../../SdkConfig'; +import withValidation from '../elements/Validation'; import { _t } from '../../../languageHandler'; +import MatrixClientPeg from '../../../MatrixClientPeg'; export default createReactClass({ displayName: 'CreateRoomDialog', @@ -27,47 +29,162 @@ export default createReactClass({ onFinished: PropTypes.func.isRequired, }, - componentWillMount: function() { + getInitialState() { const config = SdkConfig.get(); - // Dialog shows inverse of m.federate (noFederate) strict false check to skip undefined check (default = true) - this.defaultNoFederate = config.default_federate === false; + return { + isPublic: false, + name: "", + topic: "", + alias: "", + detailsOpen: false, + noFederate: config.default_federate === false, + nameIsValid: false, + }; }, - onOk: function() { - this.props.onFinished(true, this.refs.textinput.value, this.refs.checkbox.checked); + _roomCreateOptions() { + const createOpts = {}; + createOpts.name = this.state.name; + if (this.state.isPublic) { + createOpts.visibility = "public"; + createOpts.preset = "public_chat"; + // to prevent createRoom from enabling guest access + createOpts['initial_state'] = []; + const {alias} = this.state; + const localPart = alias.substr(1, alias.indexOf(":") - 1); + createOpts['room_alias_name'] = localPart; + } + if (this.state.topic) { + createOpts.topic = this.state.topic; + } + if (this.state.noFederate) { + createOpts.creation_content = {'m.federate': false}; + } + return createOpts; + }, + + componentDidMount() { + this._detailsRef.addEventListener("toggle", this.onDetailsToggled); + }, + + componentWillUnmount() { + this._detailsRef.removeEventListener("toggle", this.onDetailsToggled); + }, + + onOk: async function() { + const activeElement = document.activeElement; + if (activeElement) { + activeElement.blur(); + } + await this._nameFieldRef.validate({allowEmpty: false}); + if (this._aliasFieldRef) { + await this._aliasFieldRef.validate({allowEmpty: false}); + } + // Validation and state updates are async, so we need to wait for them to complete + // first. Queue a `setState` callback and wait for it to resolve. + await new Promise(resolve => this.setState({}, resolve)); + if (this.state.nameIsValid && (!this._aliasFieldRef || this._aliasFieldRef.isValid)) { + this.props.onFinished(true, this._roomCreateOptions()); + } else { + let field; + if (!this.state.nameIsValid) { + field = this._nameFieldRef; + } else if (this._aliasFieldRef && !this._aliasFieldRef.isValid) { + field = this._aliasFieldRef; + } + if (field) { + field.focus(); + field.validate({ allowEmpty: false, focused: true }); + } + } }, onCancel: function() { this.props.onFinished(false); }, + onNameChange(ev) { + this.setState({name: ev.target.value}); + }, + + onTopicChange(ev) { + this.setState({topic: ev.target.value}); + }, + + onPublicChange(isPublic) { + this.setState({isPublic}); + }, + + onAliasChange(alias) { + this.setState({alias}); + }, + + onDetailsToggled(ev) { + this.setState({detailsOpen: ev.target.open}); + }, + + onNoFederateChange(noFederate) { + this.setState({noFederate}); + }, + + collectDetailsRef(ref) { + this._detailsRef = ref; + }, + + async onNameValidate(fieldState) { + const result = await this._validateRoomName(fieldState); + this.setState({nameIsValid: result.valid}); + return result; + }, + + _validateRoomName: withValidation({ + rules: [ + { + key: "required", + test: async ({ value }) => !!value, + invalid: () => _t("Please enter a name for the room"), + }, + ], + }), + render: function() { const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + const Field = sdk.getComponent('views.elements.Field'); + const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch'); + const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField'); + + let privateLabel; + let publicLabel; + let aliasField; + if (this.state.isPublic) { + publicLabel = (
{_t("Set a room alias to easily share your room with other people.")}
); + const domain = MatrixClientPeg.get().getDomain(); + aliasField = ( +{_t("This room is private, and can only be joined by invitation.")}
); + } + + const title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room'); return (