Skip to content

Commit 213f5c3

Browse files
jplorek-atixjplorek-atix
authored
EX-1404 - fix: tooltip position on small screen size (#399)
* fix: tooltip position on small screen size issue ref: #395
1 parent bfd86ea commit 213f5c3

File tree

5 files changed

+126
-69
lines changed

5 files changed

+126
-69
lines changed

‎source/features/address/ui/AddressSummary.tsx

+1-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { isEmpty } from 'lodash';
22
import { observer } from 'mobx-react-lite';
33
import QRCode from 'qrcode.react';
4-
import { useState } from 'react';
54
import DividerWithTitle from '../../../widgets/divider-with-title/DividerWithTitle';
65
import { useI18nFeature } from '../../i18n/context';
76
import TokenList from '../../transactions/components/TransactionTokenList';
@@ -41,20 +40,8 @@ function isStakeAddress(
4140
}
4241

4342
const AddressSummary = (props: AddressSummaryProps) => {
44-
const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
4543
const { translate } = useI18nFeature().store;
4644

47-
const handleMouseOver = (
48-
event: React.MouseEvent<HTMLSpanElement, MouseEvent>
49-
) => {
50-
const { offsetTop, offsetLeft, offsetWidth } = event.currentTarget;
51-
setTooltipPosition((prevState) => ({
52-
...prevState,
53-
left: offsetLeft + offsetWidth,
54-
top: offsetTop,
55-
}));
56-
};
57-
5845
return (
5946
<div className={styles.addressSummaryContainer}>
6047
<div className={styles.header}>
@@ -88,9 +75,7 @@ const AddressSummary = (props: AddressSummaryProps) => {
8875
{translate('address.tokensBalance')}
8976
</div>
9077
<div className={styles.infoValue}>
91-
<TokenList
92-
tokens={props.tokensBalance!}
93-
/>
78+
<TokenList tokens={props.tokensBalance!} />
9479
</div>
9580
</div>
9681
)}

‎source/features/transactions/components/TransactionInfo.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ interface IAddressesRowProps {
5454
const AddressesRow = ({
5555
addresses,
5656
highlightedAddress,
57-
isMobile
57+
isMobile,
5858
}: IAddressesRowProps) => (
5959
<>
6060
{addresses?.filter(isDefined).map((io, index) => (
@@ -194,9 +194,7 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
194194
{translate('transaction.minted')}
195195
</div>
196196
<div className={styles.value}>
197-
<TokenList
198-
tokens={props.mint!}
199-
/>
197+
<TokenList tokens={props.mint!} />
200198
</div>
201199
</div>
202200
)}
@@ -209,9 +207,7 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
209207
{translate('transaction.burned')}
210208
</div>
211209
<div className={styles.value}>
212-
<TokenList
213-
tokens={props.burn!}
214-
/>
210+
<TokenList tokens={props.burn!} />
215211
</div>
216212
</div>
217213
)}

‎source/features/transactions/components/TransactionTokenList.tsx

+56-29
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,27 @@ import { TOKEN_LENGTH_TO_SCROLL } from '../constants';
55
import { IAsset, IToken } from '../types';
66
import styles from './TransactionTokenList.module.scss';
77

8-
const TokenList = (props: { tokens: IToken[]; }) => {
9-
const [tooltipPosition, setTooltipPosition] = useState({});
8+
const TokenList = (props: {
9+
tokens: IToken[];
10+
tooltipPositioning?: string;
11+
}) => {
12+
const [tooltipPosition, setTooltipPosition] = useState<object>();
1013
const containerRef = useRef<HTMLDivElement>(null);
14+
1115
const [asset, setAsset] = useState<IAsset>({
1216
assetName: '',
1317
description: '',
1418
fingerprint: '',
15-
policyId: ''
19+
policyId: '',
1620
});
1721
const [isVisible, setIsVisible] = useState(false);
1822

1923
const handleMouseOver = (
2024
event: React.MouseEvent<HTMLSpanElement, MouseEvent>,
2125
item: IAsset
2226
) => {
23-
const { offsetLeft } = event.currentTarget;
24-
setTooltipPosition((prevState) => ({
25-
...prevState,
26-
left: offsetLeft + 120 * 0.75,
27-
top: containerRef.current?.offsetTop! + 75,
27+
setTooltipPosition(() => ({
28+
top: containerRef.current?.offsetTop! - 5,
2829
}));
2930
setAsset(item);
3031
setIsVisible(true);
@@ -38,12 +39,23 @@ const TokenList = (props: { tokens: IToken[]; }) => {
3839
label={asset.fingerprint}
3940
body={
4041
<ul>
41-
<li><strong>Ticker</strong>: {asset.ticker}</li>
42-
<li><strong>Name</strong>: {asset.name}</li>
43-
<li><strong>Description</strong>: {asset.description}</li>
44-
<li><strong>Policy ID</strong>: {asset.policyId}</li>
45-
<li><strong>Asset Name</strong>: {asset.assetName}</li>
46-
</ul>}
42+
<li>
43+
<strong>Ticker</strong>: {asset.ticker}
44+
</li>
45+
<li>
46+
<strong>Name</strong>: {asset.name}
47+
</li>
48+
<li>
49+
<strong>Description</strong>: {asset.description}
50+
</li>
51+
<li>
52+
<strong>Policy ID</strong>: {asset.policyId}
53+
</li>
54+
<li>
55+
<strong>Asset Name</strong>: {asset.assetName}
56+
</li>
57+
</ul>
58+
}
4759
/>
4860
</div>
4961
)}
@@ -58,35 +70,50 @@ const TokenList = (props: { tokens: IToken[]; }) => {
5870
}}
5971
className={styles.token}
6072
>
61-
{`${t.quantity} ${t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)}`}{' '}
73+
{`${t.quantity} ${
74+
t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)
75+
}`}{' '}
6276
</span>
6377
))}
6478
</div>
6579
) : (
66-
<div ref={containerRef} className={styles.tokenList}>
80+
<div className={styles.tokenList}>
6781
{props.tokens.map((t) => (
68-
<span className={styles.token}>
82+
<span className={styles.token}>
6983
<Tooltip
7084
content={
7185
<ContentContainer
7286
label={t.asset.fingerprint}
73-
body={<>
74-
<ul>
75-
<li><strong>Ticker</strong>: {t.asset.ticker}</li>
76-
<li><strong>Name</strong>: {t.asset.name}</li>
77-
<li><strong>Description</strong>: {t.asset.description}</li>
78-
<li><strong>Policy ID</strong>: {t.asset.policyId}</li>
79-
<li><strong>Asset Name</strong>: {t.asset.assetName}</li>
80-
</ul>
81-
</>}
87+
body={
88+
<>
89+
<ul>
90+
<li>
91+
<strong>Ticker</strong>: {t.asset.ticker}
92+
</li>
93+
<li>
94+
<strong>Name</strong>: {t.asset.name}
95+
</li>
96+
<li>
97+
<strong>Description</strong>: {t.asset.description}
98+
</li>
99+
<li>
100+
<strong>Policy ID</strong>: {t.asset.policyId}
101+
</li>
102+
<li>
103+
<strong>Asset Name</strong>: {t.asset.assetName}
104+
</li>
105+
</ul>
106+
</>
107+
}
82108
/>
83109
}
84110
>
85-
{`${t.quantity} ${t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)}`}
111+
{`${t.quantity} ${
112+
t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)
113+
}`}
86114
</Tooltip>
87115
</span>
88-
)
89-
)}
116+
))}
90117
</div>
91118
)}
92119
</>

