hide tooltip when blured

fixes #385
This commit is contained in:
Sérgio Ramos 2017-03-22 16:50:21 +00:00 committed by Judit Greskovits
parent 58d786c099
commit faabc8b6d8
8 changed files with 98 additions and 92 deletions

View File

@ -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 : (
<Tooltip
onBlur={handleHeaderToggle}
arrowPosition={arrowPosition}
right={0}
top={39}
@ -111,12 +107,7 @@ const Header = ({
);
return (
<StyledHeader
name='application-header'
onBlur={handleHideToggle}
onFocus={handleHideToggle}
{...props}
>
<StyledHeader name='application-header' {...props}>
<Row>
<Column lg={10} xs={8}>
<Link to='/'>
@ -126,7 +117,7 @@ const Header = ({
<Column lg={2} xs={4}>
<StyledProfileWrapper>
<StyledAvatarWrapper toggled={tooltip}>
<EmptyButton onClick={handleToggleClick}>
<EmptyButton onClick={handleHeaderToggle}>
<StyledName>
{account.name}
</StyledName>
@ -147,7 +138,7 @@ const Header = ({
Header.propTypes = {
account: PropTypes.account,
handleToggle: React.PropTypes.func,
onHeaderToggle: React.PropTypes.func,
tooltip: React.PropTypes.bool
};

View File

@ -1,14 +1,15 @@
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 ? (
<Tooltip {...position}>
position,
...rest
}) => show ? (
<Tooltip {...position} {...rest}>
<li>
<TooltipButton href={scaleLink}>
Scale
@ -34,8 +35,7 @@ const ServicesTooltip = ({
<TooltipButton>Delete</TooltipButton>
</li>
</Tooltip>
) : null;
};
) : null;
ServicesTooltip.propTypes = {
position: React.PropTypes.object,

View File

@ -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);
}

View File

@ -10,7 +10,7 @@ const mapStateToProps = (state, ownProps) => ({
});
const mapDispatchToProps = (dispatch) => ({
handleToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
onHeaderToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
});
export default connect(

View File

@ -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) => (
<ServiceItem
@ -79,13 +78,19 @@ class Services extends React.Component {
/>
));
// TODO replace `false` with a check for existence unmanaged instances
// eslint-disable-next-line no-constant-condition
const unmanagedInstances = false ? (
<UnmanagedInstances instances={0} />
) : null;
return (
<LayoutContainer>
{ instances && <UnmanagedInstances instances={instances} /> }
{unmanagedInstances}
<StyledContainer>
<div ref={this.ref('container')}>
{serviceList}
<ServicesTooltip {...uiTooltip} />
<ServicesTooltip {...uiTooltip} onBlur={handleTooltipBlur} />
</div>
</StyledContainer>
</LayoutContainer>

View File

@ -6,7 +6,7 @@ export default handleActions({
...state,
ui: {
...state.ui,
tooltip: action.payload
tooltip: !state.ui.tooltip
}
})
}, {});

View File

@ -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: {

View File

@ -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 = ({
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%'
},
...props
}) => (
<StyledContainer {...props}>
<StyledList arrowPosition={arrowPosition} {...props}>
...rest
} = this.props;
return (
<StyledContainer
innerRef={this.ref('ul')}
tabIndex={-1}
{...rest}
>
<StyledList arrowPosition={arrowPosition} {...rest}>
{children}
</StyledList>
</StyledContainer>
);
);
}
}
Tooltip.propTypes = {
arrowPosition: React.PropTypes.object,