zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: isSyncing and user-select cleaning UI

This commit is contained in:
André Neves 2019-01-23 22:13:08 -05:00
parent b4df7c3769
commit 300c7c254a
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/status-pill.js
View File

@ -43,6 +43,7 @@ const StatusPillLabel = styled(TextComponent)`
text-transform: uppercase; text-transform: uppercase;
font-size: 10px; font-size: 10px;
padding-top: 1px; padding-top: 1px;
user-select: none;
`; `;
type Props = {}; type Props = {};
@ -51,7 +52,7 @@ type State = {
type: string, type: string,
icon: string, icon: string,
progress: number, progress: number,
isSynching: boolean, isSyncing: boolean,
}; };
export class StatusPill extends Component<Props, State> { export class StatusPill extends Component<Props, State> {
@ -61,7 +62,7 @@ export class StatusPill extends Component<Props, State> {
type: 'synching', type: 'synching',
icon: syncIcon, icon: syncIcon,
progress: 0, progress: 0,
isSynching: true, isSyncing: true,
}; };
componentDidMount() { componentDidMount() {
@ -89,7 +90,7 @@ export class StatusPill extends Component<Props, State> {
...(newProgress > 99.99 ? { ...(newProgress > 99.99 ? {
type: 'ready', type: 'ready',
icon: readyIcon, icon: readyIcon,
isSynching: false, isSyncing: false,
} : {}), } : {}),
}); });
@ -100,13 +101,13 @@ export class StatusPill extends Component<Props, State> {
render() { render() {
const { const {
type, icon, progress, isSynching, type, icon, progress, isSyncing,
} = this.state; } = this.state;
const showPercent = isSynching ? `(${progress.toFixed(2)}%)` : ''; const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : '';
return ( return (
<Wrapper> <Wrapper>
<Icon src={icon} animated={isSynching} /> <Icon src={icon} animated={isSyncing} />
<StatusPillLabel value={`${type} ${showPercent}`} /> <StatusPillLabel value={`${type} ${showPercent}`} />
</Wrapper> </Wrapper>
); );