From 4036e52c24663b2da0a088edcc5b1ecfa9247805 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 29 Jan 2019 21:45:15 -0700 Subject: [PATCH 1/2] 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 | 22 ++++-- res/css/views/dialogs/_SettingsDialog.scss | 77 +++++++------------ src/components/structures/TabbedView.js | 4 +- .../views/dialogs/RoomSettingsDialog.js | 17 ++-- .../views/dialogs/UserSettingsDialog.js | 17 ++-- src/i18n/strings/en_EN.json | 1 + 6 files changed, 60 insertions(+), 78 deletions(-) diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index ed9fa368e34..2f448ff4a8b 100644 --- a/res/css/structures/_TabbedView.scss +++ b/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 + } \ No newline at end of file diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index 2cc7c08039f..b1a4470b02c 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/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_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; + .mx_Dialog { + max-width: 900px; + width: 80%; + height: 80%; + border-radius: 4px; + padding-top: 0; + padding-right: 0; + padding-left: 0; + + .mx_TabbedView { + top: 65px; + } + + .mx_TabbedView .mx_SettingsTab { + max-width: calc(100% - 130px); // 130px right hand padding + + // Put some padding on the bottom to avoid the settings tab from + // colliding harshly with the dialog when scrolled down. + padding-bottom: 100px; + } + + .mx_Dialog_title { + text-align: center; + margin-top: 16px; + margin-bottom: 24px; + } } - } } diff --git a/src/components/structures/TabbedView.js b/src/components/structures/TabbedView.js index 2b136128f34..12dde541510 100644 --- a/src/components/structures/TabbedView.js +++ b/src/components/structures/TabbedView.js @@ -97,7 +97,9 @@ export class TabbedView extends React.Component { _renderTabPanel(tab) { return (
- {tab.body} +
+ {tab.body} +
); } diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index 6be2676d72e..0578ccaffd6 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/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 ( -
-
- {_t("Settings")} - - - + +
+
- -
+ ); } } diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js index 12c692b9584..2616542bf7c 100644 --- a/src/components/views/dialogs/UserSettingsDialog.js +++ b/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 ( -
-
- {_t("Settings")} - - - + +
+
- -
+ ); } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index fb025a9e617..ac696bc1ca2 100644 --- a/src/i18n/strings/en_EN.json +++ b/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", From b12b731781d3f1f3514b6fe724c860856b122650 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 31 Jan 2019 21:20:30 -0700 Subject: [PATCH 2/2] Minor CSS tweaks --- res/css/structures/_TabbedView.scss | 1 - res/css/views/dialogs/_SettingsDialog.scss | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 2f448ff4a8b..c87b4d053f1 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -96,5 +96,4 @@ limitations under the License. flex-grow: 1; overflow: auto; min-height: 0; // firefox - } \ No newline at end of file diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index b1a4470b02c..68206f32aad 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -29,7 +29,8 @@ limitations under the License. } .mx_TabbedView .mx_SettingsTab { - max-width: calc(100% - 130px); // 130px right hand padding + box-sizing: border-box; + padding-right: 130px; // Put some padding on the bottom to avoid the settings tab from // colliding harshly with the dialog when scrolled down.