diff --git a/TODO.md b/TODO.md index 0f78690..9e8c623 100644 --- a/TODO.md +++ b/TODO.md @@ -1,12 +1,14 @@ # TODO - [ ] Fix: Tooltips cause horizontal scroll on less-wide screens. Investigate. -- [ ] Fix: Tooltip flicker on page load, initially positioned in the top left - [ ] Fix: Tooltips positioned incorrectly after animating back to Home +- [ ] Lay out Talents using flexbox - [ ] Move routing logic from `Home` into `Calculator` - [ ] Responsiveness: - - [ ] Tooltips on mobile need different UX + - [ ] Talent tooltips on mobile need different UX - [ ] Tooltips: - [ ] Support multiple positions for tooltip (currently only `top-right` with fallbacks based on viewport) + - [ ] Performance: see if we can cache Trigger's getBoundingClientRect and reset it on url change (?) + - [ ] Move icons back under `/src` when https://github.com/facebook/create-react-app/pull/6060 is released as part of 3.0.2 \ No newline at end of file diff --git a/src/components/Tooltip/Controller.tsx b/src/components/Tooltip/Controller.tsx index bf5de0a..9c916d2 100644 --- a/src/components/Tooltip/Controller.tsx +++ b/src/components/Tooltip/Controller.tsx @@ -28,6 +28,7 @@ export class Controller extends React.PureComponent { position: 'absolute' as 'absolute', left: 0, top: 0, + opacity: 0, }), triggerRect: Map({ left: 0, @@ -38,11 +39,13 @@ export class Controller extends React.PureComponent { } handleMouseEnter = () => { + // TODO: cache this even for url transition (?), it's "expensive" and triggers reflow + const { width, height, top, left } = (ReactDOM.findDOMNode(this.trigger.current) as HTMLElement).getBoundingClientRect() + this.setState({ isVisible: true, - style: this.state.style.merge(this.getPosition()) + triggerRect: this.state.triggerRect.merge({ width, height, top, left }) }) - } handleMouseLeave = () => { @@ -54,21 +57,22 @@ export class Controller extends React.PureComponent { const { width, height } = (ReactDOM.findDOMNode(this.tooltip.current) as HTMLElement).getBoundingClientRect() const { style, tooltipDimensions } = this.state + const newTooltipDimensions = tooltipDimensions.merge({ width, height }) this.setState({ - tooltipDimensions: tooltipDimensions.merge({ width, height }), - style: style.merge({ ...this.getPosition() }) + tooltipDimensions: newTooltipDimensions, + style: style.merge({ ...this.getPosition(newTooltipDimensions) }) }) } } - getPosition = (): { top: number, left: number } => { - const { tooltipDimensions, triggerRect } = this.state - return calculatePosition(this.props.position, triggerRect, tooltipDimensions) + getPosition = (tooltipDimensions = this.state.tooltipDimensions): { top: number, left: number } => { + return calculatePosition(this.props.position, this.state.triggerRect, tooltipDimensions) } updateTriggerRect = (triggerRect: { left: number, top: number, width: number, height: number }) => { this.setState({ - triggerRect: this.state.triggerRect.merge(triggerRect) + triggerRect: this.state.triggerRect.merge(triggerRect), + style: this.state.style.set('opacity', 1) }) } @@ -158,5 +162,3 @@ const calculatePosition = (pos: TooltipPosition, trigger: Map, t return { top, left } } - - diff --git a/src/containers/Home.tsx b/src/containers/Home.tsx index 1a97482..7664a41 100644 --- a/src/containers/Home.tsx +++ b/src/containers/Home.tsx @@ -99,7 +99,7 @@ export class Home extends React.PureComponent {
{!selectedClass && -

Choose your class

+

Choose a class

}