OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve tooltip positioning 

Signed-off-by: Michael Weimann <michaelw@matrix.org>
pull/28788/head^2
Michael Weimann 2022-05-09 15:58:16 +02:00 committed by Michael Weimann
parent 1e73184b78
commit 7ed3089434
16 changed files with 112 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
res/css/views/elements/_MiniAvatarUploader.scss
View File

@ -25,7 +25,9 @@ limitations under the License.
z-index: unset;
width: max-content;
left: 72px;
top: 0;
// top edge starting at 50 % of parent - 50 % of itself -> centered vertically
top: 50%;
transform: translateY(-50%);
}
.mx_MiniAvatarUploader_indicator {

2
res/css/views/elements/_Tooltip.scss
View File

@ -70,8 +70,6 @@ limitations under the License.
font-weight: 500;
max-width: 300px;
word-break: break-word;
margin-left: 6px;
margin-right: 6px;
background-color: #21262C; // Same on both themes
color: $accent-fg-color;

4
res/css/views/rooms/_RoomSublist.scss
View File

@ -406,10 +406,6 @@ limitations under the License.
}
}
.mx_RoomSublist_addRoomTooltip {
margin-top: -3px;
}
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;

3
src/components/structures/SpaceHierarchy.tsx
View File

@ -64,6 +64,7 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import { Alignment } from "../views/elements/Tooltip";
interface IProps {
space: Room;
@ -583,7 +584,7 @@ const ManageButtons = ({ hierarchy, selected, setSelected, setError }: IManageBu
Button = AccessibleTooltipButton;
props = {
tooltip: _t("Select a room below first"),
yOffset: -40,
alignment: Alignment.Top,
};
}

1
src/components/views/beta/BetaCard.tsx
View File

@ -60,7 +60,6 @@ export const BetaPill = ({
</div>
</div>}
onClick={onClick}
yOffset={-10}
>
{ _t("Beta") }
</AccessibleTooltipButton>;

2
src/components/views/dialogs/ForwardDialog.tsx
View File

@ -136,7 +136,6 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
className="mx_ForwardList_roomButton"
onClick={jumpToRoom}
title={_t("Open room")}
yOffset={-20}
alignment={Alignment.Top}
>
<DecoratedRoomAvatar room={room} avatarSize={32} />
@ -151,7 +150,6 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
onClick={send}
disabled={disabled}
title={title}
yOffset={-20}
alignment={Alignment.Top}
>
<div className="mx_ForwardList_sendLabel">{ _t("Send") }</div>

4
src/components/views/elements/AccessibleTooltipButton.tsx
View File

@ -26,7 +26,6 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
label?: string;
tooltipClassName?: string;
forceHide?: boolean;
yOffset?: number;
alignment?: Alignment;
onHover?: (hovering: boolean) => void;
onHideTooltip?(ev: SyntheticEvent): void;
@ -76,13 +75,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, onHideTooltip,
const { title, tooltip, children, tooltipClassName, forceHide, alignment, onHideTooltip,
...props } = this.props;
const tip = this.state.hover && <Tooltip
tooltipClassName={tooltipClassName}
label={tooltip || title}
yOffset={yOffset}
alignment={alignment}
/>;
return (

2
src/components/views/elements/FacePile.tsx
View File

@ -51,7 +51,7 @@ const FacePile: FC<IProps> = ({ members, faceSize, overflow, tooltip, children,
return <div {...props} className="mx_FacePile">
{ tooltip ? (
<TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
<TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip}>
{ pileContents }
</TextWithTooltip>
) : (

48
src/components/views/elements/Tooltip.tsx
View File

@ -23,8 +23,6 @@ import classNames from 'classnames';
import UIStore from "../../../stores/UIStore";
const MIN_TOOLTIP_HEIGHT = 25;
export enum Alignment {
Natural, // Pick left or right
Left,
@ -33,7 +31,6 @@ export enum Alignment {
Bottom, // Centered
InnerBottom, // Inside the target, at the bottom
TopRight, // On top of the target, right aligned
TopCenter, // On top of the target, center aligned
}
export interface ITooltipProps {
@ -48,7 +45,6 @@ export interface ITooltipProps {
// the react element to put into the tooltip
label: React.ReactNode;
alignment?: Alignment; // defaults to Natural
yOffset?: number;
// id describing tooltip
// used to associate tooltip with target for a11y
id?: string;
@ -66,7 +62,6 @@ export default class Tooltip extends React.Component<ITooltipProps> {
public static readonly defaultProps = {
visible: true,
yOffset: 0,
alignment: Alignment.Natural,
};
@ -102,50 +97,49 @@ export default class Tooltip extends React.Component<ITooltipProps> {
// positioned, also taking into account any window zoom
private updatePosition(style: CSSProperties) {
const parentBox = this.parent.getBoundingClientRect();
let offset = 0;
if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
} else {
// The tooltip is larger than the parent height: figure out what offset
// we need so that we're still centered.
offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
}
const width = UIStore.instance.windowWidth;
const spacing = 6;
const parentWidth = (
this.props.maxParentWidth
? Math.min(parentBox.width, this.props.maxParentWidth)
: parentBox.width
);
const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.scrollY;
const top = baseTop + offset;
const baseTop = parentBox.top + window.scrollY;
const centerTop = parentBox.top + window.scrollY + (parentBox.height / 2);
const right = width - parentBox.left - window.scrollX;
const left = parentBox.right + window.scrollX;
const horizontalCenter = (
parentBox.left - window.scrollX + (parentWidth / 2)
);
switch (this.props.alignment) {
case Alignment.Natural:
if (parentBox.right > width / 2) {
style.right = right;
style.top = top;
style.right = right + spacing;
style.top = centerTop;
style.transform = "translateY(-50%)";
break;
}
// fall through to Right
case Alignment.Right:
style.left = left;
style.top = top;
style.left = left + spacing;
style.top = centerTop;
style.transform = "translateY(-50%)";
break;
case Alignment.Left:
style.right = right;
style.top = top;
style.right = right + spacing;
style.top = centerTop;
style.transform = "translateY(-50%)";
break;
case Alignment.Top:
style.top = baseTop - 16;
style.top = baseTop - spacing;
style.left = horizontalCenter;
style.transform = "translate(-50%, -100%)";
break;
case Alignment.Bottom:
style.top = baseTop + parentBox.height;
style.top = baseTop + parentBox.height + spacing;
style.left = horizontalCenter;
style.transform = "translate(-50%)";
break;
case Alignment.InnerBottom:
style.top = baseTop + parentBox.height - 50;
@ -153,14 +147,10 @@ export default class Tooltip extends React.Component<ITooltipProps> {
style.transform = "translate(-50%)";
break;
case Alignment.TopRight:
style.top = baseTop - 5;
style.top = baseTop - spacing;
style.right = width - parentBox.right - window.scrollX;
style.transform = "translate(5px, -100%)";
style.transform = "translateY(-100%)";
break;
case Alignment.TopCenter:
style.top = baseTop - 5;
style.left = horizontalCenter;
style.transform = "translate(-50%, -100%)";
}
return style;

2
src/components/views/elements/TooltipTarget.tsx
View File

@ -34,7 +34,6 @@ const TooltipTarget: React.FC<IProps> = ({
id,
label,
alignment,
yOffset,
tooltipClassName,
maxParentWidth,
...rest
@ -51,7 +50,6 @@ const TooltipTarget: React.FC<IProps> = ({
className={className}
tooltipClassName={tooltipClassName}
label={label}
yOffset={yOffset}
alignment={alignment}
visible={isVisible}
maxParentWidth={maxParentWidth}

4
src/components/views/right_panel/RoomSummaryCard.tsx
View File

@ -166,7 +166,6 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
title={openTitle}
forceHide={!(isPinned || isMaximised)}
disabled={isPinned || isMaximised}
yOffset={-48}
>
<WidgetAvatar app={app} />
<span>{ name }</span>
@ -178,7 +177,6 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
isExpanded={menuDisplayed}
onClick={openMenu}
title={_t("Options")}
yOffset={-24}
/> }
<AccessibleTooltipButton
@ -186,13 +184,11 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
onClick={togglePin}
title={pinTitle}
disabled={cannotPin}
yOffset={-24}
/>
<AccessibleTooltipButton
className="mx_RoomSummaryCard_app_maximiseToggle"
onClick={toggleMaximised}
title={maximiseTitle}
yOffset={-24}
/>
{ contextMenu }

1
src/components/views/rooms/MessageComposer.tsx
View File

@ -421,7 +421,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
recordingTooltip = <Tooltip
label={_t("%(seconds)ss left", { seconds: secondsLeft })}
alignment={Alignment.Top}
yOffset={-50}
/>;
}

2
src/components/views/rooms/ReadReceiptGroup.tsx
View File

@ -233,7 +233,7 @@ interface ReadReceiptPersonProps extends IReadReceiptProps {
function ReadReceiptPerson({ userId, roomMember, ts, isTwelveHour, onAfterClick }: ReadReceiptPersonProps) {
const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
alignment: Alignment.TopCenter,
alignment: Alignment.Top,
tooltipClassName: "mx_ReadReceiptGroup_person--tooltip",
label: (
<>

6
src/components/views/voip/CallView/CallViewButtons.tsx
View File

@ -39,8 +39,6 @@ import { MediaDeviceKindEnum } from "../../../../MediaDeviceHandler";
// height to get the max height of the video
const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
const TOOLTIP_Y_OFFSET = -24;
const CONTROLS_HIDE_DELAY = 2000;
interface IButtonProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButton>, "title"> {
@ -69,7 +67,6 @@ const CallViewToggleButton: React.FC<IButtonProps> = ({
className={classes}
title={isOn ? onLabel : offLabel}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
{...props}
>
{ children }
@ -267,7 +264,6 @@ export default class CallViewButtons extends React.Component<IProps, IState> {
isExpanded={this.state.showDialpad}
title={_t("Dialpad")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/> }
<CallViewDropdownButton
state={!this.props.buttonsState.micMuted}
@ -306,14 +302,12 @@ export default class CallViewButtons extends React.Component<IProps, IState> {
isExpanded={this.state.showMoreMenu}
title={_t("More")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/> }
<AccessibleTooltipButton
className="mx_CallViewButtons_button mx_CallViewButtons_button_hangup"
onClick={this.props.handlers.onHangupClick}
title={_t("Hangup")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/>
</div>
);

19
test/components/views/elements/TooltipTarget-test.tsx
View File

@ -30,7 +30,6 @@ describe('<TooltipTarget />', () => {
"className": 'test className',
"tooltipClassName": 'test tooltipClassName',
"label": 'test label',
"yOffset": 1,
"alignment": Alignment.Left,
"id": 'test id',
'data-test-id': 'test',
@ -64,13 +63,17 @@ describe('<TooltipTarget />', () => {
expect(getVisibleTooltip()).toBeFalsy();
});
it('displays tooltip on mouseover', () => {
const wrapper = getComponent();
act(() => {
Simulate.mouseOver(wrapper);
});
expect(getVisibleTooltip()).toMatchSnapshot();
});
for (const alignment in Alignment) {
if (isNaN(Number(alignment))) {
it(`displays ${alignment} aligned tooltip on mouseover`, () => {
const wrapper = getComponent({ alignment: Alignment[alignment] });
act(() => {
Simulate.mouseOver(wrapper);
});
expect(getVisibleTooltip()).toMatchSnapshot();
});
}
}
it('hides tooltip on mouseleave', () => {
const wrapper = getComponent();

76
test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
View File

@ -1,9 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<TooltipTarget /> displays tooltip on mouseover 1`] = `
exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="right: 1024px; top: -26px; display: block;"
style="top: 6px; left: 0px; transform: translate(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="top: -50px; left: 0px; transform: translate(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="right: 1030px; top: 0px; transform: translateY(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="left: 6px; top: 0px; transform: translateY(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="left: 6px; top: 0px; transform: translateY(-50%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="top: -6px; left: 0px; transform: translate(-50%, -100%); display: block;"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays TopRight aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="top: -6px; right: 1024px; transform: translateY(-100%); display: block;"
>
<div
class="mx_Tooltip_chevron"