From faabc8b6d827ba763507f5cf6edd8ef800fa2fee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 22 Mar 2017 16:50:21 +0000 Subject: [PATCH] hide tooltip when blured fixes #385 --- frontend/src/components/header/index.js | 23 ++----- frontend/src/components/services/tooltip.js | 66 +++++++++---------- frontend/src/components/services/view.js | 10 +-- frontend/src/containers/header/index.js | 2 +- frontend/src/containers/services/list.js | 13 ++-- frontend/src/state/reducers/account.js | 2 +- frontend/src/state/reducers/services.js | 2 +- ui/src/components/tooltip/index.js | 72 ++++++++++++--------- 8 files changed, 98 insertions(+), 92 deletions(-) diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index 7ac04dcc..ca982557 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -78,22 +78,18 @@ const arrowPosition = { const Header = ({ account, - handleToggle, + onHeaderToggle, tooltip, ...props }) => { - const handleToggleClick = (ev) => { + const handleHeaderToggle = (ev) => { ev.preventDefault(); - handleToggle(!tooltip); - }; - - const handleHideToggle = (ev) => { - ev.preventDefault(); - handleToggle(false); + onHeaderToggle(); }; const tooltipComponent = !tooltip ? null : ( + @@ -126,7 +117,7 @@ const Header = ({ - + {account.name} @@ -147,7 +138,7 @@ const Header = ({ Header.propTypes = { account: PropTypes.account, - handleToggle: React.PropTypes.func, + onHeaderToggle: React.PropTypes.func, tooltip: React.PropTypes.bool }; diff --git a/frontend/src/components/services/tooltip.js b/frontend/src/components/services/tooltip.js index 0a16ccb0..ac7bb974 100644 --- a/frontend/src/components/services/tooltip.js +++ b/frontend/src/components/services/tooltip.js @@ -1,41 +1,41 @@ import React from 'react'; import Tooltip, { TooltipButton, TooltipDivider } from '@ui/components/tooltip'; +// eslint-disable-next-line max-len +const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8'; + const ServicesTooltip = ({ show, - position -}) => { - // eslint-disable-next-line max-len - const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8'; - return show ? ( - -
  • - - Scale - -
    • -
  • - Rollback -
    • -
  • - Reprovision -
    • -
  • - Transfer -
    • -
  • - Setup metrics -
    • - -
  • - Stop -
    • -
  • - Delete -
    • -     - ) : null; -}; + position, + ...rest +}) => show ? ( + +
  • + + Scale + +
    • +
  • + Rollback +
    • +
  • + Reprovision +
    • +
  • + Transfer +
    • +
  • + Setup metrics +
    • + +
  • + Stop +
    • +
  • + Delete +
    • +     +) : null; ServicesTooltip.propTypes = { position: React.PropTypes.object, diff --git a/frontend/src/components/services/view.js b/frontend/src/components/services/view.js index aff0921d..2d31bba4 100644 --- a/frontend/src/components/services/view.js +++ b/frontend/src/components/services/view.js @@ -5,15 +5,10 @@ import Row from '@ui/components/row'; import Column from '@ui/components/column'; import { LayoutContainer } from '@components/layout'; import { H2 } from '@ui/components/base-elements'; -import { - FormGroup, - Toggle, - ToggleList, - Legend -} from '@ui/components/form'; +import { FormGroup, Toggle, ToggleList, Legend } from '@ui/components/form'; import TopologyFilter from '@components/services/topology-filter'; -import styled from 'styled-components'; import { unitcalc, remcalc } from '@ui/shared/functions'; +import styled from 'styled-components'; const StyledLegend = styled(Legend)` float: left; @@ -37,6 +32,7 @@ const ServicesView = ({ evt.preventDefault(); const value = evt.target.value; + if(value !== toggleValue) { onToggle(value); } diff --git a/frontend/src/containers/header/index.js b/frontend/src/containers/header/index.js index 89ec923d..ec8bb2e0 100644 --- a/frontend/src/containers/header/index.js +++ b/frontend/src/containers/header/index.js @@ -10,7 +10,7 @@ const mapStateToProps = (state, ownProps) => ({ }); const mapDispatchToProps = (dispatch) => ({ - handleToggle: (bool) => dispatch(toggleHeaderTooltip(bool)) + onHeaderToggle: (bool) => dispatch(toggleHeaderTooltip(bool)) }); export default connect( diff --git a/frontend/src/containers/services/list.js b/frontend/src/containers/services/list.js index 5841c0a9..892b1ae3 100644 --- a/frontend/src/containers/services/list.js +++ b/frontend/src/containers/services/list.js @@ -25,7 +25,6 @@ const duration = '1 hour'; const interval = '2 minutes'; class Services extends React.Component { - // we DON'T want to unsubscribe once we started going componentWillMount() { this.props.subscribeMetric(interval); @@ -66,7 +65,7 @@ class Services extends React.Component { }); }; - const instances = null; + const handleTooltipBlur = (evt) => onQuickActions(evt, uiTooltip.service); const serviceList = services.map((service) => ( )); + // TODO replace `false` with a check for existence unmanaged instances + // eslint-disable-next-line no-constant-condition + const unmanagedInstances = false ? ( + + ) : null; + return ( - { instances && } + {unmanagedInstances}
    {serviceList} - +
    diff --git a/frontend/src/state/reducers/account.js b/frontend/src/state/reducers/account.js index e87bf8c0..e2891c3b 100644 --- a/frontend/src/state/reducers/account.js +++ b/frontend/src/state/reducers/account.js @@ -6,7 +6,7 @@ export default handleActions({ ...state, ui: { ...state.ui, - tooltip: action.payload + tooltip: !state.ui.tooltip } }) }, {}); diff --git a/frontend/src/state/reducers/services.js b/frontend/src/state/reducers/services.js index 0ed692d1..2b824fc1 100644 --- a/frontend/src/state/reducers/services.js +++ b/frontend/src/state/reducers/services.js @@ -48,13 +48,13 @@ export default handleActions({ ) }), [toggleTooltip.toString()]: (state, action) => { - const { position, service } = action.payload; const show = state.ui.tooltip.service !== service; + const tooltip = show ? { show: true, position: { diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index bc23751e..a748157f 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -1,7 +1,7 @@ import { remcalc, unitcalc } from '../../shared/functions'; import { boxes, colors } from '../../shared/constants'; import styled from 'styled-components'; -import React from 'react'; +import React, { Component } from 'react'; import { absolutePosition, @@ -12,12 +12,12 @@ import { getMeasurement } from '../../shared/composers'; - -const ItemPadder = 9; -const WrapperPadder = 24; - const StyledContainer = styled.div` ${(props) => absolutePosition(props)} + + &:focus { + outline: none; + } `; const StyledList = styled.ul` @@ -29,7 +29,6 @@ const StyledList = styled.ul` list-style-type: none; margin: 0; padding: ${unitcalc(2)} 0; - /*min-width: ${remcalc(200)};*/ position: absolute; top: ${remcalc(4)}; @@ -42,6 +41,7 @@ const StyledList = styled.ul` }}; ${props => props.styles} + ${baseBox({ shadow: boxes.tooltipShadow })} @@ -50,15 +50,6 @@ const StyledList = styled.ul` amount: 1 })} - /*& > * { - - padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)}; - - &:hover { - background: ${colors.base.grey}; - } - }*/ - &:after, &:before { border: solid transparent; height: 0; @@ -73,6 +64,7 @@ const StyledList = styled.ul` border-width: ${remcalc(3)}; margin-left: ${remcalc(-3)}; } + &:before { border-color: rgba(216, 216, 216, 0); border-bottom-color: ${colors.base.grey}; @@ -81,20 +73,42 @@ const StyledList = styled.ul` } `; -const Tooltip = ({ - children, - arrowPosition = { - bottom: '100%', - left: '50%' - }, - ...props -}) => ( - - - {children} - - -); +class Tooltip extends Component { + componentDidMount() { + this._refs.ul.focus(); + } + + ref(name) { + this._refs = this._refs || {}; + + return (el) => { + this._refs[name] = el; + }; + } + + render() { + const { + children, + arrowPosition = { + bottom: '100%', + left: '50%' + }, + ...rest + } = this.props; + + return ( + + + {children} + + + ); + } +} Tooltip.propTypes = { arrowPosition: React.PropTypes.object,