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-radius: 27px;
|
||||
padding: 8px 16px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
|
@ -54,16 +55,63 @@ const StatusPillLabel = styled(TextComponent)`
|
|||
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 = {
|
||||
theme: AppTheme,
|
||||
} & MapStateToProps &
|
||||
MapDispatchToProps;
|
||||
|
||||
type State = {
|
||||
showTooltip: boolean,
|
||||
};
|
||||
|
||||
const MINUTE_IN_MILI = 60000;
|
||||
|
||||
class Component extends PureComponent<Props> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
timer: ?IntervalID = null;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showTooltip: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
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() {
|
||||
const icon = this.getIcon();
|
||||
const { nodeSyncType, nodeSyncProgress } = this.props;
|
||||
const { showTooltip } = this.state;
|
||||
const percent = nodeSyncType === NODE_SYNC_TYPES.SYNCING ? `(${nodeSyncProgress.toFixed(2)}%)` : '';
|
||||
const typeText = nodeSyncType === NODE_SYNC_TYPES.READY ? 'Synced' : nodeSyncType;
|
||||
|
||||
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()} />}
|
||||
<StatusPillLabel value={`${typeText} ${percent}`} />
|
||||
</Wrapper>
|
||||
|
|
Loading…
Reference in New Issue