Fixed: Queue tooltips appearing offscreen on mobile devices

This commit is contained in:
Mark McDowall 2019-05-05 20:03:26 -07:00
parent 2ae4337d0d
commit d8c2640959
4 changed files with 53 additions and 5 deletions

View File

@ -116,6 +116,7 @@ function QueueStatusCell(props) {
title={title}
body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
position={tooltipPositions.RIGHT}
canFlip={false}
/>
</TableRowCell>
);

View File

@ -35,6 +35,33 @@ class Tooltip extends Component {
}
}
//
// Control
computeMaxSize = (data) => {
const {
top,
right,
bottom,
left
} = data.offsets.reference;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
if ((/^top/).test(data.placement)) {
data.styles.maxHeight = top - 20;
} else if ((/^bottom/).test(data.placement)) {
data.styles.maxHeight = windowHeight - bottom - 20;
} else if ((/^right/).test(data.placement)) {
data.styles.maxWidth = windowWidth - right - 30;
} else {
data.styles.maxWidth = left - 30;
}
return data;
}
//
// Listeners
@ -72,7 +99,8 @@ class Tooltip extends Component {
anchor,
tooltip,
kind,
position
position,
canFlip
} = this.props;
return (
@ -98,10 +126,18 @@ class Tooltip extends Component {
// are shown (Quality Definitions for example).
eventsEnabled={false}
modifiers={{
computeMaxHeight: {
order: 851,
enabled: true,
fn: this.computeMaxSize
},
preventOverflow: {
// Fixes positioning for tooltips in the queue
// and likely others.
escapeWithReference: true
},
flip: {
enabled: canFlip
}
}}
>
@ -132,7 +168,9 @@ class Tooltip extends Component {
)}
/>
<div className={bodyClassName}>
<div
className={bodyClassName}
>
{tooltip}
</div>
</div> :
@ -154,13 +192,15 @@ Tooltip.propTypes = {
anchor: PropTypes.node.isRequired,
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),
position: PropTypes.oneOf(tooltipPositions.all)
position: PropTypes.oneOf(tooltipPositions.all),
canFlip: PropTypes.bool.isRequired
};
Tooltip.defaultProps = {
bodyClassName: styles.body,
kind: kinds.DEFAULT,
position: tooltipPositions.TOP
position: tooltipPositions.TOP,
canFlip: true
};
export default Tooltip;

View File

@ -74,13 +74,19 @@
}
.collapseButtonContainer {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 15px;
width: 100%;
border-top: 1px solid $borderColor;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #fafafa;
text-align: center;
}
.collapseButtonIcon {
margin-bottom: -4px;
}
.expandButtonIcon {

View File

@ -456,6 +456,7 @@ class SeriesDetailsSeason extends Component {
}
<div className={styles.collapseButtonContainer}>
<IconButton
iconClassName={styles.collapseButtonIcon}
name={icons.COLLAPSE}
size={20}
title="Hide episodes"