OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve the profile section a bit and add a highlight to the temp tab

pull/21833/head
Travis Ralston 2019-01-21 17:27:43 -07:00
parent c3692aa9ae
commit 15a56fa90b
9 changed files with 186 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
res/css/structures/_TabbedView.scss
View File

@ -45,6 +45,11 @@ limitations under the License.
color: $tab-label-active-fg-color;
}
// TODO: Remove temporary hack alongside "visit old settings" tab
.mx_TabbedView_tabLabel_TEMP_HACK {
background-color: orange;
}
.mx_TabbedView_tabLabel_icon {
width: 14px;
height: 14px;
@ -89,4 +94,5 @@ limitations under the License.
.mx_TabbedView_tabPanelContent {
flex-grow: 1;
min-width: 560px;
}

21
res/css/views/elements/_AccessibleButton.scss
View File

@ -21,3 +21,24 @@ limitations under the License.
.mx_AccessibleButton {
cursor: pointer;
}
.mx_AccessibleButton_disabled {
cursor: default;
}
.mx_AccessibleButton_hasKind {
padding: 10px 25px;
text-align: center;
border-radius: 4px;
display: inline-block;
}
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
}

25
res/css/views/settings/tabs/_GeneralSettingsTab.scss
View File

@ -1,6 +1,25 @@
.mx_GeneralSettingsTab_profile input {
.mx_GeneralSettingsTab_profile {
display: flex;
}
.mx_GeneralSettingsTab_profileControls {
flex-grow: 1;
}
.mx_GeneralSettingsTab_profileControls .mx_Field #profileDisplayName {
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_GeneralSettingsTab_profileAvatar {
width: 88px;
height: 88px;
margin-left: 13px;
}
.mx_GeneralSettingsTab_profileAvatar div {
display: block;
font-size: 14px;
padding: 5px;
width: 88px;
height: 88px;
border-radius: 4px;
background-color: #ccc;
}

6
res/themes/dharma/css/_dharma.scss
View File

@ -200,6 +200,12 @@ $tab-label-active-bg-color: #7ac9a1;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
// unused?
$progressbar-color: #000;

6
res/themes/light/css/_base.scss
View File

@ -196,6 +196,12 @@ $tab-label-active-bg-color: #7ac9a1;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: #ffffff;
// Buttons
$button-primary-fg-color: #ffffff;
$button-primary-bg-color: #7ac9a1;
$button-primary-disabled-fg-color: #ffffff;
$button-primary-disabled-bg-color: #bce4d0;
// unused?
$progressbar-color: #000;

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

@ -39,7 +39,7 @@ export class Tab {
export class TabbedView extends React.Component {
static propTypes = {
// The tabs to show
tabs: PropTypes.arrayOf(Tab).isRequired,
tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
};
constructor() {
@ -74,6 +74,7 @@ export class TabbedView extends React.Component {
const idx = this.props.tabs.indexOf(tab);
if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
if (tab.label === "Visit old settings") classes += "mx_TabbedView_tabLabel_TEMP_HACK";
let tabIcon = null;
if (tab.icon) {

83
src/components/views/elements/AccessibleButton.js
View File

@ -28,41 +28,56 @@ import { KeyCode } from '../../../Keyboard';
* @returns {Object} rendered react
*/
export default function AccessibleButton(props) {
const {element, onClick, children, ...restProps} = props;
restProps.onClick = onClick;
// We need to consume enter onKeyDown and space onKeyUp
// otherwise we are risking also activating other keyboard focusable elements
// that might receive focus as a result of the AccessibleButtonClick action
// It's because we are using html buttons at a few places e.g. inside dialogs
// And divs which we report as role button to assistive technologies.
// Browsers handle space and enter keypresses differently and we are only adjusting to the
// inconsistencies here
restProps.onKeyDown = function(e) {
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
}
};
restProps.onKeyUp = function(e) {
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
}
};
const {element, onClick, children, kind, disabled, ...restProps} = props;
if (!disabled) {
restProps.onClick = onClick;
// We need to consume enter onKeyDown and space onKeyUp
// otherwise we are risking also activating other keyboard focusable elements
// that might receive focus as a result of the AccessibleButtonClick action
// It's because we are using html buttons at a few places e.g. inside dialogs
// And divs which we report as role button to assistive technologies.
// Browsers handle space and enter keypresses differently and we are only adjusting to the
// inconsistencies here
restProps.onKeyDown = function (e) {
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
}
};
restProps.onKeyUp = function (e) {
if (e.keyCode === KeyCode.SPACE) {
e.stopPropagation();
e.preventDefault();
return onClick(e);
}
if (e.keyCode === KeyCode.ENTER) {
e.stopPropagation();
e.preventDefault();
}
};
}
restProps.tabIndex = restProps.tabIndex || "0";
restProps.role = "button";
restProps.className = (restProps.className ? restProps.className + " " : "") +
"mx_AccessibleButton";
if (kind) {
// We apply a hasKind class to maintain backwards compatibility with
// buttons which might not know about kind and break
restProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
}
if (disabled) {
restProps.className += " mx_AccessibleButton_disabled";
}
return React.createElement(element, restProps, children);
}
@ -76,6 +91,12 @@ AccessibleButton.propTypes = {
children: PropTypes.node,
element: PropTypes.string,
onClick: PropTypes.func.isRequired,
// The kind of button, similar to how Bootstrap works.
// See available classes for AccessibleButton for options.
kind: PropTypes.string,
disabled: PropTypes.bool,
};
AccessibleButton.defaultProps = {

90
src/components/views/settings/tabs/GeneralSettingsTab.js
View File

@ -16,32 +16,82 @@ limitations under the License.
import React from 'react';
import {_t} from "../../../../languageHandler";
import MatrixClientPeg from "../../../../MatrixClientPeg";
import Field from "../../elements/Field";
import AccessibleButton from "../../elements/AccessibleButton";
export default class GeneralSettingsTab extends React.Component {
constructor() {
super();
const client = MatrixClientPeg.get();
this.state = {
userId: client.getUserId(),
displayName: client.getUser(client.getUserId()).displayName,
enableProfileSave: false,
};
}
_saveProfile = async (e) => {
e.stopPropagation();
e.preventDefault();
if (!this.state.enableProfileSave) return;
this.setState({enableProfileSave: false});
// TODO: What do we do about errors?
await MatrixClientPeg.get().setDisplayName(this.state.displayName);
// TODO: Support avatars
this.setState({enableProfileSave: true});
};
_onDisplayNameChanged = (e) => {
this.setState({
displayName: e.target.value,
enableProfileSave: true,
});
};
_renderProfileSection() {
const form = (
<form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
<div className="mx_GeneralSettingsTab_profile">
<div className="mx_GeneralSettingsTab_profileControls">
<p className="mx_GeneralSettingsTab_profileUsername">{this.state.userId}</p>
<Field id="profileDisplayName" label={_t("Display Name")}
type="text" value={this.state.displayName} autocomplete="off"
onChange={this._onDisplayNameChanged}
/>
</div>
<div className="mx_GeneralSettingsTab_profileAvatar">
{/*TODO: Ditch avatar placeholder and use the real thing*/}
<div/>
</div>
</div>
<AccessibleButton onClick={this._saveProfile} kind="primary"
disabled={!this.state.enableProfileSave}
>
{_t("Save")}
</AccessibleButton>
</form>
);
return (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
{form}
</div>
);
}
render() {
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("General")}</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
<div className="mx_GeneralSettingsTab_profile mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<input type="text" value="travis"/>
<input type="text" value="TravisR"/>
</div>
{this._renderProfileSection()}
</div>
);
}

1
src/i18n/strings/en_EN.json
View File

@ -403,6 +403,7 @@
"Noisy": "Noisy",
"General": "General",
"Profile": "Profile",
"Display Name": "Display Name",
"Cannot add any more widgets": "Cannot add any more widgets",
"The maximum permitted number of widgets have already been added to this room.": "The maximum permitted number of widgets have already been added to this room.",
"Add a widget": "Add a widget",