Merge pull request #2549 from matrix-org/travis/settings/fixes-2

Fixed settings dialog header; Adjust padding on dialog

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,14 @@ 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,32 @@ 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 {
+            box-sizing: border-box;
+            padding-right: 130px;
 
-    .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",