Merge pull request #100 from andrerfneves/feature/pill-status-tooltip
Status Pill Tooltip
This commit is contained in:
commit
8726b1b702
|
@ -33,6 +33,7 @@ const Wrapper = styled.div`
|
||||||
border: 1px solid ${props => props.theme.colors.statusPillBorder}
|
border: 1px solid ${props => props.theme.colors.statusPillBorder}
|
||||||
border-radius: 27px;
|
border-radius: 27px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Icon = styled.img`
|
const Icon = styled.img`
|
||||||
|
@ -54,16 +55,63 @@ const StatusPillLabel = styled(TextComponent)`
|
||||||
user-select: none;
|
user-select: none;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Tooltip = styled.div`
|
||||||
|
background: ${props => props.theme.colors.walletAddressTooltipBg};
|
||||||
|
position: absolute;
|
||||||
|
bottom: -35px;
|
||||||
|
right: 5px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
|
z-index: 100;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 90%;
|
||||||
|
border: solid transparent;
|
||||||
|
content: ' ';
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
border-color: transparent;
|
||||||
|
border-bottom-color: ${props => props.theme.colors.walletAddressTooltipBg};
|
||||||
|
border-width: 5px;
|
||||||
|
margin-left: -5px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TooltipText = styled(TextComponent)`
|
||||||
|
color: ${props => props.theme.colors.walletAddressTooltip};
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
theme: AppTheme,
|
theme: AppTheme,
|
||||||
} & MapStateToProps &
|
} & MapStateToProps &
|
||||||
MapDispatchToProps;
|
MapDispatchToProps;
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
showTooltip: boolean,
|
||||||
|
};
|
||||||
|
|
||||||
const MINUTE_IN_MILI = 60000;
|
const MINUTE_IN_MILI = 60000;
|
||||||
|
|
||||||
class Component extends PureComponent<Props> {
|
class Component extends PureComponent<Props, State> {
|
||||||
timer: ?IntervalID = null;
|
timer: ?IntervalID = null;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
showTooltip: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { getBlockchainStatus } = this.props;
|
const { getBlockchainStatus } = this.props;
|
||||||
|
|
||||||
|
@ -128,14 +176,40 @@ class Component extends PureComponent<Props> {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getStatusText = () => {
|
||||||
|
const { nodeSyncType } = this.props;
|
||||||
|
|
||||||
|
switch (nodeSyncType) {
|
||||||
|
case 'syncing':
|
||||||
|
return "Syncing blockchain data. You may not send funds or see latest transactions until it's synced 100%";
|
||||||
|
case 'ready':
|
||||||
|
return 'Your chain data is up to date';
|
||||||
|
case 'error':
|
||||||
|
return 'There was an error. Try restarting Zepio';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const icon = this.getIcon();
|
const icon = this.getIcon();
|
||||||
const { nodeSyncType, nodeSyncProgress } = this.props;
|
const { nodeSyncType, nodeSyncProgress } = this.props;
|
||||||
|
const { showTooltip } = this.state;
|
||||||
const percent = nodeSyncType === NODE_SYNC_TYPES.SYNCING ? `(${nodeSyncProgress.toFixed(2)}%)` : '';
|
const percent = nodeSyncType === NODE_SYNC_TYPES.SYNCING ? `(${nodeSyncProgress.toFixed(2)}%)` : '';
|
||||||
const typeText = nodeSyncType === NODE_SYNC_TYPES.READY ? 'Synced' : nodeSyncType;
|
const typeText = nodeSyncType === NODE_SYNC_TYPES.READY ? 'Synced' : nodeSyncType;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper id='status-pill'>
|
// eslint-disable-next-line
|
||||||
|
<Wrapper
|
||||||
|
onMouseOver={() => this.setState({ showTooltip: true })}
|
||||||
|
onMouseOut={() => this.setState({ showTooltip: false })}
|
||||||
|
id='status-pill'
|
||||||
|
>
|
||||||
|
{showTooltip && (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipText value={this.getStatusText()} />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
{icon && <Icon src={icon} animated={this.isSyncing()} />}
|
{icon && <Icon src={icon} animated={this.isSyncing()} />}
|
||||||
<StatusPillLabel value={`${typeText} ${percent}`} />
|
<StatusPillLabel value={`${typeText} ${percent}`} />
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
|
Loading…
Reference in New Issue