Skip to content

EX-1404 - fix: tooltip position on small screen size #399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 16, 2021
Merged

EX-1404 - fix: tooltip position on small screen size #399

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
94563fd
fix: tooltip position on small screen size
jplorek-atix Apr 6, 2021
0196c17
fix: revert unnecessary changes
jplorek-atix Apr 6, 2021
b18ac5b
Update source/features/transactions/components/TransactionTokenList.tsx
jplorek-atix Apr 14, 2021
475869d
feat: tokens tooltip dynamic positioning
jplorek-atix Apr 14, 2021
db89719
fix: position of tooltip on scrollable token list
jplorek-atix Apr 14, 2021
ed356fe
feat: remove unused code
jplorek-atix Apr 14, 2021
08df798
fix: linter issues
jplorek-atix Apr 14, 2021
378595e
fix: token tooltip styles for transaction and address pages
jplorek-atix Apr 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 1 addition & 16 deletions source/features/address/ui/AddressSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { isEmpty } from 'lodash';
import { observer } from 'mobx-react-lite';
import QRCode from 'qrcode.react';
import { useState } from 'react';
import DividerWithTitle from '../../../widgets/divider-with-title/DividerWithTitle';
import { useI18nFeature } from '../../i18n/context';
import TokenList from '../../transactions/components/TransactionTokenList';
Expand Down Expand Up @@ -41,20 +40,8 @@ function isStakeAddress(
}

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

const handleMouseOver = (
event: React.MouseEvent<HTMLSpanElement, MouseEvent>
) => {
const { offsetTop, offsetLeft, offsetWidth } = event.currentTarget;
setTooltipPosition((prevState) => ({
...prevState,
left: offsetLeft + offsetWidth,
top: offsetTop,
}));
};

