diff --git a/res/css/_components.scss b/res/css/_components.scss
index 1b35332711..e60e74383f 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -52,6 +52,7 @@
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
+@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
@import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index 81a3af06a9..32174a0ef5 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -39,15 +39,46 @@ limitations under the License.
height: 20px;
}
-.mx_TabbedView_tabLabel:hover {
- font-weight: 700;
-}
-
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
+.mx_TabbedView_tabLabel_icon {
+ width: 12px;
+ height: 12px;
+ margin-left: 6px;
+ margin-right: 9px;
+ position: relative;
+}
+
+.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
+ width: 12px;
+ height: 12px;
+ display: inline-block;
+}
+
+.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
+ background-color: $tab-label-icon-bg-color;
+ mask-repeat: no-repeat;
+ mask-size: 12px;
+ mask-position: center;
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
+ background-color: $tab-label-active-icon-bg-color;
+}
+
+.mx_TabbedView_tabLabel_text {
+ vertical-align: middle;
+}
+
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss
new file mode 100644
index 0000000000..7d8c80e5bd
--- /dev/null
+++ b/res/css/views/dialogs/_UserSettingsDialog.scss
@@ -0,0 +1,26 @@
+.mx_UserSettingsDialog_settingsIcon:before {
+ mask: url('$(res)/img/feather-icons/settings.svg');
+}
+
+.mx_UserSettingsDialog_voiceIcon:before {
+ mask: url('$(res)/img/feather-icons/phone.svg');
+}
+
+.mx_UserSettingsDialog_bellIcon:before {
+ mask: url('$(res)/img/feather-icons/notifications.svg');
+}
+
+.mx_UserSettingsDialog_preferencesIcon:before {
+ // TODO: Use real icon
+ mask: url('$(res)/img/feather-icons/paperclip.svg');
+}
+
+.mx_UserSettingsDialog_securityIcon:before {
+ // TODO: Use real icon
+ mask: url('$(res)/img/feather-icons/life-buoy.svg');
+}
+
+.mx_UserSettingsDialog_helpIcon:before {
+ // TODO: Use real icon
+ mask: url('$(res)/img/feather-icons/share.svg');
+}
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index e95ad82daf..5f405e49e9 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -191,6 +191,8 @@ $tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
+$tab-label-icon-bg-color: #454545;
+$tab-label-active-icon-bg-color: #ffffff;
// unused?
$progressbar-color: #000;
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 852442c4d1..69f1b61f5f 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -187,6 +187,8 @@ $tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-active-bg-color: #7ac9a1;
+$tab-label-icon-bg-color: #454545;
+$tab-label-active-icon-bg-color: #ffffff;
// unused?
$progressbar-color: #000;
diff --git a/src/components/structures/TabbedView.js b/src/components/structures/TabbedView.js
index 047d48e808..48f8c7a4d8 100644
--- a/src/components/structures/TabbedView.js
+++ b/src/components/structures/TabbedView.js
@@ -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 = {tab.icon};
+ }
+
return (
this._setActiveTab(tab)}>
- {_t(tab.label)}
+ {tabIcon}
+
+ {_t(tab.label)}
+
);
}
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index e54bc9c857..189d5871e3 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -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"), "", General Test
),
- new Tab(_td("Account"), "", Account Test
),
+ new Tab(_td("General"), , General Test
),
+ new Tab(_td("Notifications"), , Notifications Test
),
+ new Tab(_td("Preferences"), , Preferences Test
),
+ new Tab(_td("Voice & Video"), , Voice Test
),
+ new Tab(_td("Security & Privacy"), , Security Test
),
+ new Tab(_td("Help & About"), , Help Test
),
];
}
render() {
return (
-
+
+
+ {_t("Settings")}
+
+
+ X
+
+
+
//