Merge pull request #2510 from matrix-org/travis/rsettings/tabify

Initial structure for new room settings

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";

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;
 }

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');
+}

res/img/feather-icons/users-sm.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
+        <path d="M9.455 11V9.778c0-1.35-1.059-2.445-2.364-2.445H2.364C1.058 7.333 0 8.428 0 9.778V11"/>
+        <ellipse cx="4.727" cy="2.444" rx="2.364" ry="2.444"/>
+        <path d="M13 11V9.778c0-1.114-.73-2.087-1.773-2.365M8.864.08C9.909.355 10.64 1.33 10.64 2.446c0 1.117-.732 2.092-1.777 2.369"/>
+    </g>
+</svg>

res/img/feather-icons/warning-triangle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M6.018 1.532l-4.864 7.81c-.204.34-.205.76-.003 1.1.202.341.577.554.985.558h9.728c.408-.004.783-.217.985-.558.202-.34.201-.76-.003-1.1l-4.864-7.81A1.159 1.159 0 0 0 7 1c-.401 0-.774.202-.982.532zM7 3v4"/>
+    </g>
+</svg>

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 <div>Hello World</div>;
+    }
+}
+
+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",
+            <div>General Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Security & Privacy"),
+            "mx_RoomSettingsDialog_securityIcon",
+            <div>Security Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Roles & Permissions"),
+            "mx_RoomSettingsDialog_rolesIcon",
+            <div>Roles Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Advanced"),
+            "mx_RoomSettingsDialog_warningIcon",
+            <div>Advanced Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Visit old settings"),
+            "mx_RoomSettingsDialog_warningIcon",
+            <TempTab onClose={this.props.onFinished} />,
+        ));
+
+        return tabs;
+    }
+
+    render() {
+        return (
+            <div className="mx_RoomSettingsDialog">
+                <div className="mx_SettingsDialog_header">
+                    {_t("Settings")}
+                    <span className="mx_SettingsDialog_close">
+                        <AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
+                    </span>
+                </div>
+                <TabbedView tabs={this._getTabs()} />
+            </div>
+        );
+    }
+}

src/i18n/strings/en_EN.json

@@ -1038,6 +1038,8 @@
     "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.": "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> 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!",

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,
                 });