Fix issue with the disk space label percents overlapping on small screens.

pull/5046/head
nitsua 4 years ago committed by Qstick
parent 4e0f027a91
commit 6fdf06a882

@ -42,7 +42,8 @@ class DiskSpace extends Component {
render() {
const {
isFetching,
items
items,
isSmallScreen
} = this.props;
return (
@ -98,7 +99,7 @@ class DiskSpace extends Component {
progress={diskUsage}
kind={diskUsageKind}
size={sizes.MEDIUM}
showText={diskUsage >= 12}
showText={((!isSmallScreen && diskUsage >= 12) || (isSmallScreen && diskUsage >= 45))}
text={`${diskUsage}%`}
/>
</TableRowCell>
@ -117,7 +118,8 @@ class DiskSpace extends Component {
DiskSpace.propTypes = {
isFetching: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired
items: PropTypes.array.isRequired,
isSmallScreen: PropTypes.bool.isRequired
};
export default DiskSpace;

@ -3,12 +3,14 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchDiskSpace } from 'Store/Actions/systemActions';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import DiskSpace from './DiskSpace';
function createMapStateToProps() {
return createSelector(
(state) => state.system.diskSpace,
(diskSpace) => {
createDimensionsSelector(),
(diskSpace, dimensions) => {
const {
isFetching,
items
@ -16,7 +18,8 @@ function createMapStateToProps() {
return {
isFetching,
items
items,
isSmallScreen: dimensions.isSmallScreen
};
}
);

Loading…
Cancel
Save