Merge pull request #2501 from matrix-org/travis/settings/dialog-size

Have the settings dialog be fixed in size

res/css/_components.scss

@@ -56,6 +56,7 @@
 @import "./views/dialogs/_SetEmailDialog.scss";
 @import "./views/dialogs/_SetMxIdDialog.scss";
 @import "./views/dialogs/_SetPasswordDialog.scss";
+@import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";

res/css/structures/_TabbedView.scss

@@ -25,6 +25,7 @@ limitations under the License.
 
 .mx_TabbedView_tabLabels {
   width: 136px;
+  max-width: 136px;
   height: 100%;
   color: $tab-label-fg-color;
 }

res/css/views/dialogs/_SettingsDialog.scss

@@ -0,0 +1,70 @@
+/*
+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_SettingsDialog {
+  .mx_Dialog {
+    max-width: 784px; // 900px - 58px (left padding) - 58px (right padding)
+    width: 80%;
+    height: 80%;
+    border-radius: 4px;
+
+    .mx_TabbedView_tabLabels {
+      // Force the sidebar to be always visible, letting the rest of the content scroll
+      position: fixed;
+    }
+
+    .mx_TabbedView_tabPanel {
+      max-width: 485px;
+      margin-left: 206px; // 70px margin + 136px for the sidebar
+    }
+
+    .mx_SettingsDialog_header {
+      font-size: 24px;
+      display: block;
+      text-align: center;
+      color: $dialog-title-fg-color;
+      margin-top: 16px;
+      margin-bottom: 24px;
+      padding: 0;
+    }
+
+    .mx_SettingsDialog_close {
+      position: absolute;
+      top: 16px;
+      right: 25px;
+    }
+
+    .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;
+    }
+  }
+}

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -1,39 +1,18 @@
-.mx_UserSettingsDialog_header {
+/*
-  font-size: 24px;
+Copyright 2019 New Vector Ltd.
-  display: block;
-  text-align: center;
-  color: $dialog-title-fg-color;
-  margin-top: 16px;
-  margin-bottom: 24px;
-  padding: 0;
-}
 
-.mx_UserSettingsDialog_close {
+Licensed under the Apache License, Version 2.0 (the "License");
-  position: absolute;
+you may not use this file except in compliance with the License.
-  top: 16px;
+You may obtain a copy of the License at
-  right: 25px;
-}
 
-.mx_UserSettingsDialog_closeIcon {
+    http://www.apache.org/licenses/LICENSE-2.0
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-}
-
-.mx_UserSettingsDialog_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;
-}
 
+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
 // ==========================================================

src/components/structures/MatrixChat.js

@@ -613,7 +613,7 @@ export default React.createClass({
             case 'view_user_settings': {
                 if (SettingsStore.isFeatureEnabled("feature_tabbed_settings")) {
                     const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
-                    Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {});
+                    Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, 'mx_SettingsDialog');
                 } else {
                     this._setPage(PageTypes.UserSettings);
                     this.notifyNewScreen('settings');

src/components/views/dialogs/UserSettingsDialog.js

@@ -101,10 +101,10 @@ export default class UserSettingsDialog extends React.Component {
     render() {
         return (
             <div className="mx_UserSettingsDialog">
-                <div className="mx_UserSettingsDialog_header">
+                <div className="mx_SettingsDialog_header">
                     {_t("Settings")}
-                    <span className="mx_UserSettingsDialog_close">
+                    <span className="mx_SettingsDialog_close">
-                        <AccessibleButton className="mx_UserSettingsDialog_closeIcon" onClick={this.props.onFinished} />
+                        <AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
                     </span>
                 </div>
                 <TabbedView tabs={this._getTabs()} />