matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-20 16:22:28 +03:00
Code Activity

Make the tabs look like the design

Browse Source
This commit is contained in:
Travis Ralston
2019-01-18 19:40:21 -07:00
parent 15709040e7
commit a7e3d7df28
8 changed files with 99 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/structures/TabbedView.js
View File

@@ -26,11 +26,12 @@ export class Tab {
/**
* Creates a new tab.
* @param {string} tabLabel The untranslated tab label.
* @param {string} tabIconRef The relative path to the tab's icon.
* @param {string} tabIconJsx The JSX for the tab icon. This should be a plain img element or null.
* @param {string} tabJsx The JSX for the tab container.
*/
constructor(tabLabel, tabIconRef, tabJsx) {
constructor(tabLabel, tabIconJsx, tabJsx) {
this.label = tabLabel;
this.icon = tabIconJsx;
this.body = tabJsx;
}
}
@@ -74,10 +75,18 @@ export class TabbedView extends React.Component {
const idx = this.props.tabs.indexOf(tab);
if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
let tabIcon = null;
if (tab.icon) {
tabIcon = <span className="mx_TabbedView_tabLabel_icon">{tab.icon}</span>;
}
return (
<span className={classes} key={"tab_label_ " + tab.label}
onClick={() => this._setActiveTab(tab)}>
{_t(tab.label)}
{tabIcon}
<span className="mx_TabbedView_tabLabel_text">
{_t(tab.label)}
</span>
</span>
);
}

20
src/components/views/dialogs/UserSettingsDialog.js
View File

@@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import {Tab, TabbedView} from "../../structures/TabbedView";
import {_td} from "../../../languageHandler";
import {_t, _td} from "../../../languageHandler";
export default class UserSettingsDialog extends React.Component {
static propTypes = {
@@ -26,14 +26,26 @@ export default class UserSettingsDialog extends React.Component {
_getTabs() {
return [
new Tab(_td("General"), "", <div>General Test</div>),
new Tab(_td("Account"), "", <div>Account Test</div>),
new Tab(_td("General"), <span className="mx_UserSettingsDialog_settingsIcon mx_TabbedView_maskedIcon" />, <div>General Test</div>),
new Tab(_td("Notifications"), <span className="mx_UserSettingsDialog_bellIcon mx_TabbedView_maskedIcon" />, <div>Notifications Test</div>),
new Tab(_td("Preferences"), <span className="mx_UserSettingsDialog_preferencesIcon mx_TabbedView_maskedIcon" />, <div>Preferences Test</div>),
new Tab(_td("Voice & Video"), <span className="mx_UserSettingsDialog_voiceIcon mx_TabbedView_maskedIcon" />, <div>Voice Test</div>),
new Tab(_td("Security & Privacy"), <span className="mx_UserSettingsDialog_securityIcon mx_TabbedView_maskedIcon" />, <div>Security Test</div>),
new Tab(_td("Help & About"), <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />, <div>Help Test</div>),
];
}
render() {
return (
<TabbedView tabs={this._getTabs()} />
<div className="mx_UserSettingsDialog">
<h1 className="mx_UserSettingsDialog_header">
{_t("Settings")}
</h1>
<span className="mx_UserSettingsDialog_close">
X
</span>
<TabbedView tabs={this._getTabs()} />
</div>
// <UserSettings
// onClose={this.props.onFinished}
// brand={SdkConfig.get().brand}