diff --git a/res/css/_components.scss b/res/css/_components.scss index 11baf7fee7..91e6fa8685 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -52,6 +52,7 @@ @import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_GroupAddressPicker.scss"; @import "./views/dialogs/_RestoreKeyBackupDialog.scss"; +@import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss"; @import "./views/dialogs/_SetEmailDialog.scss"; @import "./views/dialogs/_SetMxIdDialog.scss"; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 1118ac7aea..d1a448711a 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -24,8 +24,8 @@ limitations under the License. } .mx_TabbedView_tabLabels { - width: 136px; - max-width: 136px; + width: 150px; + max-width: 150px; height: 100%; color: $tab-label-fg-color; } @@ -37,7 +37,7 @@ limitations under the License. border-radius: 3px; font-size: 12px; font-weight: 600; - height: 20px; + min-height: 20px; // use min-height instead of height to allow the label to overflow a bit margin-bottom: 6px; position: relative; } diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss new file mode 100644 index 0000000000..f255bb38f0 --- /dev/null +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -0,0 +1,34 @@ +/* +Copyright 2019 New Vector Ltd. + +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. +*/ + +// ICONS +// ========================================================== + +.mx_RoomSettingsDialog_settingsIcon:before { + mask-image: url('$(res)/img/feather-icons/settings.svg'); +} + +.mx_RoomSettingsDialog_securityIcon:before { + mask-image: url('$(res)/img/feather-icons/lock.svg'); +} + +.mx_RoomSettingsDialog_rolesIcon:before { + mask-image: url('$(res)/img/feather-icons/users-sm.svg'); +} + +.mx_RoomSettingsDialog_warningIcon:before { + mask-image: url('$(res)/img/feather-icons/warning-triangle.svg'); +} diff --git a/res/img/feather-icons/users-sm.svg b/res/img/feather-icons/users-sm.svg new file mode 100644 index 0000000000..6098be38c3 --- /dev/null +++ b/res/img/feather-icons/users-sm.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/feather-icons/warning-triangle.svg b/res/img/feather-icons/warning-triangle.svg new file mode 100644 index 0000000000..02196cbf43 --- /dev/null +++ b/res/img/feather-icons/warning-triangle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js new file mode 100644 index 0000000000..ce834d564e --- /dev/null +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -0,0 +1,90 @@ +/* +Copyright 2019 New Vector Ltd + +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 PropTypes from 'prop-types'; +import {Tab, TabbedView} from "../../structures/TabbedView"; +import {_t, _td} from "../../../languageHandler"; +import AccessibleButton from "../elements/AccessibleButton"; +import dis from '../../../dispatcher'; + +// TODO: Ditch this whole component +export class TempTab extends React.Component { + static propTypes = { + onClose: PropTypes.func.isRequired, + }; + + componentDidMount(): void { + dis.dispatch({action: "open_old_room_settings"}); + this.props.onClose(); + } + + render() { + return
Hello World
; + } +} + +export default class UserSettingsDialog extends React.Component { + static propTypes = { + onFinished: PropTypes.func.isRequired, + }; + + _getTabs() { + const tabs = []; + + tabs.push(new Tab( + _td("General"), + "mx_RoomSettingsDialog_settingsIcon", +
General Test
, + )); + tabs.push(new Tab( + _td("Security & Privacy"), + "mx_RoomSettingsDialog_securityIcon", +
Security Test
, + )); + tabs.push(new Tab( + _td("Roles & Permissions"), + "mx_RoomSettingsDialog_rolesIcon", +
Roles Test
, + )); + tabs.push(new Tab( + _td("Advanced"), + "mx_RoomSettingsDialog_warningIcon", +
Advanced Test
, + )); + tabs.push(new Tab( + _td("Visit old settings"), + "mx_RoomSettingsDialog_warningIcon", + , + )); + + return tabs; + } + + render() { + return ( +
+
+ {_t("Settings")} + + + +
+ +
+ ); + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a71a1b265f..1d88db5397 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1038,6 +1038,8 @@ "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.": "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.", "Report bugs & give feedback": "Report bugs & give feedback", "Go back": "Go back", + "Roles & Permissions": "Roles & Permissions", + "Visit old settings": "Visit old settings", "Failed to upgrade room": "Failed to upgrade room", "The room upgrade could not be completed": "The room upgrade could not be completed", "Upgrade this room to version %(version)s": "Upgrade this room to version %(version)s", @@ -1088,7 +1090,6 @@ "Room contains unknown devices": "Room contains unknown devices", "\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.", "Unknown devices": "Unknown devices", - "Visit old settings": "Visit old settings", "Unable to load backup status": "Unable to load backup status", "Unable to restore backup": "Unable to restore backup", "No backup found!": "No backup found!", diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js index 9e048e5d8e..036a7c04fc 100644 --- a/src/stores/RoomViewStore.js +++ b/src/stores/RoomViewStore.js @@ -20,6 +20,7 @@ import MatrixClientPeg from '../MatrixClientPeg'; import sdk from '../index'; import Modal from '../Modal'; import { _t } from '../languageHandler'; +import SettingsStore from "../settings/SettingsStore"; const INITIAL_STATE = { // Whether we're joining the currently viewed room (see isJoining()) @@ -119,6 +120,16 @@ class RoomViewStore extends Store { }); break; case 'open_room_settings': + if (SettingsStore.isFeatureEnabled("feature_tabbed_settings")) { + const RoomSettingsDialog = sdk.getComponent("dialogs.RoomSettingsDialog"); + Modal.createTrackedDialog('Room settings', '', RoomSettingsDialog, {}, 'mx_SettingsDialog'); + } else { + this._setState({ + isEditingSettings: true, + }); + } + break; + case 'open_old_room_settings': this._setState({ isEditingSettings: true, });