Fixed: Queue tooltips appearing offscreen on mobile devices

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
pull/6/head
Qstick 5 years ago
parent 5dddae5d02
commit 9143bb4a7c

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

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

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

@ -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 // Listeners
@ -72,7 +99,8 @@ class Tooltip extends Component {
anchor, anchor,
tooltip, tooltip,
kind, kind,
position position,
canFlip
} = this.props; } = this.props;
return ( return (
@ -98,10 +126,18 @@ class Tooltip extends Component {
// are shown (Quality Definitions for example). // are shown (Quality Definitions for example).
eventsEnabled={false} eventsEnabled={false}
modifiers={{ modifiers={{
computeMaxHeight: {
order: 851,
enabled: true,
fn: this.computeMaxSize
},
preventOverflow: { preventOverflow: {
// Fixes positioning for tooltips in the queue // Fixes positioning for tooltips in the queue
// and likely others. // and likely others.
escapeWithReference: true escapeWithReference: true
},
flip: {
enabled: canFlip
} }
}} }}
> >
@ -132,7 +168,9 @@ class Tooltip extends Component {
)} )}
/> />
<div className={bodyClassName}> <div
className={bodyClassName}
>
{tooltip} {tooltip}
</div> </div>
</div> : </div> :
@ -154,13 +192,15 @@ Tooltip.propTypes = {
anchor: PropTypes.node.isRequired, anchor: PropTypes.node.isRequired,
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]), kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),
position: PropTypes.oneOf(tooltipPositions.all) position: PropTypes.oneOf(tooltipPositions.all),
canFlip: PropTypes.bool.isRequired
}; };
Tooltip.defaultProps = { Tooltip.defaultProps = {
bodyClassName: styles.body, bodyClassName: styles.body,
kind: kinds.DEFAULT, kind: kinds.DEFAULT,
position: tooltipPositions.TOP position: tooltipPositions.TOP,
canFlip: true
}; };
export default Tooltip; export default Tooltip;

Loading…
Cancel
Save