Merge pull request #5522 from SimonBrandner/room-dialog-fixes

Fixes for the general tab in the room dialog

res/css/views/settings/_ProfileSettings.scss

@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_ProfileSettings_controls_topic {
+    & > textarea {
+        resize: vertical;
+    }
+}
+
 .mx_ProfileSettings_profile {
     display: flex;
 }

src/components/views/elements/EditableItemList.js

@@ -124,7 +124,7 @@ export default class EditableItemList extends React.Component {
                 <Field label={this.props.placeholder} type="text"
                        autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
                        list={this.props.suggestionsListId} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit">
+                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit" disabled={!this.props.newItem}>
                     {_t("Add")}
                 </AccessibleButton>
             </form>

src/components/views/room_settings/RoomProfileSettings.js

@@ -120,17 +120,21 @@ export default class RoomProfileSettings extends React.Component {
     };
 
     _onDisplayNameChanged = (e) => {
-        this.setState({
+        this.setState({displayName: e.target.value});
-            displayName: e.target.value,
+        if (this.state.originalDisplayName === e.target.value) {
-            enableProfileSave: true,
+            this.setState({enableProfileSave: false});
-        });
+        } else {
+            this.setState({enableProfileSave: true});
+        }
     };
 
     _onTopicChanged = (e) => {
-        this.setState({
+        this.setState({topic: e.target.value});
-            topic: e.target.value,
+        if (this.state.originalTopic === e.target.value) {
-            enableProfileSave: true,
+            this.setState({enableProfileSave: false});
-        });
+        } else {
+            this.setState({enableProfileSave: true});
+        }
     };
 
     _onAvatarChanged = (e) => {
@@ -158,31 +162,10 @@ export default class RoomProfileSettings extends React.Component {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
-        return (
+
-            <form
+        let profileSettingsButtons;
-                onSubmit={this._saveProfile}
+        if (this.state.canSetTopic && this.state.canSetName) {
-                autoComplete="off"
+            profileSettingsButtons = (
-                noValidate={true}
-                className="mx_ProfileSettings_profileForm"
-            >
-                <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
-                       onChange={this._onAvatarChanged} accept="image/*" />
-                <div className="mx_ProfileSettings_profile">
-                    <div className="mx_ProfileSettings_controls">
-                        <Field label={_t("Room Name")}
-                               type="text" value={this.state.displayName} autoComplete="off"
-                               onChange={this._onDisplayNameChanged} disabled={!this.state.canSetName} />
-                        <Field id="profileTopic" label={_t("Room Topic")} disabled={!this.state.canSetTopic}
-                               type="text" value={this.state.topic} autoComplete="off"
-                               onChange={this._onTopicChanged} element="textarea" />
-                    </div>
-                    <AvatarSetting
-                        avatarUrl={this.state.avatarUrl}
-                        avatarName={this.state.displayName || this.props.roomId}
-                        avatarAltText={_t("Room avatar")}
-                        uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
-                        removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />
-                </div>
                 <div className="mx_ProfileSettings_buttons">
                     <AccessibleButton
                         onClick={this._clearProfile}
@@ -199,6 +182,35 @@ export default class RoomProfileSettings extends React.Component {
                         {_t("Save")}
                     </AccessibleButton>
                 </div>
+            );
+        }
+
+        return (
+            <form
+                onSubmit={this._saveProfile}
+                autoComplete="off"
+                noValidate={true}
+                className="mx_ProfileSettings_profileForm"
+            >
+                <input type="file" ref={this._avatarUpload} className="mx_ProfileSettings_avatarUpload"
+                       onChange={this._onAvatarChanged} accept="image/*" />
+                <div className="mx_ProfileSettings_profile">
+                    <div className="mx_ProfileSettings_controls">
+                        <Field label={_t("Room Name")}
+                               type="text" value={this.state.displayName} autoComplete="off"
+                               onChange={this._onDisplayNameChanged} disabled={!this.state.canSetName} />
+                        <Field className="mx_ProfileSettings_controls_topic" id="profileTopic" label={_t("Room Topic")} disabled={!this.state.canSetTopic}
+                               type="text" value={this.state.topic} autoComplete="off"
+                               onChange={this._onTopicChanged} element="textarea" />
+                    </div>
+                    <AvatarSetting
+                        avatarUrl={this.state.avatarUrl}
+                        avatarName={this.state.displayName || this.props.roomId}
+                        avatarAltText={_t("Room avatar")}
+                        uploadAvatar={this.state.canSetAvatar ? this._uploadAvatar : undefined}
+                        removeAvatar={this.state.canSetAvatar ? this._removeAvatar : undefined} />
+                </div>
+                { profileSettingsButtons }
             </form>
         );
     }

src/components/views/settings/AvatarSetting.js

@@ -65,7 +65,7 @@ const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, remo
 
     const avatarClasses = classNames({
         "mx_AvatarSetting_avatar": true,
-        "mx_AvatarSetting_avatar_hovering": isHovering,
+        "mx_AvatarSetting_avatar_hovering": isHovering && uploadAvatar,
     });
     return <div className={avatarClasses}>
         {avatarElement}