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

Add tooltips to top right buttons 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-17 18:16:21 +01:00
parent 23fa952905
commit a402f7e38f
3 changed files with 26 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/views/elements/ManageIntegsButton.js
View File

@ -21,6 +21,7 @@ import * as sdk from '../../../index';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import {IntegrationManagers} from "../../../integrations/IntegrationManagers"; import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
export default class ManageIntegsButton extends React.Component { export default class ManageIntegsButton extends React.Component {
constructor(props) { constructor(props) {
@ -45,9 +46,8 @@ export default class ManageIntegsButton extends React.Component {
render() { render() {
let integrationsButton = <div />; let integrationsButton = <div />;
if (IntegrationManagers.sharedInstance().hasManager()) { if (IntegrationManagers.sharedInstance().hasManager()) {
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
integrationsButton = ( integrationsButton = (
<AccessibleButton <AccessibleTooltipButton
className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton' className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton'
title={_t("Manage Integrations")} title={_t("Manage Integrations")}
onClick={this.onManageIntegrations} onClick={this.onManageIntegrations}

7
src/components/views/right_panel/HeaderButton.js
View File

@ -23,6 +23,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import Analytics from '../../../Analytics'; import Analytics from '../../../Analytics';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
export default class HeaderButton extends React.Component { export default class HeaderButton extends React.Component {
constructor() { constructor() {
@ -42,13 +43,13 @@ export default class HeaderButton extends React.Component {
[`mx_RightPanel_${this.props.name}`]: true, [`mx_RightPanel_${this.props.name}`]: true,
}); });
return <AccessibleButton return <AccessibleTooltipButton
aria-selected={this.props.isHighlighted} aria-selected={this.props.isHighlighted}
role="tab" role="tab"
title={this.props.title} title={this.props.title}
className={classes} className={classes}
onClick={this.onClick}> onClick={this.onClick}
</AccessibleButton>; />;
} }
} }

50
src/components/views/rooms/RoomHeader.js
View File

@ -34,6 +34,7 @@ import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
import E2EIcon from './E2EIcon'; import E2EIcon from './E2EIcon';
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import {DefaultTagID} from "../../../stores/room-list/models"; import {DefaultTagID} from "../../../stores/room-list/models";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
export default createReactClass({ export default createReactClass({
displayName: 'RoomHeader', displayName: 'RoomHeader',
@ -220,11 +221,10 @@ export default createReactClass({
if (this.props.onSettingsClick) { if (this.props.onSettingsClick) {
settingsButton = settingsButton =
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_settingsButton" <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
onClick={this.props.onSettingsClick} onClick={this.props.onSettingsClick}
title={_t("Settings")} title={_t("Settings")} />;
>
</AccessibleButton>;
} }
if (this.props.onPinnedClick && SettingsStore.isFeatureEnabled('feature_pinning')) { if (this.props.onPinnedClick && SettingsStore.isFeatureEnabled('feature_pinning')) {
@ -236,55 +236,45 @@ export default createReactClass({
} }
pinnedEventsButton = pinnedEventsButton =
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton" <AccessibleTooltipButton
onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}> className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
onClick={this.props.onPinnedClick}
title={_t("Pinned Messages")}
>
{ pinsIndicator } { pinsIndicator }
</AccessibleButton>; </AccessibleTooltipButton>;
} }
// var leave_button;
// if (this.props.onLeaveClick) {
// leave_button =
// <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
// <TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20"/>
// </div>;
// }
let forgetButton; let forgetButton;
if (this.props.onForgetClick) { if (this.props.onForgetClick) {
forgetButton = forgetButton =
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_forgetButton" <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
onClick={this.props.onForgetClick} onClick={this.props.onForgetClick}
title={_t("Forget room")} title={_t("Forget room")} />;
>
</AccessibleButton>;
} }
let searchButton; let searchButton;
if (this.props.onSearchClick && this.props.inRoom) { if (this.props.onSearchClick && this.props.inRoom) {
searchButton = searchButton =
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_searchButton" <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_searchButton"
onClick={this.props.onSearchClick} onClick={this.props.onSearchClick}
title={_t("Search")} title={_t("Search")} />;
>
</AccessibleButton>;
} }
let shareRoomButton; let shareRoomButton;
if (this.props.inRoom) { if (this.props.inRoom) {
shareRoomButton = shareRoomButton =
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_shareButton" <AccessibleTooltipButton
className="mx_RoomHeader_button mx_RoomHeader_shareButton"
onClick={this.onShareRoomClick} onClick={this.onShareRoomClick}
title={_t('Share room')} title={_t('Share room')} />;
>
</AccessibleButton>;
} }
let manageIntegsButton; let manageIntegsButton;
if (this.props.room && this.props.room.roomId && this.props.inRoom) { if (this.props.room && this.props.room.roomId && this.props.inRoom) {
manageIntegsButton = <ManageIntegsButton manageIntegsButton = <ManageIntegsButton room={this.props.room} />;
room={this.props.room}
/>;
} }
const rightRow = const rightRow =