Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

addjusting positioning of tooltip elements

This commit is contained in:
Alex Windett 2017-01-25 17:36:56 +00:00
parent 4ac20bac73
commit 0c8971e372
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/people-list/table/person-role.js
View File

@ -24,6 +24,8 @@ const borderSide = props => props.toggled
const StyledWrapper = styled.div` const StyledWrapper = styled.div`
position: relative; position: relative;
display: inline-block;
min-width: ${remcalc(130)};
&:after { &:after {
border-left: ${remcalc(5)} solid transparent; border-left: ${remcalc(5)} solid transparent;
@ -31,8 +33,8 @@ const StyledWrapper = styled.div`
border-${borderSide}: ${remcalc(5)} solid black; border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({ ${pseudoEl({
top: '50%', top: '40%',
right: remcalc(10) right: remcalc(-10)
})} })}
} }
`; `;
@ -58,7 +60,7 @@ const PersonRole = (props) => {
orgIndex orgIndex
} = props; } = props;
const toggled = toggledID; const toggled = toggledID === person.uuid;
const handleClick = () => handleRoleTooltip(person.uuid); const handleClick = () => handleRoleTooltip(person.uuid);
const handleOptionSelect = (updatedMember) => const handleOptionSelect = (updatedMember) =>
handleMemberUpdate(updatedMember); handleMemberUpdate(updatedMember);

8
frontend/src/components/people-list/table/person-status.js
View File

@ -24,6 +24,8 @@ const borderSide = props => props.toggled
const StyledWrapper = styled.div` const StyledWrapper = styled.div`
position: relative; position: relative;
display: inline-block;
min-width: ${remcalc(130)};
&:after { &:after {
border-left: ${remcalc(5)} solid transparent; border-left: ${remcalc(5)} solid transparent;
@ -31,8 +33,8 @@ const StyledWrapper = styled.div`
border-${borderSide}: ${remcalc(5)} solid black; border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({ ${pseudoEl({
top: '50%', top: '40%',
right: remcalc(10) right: remcalc(-10)
})} })}
} }
`; `;
@ -58,7 +60,7 @@ const PersonStatus = (props) => {
orgIndex orgIndex
} = props; } = props;
const toggled = toggledID; const toggled = toggledID === person.uuid;
const handleClick = () => handleStatusTooltip(person.uuid); const handleClick = () => handleStatusTooltip(person.uuid);
const handleOptionSelect = (updatedMember) => const handleOptionSelect = (updatedMember) =>
handleMemberUpdate(updatedMember); handleMemberUpdate(updatedMember);

3
frontend/src/components/people-list/table/tooltip.js
View File

@ -5,7 +5,8 @@ const Tooltip = require('@ui/components/tooltip');
const tooltipStyle = { const tooltipStyle = {
position: 'absolute', position: 'absolute',
top: '30px', top: '30px',
zIndex: 1 zIndex: 1,
right: '-36px',
}; };
const arrowPosition = { const arrowPosition = {