Implement the "general" tab of new room settings

res/css/_components.scss

@@ -139,7 +139,8 @@
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";
-@import "./views/settings/tabs/_GeneralSettingsTab.scss";
+@import "./views/settings/tabs/_GeneralRoomSettingsTab.scss";
+@import "./views/settings/tabs/_GeneralUserSettingsTab.scss";
 @import "./views/settings/tabs/_HelpSettingsTab.scss";
 @import "./views/settings/tabs/_PreferencesSettingsTab.scss";
 @import "./views/settings/tabs/_SecuritySettingsTab.scss";

res/css/views/elements/_Field.scss

@@ -22,7 +22,8 @@ limitations under the License.
 }
 
 .mx_Field input,
-.mx_Field select {
+.mx_Field select,
+.mx_Field textarea {
     font-weight: normal;
     font-family: $font-family;
     border-radius: 4px;
@@ -32,17 +33,20 @@ limitations under the License.
 }
 
 .mx_Field input:focus,
-.mx_Field select:focus {
+.mx_Field select:focus,
+.mx_Field textarea:focus {
     outline: 0;
     border-color: $input-focused-border-color;
 }
 
-.mx_Field input::placeholder {
+.mx_Field input::placeholder,
+.mx_Field textarea::placeholder {
     transition: color 0.25s ease-in 0s;
     color: transparent;
 }
 
-.mx_Field input:placeholder-shown:focus::placeholder {
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field textarea:placeholder-shown:focus::placeholder {
     transition: color 0.25s ease-in 0.1s;
     color: $greyed-fg-color;
 }
@@ -65,6 +69,8 @@ limitations under the License.
 
 .mx_Field input:focus + label,
 .mx_Field input:not(:placeholder-shown) + label,
+.mx_Field textarea:focus + label,
+.mx_Field textarea:not(:placeholder-shown) + label,
 .mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
     transition:
         font-size 0.25s ease-out 0s,
@@ -77,7 +83,8 @@ limitations under the License.
 }
 
 .mx_Field input:focus + label,
-.mx_Field select:focus + label {
+.mx_Field select:focus + label,
+.mx_Field textarea:focus + label {
     color: $input-focused-border-color;
 }
 

res/css/views/settings/_ProfileSettings.scss

@@ -22,10 +22,19 @@ limitations under the License.
   flex-grow: 1;
 }
 
-.mx_ProfileSettings_controls .mx_Field #profileDisplayName {
+.mx_ProfileSettings_controls .mx_Field #profileDisplayName,
+.mx_ProfileSettings_controls .mx_Field #profileTopic {
   width: calc(100% - 20px); // subtract 10px padding on left and right
 }
 
+.mx_ProfileSettings_controls .mx_Field #profileTopic {
+  height: 4em;
+}
+
+.mx_ProfileSettings_controls .mx_Field:first-child {
+  margin-top: 0;
+}
+
 .mx_ProfileSettings_avatar {
   width: 88px;
   height: 88px;
@@ -41,6 +50,10 @@ limitations under the License.
   border-radius: 4px;
 }
 
+.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
+  cursor: default;
+}
+
 .mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
   background-color: $settings-profile-placeholder-bg-color;
 }
@@ -57,7 +70,7 @@ limitations under the License.
   font-size: 10px;
 }
 
-.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay {
+.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
   display: inline-block;
   opacity: 0.5 !important;
   color: $settings-profile-overlay-fg-color !important;
@@ -77,6 +90,11 @@ limitations under the License.
   margin-bottom: 8px;
 }
 
