From 646c5d4a644ad04a696eec0b07738f7caf14f571 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 13 Jul 2020 23:14:00 +0100
Subject: [PATCH] Replace timeline tooltips to match breadcrumb tooltips
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
res/css/views/elements/_Tooltip.scss | 21 +++--
.../elements/AccessibleTooltipButton.tsx | 5 +-
.../views/messages/ReactionsRowButton.js | 75 +++++++---------
.../messages/ReactionsRowButtonTooltip.js | 85 -------------------
src/components/views/messages/TextualBody.js | 34 ++------
5 files changed, 53 insertions(+), 167 deletions(-)
delete mode 100644 src/components/views/messages/ReactionsRowButtonTooltip.js
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index d67928bf83..f87498ca1e 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -76,17 +76,16 @@ limitations under the License.
}
.mx_Tooltip_timeline {
- box-shadow: none;
- background-color: $tooltip-timeline-bg-color;
- color: $tooltip-timeline-fg-color;
- text-align: center;
- border: none;
- border-radius: 3px;
- font-size: $font-14px;
- line-height: 1.2;
- padding: 6px 8px;
+ margin-left: -42px;
+ margin-top: -42px;
- .mx_Tooltip_chevron::after {
- border-right-color: $tooltip-timeline-bg-color;
+ &.mx_Tooltip {
+ background-color: $inverted-bg-color;
+ color: $accent-fg-color;
+ border: 0;
+
+ .mx_Tooltip_chevron {
+ display: none;
+ }
}
}
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index f4d63136e1..45e769e32d 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -24,6 +24,7 @@ import Tooltip from './Tooltip';
interface ITooltipProps extends IProps {
title: string;
+ tooltip?: React.ReactNode;
tooltipClassName?: string;
}
@@ -52,7 +53,7 @@ export default class AccessibleTooltipButton extends React.PureComponent :
;
return (
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 09824cd315..8c0cf3b0b0 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -19,10 +19,11 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
import dis from "../../../dispatcher/dispatcher";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {unicodeToShortcode} from "../../../HtmlUtils";
export default class ReactionsRowButton extends React.PureComponent {
static propTypes = {
@@ -38,14 +39,6 @@ export default class ReactionsRowButton extends React.PureComponent {
myReactionEvent: PropTypes.object,
}
- constructor(props) {
- super(props);
-
- this.state = {
- tooltipVisible: false,
- };
- }
-
onClick = (ev) => {
const { mxEvent, myReactionEvent, content } = this.props;
if (myReactionEvent) {
@@ -65,24 +58,7 @@ export default class ReactionsRowButton extends React.PureComponent {
}
};
- onMouseOver = () => {
- this.setState({
- // To avoid littering the DOM with a tooltip for every reaction,
- // only render it on first use.
- tooltipRendered: true,
- tooltipVisible: true,
- });
- }
-
- onMouseOut = () => {
- this.setState({
- tooltipVisible: false,
- });
- }
-
render() {
- const ReactionsRowButtonTooltip =
- sdk.getComponent('messages.ReactionsRowButtonTooltip');
const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
const classes = classNames({
@@ -90,18 +66,9 @@ export default class ReactionsRowButton extends React.PureComponent {
mx_ReactionsRowButton_selected: !!myReactionEvent,
});
- let tooltip;
- if (this.state.tooltipRendered) {
- tooltip = ;
- }
-
const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
let label;
+ let tooltip;
if (room) {
const senders = [];
for (const reactionEvent of reactionEvents) {
@@ -126,14 +93,37 @@ export default class ReactionsRowButton extends React.PureComponent {
},
},
);
+
+ const shortName = unicodeToShortcode(content);
+ tooltip = {_t(
+ "
reacted with %(shortName)s",
+ {
+ shortName,
+ },
+ {
+ reactors: () => {
+ return
+ {formatCommaSeparatedList(senders, 6)}
+
;
+ },
+ reactedWith: (sub) => {
+ if (!shortName) {
+ return null;
+ }
+ return
+ {sub}
+
;
+ },
+ },
+ )}
;
}
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return
{content}
@@ -141,7 +131,6 @@ export default class ReactionsRowButton extends React.PureComponent {
{count}
- {tooltip}
- ;
+ ;
}
}
diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.js b/src/components/views/messages/ReactionsRowButtonTooltip.js
deleted file mode 100644
index 59e9d2ad7f..0000000000
--- a/src/components/views/messages/ReactionsRowButtonTooltip.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
-import { unicodeToShortcode } from '../../../HtmlUtils';
-import { _t } from '../../../languageHandler';
-import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
-
-export default class ReactionsRowButtonTooltip extends React.PureComponent {
- static propTypes = {
- // The event we're displaying reactions for
- mxEvent: PropTypes.object.isRequired,
- // The reaction content / key / emoji
- content: PropTypes.string.isRequired,
- // A Set of Martix reaction events for this key
- reactionEvents: PropTypes.object.isRequired,
- visible: PropTypes.bool.isRequired,
- }
-
- render() {
- const Tooltip = sdk.getComponent('elements.Tooltip');
- const { content, reactionEvents, mxEvent, visible } = this.props;
-
- const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
- let tooltipLabel;
- if (room) {
- const senders = [];
- for (const reactionEvent of reactionEvents) {
- const member = room.getMember(reactionEvent.getSender());
- const name = member ? member.name : reactionEvent.getSender();
- senders.push(name);
- }
- const shortName = unicodeToShortcode(content);
- tooltipLabel = {_t(
- "
reacted with %(shortName)s",
- {
- shortName,
- },
- {
- reactors: () => {
- return
- {formatCommaSeparatedList(senders, 6)}
-
;
- },
- reactedWith: (sub) => {
- if (!shortName) {
- return null;
- }
- return
- {sub}
-
;
- },
- },
- )}
;
- }
-
- let tooltip;
- if (tooltipLabel) {
- tooltip = ;
- }
-
- return tooltip;
- }
-}
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index c762b95f83..84126ed7fc 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -35,6 +35,7 @@ import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
import {toRightOf} from "../../structures/ContextMenu";
import {copyPlaintext} from "../../../utils/strings";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
export default createReactClass({
displayName: 'TextualBody',
@@ -146,7 +147,6 @@ export default createReactClass({
nextProps.showUrlPreview !== this.props.showUrlPreview ||
nextProps.editState !== this.props.editState ||
nextState.links !== this.state.links ||
- nextState.editedMarkerHovered !== this.state.editedMarkerHovered ||
nextState.widgetHidden !== this.state.widgetHidden);
},
@@ -367,42 +367,24 @@ export default createReactClass({
});
},
- _onMouseEnterEditedMarker: function() {
- this.setState({editedMarkerHovered: true});
- },
-
- _onMouseLeaveEditedMarker: function() {
- this.setState({editedMarkerHovered: false});
- },
-
_openHistoryDialog: async function() {
const MessageEditHistoryDialog = sdk.getComponent("views.dialogs.MessageEditHistoryDialog");
Modal.createDialog(MessageEditHistoryDialog, {mxEvent: this.props.mxEvent});
},
_renderEditedMarker: function() {
- let editedTooltip;
- if (this.state.editedMarkerHovered) {
- const Tooltip = sdk.getComponent('elements.Tooltip');
- const date = this.props.mxEvent.replacingEventDate();
- const dateString = date && formatDate(date);
- editedTooltip = ;
- }
+ const date = this.props.mxEvent.replacingEventDate();
+ const dateString = date && formatDate(date);
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return (
-
- { editedTooltip }{`(${_t("edited")})`}
-
+ {`(${_t("edited")})`}
+
);
},