diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-22 07:35:49 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-05-22 12:25:42 +0800 |
commit | 26370da13d7bed06d59efeba0a4921387b874e06 (patch) | |
tree | bc99e7a69e0e7ee22e10d47e27beaa1d270cf950 /packages/website/ts/components/ui | |
parent | d460c0e8b9c6f4081803fff4e2d2347be8cd5ce3 (diff) | |
download | dexon-0x-contracts-26370da13d7bed06d59efeba0a4921387b874e06.tar dexon-0x-contracts-26370da13d7bed06d59efeba0a4921387b874e06.tar.gz dexon-0x-contracts-26370da13d7bed06d59efeba0a4921387b874e06.tar.bz2 dexon-0x-contracts-26370da13d7bed06d59efeba0a4921387b874e06.tar.lz dexon-0x-contracts-26370da13d7bed06d59efeba0a4921387b874e06.tar.xz dexon-0x-contracts-26370da13d7bed06d59efeba0a4921387b874e06.tar.zst dexon-0x-contracts-26370da13d7bed06d59efeba0a4921387b874e06.zip |
Rewrite balance rows using flex box
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/icon_button.tsx | 63 | ||||
-rw-r--r-- | packages/website/ts/components/ui/token_icon.tsx | 25 |
2 files changed, 79 insertions, 9 deletions
diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx new file mode 100644 index 000000000..2f5172f05 --- /dev/null +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -0,0 +1,63 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +export interface IconButtonProps { + iconName: string; + labelText?: string; + onClick: () => void; + color?: string; +} +interface IconButtonState { + isHovering: boolean; +} +export class IconButton extends React.Component<IconButtonProps, IconButtonState> { + public static defaultProps: Partial<IconButtonProps> = { + onClick: _.noop, + labelText: '', + color: colors.mediumBlue, + }; + public constructor(props: IconButtonProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const styles: Styles = { + root: { + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }, + icon: { + color: this.props.color, + fontSize: 20, + }, + label: { + color: this.props.color, + fontSize: 10, + }, + }; + return ( + <div + className="flex items-center py2" + onClick={this.props.onClick} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} + style={styles.root} + > + <i style={styles.icon} className={`zmdi ${this.props.iconName}`} /> + {!_.isEmpty(this.props.labelText) && ( + <div className="pl1" style={styles.label}> + {this.props.labelText} + </div> + )} + </div> + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx index a9ad567ef..0875cc56b 100644 --- a/packages/website/ts/components/ui/token_icon.tsx +++ b/packages/website/ts/components/ui/token_icon.tsx @@ -6,6 +6,7 @@ import { Token } from 'ts/types'; interface TokenIconProps { token: Token; diameter: number; + link?: string; } interface TokenIconState {} @@ -14,14 +15,20 @@ export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> { public render(): React.ReactNode { const token = this.props.token; const diameter = this.props.diameter; - return ( - <div> - {token.isRegistered && !_.isUndefined(token.iconUrl) ? ( - <img style={{ width: diameter, height: diameter }} src={token.iconUrl} /> - ) : ( - <Identicon address={token.address} diameter={diameter} /> - )} - </div> - ); + const icon = + token.isRegistered && !_.isUndefined(token.iconUrl) ? ( + <img style={{ width: diameter, height: diameter }} src={token.iconUrl} /> + ) : ( + <Identicon address={token.address} diameter={diameter} /> + ); + if (_.isEmpty(this.props.link)) { + return icon; + } else { + return ( + <a href={this.props.link} target="_blank" style={{ textDecoration: 'none' }}> + {icon} + </a> + ); + } } } |