Merge pull request #2549 from matrix-org/travis/settings/fixes-2
Fixed settings dialog header; Adjust padding on dialog
This commit is contained in:
commit
7bbc302975
6 changed files with 56 additions and 74 deletions
|
@ -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
|
||||||
}
|
}
|
|
@ -16,55 +16,31 @@ 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;
|
||||||
|
|
||||||
|
// 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_header {
|
.mx_Dialog_title {
|
||||||
font-size: 24px;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $dialog-title-fg-color;
|
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
margin-bottom: 24px;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,8 +97,10 @@ 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}>
|
||||||
|
<div className='mx_TabbedView_tabPanelContent'>
|
||||||
{tab.body}
|
{tab.body}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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">
|
|
||||||
<AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<TabbedView tabs={this._getTabs()} />
|
<TabbedView tabs={this._getTabs()} />
|
||||||
</div>
|
</div>
|
||||||
|
</BaseDialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
|
||||||
<AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<TabbedView tabs={this._getTabs()} />
|
<TabbedView tabs={this._getTabs()} />
|
||||||
</div>
|
</div>
|
||||||
|
</BaseDialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in a new issue