implimenting roles toggle tooltip

This commit is contained in:
Alex Windett 2017-01-24 13:57:24 +00:00
parent cf5505dee9
commit e4dc0a1a6f
7 changed files with 107 additions and 10 deletions

View File

@ -9,6 +9,7 @@ const PersonRole = require('./person-role');
const PeopleTable = (props) => { const PeopleTable = (props) => {
const { const {
handleRoleTooltip,
handleStatusTooltip, handleStatusTooltip,
people = [], people = [],
orgUI = {} orgUI = {}
@ -37,6 +38,15 @@ const PeopleTable = (props) => {
handleStatusTooltip={handleStatusTooltip} handleStatusTooltip={handleStatusTooltip}
membersStatusOptions={orgUI.members_status} membersStatusOptions={orgUI.members_status}
person={person} person={person}
toggledID={orgUI.member_status_tooltip}
/>
);
const role = (person) => (
<PersonRole
handleRoleTooltip={handleRoleTooltip}
membersRolesOptions={orgUI.members_roles}
person={person}
toggledID={orgUI.member_role_tooltip} toggledID={orgUI.member_role_tooltip}
/> />
); );
@ -45,7 +55,7 @@ const PeopleTable = (props) => {
checkbox: <Checkbox />, checkbox: <Checkbox />,
name: person.name, name: person.name,
status: status(person), status: status(person),
role: <PersonRole role={person.role} />, role: role(person),
bin: '' bin: ''
}; };
}); });
@ -59,6 +69,7 @@ const PeopleTable = (props) => {
}; };
PeopleTable.propTypes = { PeopleTable.propTypes = {
handleRoleTooltip: React.PropTypes.func,
handleStatusTooltip: React.PropTypes.func, handleStatusTooltip: React.PropTypes.func,
orgUI: React.PropTypes.object, orgUI: React.PropTypes.object,
people: React.PropTypes.array, people: React.PropTypes.array,

View File

@ -1,18 +1,86 @@
const React = require('react'); const React = require('react');
const Styled = require('styled-components');
const fns = require('@ui/shared/functions');
const composers = require('@ui/shared/composers');
const Tooltip = require('./tooltip');
const {
pseudoEl
} = composers;
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const borderSide = props => props.toggled
? 'bottom'
: 'top';
const StyledWrapper = styled.div`
position: relative;
&:after {
border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent;
border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({
top: '50%',
right: remcalc(10)
})}
}
`;
const PlainButton = styled.button`
background: transparent;
font-size: inherit;
border: none;
zIndex: 0;
font-family: inherit;
color: inherit;
`;
const PersonRole = (props) => { const PersonRole = (props) => {
const { const {
role toggledID,
membersRolesOptions,
person,
handleRoleTooltip
} = props; } = props;
const toggled = toggledID;
const handleClick = () => handleRoleTooltip(person.uuid);
return ( return (
<span>{role}</span> <StyledWrapper toggled={toggled}>
<PlainButton onClick={handleClick} >
{person.role}
</PlainButton>
{ toggledID === person.uuid
? <Tooltip options={membersRolesOptions} person={person} />
: null }
</StyledWrapper>
); );
}; };
PersonRole.propTypes = { PersonRole.propTypes = {
role: React.PropTypes.string handleRoleTooltip: React.PropTypes.func,
membersRolesOptions: React.PropTypes.array,
person: React.PropTypes.object,
toggledID: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.bool,
])
}; };
module.exports = PersonRole; module.exports = PersonRole;

View File

@ -46,15 +46,13 @@ const PlainButton = styled.button`
color: inherit; color: inherit;
`; `;
const PersonStatus = (props) => { const PersonStatus = (props) => {
const { const {
handleStatusTooltip,
toggledID, toggledID,
membersStatusOptions, membersStatusOptions,
person, person,
handleStatusTooltip
} = props; } = props;
const toggled = toggledID; const toggled = toggledID;

View File

@ -17,7 +17,8 @@ const {
const { const {
handleInviteToggle, handleInviteToggle,
handlePeopleStatusTooltip handlePeopleRoleTooltip,
handlePeopleStatusTooltip,
} = actions; } = actions;
const People = (props) => { const People = (props) => {
@ -39,7 +40,8 @@ const mapStateToProps = (state, {
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(handleInviteToggle()), handleToggle: () => dispatch(handleInviteToggle()),
handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)) handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)),
handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)),
}); });
module.exports = connect( module.exports = connect(

View File

@ -199,6 +199,7 @@
"orgs": { "orgs": {
"ui": { "ui": {
"invite_toggled": true, "invite_toggled": true,
"member_status_tooltip": false,
"member_role_tooltip": false, "member_role_tooltip": false,
"sections": [ "sections": [
"projects", "projects",

View File

@ -19,4 +19,6 @@ module.exports = {
handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`), handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
handlePeopleStatusTooltip: handlePeopleStatusTooltip:
createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`), createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
handlePeopleRoleTooltip:
createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
}; };

View File

@ -8,6 +8,7 @@ const {
const { const {
handleInviteToggle, handleInviteToggle,
handlePeopleRoleTooltip,
handlePeopleStatusTooltip handlePeopleStatusTooltip
} = actions; } = actions;
@ -22,12 +23,26 @@ module.exports = handleActions({
}; };
}, },
[handlePeopleStatusTooltip.toString()]: (state, action) => { [handlePeopleStatusTooltip.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
member_status_tooltip:
action.payload === state.ui.member_status_tooltip
? ''
: action.payload
}
};
},
[handlePeopleRoleTooltip.toString()]: (state, action) => {
return { return {
...state, ...state,
ui: { ui: {
...state.ui, ...state.ui,
member_role_tooltip: member_role_tooltip:
action.payload === state.ui.member_role_tooltip ? '' : action.payload action.payload === state.ui.member_role_tooltip
? ''
: action.payload
} }
}; };
} }