diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 9ca9d3261d..fa74180a2c 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -194,6 +194,7 @@ const RoomSubList = React.createClass({ _getHeaderJsx: function(isCollapsed) { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton'); const subListNotifications = !this.props.isInvite ? RoomNotifs.aggregateNotificationCount(this.props.list) : {count: 0, highlight: true}; @@ -234,7 +235,7 @@ const RoomSubList = React.createClass({ let addRoomButton; if (this.props.onAddRoom) { addRoomButton = ( - ); + chevron = (
); } const tabindex = this.props.isFiltered ? "0" : "-1"; diff --git a/src/components/views/elements/AccessibleTooltipButton.js b/src/components/views/elements/AccessibleTooltipButton.js new file mode 100644 index 0000000000..c9a08f6a47 --- /dev/null +++ b/src/components/views/elements/AccessibleTooltipButton.js @@ -0,0 +1,63 @@ +/* + Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ + +import React from 'react'; +import PropTypes from 'prop-types'; + +import AccessibleButton from "./AccessibleButton"; +import sdk from "../../../index"; + +export default class AccessibleTooltipButton extends React.PureComponent { + static propTypes = { + ...AccessibleButton.propTypes, + // The tooltip to render on hover + title: PropTypes.string.isRequired, + }; + + state = { + hover: false, + }; + + onMouseOver = () => { + this.setState({ + hover: true, + }); + }; + + onMouseOut = () => { + this.setState({ + hover: false, + }); + }; + + render() { + const Tooltip = sdk.getComponent("elements.Tooltip"); + const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + + const {title, ...props} = this.props; + + const tip = this.state.hover ? :
; + return ( + + { tip } + + ); + } +}