From a7e3d7df2848ce10b7ed922fc825c7b69b382285 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 18 Jan 2019 19:40:21 -0700 Subject: [PATCH] Make the tabs look like the design --- res/css/_components.scss | 1 + res/css/structures/_TabbedView.scss | 39 +++++++++++++++++-- .../views/dialogs/_UserSettingsDialog.scss | 26 +++++++++++++ res/themes/dharma/css/_dharma.scss | 2 + res/themes/light/css/_base.scss | 2 + src/components/structures/TabbedView.js | 15 +++++-- .../views/dialogs/UserSettingsDialog.js | 20 ++++++++-- src/i18n/strings/en_EN.json | 7 +++- 8 files changed, 99 insertions(+), 13 deletions(-) create mode 100644 res/css/views/dialogs/_UserSettingsDialog.scss 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 + + +
//