diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js
index 9265f12c..5219d2b1 100644
--- a/frontend/src/components/people-list/table/index.js
+++ b/frontend/src/components/people-list/table/index.js
@@ -9,6 +9,7 @@ const PersonRole = require('./person-role');
const PeopleTable = (props) => {
const {
+ handleRoleTooltip,
handleStatusTooltip,
people = [],
orgUI = {}
@@ -37,6 +38,15 @@ const PeopleTable = (props) => {
handleStatusTooltip={handleStatusTooltip}
membersStatusOptions={orgUI.members_status}
person={person}
+ toggledID={orgUI.member_status_tooltip}
+ />
+ );
+
+ const role = (person) => (
+
);
@@ -45,7 +55,7 @@ const PeopleTable = (props) => {
checkbox: ,
name: person.name,
status: status(person),
- role: ,
+ role: role(person),
bin: ''
};
});
@@ -59,6 +69,7 @@ const PeopleTable = (props) => {
};
PeopleTable.propTypes = {
+ handleRoleTooltip: React.PropTypes.func,
handleStatusTooltip: React.PropTypes.func,
orgUI: React.PropTypes.object,
people: React.PropTypes.array,
diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js
index 5844b042..0b700e94 100644
--- a/frontend/src/components/people-list/table/person-role.js
+++ b/frontend/src/components/people-list/table/person-role.js
@@ -1,18 +1,86 @@
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 {
- role
+ toggledID,
+ membersRolesOptions,
+ person,
+ handleRoleTooltip
} = props;
+ const toggled = toggledID;
+ const handleClick = () => handleRoleTooltip(person.uuid);
+
return (
- {role}
+
+
+ {person.role}
+
+
+ { toggledID === person.uuid
+ ?
+ : null }
+
);
};
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;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/table/person-status.js b/frontend/src/components/people-list/table/person-status.js
index 2f8fd0b7..4aa1929a 100644
--- a/frontend/src/components/people-list/table/person-status.js
+++ b/frontend/src/components/people-list/table/person-status.js
@@ -46,15 +46,13 @@ const PlainButton = styled.button`
color: inherit;
`;
-
-
const PersonStatus = (props) => {
const {
+ handleStatusTooltip,
toggledID,
membersStatusOptions,
person,
- handleStatusTooltip
} = props;
const toggled = toggledID;
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index 32e348e6..662cb563 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -17,7 +17,8 @@ const {
const {
handleInviteToggle,
- handlePeopleStatusTooltip
+ handlePeopleRoleTooltip,
+ handlePeopleStatusTooltip,
} = actions;
const People = (props) => {
@@ -39,7 +40,8 @@ const mapStateToProps = (state, {
const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(handleInviteToggle()),
- handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id))
+ handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)),
+ handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)),
});
module.exports = connect(
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index 27ffcc94..1569cce6 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -199,6 +199,7 @@
"orgs": {
"ui": {
"invite_toggled": true,
+ "member_status_tooltip": false,
"member_role_tooltip": false,
"sections": [
"projects",
diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js
index ccbec33d..44f602fd 100644
--- a/frontend/src/state/actions.js
+++ b/frontend/src/state/actions.js
@@ -19,4 +19,6 @@ module.exports = {
handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
handlePeopleStatusTooltip:
createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
+ handlePeopleRoleTooltip:
+ createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
};
diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js
index 52181e4c..1e633bb6 100644
--- a/frontend/src/state/reducers/orgs.js
+++ b/frontend/src/state/reducers/orgs.js
@@ -8,6 +8,7 @@ const {
const {
handleInviteToggle,
+ handlePeopleRoleTooltip,
handlePeopleStatusTooltip
} = actions;
@@ -22,12 +23,26 @@ module.exports = handleActions({
};
},
[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 {
...state,
ui: {
...state.ui,
member_role_tooltip:
- action.payload === state.ui.member_role_tooltip ? '' : action.payload
+ action.payload === state.ui.member_role_tooltip
+ ? ''
+ : action.payload
}
};
}