Fixed settings dialog header; Adjust padding on dialog

Some recent changes to dialogs changed how this works and altered the look of the settings dialogs. This fixes that and makes it so that the header and content scroll independently.

Fixes https://github.com/vector-im/riot-web/issues/8329
Fixes https://github.com/vector-im/riot-web/issues/8328

res/css/structures/_TabbedView.scss

@@ -17,17 +17,21 @@ limitations under the License.
 
 .mx_TabbedView {
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 58px;
     display: flex;
-    width: 100%;
-    height: 100%;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 .mx_TabbedView_tabLabels {
     width: 150px;
     max-width: 150px;
-    height: 100%;
     color: $tab-label-fg-color;
+    position: fixed;
 }
 
 .mx_TabbedView_tabLabel {
@@ -82,13 +86,15 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabPanel {
-    width: calc(100% - 320px);
-    display: inline-block;
-    margin-left: 70px;
+    margin-left: 220px; // 150px sidebar + 70px padding
     flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .mx_TabbedView_tabPanelContent {
     flex-grow: 1;
-    min-width: 560px;
+    overflow: auto;
+    min-height: 0; // firefox
+
 }

res/css/views/dialogs/_SettingsDialog.scss

@@ -15,56 +15,31 @@ limitations under the License.
 */
 
 .mx_SettingsDialog {
-  .mx_Dialog {
-    max-width: 784px; // 900px - 58px (left padding) - 58px (right padding)
-    width: 80%;
-    height: 80%;
-    border-radius: 4px;
+    .mx_Dialog {
+        max-width: 900px;
+        width: 80%;
+        height: 80%;
+        border-radius: 4px;
+        padding-top: 0;
+        padding-right: 0;
+        padding-left: 0;
 
-    .mx_TabbedView_tabLabels {
-      // Force the sidebar to be always visible, letting the rest of the content scroll
-      position: fixed;
-    }
+        .mx_TabbedView {
+            top: 65px;
+        }
 
-    .mx_TabbedView_tabPanel {
-      max-width: 485px;
-      margin-left: 206px; // 70px margin + 136px for the sidebar
-    }
+        .mx_TabbedView .mx_SettingsTab {
+            max-width: calc(100% - 130px); // 130px right hand padding
 
-    .mx_SettingsDialog_header {
-      font-size: 24px;
-      display: block;
-      text-align: center;
-      color: $dialog-title-fg-color;
-      margin-top: 16px;
-      margin-bottom: 24px;
-      padding: 0;
-    }
+            // Put some padding on the bottom to avoid the settings tab from
+            // colliding harshly with the dialog when scrolled down.
+            padding-bottom: 100px;
+        }
 
-    .mx_SettingsDialog_close {
-      position: absolute;
-      top: 16px;
-      right: 25px;
+        .mx_Dialog_title {
+            text-align: center;
+            margin-top: 16px;
+            margin-bottom: 24px;
+        }
     }
-
-    .mx_SettingsDialog_closeIcon {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
-    }
-
-    .mx_SettingsDialog_closeIcon:before {
-      mask: url('$(res)/img/feather-icons/cancel.svg');
-      background-color: $dialog-close-fg-color;
-      mask-repeat: no-repeat;
-      mask-size: 16px;
-      mask-position: center;
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-  }
 }

src/components/structures/TabbedView.js

@@ -97,7 +97,9 @@ export class TabbedView extends React.Component {
     _renderTabPanel(tab) {
         return (
             <div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
-                {tab.body}
+                <div className='mx_TabbedView_tabPanelContent'>
+                    {tab.body}
+                </div>
             </div>
         );
     }

src/components/views/dialogs/RoomSettingsDialog.js

@@ -19,11 +19,11 @@ import PropTypes from 'prop-types';
 import {Tab, TabbedView} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import AdvancedRoomSettingsTab from "../settings/tabs/AdvancedRoomSettingsTab";
-import AccessibleButton from "../elements/AccessibleButton";
 import dis from '../../../dispatcher';
 import RolesRoomSettingsTab from "../settings/tabs/RolesRoomSettingsTab";
 import GeneralRoomSettingsTab from "../settings/tabs/GeneralRoomSettingsTab";
 import SecurityRoomSettingsTab from "../settings/tabs/SecurityRoomSettingsTab";
+import sdk from "../../../index";
 
 // TODO: Ditch this whole component
 export class TempTab extends React.Component {
@@ -93,16 +93,15 @@ export default class RoomSettingsDialog extends React.Component {
     }
 
     render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+
         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>
+            <BaseDialog className='mx_RoomSettingsDialog' hasCancel={true}
+                        onFinished={this.props.onFinished} title={_t("Room Settings")}>
+                <div className='ms_SettingsDialog_content'>
+                    <TabbedView tabs={this._getTabs()} />
                 </div>
-                <TabbedView tabs={this._getTabs()} />
-            </div>
+            </BaseDialog>
         );
     }
 }

src/components/views/dialogs/UserSettingsDialog.js

@@ -18,7 +18,6 @@ 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 GeneralUserSettingsTab from "../settings/tabs/GeneralUserSettingsTab";
 import dis from '../../../dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -29,6 +28,7 @@ import PreferencesSettingsTab from "../settings/tabs/PreferencesSettingsTab";
 import VoiceSettingsTab from "../settings/tabs/VoiceSettingsTab";
 import HelpSettingsTab from "../settings/tabs/HelpSettingsTab";
 import FlairSettingsTab from "../settings/tabs/FlairSettingsTab";
+import sdk from "../../../index";
 
 // TODO: Ditch this whole component
 export class TempTab extends React.Component {
@@ -106,16 +106,15 @@ export default class UserSettingsDialog extends React.Component {
     }
 
     render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+
         return (
-            <div className="mx_UserSettingsDialog">
-                <div className="mx_SettingsDialog_header">
-                    {_t("Settings")}
-                    <span className="mx_SettingsDialog_close">
-                        <AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
-                    </span>
+            <BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
+                        onFinished={this.props.onFinished} title={_t("Settings")}>
+                <div className='ms_SettingsDialog_content'>
+                    <TabbedView tabs={this._getTabs()} />
                 </div>
-                <TabbedView tabs={this._getTabs()} />
-            </div>
+            </BaseDialog>
         );
     }
 }

src/i18n/strings/en_EN.json

@@ -1074,6 +1074,7 @@
     "Report bugs & give feedback": "Report bugs & give feedback",
     "Go back": "Go back",
     "Visit old settings": "Visit old settings",
+    "Room Settings": "Room 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",