Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #2549 from matrix-org/travis/settings/fixes-2
Browse files Browse the repository at this point in the history
Fixed settings dialog header; Adjust padding on dialog
  • Loading branch information
turt2live authored Feb 1, 2019
2 parents 0ecaa2e + b12b731 commit 7bbc302
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 78 deletions.
21 changes: 13 additions & 8 deletions res/css/structures/_TabbedView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -82,13 +86,14 @@ 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
}
78 changes: 27 additions & 51 deletions res/css/views/dialogs/_SettingsDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,56 +15,32 @@ 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 {
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.
padding-bottom: 100px;
}

.mx_Dialog_title {
text-align: center;
margin-top: 16px;
margin-bottom: 24px;
}
}
}
}
4 changes: 3 additions & 1 deletion src/components/structures/TabbedView.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@ export class TabbedView extends React.Component {
_renderTabPanel(tab) {
return (
<div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
{tab.body}
<div className='mx_TabbedView_tabPanelContent'>
{tab.body}
</div>
</div>
);
}
Expand Down
17 changes: 8 additions & 9 deletions src/components/views/dialogs/RoomSettingsDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -93,16 +93,15 @@ export default class RoomSettingsDialog extends React.Component {
}

render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

return (
<div className="mx_RoomSettingsDialog">
<div className="mx_SettingsDialog_header">
{_t("Settings")}
<span className="mx_SettingsDialog_close">
<AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
</span>
<BaseDialog className='mx_RoomSettingsDialog' hasCancel={true}
onFinished={this.props.onFinished} title={_t("Room Settings")}>
<div className='ms_SettingsDialog_content'>
<TabbedView tabs={this._getTabs()} />
</div>
<TabbedView tabs={this._getTabs()} />
</div>
</BaseDialog>
);
}
}
17 changes: 8 additions & 9 deletions src/components/views/dialogs/UserSettingsDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 {
Expand Down Expand Up @@ -106,16 +106,15 @@ export default class UserSettingsDialog extends React.Component {
}

render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

return (
<div className="mx_UserSettingsDialog">
<div className="mx_SettingsDialog_header">
{_t("Settings")}
<span className="mx_SettingsDialog_close">
<AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
</span>
<BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
onFinished={this.props.onFinished} title={_t("Settings")}>
<div className='ms_SettingsDialog_content'>
<TabbedView tabs={this._getTabs()} />
</div>
<TabbedView tabs={this._getTabs()} />
</div>
</BaseDialog>
);
}
}
1 change: 1 addition & 0 deletions src/i18n/strings/en_EN.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 7bbc302

Please sign in to comment.