imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Collapse DOM around tab label icon

Browse source
This commit is contained in:
Travis Ralston 2019-01-22 09:54:35 -07:00
parent feed17d9ac
commit 0deb210fd8
4 changed files with 25 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/structures/TabbedView.js
View file

@ -26,12 +26,12 @@ export class Tab {
/**
* Creates a new tab.
* @param {string} tabLabel The untranslated tab label.
* @param {string} tabIconJsx The JSX for the tab icon. This should be a plain img element or null.
* @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
* @param {string} tabJsx The JSX for the tab container.
*/
constructor(tabLabel, tabIconJsx, tabJsx) {
constructor(tabLabel, tabIconClass, tabJsx) {
this.label = tabLabel;
this.icon = tabIconJsx;
this.icon = tabIconClass;
this.body = tabJsx;
}
}
@ -78,7 +78,7 @@ export class TabbedView extends React.Component {
let tabIcon = null;
if (tab.icon) {
tabIcon = <span className="mx_TabbedView_tabLabel_icon">{tab.icon}</span>;
tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
}
const onClickHandler = () => this._setActiveTab(tab);

14
src/components/views/dialogs/UserSettingsDialog.js
View file

@ -47,37 +47,37 @@ export default class UserSettingsDialog extends React.Component {
return [
new Tab(
_td("General"),
<span className="mx_UserSettingsDialog_settingsIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_settingsIcon",
<GeneralSettingsTab />,
),
new Tab(
_td("Notifications"),
<span className="mx_UserSettingsDialog_bellIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_bellIcon",
<div>Notifications Test</div>,
),
new Tab(
_td("Preferences"),
<span className="mx_UserSettingsDialog_preferencesIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_preferencesIcon",
<div>Preferences Test</div>,
),
new Tab(
_td("Voice & Video"),
<span className="mx_UserSettingsDialog_voiceIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_voiceIcon",
<div>Voice Test</div>,
),
new Tab(
_td("Security & Privacy"),
<span className="mx_UserSettingsDialog_securityIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_securityIcon",
<div>Security Test</div>,
),
new Tab(
_td("Help & About"),
<span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_helpIcon",
<div>Help Test</div>,
),
new Tab(
_td("Visit old settings"),
<span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
"mx_UserSettingsDialog_helpIcon",
<TempTab onClose={this.props.onFinished} />,
),
];