diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx index 5e6df02666..3e20c6c268 100644 --- a/src/components/views/elements/Tooltip.tsx +++ b/src/components/views/elements/Tooltip.tsx @@ -32,6 +32,7 @@ export enum Alignment { Right, Top, // Centered Bottom, // Centered + InnerBottom, // Inside the target, at the bottom } export interface ITooltipProps { @@ -50,6 +51,8 @@ export interface ITooltipProps { // id describing tooltip // used to associate tooltip with target for a11y id?: string; + // If the parent is over this width, act as if it is only this wide + maxParentWidth?: number; } @replaceableComponent("views.elements.Tooltip") @@ -107,11 +110,18 @@ export default class Tooltip extends React.Component { offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT); } const width = UIStore.instance.windowWidth; + const parentWidth = ( + this.props.maxParentWidth + ? Math.min(parentBox.width, this.props.maxParentWidth) + : parentBox.width + ); const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset; const top = baseTop + offset; const right = width - parentBox.right - window.pageXOffset - 16; const left = parentBox.right + window.pageXOffset + 6; - const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2); + const horizontalCenter = ( + parentBox.left - window.pageXOffset + (parentWidth / 2) + ); switch (this.props.alignment) { case Alignment.Natural: if (parentBox.right > width / 2) { @@ -136,6 +146,10 @@ export default class Tooltip extends React.Component { style.top = baseTop + parentBox.height; style.left = horizontalCenter; break; + case Alignment.InnerBottom: + style.top = baseTop + parentBox.height - 50; + style.left = horizontalCenter; + style.transform = "translate(-50%)"; } return style; diff --git a/src/components/views/elements/TooltipTarget.tsx b/src/components/views/elements/TooltipTarget.tsx index 22da867887..9ccd572ea8 100644 --- a/src/components/views/elements/TooltipTarget.tsx +++ b/src/components/views/elements/TooltipTarget.tsx @@ -36,6 +36,7 @@ const TooltipTarget: React.FC = ({ alignment, yOffset, tooltipClassName, + maxParentWidth, ...rest }) => { const [isVisible, setIsVisible] = useState(false); @@ -63,6 +64,7 @@ const TooltipTarget: React.FC = ({ yOffset={yOffset} alignment={alignment} visible={isVisible} + maxParentWidth={maxParentWidth} /> ); diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx index bb35b55ae1..689de44233 100644 --- a/src/components/views/messages/MLocationBody.tsx +++ b/src/components/views/messages/MLocationBody.tsx @@ -27,6 +27,8 @@ import { _t } from '../../../languageHandler'; import MemberAvatar from '../avatars/MemberAvatar'; import Modal from '../../../Modal'; import LocationViewDialog from '../location/LocationViewDialog'; +import TooltipTarget from '../elements/TooltipTarget'; +import { Alignment } from '../elements/Tooltip'; interface IState { error: Error; @@ -93,6 +95,7 @@ export default class MLocationBody extends React.Component { bodyId={this.getBodyId()} markerId={this.getMarkerId()} error={this.state.error} + tooltip={_t("Expand map")} onClick={this.onClick} />; } @@ -103,10 +106,17 @@ interface ILocationBodyContentProps { bodyId: string; markerId: string; error: Error; + tooltip?: string; onClick?: (event: React.MouseEvent) => void; } export function LocationBodyContent(props: ILocationBodyContentProps) { + const mapDiv =
; + return
{ props.error @@ -115,11 +125,17 @@ export function LocationBodyContent(props: ILocationBodyContentProps) {
: null } -
+ { + props.tooltip + ? + { mapDiv } + + : mapDiv + }