PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Fix left positioned tooltips being wrong and offset by fixed value (#7551)

Browse source 
Previously, the `left` positioning seemed to only work with icons which are all about the same size so the arbitrary offset worked. Now we actually position off to the left of the element and we have equal `margin-left` and `margin-right` to determine the offset.

Spawned from https://github.com/matrix-org/matrix-react-sdk/pull/7339#discussion_r767154349
This commit is contained in:
Eric Eastwood 2022-01-18 21:08:11 -06:00 committed by GitHub
parent b50060bcfc
commit a00d359422
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
res/css/views/elements/_Tooltip.scss
View file

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

4
res/css/views/rooms/_EventTile.scss
View file

@ -20,6 +20,10 @@ $left-gutter: 64px;
.mx_EventTile { .mx_EventTile {
.mx_EventTile_receiptSent, .mx_EventTile_receiptSent,
.mx_EventTile_receiptSending { .mx_EventTile_receiptSending {
// Give it some dimensions so the tooltip can position properly
display: inline-block;
width: 14px;
height: 14px;
// We don't use `position: relative` on the element because then it won't line // We don't use `position: relative` on the element because then it won't line
// up with the other read receipts // up with the other read receipts

4
src/components/views/elements/Tooltip.tsx
View file

@ -117,8 +117,8 @@ export default class Tooltip extends React.Component<ITooltipProps> {
); );
const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset; const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
const top = baseTop + offset; const top = baseTop + offset;
const right = width - parentBox.right - window.pageXOffset - 16; const right = width - parentBox.left - window.pageXOffset;
const left = parentBox.right + window.pageXOffset + 6; const left = parentBox.right + window.pageXOffset;
const horizontalCenter = ( const horizontalCenter = (
parentBox.left - window.pageXOffset + (parentWidth / 2) parentBox.left - window.pageXOffset + (parentWidth / 2)
); );

2
src/components/views/rooms/EventTile.tsx
View file

@ -1728,7 +1728,7 @@ class SentReceipt extends React.PureComponent<ISentReceiptProps, ISentReceiptSta
} }
// The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated // The yOffset is somewhat arbitrary - it just brings the tooltip down to be more associated
// with the read receipt. // with the read receipt.
tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={20} />; tooltip = <Tooltip className="mx_EventTile_readAvatars_receiptTooltip" label={label} yOffset={3} />;
} }
return ( return (

2
test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
View file

@ -3,7 +3,7 @@
exports[`<TooltipTarget /> displays tooltip on mouseover 1`] = ` exports[`<TooltipTarget /> displays tooltip on mouseover 1`] = `
<div <div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible" class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
style="right: 1008px; top: -26px; display: block;" style="right: 1024px; top: -26px; display: block;"
> >
<div <div
class="mx_Tooltip_chevron" class="mx_Tooltip_chevron"