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 | 69 ++++++------------- 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, 56 insertions(+), 74 deletions(-) diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index ed9fa368e3..2f448ff4a8 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 2cc7c08039..b1a4470b02 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_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; - } - } } diff --git a/src/components/structures/TabbedView.js b/src/components/structures/TabbedView.js index 2b136128f3..12dde54151 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 6be2676d72..0578ccaffd 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 12c692b958..2616542bf7 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 fb025a9e61..ac696bc1ca 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 2f448ff4a8..c87b4d053f 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 b1a4470b02..68206f32aa 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.