‎source/widgets/tooltip/Tooltip.module.scss

+17-5
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
cursor: pointer;
1212
position: relative;
1313
}
14-
.tooltip .translateCenter {
14+
15+
.tooltip .translateCenter,
16+
.tooltip .translateRightTop {
1517
@include text(11px, 300, var(--solid-text-color), 1.3px);
16-
visibility: hidden;
1718
text-align: left;
1819
padding: 5px 10px;
1920
background: #121326;
@@ -25,12 +26,23 @@
2526
z-index: 9999000;
2627
opacity: 1 !important;
2728
width: 300px;
28-
top: -5px;
29-
left: 100px;
3029
transition-delay: 0.2s;
30+
@media (min-width: 768px) {
31+
visibility: hidden;
32+
}
33+
}
34+
35+
.tooltip .translateCenter {
36+
top: -5px;
37+
}
38+
39+
.tooltip .translateRightTop {
40+
top: -5px;
41+
right: -15px;
3142
}
3243

33-
.tooltip:hover .translateCenter {
44+
.tooltip:hover .translateCenter,
45+
.tooltip:hover .translateRightTop {
3446
visibility: visible;
3547
}
3648

‎source/widgets/tooltip/Tooltip.tsx

+49-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useEffect, useRef, useState } from 'react';
12
import styles from './Tooltip.module.scss';
23

34
interface ITooltipProps {
@@ -8,26 +9,62 @@ interface ITooltipProps {
89
style?: object;
910
}
1011

11-
export const ContentContainer = (props: { label: string; body?: React.ReactNode }) => (
12+
export const ContentContainer = (props: {
13+
label: string;
14+
body?: React.ReactNode;
15+
}) => (
1216
<div className={styles.contentContainer}>
1317
<div className={styles.label}>{props.label}</div>
14-
{ props.body ?? <div className={styles.body}>{props.body}</div> }
18+
{props.body ?? <div className={styles.body}>{props.body}</div>}
1519
</div>
1620
);
1721

1822
const Tooltip = ({
1923
children,
20-
theme,
21-
themeClass,
24+
theme = 'tooltip',
25+
themeClass = 'translateCenter',
2226
content,
2327
style,
24-
}: ITooltipProps) => (
25-
<div className={styles[theme ?? 'tooltip']}>
26-
<span style={style} className={styles[themeClass || 'translateCenter']}>
27-
{content}
28-
</span>
29-
{children}
30-
</div>
31-
);
28+
}: ITooltipProps) => {
29+
const tooltipRef = useRef<HTMLDivElement>(null);
30+
const windowWidth = useRef(window.innerWidth);
31+
const [isVisible, setIsVisible] = useState(false);
32+
const isMobile = window.innerWidth <= 768;
33+
34+
const [positioning, setPositioning] = useState<object>();
35+
36+
useEffect(() => {
37+
const distanceFromRight = tooltipRef.current?.getBoundingClientRect()
38+
.right!;
39+
40+
if (distanceFromRight > windowWidth.current) {
41+
const x = windowWidth.current - distanceFromRight - 10;
42+
setPositioning({ left: x });
43+
}
44+
}, [isVisible]);
45+
46+
return isMobile ? (
47+
<div className={styles[theme]}>
48+
{isVisible && (
49+
<span
50+
style={positioning}
51+
ref={tooltipRef}
52+
className={styles[themeClass]}
53+
>
54+
{content}
55+
</span>
56+
)}
57+
58+
<div onClick={() => setIsVisible(!isVisible)}>{children}</div>
59+
</div>
60+
) : (
61+
<div className={styles[theme]}>
62+
<span style={positioning} ref={tooltipRef} className={styles[themeClass]}>
63+
{content}
64+
</span>
65+
{children}
66+
</div>
67+
);
68+
};
3269

3370
export default Tooltip;

0 commit comments

Comments
 (0)