open-source-mirrors
/
Lidarr
mirror of https://github.com/Lidarr/Lidarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed: Rendering Tweaks to UI

Browse Source
pull/646/head
Qstick 5 years ago
parent 2c8b137349
commit 795a445b52
3 changed files with 188 additions and 168 deletions
Show Stats Download Patch File Download Diff File

271
frontend/src/Artist/Index/ArtistIndexFooter.js
Unescape View File

@ -1,5 +1,5 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import formatBytes from 'Utilities/Number/formatBytes'; import formatBytes from 'Utilities/Number/formatBytes';
import { ColorImpairedConsumer } from 'App/ColorImpairedContext'; import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
@ -7,141 +7,148 @@ import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem'; import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
import styles from './ArtistIndexFooter.css'; import styles from './ArtistIndexFooter.css';
function ArtistIndexFooter({ artist }) { class ArtistIndexFooter extends PureComponent {
const count = artist.length;
let tracks = 0; //
let trackFiles = 0; // Render
let ended = 0;
let continuing = 0; render() {
let monitored = 0; const { artist } = this.props;
let totalFileSize = 0; const count = artist.length;
let tracks = 0;
artist.forEach((s) => { let trackFiles = 0;
const { statistics = {} } = s; let ended = 0;
let continuing = 0;
const { let monitored = 0;
trackCount = 0, let totalFileSize = 0;
trackFileCount = 0,
sizeOnDisk = 0 artist.forEach((s) => {
} = statistics; const { statistics = {} } = s;
tracks += trackCount; const {
trackFiles += trackFileCount; trackCount = 0,
trackFileCount = 0,
if (s.status === 'ended') { sizeOnDisk = 0
ended++; } = statistics;
} else {
continuing++; tracks += trackCount;
} trackFiles += trackFileCount;
if (s.monitored) { if (s.status === 'ended') {
monitored++; ended++;
} } else {
continuing++;
totalFileSize += sizeOnDisk; }
});
if (s.monitored) {
return ( monitored++;
<ColorImpairedConsumer> }
{(enableColorImpairedMode) => {
return ( totalFileSize += sizeOnDisk;
<div className={styles.footer}> });
<div>
<div className={styles.legendItem}> return (
<div <ColorImpairedConsumer>
className={classNames( {(enableColorImpairedMode) => {
styles.continuing, return (
enableColorImpairedMode && 'colorImpaired' <div className={styles.footer}>
)} <div>
/> <div className={styles.legendItem}>
<div>Continuing (All tracks downloaded)</div> <div
className={classNames(
styles.continuing,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Continuing (All tracks downloaded)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.ended,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Ended (All tracks downloaded)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingMonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Tracks (Artist monitored)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingUnmonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Tracks (Artist not monitored)</div>
</div>
</div> </div>
<div className={styles.legendItem}> <div className={styles.statistics}>
<div <DescriptionList>
className={classNames( <DescriptionListItem
styles.ended, title="Artist"
enableColorImpairedMode && 'colorImpaired' data={count}
)} />
/>
<div>Ended (All tracks downloaded)</div> <DescriptionListItem
title="Ended"
data={ended}
/>
<DescriptionListItem
title="Continuing"
data={continuing}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Monitored"
data={monitored}
/>
<DescriptionListItem
title="Unmonitored"
data={count - monitored}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Tracks"
data={tracks}
/>
<DescriptionListItem
title="Files"
data={trackFiles}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Total File Size"
data={formatBytes(totalFileSize)}
/>
</DescriptionList>
</div> </div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingMonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Tracks (Artist monitored)</div>
</div>
<div className={styles.legendItem}>
<div
className={classNames(
styles.missingUnmonitored,
enableColorImpairedMode && 'colorImpaired'
)}
/>
<div>Missing Tracks (Artist not monitored)</div>
</div>
</div>
<div className={styles.statistics}>
<DescriptionList>
<DescriptionListItem
title="Artist"
data={count}
/>
<DescriptionListItem
title="Ended"
data={ended}
/>
<DescriptionListItem
title="Continuing"
data={continuing}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Monitored"
data={monitored}
/>
<DescriptionListItem
title="Unmonitored"
data={count - monitored}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Tracks"
data={tracks}
/>
<DescriptionListItem
title="Files"
data={trackFiles}
/>
</DescriptionList>
<DescriptionList>
<DescriptionListItem
title="Total File Size"
data={formatBytes(totalFileSize)}
/>
</DescriptionList>
</div> </div>
</div> );
); }}
}} </ColorImpairedConsumer>
</ColorImpairedConsumer> );
); }
} }
ArtistIndexFooter.propTypes = { ArtistIndexFooter.propTypes = {

78
frontend/src/Components/Icon.js
Unescape View File

@ -1,49 +1,55 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React, { PureComponent } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { kinds } from 'Helpers/Props'; import { kinds } from 'Helpers/Props';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './Icon.css'; import styles from './Icon.css';
function Icon(props) { class Icon extends PureComponent {
const {
containerClassName,
className,
name,
kind,
size,
title,
isSpinning,
...otherProps
} = props;
const icon = ( //
<FontAwesomeIcon // Render
className={classNames(
className,
styles[kind]
)}
icon={name}
spin={isSpinning}
style={{
fontSize: `${size}px`
}}
{...otherProps}
/>
);
if (title) { render() {
return ( const {
<span containerClassName,
className={containerClassName} className,
title={title} name,
> kind,
{icon} size,
</span> title,
isSpinning,
...otherProps
} = this.props;
const icon = (
<FontAwesomeIcon
className={classNames(
className,
styles[kind]
)}
icon={name}
spin={isSpinning}
style={{
fontSize: `${size}px`
}}
{...otherProps}
/>
); );
}
return icon; if (title) {
return (
<span
className={containerClassName}
title={title}
>
{icon}
</span>
);
}
return icon;
}
} }
Icon.propTypes = { Icon.propTypes = {

7
frontend/src/Components/Page/PageJumpBar.js
Unescape View File

@ -26,6 +26,13 @@ class PageJumpBar extends Component {
this.computeVisibleItems(); this.computeVisibleItems();
} }
shouldComponentUpdate(nextProps, nextState) {
return (
nextProps.items !== this.props.items ||
nextState.height !== this.state.height
);
}
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if ( if (
prevProps.items !== this.props.items || prevProps.items !== this.props.items ||

Write Preview
Loading…
Cancel
Save