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

Fixed settings dialog header; Adjust padding on dialog
This commit is contained in:
Travis Ralston 2019-01-31 21:41:09 -07:00 committed by GitHub
commit 7bbc302975
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 74 deletions

View file

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

View file

@ -15,56 +15,32 @@ limitations under the License.
*/ */
.mx_SettingsDialog { .mx_SettingsDialog {
.mx_Dialog { .mx_Dialog {
max-width: 784px; // 900px - 58px (left padding) - 58px (right padding) max-width: 900px;
width: 80%; width: 80%;
height: 80%; height: 80%;
border-radius: 4px; border-radius: 4px;
padding-top: 0;
padding-right: 0;
padding-left: 0;
.mx_TabbedView_tabLabels { .mx_TabbedView {
// Force the sidebar to be always visible, letting the rest of the content scroll top: 65px;
position: fixed; }
}
.mx_TabbedView_tabPanel { .mx_TabbedView .mx_SettingsTab {
max-width: 485px; box-sizing: border-box;
margin-left: 206px; // 70px margin + 136px for the sidebar padding-right: 130px;
}
.mx_SettingsDialog_header { // Put some padding on the bottom to avoid the settings tab from
font-size: 24px; // colliding harshly with the dialog when scrolled down.
display: block; padding-bottom: 100px;
text-align: center; }
color: $dialog-title-fg-color;
margin-top: 16px;
margin-bottom: 24px;
padding: 0;
}
.mx_SettingsDialog_close { .mx_Dialog_title {
position: absolute; text-align: center;
top: 16px; margin-top: 16px;
right: 25px; 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;
}
}
} }

View file

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

View file

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

View file

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

View file

@ -1074,6 +1074,7 @@
"Report bugs & give feedback": "Report bugs & give feedback", "Report bugs & give feedback": "Report bugs & give feedback",
"Go back": "Go back", "Go back": "Go back",
"Visit old settings": "Visit old settings", "Visit old settings": "Visit old settings",
"Room Settings": "Room Settings",
"Failed to upgrade room": "Failed to upgrade room", "Failed to upgrade room": "Failed to upgrade room",
"The room upgrade could not be completed": "The room upgrade could not be completed", "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", "Upgrade this room to version %(version)s": "Upgrade this room to version %(version)s",