From aab372c6484fc59d7ea30c55aadf4df8e7aee1aa Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 1 Jul 2020 01:50:31 +0100 Subject: [PATCH 1/3] Add tooltips --- res/css/views/elements/_Tooltip.scss | 2 +- res/css/views/rooms/_RoomSublist2.scss | 4 ++ src/components/structures/UserMenu.tsx | 5 ++- .../views/elements/AccessibleButton.tsx | 2 +- ...pButton.js => AccessibleTooltipButton.tsx} | 38 +++++++++++-------- src/components/views/rooms/RoomSublist2.tsx | 6 ++- 6 files changed, 37 insertions(+), 20 deletions(-) rename src/components/views/elements/{AccessibleTooltipButton.js => AccessibleTooltipButton.tsx} (70%) diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 73ac9b3558..d67928bf83 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -55,7 +55,7 @@ limitations under the License. border-radius: 4px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; - z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs + z-index: 6000; // Higher than context menu so tooltips can be used everywhere padding: 10px; pointer-events: none; line-height: $font-14px; diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index ffb96cf600..e86bc83cc8 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -389,3 +389,7 @@ limitations under the License. margin-top: 8px; } } + +.mx_RoomSublist2_addRoomTooltip { + margin-top: -3px; +} diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 8c06a06852..df8c777aeb 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -37,6 +37,7 @@ import { OwnProfileStore } from "../../stores/OwnProfileStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import BaseAvatar from '../views/avatars/BaseAvatar'; import classNames from "classnames"; +import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; interface IProps { isMinimized: boolean; @@ -218,7 +219,7 @@ export default class UserMenu extends React.Component { {MatrixClientPeg.get().getUserId()} -
{ alt={_t("Switch theme")} width={16} /> -
+ {hostingLink}
diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 01a27d9522..040147bb16 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -27,7 +27,7 @@ export type ButtonEvent = React.MouseEvent | React.KeyboardEvent { +export interface IProps extends React.InputHTMLAttributes { inputRef?: React.Ref; element?: string; // The kind of button, similar to how Bootstrap works. diff --git a/src/components/views/elements/AccessibleTooltipButton.js b/src/components/views/elements/AccessibleTooltipButton.tsx similarity index 70% rename from src/components/views/elements/AccessibleTooltipButton.js rename to src/components/views/elements/AccessibleTooltipButton.tsx index 6c84c6ab7e..1c0e18c399 100644 --- a/src/components/views/elements/AccessibleTooltipButton.js +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -16,21 +16,28 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; +import classnames from 'classnames'; import AccessibleButton from "./AccessibleButton"; -import * as sdk from "../../../index"; +import {IProps} from "./AccessibleButton"; +import Tooltip from './Tooltip'; -export default class AccessibleTooltipButton extends React.PureComponent { - static propTypes = { - ...AccessibleButton.propTypes, - // The tooltip to render on hover - title: PropTypes.string.isRequired, - }; +interface ITooltipProps extends IProps { + title: string; + tooltipClassName?: string; +} - state = { - hover: false, - }; +interface IState { + hover: boolean; +} + +export default class AccessibleTooltipButton extends React.PureComponent { + constructor(props: ITooltipProps) { + super(props) + this.state = { + hover: false, + }; + } onMouseOver = () => { this.setState({ @@ -45,14 +52,15 @@ export default class AccessibleTooltipButton extends React.PureComponent { }; render() { - const Tooltip = sdk.getComponent("elements.Tooltip"); - const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); - const {title, children, ...props} = this.props; + const tooltipClassName = classnames( + "mx_AccessibleTooltipButton_tooltip", + this.props.tooltipClassName, + ); const tip = this.state.hover ? :
; return ( diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index 58ebf54bf7..a6b2e72b6a 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -33,6 +33,8 @@ import StyledRadioButton from "../elements/StyledRadioButton"; import RoomListStore from "../../../stores/room-list/RoomListStore2"; import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorithms/models"; import { TagID } from "../../../stores/room-list/models"; +import Tooltip from "../elements/Tooltip"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; // TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231 // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231 @@ -277,11 +279,13 @@ export default class RoomSublist2 extends React.Component { let addRoomButton = null; if (!!this.props.onAddRoom) { addRoomButton = ( - ); } From 1889ee202bc77441e0219968550e68601fd53ac8 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 1 Jul 2020 12:23:27 +0100 Subject: [PATCH 2/3] Add tooltips for breadcrumbs --- res/css/views/rooms/_RoomBreadcrumbs2.scss | 15 +++++++++++++++ src/components/views/rooms/RoomBreadcrumbs2.tsx | 7 +++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_RoomBreadcrumbs2.scss b/res/css/views/rooms/_RoomBreadcrumbs2.scss index dd9581069c..6e5a5fbb16 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs2.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs2.scss @@ -51,3 +51,18 @@ limitations under the License. height: 32px; } } + +.mx_RoomBreadcrumbs2_Tooltip { + margin-left: -42px; + margin-top: -42px; + + &.mx_Tooltip { + background-color: $tagpanel-bg-color; + color: $accent-fg-color; + border: 0; + + .mx_Tooltip_chevron { + display: none; + } + } +} diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx index c0417fc592..687f4dd73e 100644 --- a/src/components/views/rooms/RoomBreadcrumbs2.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx @@ -26,6 +26,7 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { CSSTransition } from "react-transition-group"; import RoomListStore from "../../../stores/room-list/RoomListStore2"; import { DefaultTagID } from "../../../stores/room-list/models"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; // TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231 // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231 @@ -98,11 +99,13 @@ export default class RoomBreadcrumbs2 extends React.PureComponent this.viewRoom(r, i)} aria-label={_t("Room %(name)s", {name: r.name})} + title={r.name} + tooltipClassName={"mx_RoomBreadcrumbs2_Tooltip"} > - + ); }); From de7df7dcf9bafbe286c25a643cbe69785bb147d8 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 1 Jul 2020 12:28:00 +0100 Subject: [PATCH 3/3] Lint --- src/components/views/elements/AccessibleTooltipButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index 1c0e18c399..f4d63136e1 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -33,7 +33,7 @@ interface IState { export default class AccessibleTooltipButton extends React.PureComponent { constructor(props: ITooltipProps) { - super(props) + super(props); this.state = { hover: false, };