From a402f7e38f3bad992541c2f4cc38e8be02eb9552 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 17 Jul 2020 18:16:21 +0100
Subject: [PATCH] Add tooltips to top right buttons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/elements/ManageIntegsButton.js      |  4 +-
 .../views/right_panel/HeaderButton.js         |  7 +--
 src/components/views/rooms/RoomHeader.js      | 50 ++++++++-----------
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js
index b631ddee73..d82af5e136 100644
--- a/src/components/views/elements/ManageIntegsButton.js
+++ b/src/components/views/elements/ManageIntegsButton.js
@@ -21,6 +21,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 
 export default class ManageIntegsButton extends React.Component {
     constructor(props) {
@@ -45,9 +46,8 @@ export default class ManageIntegsButton extends React.Component {
     render() {
         let integrationsButton = <div />;
         if (IntegrationManagers.sharedInstance().hasManager()) {
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             integrationsButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton'
                     title={_t("Manage Integrations")}
                     onClick={this.onManageIntegrations}
diff --git a/src/components/views/right_panel/HeaderButton.js b/src/components/views/right_panel/HeaderButton.js
index 06b434c1ce..ae32873437 100644
--- a/src/components/views/right_panel/HeaderButton.js
+++ b/src/components/views/right_panel/HeaderButton.js
@@ -23,6 +23,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Analytics from '../../../Analytics';
 import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 export default class HeaderButton extends React.Component {
     constructor() {
@@ -42,13 +43,13 @@ export default class HeaderButton extends React.Component {
             [`mx_RightPanel_${this.props.name}`]: true,
         });
 
-        return <AccessibleButton
+        return <AccessibleTooltipButton
             aria-selected={this.props.isHighlighted}
             role="tab"
             title={this.props.title}
             className={classes}
-            onClick={this.onClick}>
-        </AccessibleButton>;
+            onClick={this.onClick}
+        />;
     }
 }
 
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 8311a98784..6c61524297 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -34,6 +34,7 @@ import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import E2EIcon from './E2EIcon';
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import {DefaultTagID} from "../../../stores/room-list/models";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 export default createReactClass({
     displayName: 'RoomHeader',
@@ -220,11 +221,10 @@ export default createReactClass({
 
         if (this.props.onSettingsClick) {
             settingsButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_settingsButton"
                     onClick={this.props.onSettingsClick}
-                    title={_t("Settings")}
-                >
-                </AccessibleButton>;
+                    title={_t("Settings")} />;
         }
 
         if (this.props.onPinnedClick && SettingsStore.isFeatureEnabled('feature_pinning')) {
@@ -236,55 +236,45 @@ export default createReactClass({
             }
 
             pinnedEventsButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
-                                  onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
+                    onClick={this.props.onPinnedClick}
+                    title={_t("Pinned Messages")}
+                >
                     { 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;
         if (this.props.onForgetClick) {
             forgetButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_forgetButton"
                     onClick={this.props.onForgetClick}
-                    title={_t("Forget room")}
-                >
-                </AccessibleButton>;
+                    title={_t("Forget room")} />;
         }
 
         let searchButton;
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_searchButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_searchButton"
                     onClick={this.props.onSearchClick}
-                    title={_t("Search")}
-                >
-                </AccessibleButton>;
+                    title={_t("Search")} />;
         }
 
         let shareRoomButton;
         if (this.props.inRoom) {
             shareRoomButton =
-                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_shareButton"
+                <AccessibleTooltipButton
+                    className="mx_RoomHeader_button mx_RoomHeader_shareButton"
                     onClick={this.onShareRoomClick}
-                    title={_t('Share room')}
-                >
-                </AccessibleButton>;
+                    title={_t('Share room')} />;
         }
 
         let manageIntegsButton;
         if (this.props.room && this.props.room.roomId && this.props.inRoom) {
-            manageIntegsButton = <ManageIntegsButton
-                room={this.props.room}
-            />;
+            manageIntegsButton = <ManageIntegsButton room={this.props.room} />;
         }
 
         const rightRow =