+.mx_ProfileSettings_noAvatarText {
+  display: block;
+  margin: 34px auto auto;
+}
+
 .mx_ProfileSettings_avatarOverlayImgContainer {
   position: relative;
   width: 14px;

res/css/views/settings/tabs/_GeneralRoomSettingsTab.scss

@@ -0,0 +1,23 @@
+/*
+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.
+*/
+
+.mx_GeneralRoomSettingsTab_profileSection {
+  margin-top: 10px;
+}
+
+.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select {
+  width: 100%;
+}

res/css/views/settings/tabs/_GeneralSettingsTab.scss → res/css/views/settings/tabs/_GeneralUserSettingsTab.scss

@@ -14,33 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralSettingsTab_changePassword,
-.mx_GeneralSettingsTab_themeSection {
+.mx_GeneralUserSettingsTab_changePassword,
+.mx_GeneralUserSettingsTab_themeSection {
   display: block;
 }
 
-.mx_GeneralSettingsTab_changePassword .mx_Field,
-.mx_GeneralSettingsTab_themeSection .mx_Field {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field,
+.mx_GeneralUserSettingsTab_themeSection .mx_Field {
   display: block;
   margin-right: 100px; // Align with the other fields on the page
 }
 
-.mx_GeneralSettingsTab_changePassword .mx_Field input {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field input {
   display: block;
   width: calc(100% - 20px); // subtract 10px padding on left and right
 }
 
-.mx_GeneralSettingsTab_changePassword .mx_Field:first-child {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
   margin-top: 0;
 }
 
-.mx_GeneralSettingsTab_themeSection .mx_Field select {
+.mx_GeneralUserSettingsTab_themeSection .mx_Field select {
   display: block;
   width: 100%;
 }
 
-.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses,
-.mx_GeneralSettingsTab_accountSection > .mx_PhoneNumbers,
-.mx_GeneralSettingsTab_languageInput {
+.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
+.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
+.mx_GeneralUserSettingsTab_languageInput {
   margin-right: 100px; // Align with the other fields on the page
 }

src/components/structures/MatrixChat.js

@@ -1054,6 +1054,7 @@ export default React.createClass({
                         modal.close();
                         if (this.state.currentRoomId === roomId) {
                             dis.dispatch({action: 'view_next_room'});
+                            dis.dispatch({action: 'close_room_settings'});
                         }
                     }, (err) => {
                         modal.close();

src/components/views/dialogs/RoomSettingsDialog.js

@@ -20,6 +20,7 @@ import {Tab, TabbedView} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import dis from '../../../dispatcher';
+import GeneralRoomSettingsTab from "../settings/tabs/GeneralRoomSettingsTab";
 
 // TODO: Ditch this whole component
 export class TempTab extends React.Component {
@@ -37,18 +38,32 @@ export class TempTab extends React.Component {
     }
 }
 
-export default class UserSettingsDialog extends React.Component {
+export default class RoomSettingsDialog extends React.Component {
     static propTypes = {
+        roomId: PropTypes.string.isRequired,
         onFinished: PropTypes.func.isRequired,
     };
 
+    componentWillMount(): void {
+        this.dispatcherRef = dis.register(this._onAction);
+    }
+
+    componentWillUnmount(): void {
+        dis.unregister(this.dispatcherRef);
+    }
+
+    _onAction = (payload) => {
+        if (payload.action !== 'close_room_settings') return;
+        this.props.onFinished();
+    };
+
     _getTabs() {
         const tabs = [];
 
         tabs.push(new Tab(
             _td("General"),
             "mx_RoomSettingsDialog_settingsIcon",
-            <div>General Test</div>,
+            <GeneralRoomSettingsTab roomId={this.props.roomId} />,
         ));
         tabs.push(new Tab(
             _td("Security & Privacy"),

src/components/views/dialogs/UserSettingsDialog.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import {Tab, TabbedView} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
-import GeneralSettingsTab from "../settings/tabs/GeneralSettingsTab";
+import GeneralUserSettingsTab from "../settings/tabs/GeneralUserSettingsTab";
 import dis from '../../../dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import LabsSettingsTab from "../settings/tabs/LabsSettingsTab";
@@ -57,7 +57,7 @@ export default class UserSettingsDialog extends React.Component {
         tabs.push(new Tab(
             _td("General"),
             "mx_UserSettingsDialog_settingsIcon",
-            <GeneralSettingsTab />,
+            <GeneralUserSettingsTab />,
         ));
         tabs.push(new Tab(
             _td("Flair"),

src/components/views/elements/EditableItemList.js

@@ -76,6 +76,7 @@ const EditableItem = React.createClass({
     },
 });
 
+// TODO: Make this use the new Field element
 module.exports = React.createClass({
     displayName: 'EditableItemList',
 

src/components/views/room_settings/AliasSettings.js

@@ -22,6 +22,7 @@ const ObjectUtils = require("../../../ObjectUtils");
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
 import { _t } from '../../../languageHandler';
+import Field from "../elements/Field";
 const Modal = require("../../../Modal");
 
 module.exports = React.createClass({
@@ -222,7 +223,8 @@ module.exports = React.createClass({
             let found = false;
             const canonicalValue = this.state.canonicalAlias || "";
             canonical_alias_section = (
-                <select onChange={this.onCanonicalAliasChange} value={canonicalValue}>
+                <Field onChange={this.onCanonicalAliasChange} value={canonicalValue}
+                       element='select' id='canonicalAlias' label={_t('Main address')}>
                     <option value="" key="unset">{ _t('not specified') }</option>
                     {
                         Object.keys(self.state.domainToAliases).map((domain, i) => {
@@ -242,7 +244,7 @@ module.exports = React.createClass({
                             { this.state.canonicalAlias }
                         </option>
                     }
-                </select>
+                </Field>
             );
         } else {
             canonical_alias_section = (
@@ -277,11 +279,8 @@ module.exports = React.createClass({
         }
 
         return (
-            <div>
-                <h3>{ _t('Addresses') }</h3>
-                <div className="mx_RoomSettings_aliasLabel">
-                    { _t('The main address for this room is') }: { canonical_alias_section }
-                </div>
+            <div className='mx_AliasSettings'>
+                {canonical_alias_section}
                 <EditableItemList
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}

src/components/views/room_settings/RelatedGroupSettings.js

@@ -119,7 +119,6 @@ module.exports = React.createClass({
         const localDomain = this.context.matrixClient.getDomain();
         const EditableItemList = sdk.getComponent('elements.EditableItemList');
         return <div>
-            <h3>{ _t('Flair') }</h3>
             <EditableItemList
                 items={this.state.newGroupsList}
                 className={"mx_RelatedGroupSettings"}