PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.scss
View file

@ -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";

39
res/css/structures/_TabbedView.scss
View file

@ -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;

26
res/css/views/dialogs/_UserSettingsDialog.scss Normal file
View file

@ -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');
}

2
res/themes/dharma/css/_dharma.scss
View file

@ -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;

2
res/themes/light/css/_base.scss
View file

@ -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;

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}

7
src/i18n/strings/en_EN.json
View file

@ -1044,7 +1044,10 @@
"\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.",
"Unknown devices": "Unknown devices",
"General": "General",
"Account": "Account",
"Preferences": "Preferences",
"Voice & Video": "Voice & Video",
"Security & Privacy": "Security & Privacy",
"Help & About": "Help & About",
"Unable to load backup status": "Unable to load backup status",
"Unable to restore backup": "Unable to restore backup",
"No backup found!": "No backup found!",
@ -1224,7 +1227,6 @@
"Click to unmute audio": "Click to unmute audio",
"Click to mute audio": "Click to mute audio",
"Filter room names": "Filter room names",
"Return to app": "Return to app",
"Clear filter": "Clear filter",
"Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
"Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",
@ -1289,6 +1291,7 @@
"Add email address": "Add email address",
"Profile": "Profile",
"Display name": "Display name",
"Account": "Account",
"To return to your account in future you need to set a password": "To return to your account in future you need to set a password",
"Logged in as:": "Logged in as:",
"Access Token:": "Access Token:",