return (
<div className={styles.addressSummaryContainer}>
<div className={styles.header}>
Expand Down Expand Up @@ -88,9 +75,7 @@ const AddressSummary = (props: AddressSummaryProps) => {
{translate('address.tokensBalance')}
</div>
<div className={styles.infoValue}>
<TokenList
tokens={props.tokensBalance!}
/>
<TokenList tokens={props.tokensBalance!} />
</div>
</div>
)}
Expand Down
10 changes: 3 additions & 7 deletions source/features/transactions/components/TransactionInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ interface IAddressesRowProps {
const AddressesRow = ({
addresses,
highlightedAddress,
isMobile
isMobile,
}: IAddressesRowProps) => (
<>
{addresses?.filter(isDefined).map((io, index) => (
Expand Down Expand Up @@ -194,9 +194,7 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
{translate('transaction.minted')}
</div>
<div className={styles.value}>
<TokenList
tokens={props.mint!}
/>
<TokenList tokens={props.mint!} />
</div>
</div>
)}
Expand All @@ -209,9 +207,7 @@ const TransactionInfo = (props: ITransactionInfoProps) => {
{translate('transaction.burned')}
</div>
<div className={styles.value}>
<TokenList
tokens={props.burn!}
/>
<TokenList tokens={props.burn!} />
</div>
</div>
)}
Expand Down
85 changes: 56 additions & 29 deletions source/features/transactions/components/TransactionTokenList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,27 @@ import { TOKEN_LENGTH_TO_SCROLL } from '../constants';
import { IAsset, IToken } from '../types';
import styles from './TransactionTokenList.module.scss';

const TokenList = (props: { tokens: IToken[]; }) => {
const [tooltipPosition, setTooltipPosition] = useState({});
const TokenList = (props: {
tokens: IToken[];
tooltipPositioning?: string;
}) => {
const [tooltipPosition, setTooltipPosition] = useState<object>();
const containerRef = useRef<HTMLDivElement>(null);

const [asset, setAsset] = useState<IAsset>({
assetName: '',
description: '',
fingerprint: '',
policyId: ''
policyId: '',
});
const [isVisible, setIsVisible] = useState(false);

const handleMouseOver = (
event: React.MouseEvent<HTMLSpanElement, MouseEvent>,
item: IAsset
) => {
const { offsetLeft } = event.currentTarget;
setTooltipPosition((prevState) => ({
...prevState,
left: offsetLeft + 120 * 0.75,
top: containerRef.current?.offsetTop! + 75,
setTooltipPosition(() => ({
top: containerRef.current?.offsetTop! - 5,
}));
setAsset(item);
setIsVisible(true);
Expand All @@ -38,12 +39,23 @@ const TokenList = (props: { tokens: IToken[]; }) => {
label={asset.fingerprint}
body={
<ul>
<li><strong>Ticker</strong>: {asset.ticker}</li>
<li><strong>Name</strong>: {asset.name}</li>
<li><strong>Description</strong>: {asset.description}</li>
<li><strong>Policy ID</strong>: {asset.policyId}</li>
<li><strong>Asset Name</strong>: {asset.assetName}</li>
</ul>}
<li>
<strong>Ticker</strong>: {asset.ticker}
</li>
<li>
<strong>Name</strong>: {asset.name}
</li>
<li>
<strong>Description</strong>: {asset.description}
</li>
<li>
<strong>Policy ID</strong>: {asset.policyId}
</li>
<li>
<strong>Asset Name</strong>: {asset.assetName}
</li>
</ul>
}
/>
</div>
)}
Expand All @@ -58,35 +70,50 @@ const TokenList = (props: { tokens: IToken[]; }) => {
}}
className={styles.token}
>
{`${t.quantity} ${t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)}`}{' '}
{`${t.quantity} ${
t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)
}`}{' '}
</span>
))}
</div>
) : (
<div ref={containerRef} className={styles.tokenList}>
<div className={styles.tokenList}>
{props.tokens.map((t) => (
<span className={styles.token}>
<span className={styles.token}>
<Tooltip
content={
<ContentContainer
label={t.asset.fingerprint}
body={<>
<ul>
<li><strong>Ticker</strong>: {t.asset.ticker}</li>
<li><strong>Name</strong>: {t.asset.name}</li>
<li><strong>Description</strong>: {t.asset.description}</li>
<li><strong>Policy ID</strong>: {t.asset.policyId}</li>
<li><strong>Asset Name</strong>: {t.asset.assetName}</li>
</ul>
</>}
body={
<>
<ul>
<li>
<strong>Ticker</strong>: {t.asset.ticker}
</li>
<li>
<strong>Name</strong>: {t.asset.name}
</li>
<li>
<strong>Description</strong>: {t.asset.description}
</li>
<li>
<strong>Policy ID</strong>: {t.asset.policyId}
</li>
<li>
<strong>Asset Name</strong>: {t.asset.assetName}
</li>
</ul>
</>
}
/>
}
>
{`${t.quantity} ${t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)}`}
{`${t.quantity} ${
t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)
}`}
</Tooltip>
</span>
)
)}
))}
</div>
)}
</>
Expand Down
22 changes: 17 additions & 5 deletions source/widgets/tooltip/Tooltip.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@
cursor: pointer;
position: relative;
}
.tooltip .translateCenter {

.tooltip .translateCenter,
.tooltip .translateRightTop {
@include text(11px, 300, var(--solid-text-color), 1.3px);
visibility: hidden;
text-align: left;
padding: 5px 10px;
background: #121326;
Expand All @@ -25,12 +26,23 @@
z-index: 9999000;
opacity: 1 !important;
width: 300px;
top: -5px;
left: 100px;
transition-delay: 0.2s;
@media (min-width: 768px) {
visibility: hidden;
}
}

.tooltip .translateCenter {
top: -5px;
}

.tooltip .translateRightTop {
top: -5px;
right: -15px;
}

.tooltip:hover .translateCenter {
.tooltip:hover .translateCenter,
.tooltip:hover .translateRightTop {
visibility: visible;
}

Expand Down
60 changes: 48 additions & 12 deletions source/widgets/tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import styles from './Tooltip.module.scss';

interface ITooltipProps {
Expand All @@ -8,26 +9,61 @@ interface ITooltipProps {
style?: object;
}

export const ContentContainer = (props: { label: string; body?: React.ReactNode }) => (
export const ContentContainer = (props: {
label: string;
body?: React.ReactNode;
}) => (
<div className={styles.contentContainer}>
<div className={styles.label}>{props.label}</div>
{ props.body ?? <div className={styles.body}>{props.body}</div> }
{props.body ?? <div className={styles.body}>{props.body}</div>}
</div>
);

const Tooltip = ({
children,
theme,
themeClass,
theme = 'tooltip',
themeClass = 'translateCenter',
content,
style,
}: ITooltipProps) => (
<div className={styles[theme ?? 'tooltip']}>
<span style={style} className={styles[themeClass || 'translateCenter']}>
{content}
</span>
{children}
</div>
);
}: ITooltipProps) => {
const tooltipRef = useRef<HTMLDivElement>(null);
const [isVisible, setIsVisible] = useState(false);
const isMobile = window.innerWidth <= 768;

const [positioning, setPositioning] = useState<object>();

useEffect(() => {
const distanceFromRight = tooltipRef.current?.getBoundingClientRect()
.right!;

if (distanceFromRight > window.innerWidth) {
const x = window.innerWidth - distanceFromRight - 10;
setPositioning({ left: x });
}
}, [isVisible]);

return isMobile ? (
<div className={styles[theme]}>
{isVisible && (
<span
style={positioning}
ref={tooltipRef}
className={styles[themeClass]}
>
{content}
</span>
)}

<div onClick={() => setIsVisible(!isVisible)}>{children}</div>
</div>
) : (
<div className={styles[theme]}>
<span style={positioning} ref={tooltipRef} className={styles[themeClass]}>
{content}
</span>
{children}
</div>
);
};

export default Tooltip;