From 0f96828084b5a80d96cbe0af6025ed1e36aba025 Mon Sep 17 00:00:00 2001 From: olivier Date: Fri, 15 Apr 2022 17:18:08 +0200 Subject: [PATCH 01/36] Co-authored-by: Estelle Comment --- customisations.json | 3 + .../views/dialogs/TchapCreateRoomDialog.tsx | 225 ++++++++++++++++++ 2 files changed, 228 insertions(+) create mode 100644 customisations.json create mode 100644 src/components/views/dialogs/TchapCreateRoomDialog.tsx diff --git a/customisations.json b/customisations.json new file mode 100644 index 0000000000..7100331b2c --- /dev/null +++ b/customisations.json @@ -0,0 +1,3 @@ +{ + "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx" +} diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx new file mode 100644 index 0000000000..a846e8e8ae --- /dev/null +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -0,0 +1,225 @@ +/* +Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2020, 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, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; + +import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; +import withValidation, { IFieldState } from 'matrix-react-sdk/src/components/views/elements/Validation'; +import { _t } from 'matrix-react-sdk/src/languageHandler'; +import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg'; +import { IOpts, privateShouldBeEncrypted } from "matrix-react-sdk/src/createRoom"; +import { CommunityPrototypeStore } from "matrix-react-sdk/src/stores/CommunityPrototypeStore"; +import { replaceableComponent } from "matrix-react-sdk/src/utils/replaceableComponent"; +import Field from "matrix-react-sdk/src/components/views/elements/Field"; +import RoomAliasField from "matrix-react-sdk/src/components/views/elements/RoomAliasField"; +import LabelledToggleSwitch from "matrix-react-sdk/src/components/views/elements/LabelledToggleSwitch"; +import DialogButtons from "matrix-react-sdk/src/components/views/elements/DialogButtons"; +import BaseDialog from "matrix-react-sdk/src/components/views/dialogs/BaseDialog"; +import SpaceStore from "matrix-react-sdk/src/stores/spaces/SpaceStore"; +import JoinRuleDropdown from "matrix-react-sdk/src/components/views/elements/JoinRuleDropdown"; +import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; +import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; +// todo remove unused imports at the end. + +// todo maybe move this somewhere else ? +export enum TchapRoomType { + Direct = "direct", // todo not used in this file, we haven't implemented DMs yet + Private = "private", + External = "external", + Forum = "forum", +} + +interface IProps { + defaultPublic?: boolean; + defaultName?: string; + parentSpace?: Room; + defaultEncrypted?: boolean; + onFinished(proceed: boolean, opts?: IOpts): void; +} + +interface IState { +// joinRule: JoinRule; + // isPublic: boolean; + // isEncrypted: boolean; + name: string; + //topic: string; + // alias: string; + //detailsOpen: boolean; + //noFederate: boolean; + nameIsValid: boolean; + //canChangeEncryption: boolean; + tchapRoomType: TchapRoomType; +} + +export default class TchapCreateRoomDialog extends React.Component { + private nameField = createRef(); + + constructor(props) { + super(props); + + this.state = { + name: this.props.defaultName || "", + nameIsValid: false, + tchapRoomType: TchapRoomType.Private, + } + } + + componentDidMount() { + // move focus to first field when showing dialog + this.nameField.current.focus(); + } + + componentWillUnmount() { + } + + private onCancel = () => { + this.props.onFinished(false); + }; + + private onTchapRoomTypeChange = (tchapRoomType: TchapRoomType) => { + this.setState({ tchapRoomType }); + }; + + private onNameChange = (ev: ChangeEvent) => { + this.setState({ name: ev.target.value }); + }; + + private onNameValidate = async (fieldState: IFieldState) => { + const result = await TchapCreateRoomDialog.validateRoomName(fieldState); + this.setState({ nameIsValid: result.valid }); + return result; + }; + + private static validateRoomName = withValidation({ + rules: [ + { + key: "required", + test: async ({ value }) => !!value, + invalid: () => _t("Please enter a name for the room"), + }, + ], + }); + + private onKeyDown = (event: KeyboardEvent) => { + const action = getKeyBindingsManager().getAccessibilityAction(event); + switch (action) { + case KeyBindingAction.Enter: + this.onOk(); + event.preventDefault(); + event.stopPropagation(); + break; + } + }; + + + private onOk = async () => { + const activeElement = document.activeElement as HTMLElement; + if (activeElement) { + activeElement.blur(); + } + await this.nameField.current.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.props.onFinished(true, this.roomCreateOptions()); + } else { + let field; + if (!this.state.nameIsValid) { + field = this.nameField.current; + } + if (field) { + field.focus(); + field.validate({ allowEmpty: false, focused: true }); + } + } + }; + + private roomCreateOptions() { + const opts: IOpts = {}; + const createOpts: IOpts["createOpts"] = opts.createOpts = {}; + createOpts.name = this.state.name; + + switch(tchapRoomType){ + case TchapRoomType.Forum:{ + + } + } + return opts; + } + + + render() { + let title = _t("Create a room"); + /* todo do we need this ? + if (CommunityPrototypeStore.instance.getSelectedCommunityId()) { + const name = CommunityPrototypeStore.instance.getSelectedCommunityName(); + title = _t("Create a room in %(communityName)s", { communityName: name }); + } else if (!this.props.parentSpace) { + title = this.state.joinRule === JoinRule.Public ? _t('Create a public room') : _t('Create a private room'); + } + */ + + return ( + +
+
+ + + { /* todo this is actually not a JoinRuleDropdown, but a TchapRoomTypeDropdown. */ } + + { options } + + + +
+
+ + + ); + } +} From 2613081763ee3224013ff6dc2b9b99d77e3e4457 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Fri, 15 Apr 2022 17:36:03 +0200 Subject: [PATCH 02/36] WIP : draft that half-works, rooms are not configured yet --- .../views/dialogs/TchapCreateRoomDialog.tsx | 43 ++++++++----------- 1 file changed, 18 insertions(+), 25 deletions(-) diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx index a846e8e8ae..9ac76b6963 100644 --- a/src/components/views/dialogs/TchapCreateRoomDialog.tsx +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -32,9 +32,10 @@ import LabelledToggleSwitch from "matrix-react-sdk/src/components/views/elements import DialogButtons from "matrix-react-sdk/src/components/views/elements/DialogButtons"; import BaseDialog from "matrix-react-sdk/src/components/views/dialogs/BaseDialog"; import SpaceStore from "matrix-react-sdk/src/stores/spaces/SpaceStore"; -import JoinRuleDropdown from "matrix-react-sdk/src/components/views/elements/JoinRuleDropdown"; +import Dropdown from "matrix-react-sdk/src/components/views/elements/Dropdown"; import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; + // todo remove unused imports at the end. // todo maybe move this somewhere else ? @@ -77,7 +78,7 @@ export default class TchapCreateRoomDialog extends React.Component { const activeElement = document.activeElement as HTMLElement; @@ -155,18 +155,11 @@ export default class TchapCreateRoomDialog extends React.Component - { /* todo this is actually not a JoinRuleDropdown, but a TchapRoomTypeDropdown. */ } + { /** todo move this to another file */ } - { options } +
+ { _t("Salon without externs") } +
+
+ { _t("Salon with externs") } +
+
+ { _t("Forum") } +
- From 68a627e8b89b8cbb391ec4019aa77be4bb431d83 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Fri, 15 Apr 2022 18:00:59 +0200 Subject: [PATCH 03/36] Move the dropdown to a separate file --- customisations.json | 3 +- .../views/dialogs/TchapCreateRoomDialog.tsx | 35 ++++-------- .../views/elements/TchapRoomTypeDropdown.tsx | 54 +++++++++++++++++++ 3 files changed, 65 insertions(+), 27 deletions(-) create mode 100644 src/components/views/elements/TchapRoomTypeDropdown.tsx diff --git a/customisations.json b/customisations.json index 7100331b2c..8fbe7a7d66 100644 --- a/customisations.json +++ b/customisations.json @@ -1,3 +1,4 @@ { - "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx" + "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx", + "src/components/views/elements/JoinRuleDropdown.tsx": "src/components/views/elements/TchapRoomTypeDropdown.tsx" } diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx index 9ac76b6963..dce0bb1850 100644 --- a/src/components/views/dialogs/TchapCreateRoomDialog.tsx +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -15,6 +15,11 @@ See the License for the specific language governing permissions and limitations under the License. */ +/* +Note on imports : because this file will be copied to a different directory by the customisations +mechanism, imports must use absolute paths. +Except when importing from other customisation files. Then imports must use relative paths. +*/ import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; @@ -32,10 +37,10 @@ import LabelledToggleSwitch from "matrix-react-sdk/src/components/views/elements import DialogButtons from "matrix-react-sdk/src/components/views/elements/DialogButtons"; import BaseDialog from "matrix-react-sdk/src/components/views/dialogs/BaseDialog"; import SpaceStore from "matrix-react-sdk/src/stores/spaces/SpaceStore"; -import Dropdown from "matrix-react-sdk/src/components/views/elements/Dropdown"; import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; +import TchapRoomTypeDropdown from "./../elements/TchapRoomTypeDropdown"; // todo remove unused imports at the end. // todo maybe move this somewhere else ? @@ -55,16 +60,8 @@ interface IProps { } interface IState { -// joinRule: JoinRule; - // isPublic: boolean; - // isEncrypted: boolean; name: string; - //topic: string; - // alias: string; - //detailsOpen: boolean; - //noFederate: boolean; nameIsValid: boolean; - //canChangeEncryption: boolean; tchapRoomType: TchapRoomType; } @@ -187,25 +184,11 @@ export default class TchapCreateRoomDialog extends React.Component - { /** todo move this to another file */ } - -
- { _t("Salon without externs") } -
-
- { _t("Salon with externs") } -
-
- { _t("Forum") } -
- + /> diff --git a/src/components/views/elements/TchapRoomTypeDropdown.tsx b/src/components/views/elements/TchapRoomTypeDropdown.tsx new file mode 100644 index 0000000000..7459aaf7ae --- /dev/null +++ b/src/components/views/elements/TchapRoomTypeDropdown.tsx @@ -0,0 +1,54 @@ +/* +Copyright 2022 DINUM +*/ + +import React from 'react'; +import { _t } from 'matrix-react-sdk/src/languageHandler'; +import Dropdown from "matrix-react-sdk/src/components/views/elements/Dropdown"; + +// todo import this +export enum TchapRoomType { + Direct = "direct", // todo not used in this file, we haven't implemented DMs yet + Private = "private", + External = "external", + Forum = "forum", +} + +interface IProps { + value: TchapRoomType; + label: string; + width?: number; + onChange(value: TchapRoomType): void; +} + +const TchapRoomTypeDropdown = ({ + label, + value, + width = 448, + onChange, +}: IProps) => { + const options = [ +
+ { _t("Salon without externs") } +
, +
+ { _t("Salon with externs") } +
, +
+ { _t("Forum") } +
, + ]; + + return + { options } + ; +}; + +export default TchapRoomTypeDropdown; From 8a9ba1547cff6e733a903fc521c724a700122a8d Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Fri, 15 Apr 2022 18:09:55 +0200 Subject: [PATCH 04/36] Add translations --- .../views/elements/TchapRoomTypeDropdown.tsx | 6 +++--- src/i18n/strings/tchap_translations.json | 12 ++++++++++++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/TchapRoomTypeDropdown.tsx b/src/components/views/elements/TchapRoomTypeDropdown.tsx index 7459aaf7ae..84cb69ccdd 100644 --- a/src/components/views/elements/TchapRoomTypeDropdown.tsx +++ b/src/components/views/elements/TchapRoomTypeDropdown.tsx @@ -29,13 +29,13 @@ const TchapRoomTypeDropdown = ({ }: IProps) => { const options = [
- { _t("Salon without externs") } + { _t("Private room") }
,
- { _t("Salon with externs") } + { _t("Private room open to external users") }
,
- { _t("Forum") } + { _t("Forum room") }
, ]; diff --git a/src/i18n/strings/tchap_translations.json b/src/i18n/strings/tchap_translations.json index 7b51db1e7b..83c24093b9 100644 --- a/src/i18n/strings/tchap_translations.json +++ b/src/i18n/strings/tchap_translations.json @@ -17,5 +17,17 @@ "Choose a homeserver:": { "en": "Choose a homeserver:", "fr": "Choisissez un serveur d'accueil :" + }, + "Private room": { + "en": "Private room", + "fr": "Salon privé" + }, + "Private room open to external users": { + "en": "Private room open to external users", + "fr": "Salon privé ouvert aux externes" + }, + "Forum room": { + "en": "Forum room", + "fr": "Salon forum" } } From aa211e0298db4a081cbd0f5a0c3c29c3ebfe2db1 Mon Sep 17 00:00:00 2001 From: olivier Date: Fri, 15 Apr 2022 18:14:23 +0200 Subject: [PATCH 05/36] add room creation opts --- .../views/dialogs/TchapCreateRoomDialog.tsx | 54 +++++++++++++++++-- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx index a846e8e8ae..d1a9be5082 100644 --- a/src/components/views/dialogs/TchapCreateRoomDialog.tsx +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -35,6 +35,7 @@ import SpaceStore from "matrix-react-sdk/src/stores/spaces/SpaceStore"; import JoinRuleDropdown from "matrix-react-sdk/src/components/views/elements/JoinRuleDropdown"; import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; +import { HistoryVisibility, ICreateRoomOpts } from "matrix-js-sdk"; // todo remove unused imports at the end. // todo maybe move this somewhere else ? @@ -45,6 +46,16 @@ export enum TchapRoomType { Forum = "forum", } +// todo maybe move this somewhere else ? +export enum TchapRoomAccessRule { + Unrestricted = "unrestricted", // todo not used in this file, we haven't implemented DMs yet + Restricted = "restricted" +} + +export interface ITchapCreateRoomOpts extends ICreateRoomOpts{ + accessRule?:TchapRoomAccessRule +} + interface IProps { defaultPublic?: boolean; defaultName?: string; @@ -138,7 +149,7 @@ export default class TchapCreateRoomDialog extends React.Component(resolve => this.setState({}, resolve)); if (this.state.nameIsValid) { - this.props.onFinished(true, this.roomCreateOptions()); + this.props.onFinished(true, this.roomCreateOptions(this.state.name, this.state.tchapRoomType)); } else { let field; if (!this.state.nameIsValid) { @@ -151,14 +162,47 @@ export default class TchapCreateRoomDialog extends React.Component noFederate: Tchap.getShortDomain() === "Agent" ? false : !this.state.federate, + createRoomOpts.creation_content = { 'm.federate': true }; switch(tchapRoomType){ case TchapRoomType.Forum:{ - + //"Forum" only for tchap members and not encrypted + createRoomOpts.accessRule = TchapRoomAccessRule.Restricted; + createRoomOpts.visibility = Visibility.Public; + createRoomOpts.preset = Preset.PublicChat; + opts.joinRule = JoinRule.Public; + opts.encryption = false; + opts.historyVisibility = HistoryVisibility.Shared; + + } + case TchapRoomType.Private:{ + //"Salon", only for tchap member and encrypted + createRoomOpts.accessRule = TchapRoomAccessRule.Restricted; + createRoomOpts.visibility = Visibility.Private; + createRoomOpts.preset = Preset.PrivateChat; + opts.joinRule = JoinRule.Invite + opts.encryption = true; + opts.historyVisibility = HistoryVisibility.Joined; + } + case TchapRoomType.External:{ + //open to external and encrypted, + createRoomOpts.accessRule = TchapRoomAccessRule.Unrestricted + createRoomOpts.visibility = Visibility.Private; + createRoomOpts.preset = Preset.PrivateChat; + opts.joinRule = JoinRule.Invite + opts.encryption = true; + opts.historyVisibility = HistoryVisibility.Joined; } } return opts; From 8198eb1a45844012e54c5b8859b623ba799b7033 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Fri, 15 Apr 2022 18:16:43 +0200 Subject: [PATCH 06/36] Move the TchapRoomType enum to a separate file --- customisations.json | 1 + src/@types/tchap.ts | 6 ++++++ src/components/views/dialogs/TchapCreateRoomDialog.tsx | 9 +-------- src/components/views/elements/TchapRoomTypeDropdown.tsx | 8 +------- 4 files changed, 9 insertions(+), 15 deletions(-) create mode 100644 src/@types/tchap.ts diff --git a/customisations.json b/customisations.json index 8fbe7a7d66..e02c5fec97 100644 --- a/customisations.json +++ b/customisations.json @@ -1,4 +1,5 @@ { + "src/@types/tchap.ts": "src/@types/tchap.ts", "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx", "src/components/views/elements/JoinRuleDropdown.tsx": "src/components/views/elements/TchapRoomTypeDropdown.tsx" } diff --git a/src/@types/tchap.ts b/src/@types/tchap.ts new file mode 100644 index 0000000000..a761487edb --- /dev/null +++ b/src/@types/tchap.ts @@ -0,0 +1,6 @@ +export enum TchapRoomType { + Direct = "direct", + Private = "private", + External = "external", + Forum = "forum", +} diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx index dce0bb1850..ce7b48890e 100644 --- a/src/components/views/dialogs/TchapCreateRoomDialog.tsx +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -41,16 +41,9 @@ import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; import TchapRoomTypeDropdown from "./../elements/TchapRoomTypeDropdown"; +import { TchapRoomType } from "../../../@types/tchap"; // todo remove unused imports at the end. -// todo maybe move this somewhere else ? -export enum TchapRoomType { - Direct = "direct", // todo not used in this file, we haven't implemented DMs yet - Private = "private", - External = "external", - Forum = "forum", -} - interface IProps { defaultPublic?: boolean; defaultName?: string; diff --git a/src/components/views/elements/TchapRoomTypeDropdown.tsx b/src/components/views/elements/TchapRoomTypeDropdown.tsx index 84cb69ccdd..f3f0ca068a 100644 --- a/src/components/views/elements/TchapRoomTypeDropdown.tsx +++ b/src/components/views/elements/TchapRoomTypeDropdown.tsx @@ -6,13 +6,7 @@ import React from 'react'; import { _t } from 'matrix-react-sdk/src/languageHandler'; import Dropdown from "matrix-react-sdk/src/components/views/elements/Dropdown"; -// todo import this -export enum TchapRoomType { - Direct = "direct", // todo not used in this file, we haven't implemented DMs yet - Private = "private", - External = "external", - Forum = "forum", -} +import { TchapRoomType } from "../../../@types/tchap"; interface IProps { value: TchapRoomType; From fa08ac3bfa980a22b83d14f39e5020dc4e9cef16 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Fri, 15 Apr 2022 19:20:30 +0200 Subject: [PATCH 07/36] Use radio buttons instead of dropdown --- .../views/elements/TchapRoomTypeDropdown.tsx | 116 +++++++++++++----- src/i18n/strings/tchap_translations.json | 12 ++ 2 files changed, 96 insertions(+), 32 deletions(-) diff --git a/src/components/views/elements/TchapRoomTypeDropdown.tsx b/src/components/views/elements/TchapRoomTypeDropdown.tsx index f3f0ca068a..6848eb2370 100644 --- a/src/components/views/elements/TchapRoomTypeDropdown.tsx +++ b/src/components/views/elements/TchapRoomTypeDropdown.tsx @@ -3,8 +3,9 @@ Copyright 2022 DINUM */ import React from 'react'; +import classNames from "classnames"; import { _t } from 'matrix-react-sdk/src/languageHandler'; -import Dropdown from "matrix-react-sdk/src/components/views/elements/Dropdown"; +import StyledRadioButton from "matrix-react-sdk/src/components/views/elements/StyledRadioButton"; import { TchapRoomType } from "../../../@types/tchap"; @@ -15,34 +16,85 @@ interface IProps { onChange(value: TchapRoomType): void; } -const TchapRoomTypeDropdown = ({ - label, - value, - width = 448, - onChange, -}: IProps) => { - const options = [ -
- { _t("Private room") } -
, -
- { _t("Private room open to external users") } -
, -
- { _t("Forum room") } -
, - ]; - - return - { options } - ; -}; - -export default TchapRoomTypeDropdown; +interface IState { + roomType: TchapRoomType; +} + +// todo rename, not a dropdown anymore +export default class TchapRoomTypeDropdown extends React.Component { + constructor(props: IProps) { + super(props); + + this.state = { + roomType: TchapRoomType.Private, + }; + } + + private onRoomTypeChange = (e: React.ChangeEvent): void => { + const roomType = e.target.value as TchapRoomType; + + this.setState({ roomType: roomType }); + this.props.onChange(roomType); + }; + + public render(): JSX.Element { + const ircClasses = classNames("mx_LayoutSwitcher_RadioButton", { + mx_LayoutSwitcher_RadioButton_selected: this.state.roomType == TchapRoomType.Private, + }); + const groupClasses = classNames("mx_LayoutSwitcher_RadioButton", { + mx_LayoutSwitcher_RadioButton_selected: this.state.roomType == TchapRoomType.External, + }); + const bubbleClasses = classNames("mx_LayoutSwitcher_RadioButton", { + mx_LayoutSwitcher_RadioButton_selected: this.state.roomType === TchapRoomType.Forum, + }); + + return
+ + + +
+ ; + } +} diff --git a/src/i18n/strings/tchap_translations.json b/src/i18n/strings/tchap_translations.json index 83c24093b9..7b63b36717 100644 --- a/src/i18n/strings/tchap_translations.json +++ b/src/i18n/strings/tchap_translations.json @@ -29,5 +29,17 @@ "Forum room": { "en": "Forum room", "fr": "Salon forum" + }, + "Accessible to all users by invitation from an administrator.": { + "en": "Accessible to all users by invitation from an administrator.", + "fr": "Accessible à tous les utilisateurs sur invitation d'un administrateur." + }, + "Accessible to all users and to external guests by invitation of an administrator.": { + "en": "Accessible to all users and to external guests by invitation of an administrator.", + "fr": "Accessible à tous les utilisateurs et aux invités externes sur invitation d'un administrateur." + }, + "Accessible to all users from the forum directory or from a shared link.": { + "en": "Accessible to all users from the forum directory or from a shared link.", + "fr": "Accessible à tous les utilisateurs à partir de la liste des forums ou d'un lien partagé." } } From 79310ccb9ef7fac2de261e743aef7ee910649cb8 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Fri, 15 Apr 2022 19:27:29 +0200 Subject: [PATCH 08/36] Rename file, and stop replacing JoinRuleDropdown, since it is a not necessary. --- customisations.json | 2 +- .../views/dialogs/TchapCreateRoomDialog.tsx | 12 ++++++------ ...oomTypeDropdown.tsx => TchapRoomTypeSelector.tsx} | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) rename src/components/views/elements/{TchapRoomTypeDropdown.tsx => TchapRoomTypeSelector.tsx} (98%) diff --git a/customisations.json b/customisations.json index e02c5fec97..9140e3e91a 100644 --- a/customisations.json +++ b/customisations.json @@ -1,5 +1,5 @@ { "src/@types/tchap.ts": "src/@types/tchap.ts", "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx", - "src/components/views/elements/JoinRuleDropdown.tsx": "src/components/views/elements/TchapRoomTypeDropdown.tsx" + "src/components/views/elements/TchapRoomTypeSelector.tsx": "src/components/views/elements/TchapRoomTypeSelector.tsx" } diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx index c040ac9a84..b6ad0d9c48 100644 --- a/src/components/views/dialogs/TchapCreateRoomDialog.tsx +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -41,7 +41,7 @@ import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; import { HistoryVisibility, ICreateRoomOpts } from "matrix-js-sdk"; -import TchapRoomTypeDropdown from "./../elements/TchapRoomTypeDropdown"; +import TchapRoomTypeSelector from "./../elements/TchapRoomTypeSelector"; import { TchapRoomType } from "../../../@types/tchap"; // todo remove unused imports at the end. @@ -157,11 +157,11 @@ export default class TchapCreateRoomDialog extends React.Component noFederate: Tchap.getShortDomain() === "Agent" ? false : !this.state.federate, createRoomOpts.creation_content = { 'm.federate': true }; @@ -175,7 +175,7 @@ export default class TchapCreateRoomDialog extends React.Component - { +export default class TchapRoomTypeSelector extends React.Component { constructor(props: IProps) { super(props); From d9289d98b35449a35c1f1fdf453c5f12a917e939 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Fri, 15 Apr 2022 19:37:13 +0200 Subject: [PATCH 09/36] Add scss. It does not work. --- customisations.json | 3 +- .../elements/_TchapRoomTypeSelector.scss | 55 +++++++++++++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 res/css/views/elements/_TchapRoomTypeSelector.scss diff --git a/customisations.json b/customisations.json index 9140e3e91a..12a5840f48 100644 --- a/customisations.json +++ b/customisations.json @@ -1,5 +1,6 @@ { "src/@types/tchap.ts": "src/@types/tchap.ts", "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx", - "src/components/views/elements/TchapRoomTypeSelector.tsx": "src/components/views/elements/TchapRoomTypeSelector.tsx" + "src/components/views/elements/TchapRoomTypeSelector.tsx": "src/components/views/elements/TchapRoomTypeSelector.tsx", + "res/css/views/elements/_TchapRoomTypeSelector.scss": "res/css/views/elements/_TchapRoomTypeSelector.scss" } diff --git a/res/css/views/elements/_TchapRoomTypeSelector.scss b/res/css/views/elements/_TchapRoomTypeSelector.scss new file mode 100644 index 0000000000..99587afc48 --- /dev/null +++ b/res/css/views/elements/_TchapRoomTypeSelector.scss @@ -0,0 +1,55 @@ +.mx_LayoutSwitcher { + .mx_LayoutSwitcher_RadioButtons { + display: flex; + flex-direction: row; + gap: 24px; + + color: $primary-content; + + > .mx_LayoutSwitcher_RadioButton { + flex-grow: 0; + flex-shrink: 1; + display: flex; + flex-direction: column; + + width: 300px; + min-width: 0; + + border: 1px solid $appearance-tab-border-color; + border-radius: 10px; + + .mx_MessageActionBar { + display: none; + } + + .mx_LayoutSwitcher_RadioButton_preview { + flex-grow: 1; + display: flex; + align-items: center; + padding: 10px; + pointer-events: none; + } + + .mx_StyledRadioButton { + flex-grow: 0; + padding: 10px; + } + + &.mx_LayoutSwitcher_RadioButton_selected { + border-color: $accent; + } + } + + .mx_StyledRadioButton { + border-top: 1px solid $appearance-tab-border-color; + + > input + div { + border-color: rgba($muted-fg-color, 0.2); + } + } + + .mx_StyledRadioButton_checked { + background-color: rgba($accent, 0.08); + } + } +} From 91e12ebfde9c72ebae620cd2246edcac63d0f607 Mon Sep 17 00:00:00 2001 From: olivier Date: Tue, 19 Apr 2022 12:36:04 +0200 Subject: [PATCH 10/36] fix component loaded before skin --- src/@types/tchap.ts | 6 ++++ .../views/dialogs/TchapCreateRoomDialog.tsx | 31 +++++++++---------- .../views/elements/TchapRoomTypeSelector.tsx | 6 +++- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/@types/tchap.ts b/src/@types/tchap.ts index a761487edb..fb2a3eff73 100644 --- a/src/@types/tchap.ts +++ b/src/@types/tchap.ts @@ -4,3 +4,9 @@ export enum TchapRoomType { External = "external", Forum = "forum", } + + +export enum TchapRoomAccessRule { + Unrestricted = "unrestricted", // todo not used in this file, we haven't implemented DMs yet + Restricted = "restricted" +} \ No newline at end of file diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx index b6ad0d9c48..d1f1db92f7 100644 --- a/src/components/views/dialogs/TchapCreateRoomDialog.tsx +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -24,33 +24,20 @@ import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "re import { Room } from "matrix-js-sdk/src/models/room"; import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; -import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; import withValidation, { IFieldState } from 'matrix-react-sdk/src/components/views/elements/Validation'; import { _t } from 'matrix-react-sdk/src/languageHandler'; -import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg'; import { IOpts, privateShouldBeEncrypted } from "matrix-react-sdk/src/createRoom"; -import { CommunityPrototypeStore } from "matrix-react-sdk/src/stores/CommunityPrototypeStore"; -import { replaceableComponent } from "matrix-react-sdk/src/utils/replaceableComponent"; -import Field from "matrix-react-sdk/src/components/views/elements/Field"; -import RoomAliasField from "matrix-react-sdk/src/components/views/elements/RoomAliasField"; -import LabelledToggleSwitch from "matrix-react-sdk/src/components/views/elements/LabelledToggleSwitch"; -import DialogButtons from "matrix-react-sdk/src/components/views/elements/DialogButtons"; -import BaseDialog from "matrix-react-sdk/src/components/views/dialogs/BaseDialog"; -import SpaceStore from "matrix-react-sdk/src/stores/spaces/SpaceStore"; import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; import { HistoryVisibility, ICreateRoomOpts } from "matrix-js-sdk"; +import * as sdk from 'matrix-react-sdk/src/index'; import TchapRoomTypeSelector from "./../elements/TchapRoomTypeSelector"; -import { TchapRoomType } from "../../../@types/tchap"; +import { TchapRoomAccessRule, TchapRoomType } from "../../../@types/tchap"; // todo remove unused imports at the end. -// todo maybe move this somewhere else ? -export enum TchapRoomAccessRule { - Unrestricted = "unrestricted", // todo not used in this file, we haven't implemented DMs yet - Restricted = "restricted" -} + export interface ITchapCreateRoomOpts extends ICreateRoomOpts{ accessRule?:TchapRoomAccessRule @@ -71,6 +58,7 @@ interface IState { } export default class TchapCreateRoomDialog extends React.Component { + private nameField = createRef(); constructor(props) { @@ -175,9 +163,10 @@ export default class TchapCreateRoomDialog extends React.Component Date: Tue, 19 Apr 2022 18:55:45 +0200 Subject: [PATCH 11/36] Somewhat less broken css, probably --- res/css/views/elements/_TchapRoomTypeSelector.scss | 14 ++++++-------- .../views/elements/TchapRoomTypeSelector.tsx | 2 ++ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/res/css/views/elements/_TchapRoomTypeSelector.scss b/res/css/views/elements/_TchapRoomTypeSelector.scss index 99587afc48..3596f40528 100644 --- a/res/css/views/elements/_TchapRoomTypeSelector.scss +++ b/res/css/views/elements/_TchapRoomTypeSelector.scss @@ -1,10 +1,9 @@ -.mx_LayoutSwitcher { .mx_LayoutSwitcher_RadioButtons { display: flex; flex-direction: row; gap: 24px; - color: $primary-content; + /*color: $primary-content; todo the variables are not available. */ > .mx_LayoutSwitcher_RadioButton { flex-grow: 0; @@ -15,7 +14,7 @@ width: 300px; min-width: 0; - border: 1px solid $appearance-tab-border-color; + /*border: 1px solid $appearance-tab-border-color;*/ border-radius: 10px; .mx_MessageActionBar { @@ -36,20 +35,19 @@ } &.mx_LayoutSwitcher_RadioButton_selected { - border-color: $accent; + /*border-color: $accent;*/ } } .mx_StyledRadioButton { - border-top: 1px solid $appearance-tab-border-color; + /*border-top: 1px solid $appearance-tab-border-color;*/ > input + div { - border-color: rgba($muted-fg-color, 0.2); + /*border-color: rgba($muted-fg-color, 0.2);*/ } } .mx_StyledRadioButton_checked { - background-color: rgba($accent, 0.08); + /*background-color: rgba($accent, 0.08);*/ } } -} diff --git a/src/components/views/elements/TchapRoomTypeSelector.tsx b/src/components/views/elements/TchapRoomTypeSelector.tsx index 48ea2aa5f0..85da3a895a 100644 --- a/src/components/views/elements/TchapRoomTypeSelector.tsx +++ b/src/components/views/elements/TchapRoomTypeSelector.tsx @@ -9,6 +9,8 @@ import { _t } from 'matrix-react-sdk/src/languageHandler'; import { TchapRoomType } from "../../../@types/tchap"; import * as sdk from 'matrix-react-sdk/src/index'; +import "../../../../res/css/views/elements/_TchapRoomTypeSelector.scss"; + interface IProps { value: TchapRoomType; label: string; From 3de6b58005d5dbfa9528f39dee8badd28debd208 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Tue, 19 Apr 2022 18:59:46 +0200 Subject: [PATCH 12/36] Remove scss file from customisations.json, for some reason --- customisations.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/customisations.json b/customisations.json index 12a5840f48..9140e3e91a 100644 --- a/customisations.json +++ b/customisations.json @@ -1,6 +1,5 @@ { "src/@types/tchap.ts": "src/@types/tchap.ts", "src/components/views/dialogs/CreateRoomDialog.tsx": "src/components/views/dialogs/TchapCreateRoomDialog.tsx", - "src/components/views/elements/TchapRoomTypeSelector.tsx": "src/components/views/elements/TchapRoomTypeSelector.tsx", - "res/css/views/elements/_TchapRoomTypeSelector.scss": "res/css/views/elements/_TchapRoomTypeSelector.scss" + "src/components/views/elements/TchapRoomTypeSelector.tsx": "src/components/views/elements/TchapRoomTypeSelector.tsx" } From c26e698e24d2df4c8c2af04ff3f5649cc5130b12 Mon Sep 17 00:00:00 2001 From: olivier Date: Wed, 20 Apr 2022 11:17:36 +0200 Subject: [PATCH 13/36] add federate switch on forum --- .../views/dialogs/TchapCreateRoomDialog.tsx | 60 ++++++++++--------- .../views/elements/TchapRoomTypeSelector.tsx | 31 ++++++++-- src/util/TchapUtils.ts | 29 +++++++++ 3 files changed, 87 insertions(+), 33 deletions(-) create mode 100644 src/util/TchapUtils.ts diff --git a/src/components/views/dialogs/TchapCreateRoomDialog.tsx b/src/components/views/dialogs/TchapCreateRoomDialog.tsx index d1f1db92f7..2c3917ea98 100644 --- a/src/components/views/dialogs/TchapCreateRoomDialog.tsx +++ b/src/components/views/dialogs/TchapCreateRoomDialog.tsx @@ -20,27 +20,23 @@ Note on imports : because this file will be copied to a different directory by t mechanism, imports must use absolute paths. Except when importing from other customisation files. Then imports must use relative paths. */ -import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react"; +import React, { ChangeEvent, createRef, KeyboardEvent } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials"; - import withValidation, { IFieldState } from 'matrix-react-sdk/src/components/views/elements/Validation'; import { _t } from 'matrix-react-sdk/src/languageHandler'; -import { IOpts, privateShouldBeEncrypted } from "matrix-react-sdk/src/createRoom"; +import { IOpts } from "matrix-react-sdk/src/createRoom"; import { getKeyBindingsManager } from "matrix-react-sdk/src/KeyBindingsManager"; import { KeyBindingAction } from "matrix-react-sdk/src/accessibility/KeyboardShortcuts"; -import { HistoryVisibility, ICreateRoomOpts } from "matrix-js-sdk"; +import * as matrixJsSdk from "matrix-js-sdk"; import * as sdk from 'matrix-react-sdk/src/index'; - +import TchapUtils from '../../../util/TchapUtils'; import TchapRoomTypeSelector from "./../elements/TchapRoomTypeSelector"; import { TchapRoomAccessRule, TchapRoomType } from "../../../@types/tchap"; // todo remove unused imports at the end. - - - -export interface ITchapCreateRoomOpts extends ICreateRoomOpts{ - accessRule?:TchapRoomAccessRule +export interface ITchapCreateRoomOpts extends matrixJsSdk.ICreateRoomOpts{ + accessRule?: TchapRoomAccessRule; } interface IProps { @@ -55,10 +51,10 @@ interface IState { name: string; nameIsValid: boolean; tchapRoomType: TchapRoomType; + isFederated: boolean; } export default class TchapCreateRoomDialog extends React.Component { - private nameField = createRef(); constructor(props) { @@ -68,6 +64,7 @@ export default class TchapCreateRoomDialog extends React.Component { - this.setState({ tchapRoomType }); + private onTchapRoomTypeChange = (tchapRoomType: TchapRoomType, isFederated: boolean) => { + this.setState({ tchapRoomType: tchapRoomType, + isFederated: isFederated!==undefined?isFederated:this.state.isFederated }); }; private onNameChange = (ev: ChangeEvent) => { @@ -128,7 +126,10 @@ export default class TchapCreateRoomDialog extends React.Component(resolve => this.setState({}, resolve)); if (this.state.nameIsValid) { - this.props.onFinished(true, this.roomCreateOptions(this.state.name, this.state.tchapRoomType)); + this.props.onFinished(true, this.roomCreateOptions( + this.state.name, + this.state.tchapRoomType, + this.state.isFederated)); } else { let field; if (!this.state.nameIsValid) { @@ -141,7 +142,7 @@ export default class TchapCreateRoomDialog extends React.Component noFederate: Tchap.getShortDomain() === "Agent" ? false : !this.state.federate, - createRoomOpts.creation_content = { 'm.federate': true }; + createRoomOpts.creation_content = { 'm.federate': federate }; - switch(tchapRoomType){ - case TchapRoomType.Forum:{ + switch (tchapRoomType) { + case TchapRoomType.Forum: { //"Forum" only for tchap members and not encrypted createRoomOpts.accessRule = TchapRoomAccessRule.Restricted; createRoomOpts.visibility = Visibility.Public; createRoomOpts.preset = Preset.PublicChat; opts.joinRule = JoinRule.Public; opts.encryption = false; - opts.historyVisibility = HistoryVisibility.Shared; + opts.historyVisibility = matrixJsSdk.HistoryVisibility.Shared; break; } - case TchapRoomType.Private:{ - + case TchapRoomType.Private: { //"Salon", only for tchap member and encrypted createRoomOpts.accessRule = TchapRoomAccessRule.Restricted; createRoomOpts.visibility = Visibility.Private; createRoomOpts.preset = Preset.PrivateChat; - opts.joinRule = JoinRule.Invite + opts.joinRule = JoinRule.Invite; opts.encryption = true; - opts.historyVisibility = HistoryVisibility.Joined; + opts.historyVisibility = matrixJsSdk.HistoryVisibility.Joined; break; } - case TchapRoomType.External:{ - + case TchapRoomType.External: { //open to external and encrypted, - createRoomOpts.accessRule = TchapRoomAccessRule.Unrestricted + createRoomOpts.accessRule = TchapRoomAccessRule.Unrestricted; createRoomOpts.visibility = Visibility.Private; createRoomOpts.preset = Preset.PrivateChat; - opts.joinRule = JoinRule.Invite + opts.joinRule = JoinRule.Invite; opts.encryption = true; - opts.historyVisibility = HistoryVisibility.Joined; + opts.historyVisibility = matrixJsSdk.HistoryVisibility.Joined; break; } } @@ -192,7 +191,8 @@ export default class TchapCreateRoomDialog extends React.Component diff --git a/src/components/views/elements/TchapRoomTypeSelector.tsx b/src/components/views/elements/TchapRoomTypeSelector.tsx index 48ea2aa5f0..78ddf69e81 100644 --- a/src/components/views/elements/TchapRoomTypeSelector.tsx +++ b/src/components/views/elements/TchapRoomTypeSelector.tsx @@ -5,19 +5,22 @@ Copyright 2022 DINUM import React from 'react'; import classNames from "classnames"; import { _t } from 'matrix-react-sdk/src/languageHandler'; +import * as sdk from 'matrix-react-sdk/src/index'; import { TchapRoomType } from "../../../@types/tchap"; -import * as sdk from 'matrix-react-sdk/src/index'; interface IProps { value: TchapRoomType; label: string; width?: number; - onChange(value: TchapRoomType): void; + showFederateSwitch: boolean; + shortDomain: string; + onChange(value: TchapRoomType, isFederated?: boolean): void; } interface IState { roomType: TchapRoomType; + isFederated: boolean; } // todo rename, not a dropdown anymore @@ -27,6 +30,7 @@ export default class TchapRoomTypeSelector extends React.Component { + const isFederated = e; + this.setState({ isFederated: isFederated }); + this.props.onChange(this.state.roomType, isFederated); + }; + public render(): JSX.Element { const StyledRadioButton = sdk.getComponent("elements.StyledRadioButton"); - + const LabelledToggleSwitch = sdk.getComponent("elements.LabelledToggleSwitch"); const ircClasses = classNames("mx_LayoutSwitcher_RadioButton", { mx_LayoutSwitcher_RadioButton_selected: this.state.roomType == TchapRoomType.Private, @@ -52,6 +61,19 @@ export default class TchapRoomTypeSelector extends React.Component + + + ); + } + return
+ { roomFederateOpt } diff --git a/src/util/TchapUtils.ts b/src/util/TchapUtils.ts new file mode 100644 index 0000000000..fd12271f18 --- /dev/null +++ b/src/util/TchapUtils.ts @@ -0,0 +1,29 @@ +import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg'; + +/** + * Tchap utils. + */ + +export default class TchapUtils { + /** + * Return a short value for getDomain(). + * @returns {string} The shortened value of getDomain(). + */ + static getShortDomain() { + const cli = MatrixClientPeg.get(); + const baseDomain = cli.getDomain(); + const domain = baseDomain.split('.tchap.gouv.fr')[0].split('.').reverse().filter(Boolean)[0]; + + return this.capitalize(domain) || 'Tchap'; + } + + /** + * Capitalize a string. + * @param {string} s The sting to capitalize. + * @returns {string} The capitalized string. + * @private + */ + static capitalize(s) { + return s.charAt(0).toUpperCase() + s.slice(1); + } +} From 0a068efff876a45c70f275c22acbb09629d05055 Mon Sep 17 00:00:00 2001 From: Estelle Comment Date: Wed, 20 Apr 2022 15:20:20 +0200 Subject: [PATCH 14/36] Clean up css. --- .../elements/_TchapRoomTypeSelector.scss | 99 +++++++++---------- .../views/elements/TchapRoomTypeSelector.tsx | 41 +++++--- 2 files changed, 71 insertions(+), 69 deletions(-) diff --git a/res/css/views/elements/_TchapRoomTypeSelector.scss b/res/css/views/elements/_TchapRoomTypeSelector.scss index 3596f40528..b199882a00 100644 --- a/res/css/views/elements/_TchapRoomTypeSelector.scss +++ b/res/css/views/elements/_TchapRoomTypeSelector.scss @@ -1,53 +1,46 @@ - .mx_LayoutSwitcher_RadioButtons { - display: flex; - flex-direction: row; - gap: 24px; - - /*color: $primary-content; todo the variables are not available. */ - - > .mx_LayoutSwitcher_RadioButton { - flex-grow: 0; - flex-shrink: 1; - display: flex; - flex-direction: column; - - width: 300px; - min-width: 0; - - /*border: 1px solid $appearance-tab-border-color;*/ - border-radius: 10px; - - .mx_MessageActionBar { - display: none; - } - - .mx_LayoutSwitcher_RadioButton_preview { - flex-grow: 1; - display: flex; - align-items: center; - padding: 10px; - pointer-events: none; - } - - .mx_StyledRadioButton { - flex-grow: 0; - padding: 10px; - } - - &.mx_LayoutSwitcher_RadioButton_selected { - /*border-color: $accent;*/ - } - } - - .mx_StyledRadioButton { - /*border-top: 1px solid $appearance-tab-border-color;*/ - - > input + div { - /*border-color: rgba($muted-fg-color, 0.2);*/ - } - } - - .mx_StyledRadioButton_checked { - /*background-color: rgba($accent, 0.08);*/ - } - } +.tc_TchapRoomTypeSelector_RadioButtons { + display: flex; + flex-direction: column; + gap: 24px; + + >.tc_TchapRoomTypeSelector_RadioButton { + flex-grow: 0; + flex-shrink: 1; + display: flex; + flex-direction: column; + + border-width: 1px; + border-style: solid; + border-radius: 10px; + + .tc_TchapRoomTypeSelector_RadioButton_title { + font-weight: bold; + } + } + + /* todo reuse theme colors */ + .tc_TchapRoomTypeSelector_private { + border-color: red; + .tc_TchapRoomTypeSelector_RadioButton_title { + color: red; + } + } + + .tc_TchapRoomTypeSelector_external { + border-color: orange; + .tc_TchapRoomTypeSelector_RadioButton_title { + color: orange; + } + } + + .tc_TchapRoomTypeSelector_forum { + border-color: green; + .tc_TchapRoomTypeSelector_RadioButton_title { + color: green; + } + } + + .tc_TchapRoomTypeSelector_RadioButton_selected { + border-width: 3px; + } +} \ No newline at end of file diff --git a/src/components/views/elements/TchapRoomTypeSelector.tsx b/src/components/views/elements/TchapRoomTypeSelector.tsx index 85da3a895a..33a56ca7ac 100644 --- a/src/components/views/elements/TchapRoomTypeSelector.tsx +++ b/src/components/views/elements/TchapRoomTypeSelector.tsx @@ -44,25 +44,34 @@ export default class TchapRoomTypeSelector extends React.Component -