mirror of https://github.com/Sonarr/Sonarr
New: Tooltips for quality size limits
This commit is contained in:
parent
588eb6f691
commit
26ff28aae6
|
@ -3,10 +3,12 @@ import React, { Component } from 'react';
|
||||||
import ReactSlider from 'react-slider';
|
import ReactSlider from 'react-slider';
|
||||||
import formatBytes from 'Utilities/Number/formatBytes';
|
import formatBytes from 'Utilities/Number/formatBytes';
|
||||||
import roundNumber from 'Utilities/Number/roundNumber';
|
import roundNumber from 'Utilities/Number/roundNumber';
|
||||||
import { kinds } from 'Helpers/Props';
|
import { kinds, tooltipPositions } from 'Helpers/Props';
|
||||||
import Label from 'Components/Label';
|
import Label from 'Components/Label';
|
||||||
import NumberInput from 'Components/Form/NumberInput';
|
import NumberInput from 'Components/Form/NumberInput';
|
||||||
import TextInput from 'Components/Form/TextInput';
|
import TextInput from 'Components/Form/TextInput';
|
||||||
|
import Popover from 'Components/Tooltip/Popover';
|
||||||
|
import QualityDefinitionLimits from './QualityDefinitionLimits';
|
||||||
import styles from './QualityDefinition.css';
|
import styles from './QualityDefinition.css';
|
||||||
|
|
||||||
const MIN = 0;
|
const MIN = 0;
|
||||||
|
@ -139,12 +141,10 @@ class QualityDefinition extends Component {
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const minBytes = minSize * 1024 * 1024;
|
const minBytes = minSize * 1024 * 1024;
|
||||||
const minThirty = formatBytes(minBytes * 30, 2);
|
const minSixty = `${formatBytes(minBytes * 60, 2)}/h`;
|
||||||
const minSixty = formatBytes(minBytes * 60, 2);
|
|
||||||
|
|
||||||
const maxBytes = maxSize && maxSize * 1024 * 1024;
|
const maxBytes = maxSize && maxSize * 1024 * 1024;
|
||||||
const maxThirty = maxBytes ? formatBytes(maxBytes * 30, 2) : 'Unlimited';
|
const maxSixty = maxBytes ? `${formatBytes(maxBytes * 60, 2)}/h` : 'Unlimited';
|
||||||
const maxSixty = maxBytes ? formatBytes(maxBytes * 60, 2) : 'Unlimited';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.qualityDefinition}>
|
<div className={styles.qualityDefinition}>
|
||||||
|
@ -178,13 +178,35 @@ class QualityDefinition extends Component {
|
||||||
|
|
||||||
<div className={styles.sizes}>
|
<div className={styles.sizes}>
|
||||||
<div>
|
<div>
|
||||||
<Label kind={kinds.WARNING}>{minThirty}</Label>
|
<Popover
|
||||||
<Label kind={kinds.INFO}>{minSixty}</Label>
|
anchor={
|
||||||
|
<Label kind={kinds.INFO}>{minSixty}</Label>
|
||||||
|
}
|
||||||
|
title="Minimum Limits"
|
||||||
|
body={
|
||||||
|
<QualityDefinitionLimits
|
||||||
|
bytes={minBytes}
|
||||||
|
message="No minimum for any runtime"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
position={tooltipPositions.BOTTOM}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Label kind={kinds.WARNING}>{maxThirty}</Label>
|
<Popover
|
||||||
<Label kind={kinds.INFO}>{maxSixty}</Label>
|
anchor={
|
||||||
|
<Label kind={kinds.WARNING}>{maxSixty}</Label>
|
||||||
|
}
|
||||||
|
title="Maximim Limits"
|
||||||
|
body={
|
||||||
|
<QualityDefinitionLimits
|
||||||
|
bytes={maxBytes}
|
||||||
|
message="No limit for any runtime"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
position={tooltipPositions.BOTTOM}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React from 'react';
|
||||||
|
import formatBytes from 'Utilities/Number/formatBytes';
|
||||||
|
|
||||||
|
function QualityDefinitionLimits(props) {
|
||||||
|
const {
|
||||||
|
bytes,
|
||||||
|
message
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
if (!bytes) {
|
||||||
|
return <div>{message}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const thirty = formatBytes(bytes * 30, 2);
|
||||||
|
const fourtyFive = formatBytes(bytes * 30, 2);
|
||||||
|
const sixty = formatBytes(bytes * 30, 2);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>30 Minutes: {thirty}</div>
|
||||||
|
<div>45 Minutes: {fourtyFive}</div>
|
||||||
|
<div>60 Minutes: {sixty}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
QualityDefinitionLimits.propTypes = {
|
||||||
|
bytes: PropTypes.number.isRequired,
|
||||||
|
message: PropTypes.string.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QualityDefinitionLimits;
|
Loading…
Reference in New Issue