diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.scss index 51fa4c4423..ef60f006cc 100644 --- a/res/css/views/elements/_EditableItemList.scss +++ b/res/css/views/elements/_EditableItemList.scss @@ -20,14 +20,21 @@ limitations under the License. } .mx_EditableItem { + display: flex; margin-bottom: 5px; - margin-left: 15px; } .mx_EditableItem_delete { + order: 3; margin-right: 5px; cursor: pointer; vertical-align: middle; + width: 14px; + height: 14px; + mask-image: url('$(res)/img/feather-customised/cancel.svg'); + mask-repeat: no-repeat; + background-color: $warning-color; + mask-size: 100%; } .mx_EditableItem_email { @@ -36,12 +43,19 @@ limitations under the License. .mx_EditableItem_promptText { margin-right: 10px; + order: 2; } .mx_EditableItem_confirmBtn { margin-right: 5px; } +.mx_EditableItem_item { + flex: auto 1 0; + order: 1; +} + .mx_EditableItemList_label { margin-bottom: 5px; } + diff --git a/res/css/views/room_settings/_AliasSettings.scss b/res/css/views/room_settings/_AliasSettings.scss index 294902a1f0..f8d92e7828 100644 --- a/res/css/views/room_settings/_AliasSettings.scss +++ b/res/css/views/room_settings/_AliasSettings.scss @@ -27,6 +27,20 @@ limitations under the License. box-shadow: none; } -.mx_AliasSettings summary { - cursor: pointer; +.mx_AliasSettings { + summary { + cursor: pointer; + color: $accent-color; + font-weight: 600; + list-style: none; + + // list-style doesn't do it for webkit + &::-webkit-details-marker { + display: none; + } + } + + .mx_AliasSettings_localAliasHeader { + margin-top: 35px; + } } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 9727946893..01a1d94956 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -47,11 +47,15 @@ limitations under the License. .mx_SettingsTab_section { margin-bottom: 24px; -} -.mx_SettingsTab_section .mx_SettingsFlag { - margin-right: 100px; - margin-bottom: 10px; + .mx_SettingsFlag { + margin-right: 100px; + margin-bottom: 10px; + } + + &.mx_SettingsTab_subsectionText .mx_SettingsFlag { + margin-right: 0px !important; + } } .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label { diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js index ae3473ef0d..6e649e777a 100644 --- a/src/components/views/elements/EditableItemList.js +++ b/src/components/views/elements/EditableItemList.js @@ -78,8 +78,7 @@ export class EditableItem extends React.Component { return (
- {_t("Remove")} +
{this.props.value}
); diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js index eab41c5ccd..f8e2151c4f 100644 --- a/src/components/views/room_settings/AliasSettings.js +++ b/src/components/views/room_settings/AliasSettings.js @@ -25,6 +25,7 @@ import Field from "../elements/Field"; import ErrorDialog from "../dialogs/ErrorDialog"; import AccessibleButton from "../elements/AccessibleButton"; import Modal from "../../../Modal"; +import RoomPublishSetting from "./RoomPublishSetting"; class EditableAliasesList extends EditableItemList { constructor(props) { @@ -97,6 +98,7 @@ export default class AliasSettings extends React.Component { canonicalAlias: null, // #canonical:domain.tld updatingCanonicalAlias: false, localAliasesLoading: false, + detailsOpen: false, }; if (props.canonicalAliasEvent) { @@ -267,6 +269,7 @@ export default class AliasSettings extends React.Component { this.loadLocalAliases(); } } + this.setState({detailsOpen: event.target.open}); }; onCanonicalAliasChange = (event) => { @@ -346,16 +349,18 @@ export default class AliasSettings extends React.Component { onItemAdded={this.onLocalAliasAdded} onItemRemoved={this.onLocalAliasDeleted} noItemsLabel={_t('This room has no local addresses')} - placeholder={_t( - 'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain}, - )} + placeholder={_t('Local address')} domain={localDomain} />); } return (
+ {_t("Published Addresses")} +

{_t("Published addresses can be used by anyone on any server to join your room. " + + "To publish an address, it needs to be set as a local address first.")}

{canonicalAliasSection} + {this._getLocalNonAltAliases().map(alias => { return
diff --git a/src/components/views/room_settings/RoomPublishSetting.js b/src/components/views/room_settings/RoomPublishSetting.js new file mode 100644 index 0000000000..bac2dfc656 --- /dev/null +++ b/src/components/views/room_settings/RoomPublishSetting.js @@ -0,0 +1,60 @@ +/* +Copyright 2020 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 from 'react'; +import LabelledToggleSwitch from "../elements/LabelledToggleSwitch"; +import {_t} from "../../../languageHandler"; +import {MatrixClientPeg} from "../../../MatrixClientPeg"; + +export default class RoomPublishSetting extends React.PureComponent { + constructor(props) { + super(props); + this.state = {isRoomPublished: false}; + } + + onRoomPublishChange = (e) => { + const valueBefore = this.state.isRoomPublished; + const newValue = !valueBefore; + this.setState({isRoomPublished: newValue}); + const client = MatrixClientPeg.get(); + + client.setRoomDirectoryVisibility( + this.props.roomId, + newValue ? 'public' : 'private', + ).catch(() => { + // Roll back the local echo on the change + this.setState({isRoomPublished: valueBefore}); + }); + }; + + componentDidMount() { + const client = MatrixClientPeg.get(); + client.getRoomDirectoryVisibility(this.props.roomId).then((result => { + this.setState({isRoomPublished: result.visibility === 'public'}); + })); + } + + render() { + const client = MatrixClientPeg.get(); + + return (); + } +} diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js index b65f8d49a4..99882ae400 100644 --- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js +++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js @@ -21,7 +21,6 @@ import RoomProfileSettings from "../../../room_settings/RoomProfileSettings"; import * as sdk from "../../../../.."; import AccessibleButton from "../../../elements/AccessibleButton"; import dis from "../../../../../dispatcher"; -import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import MatrixClientContext from "../../../../../contexts/MatrixClientContext"; export default class GeneralRoomSettingsTab extends React.Component { @@ -39,26 +38,6 @@ export default class GeneralRoomSettingsTab extends React.Component { }; } - componentWillMount() { - this.context.getRoomDirectoryVisibility(this.props.roomId).then((result => { - this.setState({isRoomPublished: result.visibility === 'public'}); - })); - } - - onRoomPublishChange = (e) => { - const valueBefore = this.state.isRoomPublished; - const newValue = !valueBefore; - this.setState({isRoomPublished: newValue}); - - this.context.setRoomDirectoryVisibility( - this.props.roomId, - newValue ? 'public' : 'private', - ).catch(() => { - // Roll back the local echo on the change - this.setState({isRoomPublished: valueBefore}); - }); - }; - _onLeaveClick = () => { dis.dispatch({ action: 'leave_room', @@ -75,7 +54,6 @@ export default class GeneralRoomSettingsTab extends React.Component { const room = client.getRoom(this.props.roomId); const canSetAliases = true; // Previously, we arbitrarily only allowed admins to do this - const canActuallySetAliases = room.currentState.mayClientSendStateEvent("m.room.aliases", client); const canSetCanonical = room.currentState.mayClientSendStateEvent("m.room.canonical_alias", client); const canonicalAliasEv = room.currentState.getStateEvents("m.room.canonical_alias", ''); const aliasEvents = room.currentState.getStateEvents("m.room.aliases"); @@ -90,21 +68,13 @@ export default class GeneralRoomSettingsTab extends React.Component {
- {_t("Room Addresses")} +
{_t("Room Addresses")}
-
- -
- +
{_t("Other")}
{_t("Flair")}
Learn more.": "This room isn’t bridging messages to any platforms. Learn more.", "Bridges": "Bridges", "Room Addresses": "Room Addresses", - "Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?", "URL Previews": "URL Previews", "Uploaded sound": "Uploaded sound", "Sounds": "Sounds", @@ -1163,11 +1162,14 @@ "Main address": "Main address", "not specified": "not specified", "This room has no local addresses": "This room has no local addresses", - "New address (e.g. #foo:%(localDomain)s)": "New address (e.g. #foo:%(localDomain)s)", - "Alternative addresses for this room:": "Alternative addresses for this room:", - "This room has no alternative addresses": "This room has no alternative addresses", - "New address (e.g. #foo:domain)": "New address (e.g. #foo:domain)", - "Local addresses (unmoderated content)": "Local addresses (unmoderated content)", + "Local address": "Local address", + "Published Addresses": "Published Addresses", + "Published addresses can be used by anyone on any server to join your room. To publish an address, it needs to be set as a local address first.": "Published addresses can be used by anyone on any server to join your room. To publish an address, it needs to be set as a local address first.", + "Other published addresses:": "Other published addresses:", + "No other published addresses yet, add one below": "No other published addresses yet, add one below", + "New published address (e.g. #alias:server)": "New published address (e.g. #alias:server)", + "Local Addresses": "Local Addresses", + "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)": "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", "Error updating flair": "Error updating flair", "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.": "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.", "Invalid community ID": "Invalid community ID", @@ -1178,6 +1180,7 @@ "Room Name": "Room Name", "Room Topic": "Room Topic", "Room avatar": "Room avatar", + "Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?", "You have enabled URL previews by default.": "You have enabled URL previews by default.", "You have disabled URL previews by default.": "You have disabled URL previews by default.", "URL previews are enabled by default for participants in this room.": "URL previews are enabled by default for participants in this room.",