diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js
index ebb8cb0b..3a91a2de 100644
--- a/frontend/src/components/people-list/person-status.js
+++ b/frontend/src/components/people-list/person-status.js
@@ -1,6 +1,7 @@
const React = require('react');
const Styled = require('styled-components');
+const Tooltip = require('@ui/components/tooltip');
const fns = require('@ui/shared/functions');
const composers = require('@ui/shared/composers');
@@ -35,23 +36,56 @@ const StyledWrapper = styled.div`
}
`;
+const arrowPosition = {
+ bottom: '100%',
+ right: '10%'
+};
+
+const tooltipStyle = {
+ position: 'absolute',
+ top: 0,
+ 'z-index': 1
+};
+
+const PlainButton = styled.button`
+ background: transparent;
+ font-size: inherit;
+ border: none;
+ z-index: 0;
+ font-family: inherit;
+ color: inherit;
+`;
+
+const tooltip = (person) => (
+
+ Admin
+ Read Only
+ Unassigned
+
+);
+
const PersonStatus = (props) => {
const {
- toggled,
+ toggledID,
person,
handleStatusTooltip
} = props;
+ const toggled = toggledID;
+ const handleClick = () => handleStatusTooltip(person.uuid);
+
return (
-
+
{person.status}
-
+
+
+ {toggledID === person.uuid ? tooltip(person) : null}
);
};
@@ -59,7 +93,7 @@ const PersonStatus = (props) => {
PersonStatus.propTypes = {
handleStatusTooltip: React.PropTypes.func,
person: React.PropTypes.object,
- toggled: React.PropTypes.bool,
+ toggledID: React.PropTypes.string,
};
module.exports = PersonStatus;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js
index 2c9140f5..2060258b 100644
--- a/frontend/src/components/people-list/table.js
+++ b/frontend/src/components/people-list/table.js
@@ -36,7 +36,7 @@ const PeopleTable = (props) => {
);
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index 461208ac..32e348e6 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -39,7 +39,7 @@ const mapStateToProps = (state, {
const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(handleInviteToggle()),
- handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
+ handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id))
});
module.exports = connect(
diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js
index 7332b38d..52181e4c 100644
--- a/frontend/src/state/reducers/orgs.js
+++ b/frontend/src/state/reducers/orgs.js
@@ -26,7 +26,8 @@ module.exports = handleActions({
...state,
ui: {
...state.ui,
- member_role_tooltip: !state.ui.member_role_tooltip
+ member_role_tooltip:
+ action.payload === state.ui.member_role_tooltip ? '' : action.payload
}
};
}