mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
creating table directory and moving tooltip to speerate file so it can re-used by role column
This commit is contained in:
parent
deca0897a8
commit
cf5505dee9
@ -35,6 +35,7 @@ const PeopleTable = (props) => {
|
||||
const status = (person) => (
|
||||
<PersonStatus
|
||||
handleStatusTooltip={handleStatusTooltip}
|
||||
membersStatusOptions={orgUI.members_status}
|
||||
person={person}
|
||||
toggledID={orgUI.member_role_tooltip}
|
||||
/>
|
@ -1,10 +1,11 @@
|
||||
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');
|
||||
|
||||
const Tooltip = require('./tooltip');
|
||||
|
||||
const {
|
||||
pseudoEl
|
||||
} = composers;
|
||||
@ -36,17 +37,6 @@ const StyledWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const arrowPosition = {
|
||||
bottom: '100%',
|
||||
right: '10%'
|
||||
};
|
||||
|
||||
const tooltipStyle = {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
zIndex: 1
|
||||
};
|
||||
|
||||
const PlainButton = styled.button`
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
@ -56,22 +46,13 @@ const PlainButton = styled.button`
|
||||
color: inherit;
|
||||
`;
|
||||
|
||||
const tooltip = (person) => (
|
||||
<Tooltip
|
||||
arrowPosition={arrowPosition}
|
||||
key={person.uuid}
|
||||
style={tooltipStyle}
|
||||
>
|
||||
<li>Admin</li>
|
||||
<li>Read Only</li>
|
||||
<li>Unassigned</li>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
|
||||
const PersonStatus = (props) => {
|
||||
|
||||
const {
|
||||
toggledID,
|
||||
membersStatusOptions,
|
||||
person,
|
||||
handleStatusTooltip
|
||||
} = props;
|
||||
@ -85,13 +66,16 @@ const PersonStatus = (props) => {
|
||||
{person.status}
|
||||
</PlainButton>
|
||||
|
||||
{toggledID === person.uuid ? tooltip(person) : null}
|
||||
{ toggledID === person.uuid
|
||||
? <Tooltip options={membersStatusOptions} person={person} />
|
||||
: null }
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
PersonStatus.propTypes = {
|
||||
handleStatusTooltip: React.PropTypes.func,
|
||||
membersStatusOptions: React.PropTypes.array,
|
||||
person: React.PropTypes.object,
|
||||
toggledID: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
34
frontend/src/components/people-list/table/tooltip.js
Normal file
34
frontend/src/components/people-list/table/tooltip.js
Normal file
@ -0,0 +1,34 @@
|
||||
const React = require('react');
|
||||
|
||||
const Tooltip = require('@ui/components/tooltip');
|
||||
|
||||
const tooltipStyle = {
|
||||
position: 'absolute',
|
||||
top: '30px',
|
||||
zIndex: 1
|
||||
};
|
||||
|
||||
const arrowPosition = {
|
||||
bottom: '100%',
|
||||
right: '10%'
|
||||
};
|
||||
|
||||
module.exports = ({
|
||||
person = {},
|
||||
options = []
|
||||
}) => {
|
||||
return (
|
||||
<Tooltip
|
||||
arrowPosition={arrowPosition}
|
||||
key={person.uuid}
|
||||
style={tooltipStyle}
|
||||
>
|
||||
{options.map((o, i) => <li key={i}>{o}</li>)}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports.propTypes = {
|
||||
options: React.PropTypes.array,
|
||||
person: React.PropTypes.object,
|
||||
};
|
@ -204,6 +204,16 @@
|
||||
"projects",
|
||||
"people",
|
||||
"settings"
|
||||
],
|
||||
"members_status": [
|
||||
"Active",
|
||||
"Inactive",
|
||||
"Invitation Sent"
|
||||
],
|
||||
"members_roles": [
|
||||
"Owner",
|
||||
"Unnassigned",
|
||||
"Read Only"
|
||||
]
|
||||
},
|
||||
"data": [{
|
||||
|
Loading…
Reference in New Issue
Block a user