mirror of
https://github.com/lidarr/lidarr.git
synced 2025-07-16 10:03:51 -07:00
[UI Work] Misc UI Fixes and Tweaks
This commit is contained in:
parent
2a6decdc4c
commit
44cc642ad4
80 changed files with 267 additions and 349 deletions
|
@ -20,7 +20,7 @@
|
|||
height: 250px;
|
||||
}
|
||||
|
||||
.title {
|
||||
.name {
|
||||
font-weight: 300;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
|
|
@ -18,7 +18,7 @@ class AddNewArtistSearchResult extends Component {
|
|||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
isNewAddSeriesModalOpen: false
|
||||
isNewAddArtistModalOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -32,11 +32,11 @@ class AddNewArtistSearchResult extends Component {
|
|||
// Listeners
|
||||
|
||||
onPress = () => {
|
||||
this.setState({ isNewAddSeriesModalOpen: true });
|
||||
this.setState({ isNewAddArtistModalOpen: true });
|
||||
}
|
||||
|
||||
onAddSerisModalClose = () => {
|
||||
this.setState({ isNewAddSeriesModalOpen: false });
|
||||
this.setState({ isNewAddArtistModalOpen: false });
|
||||
}
|
||||
|
||||
//
|
||||
|
@ -51,7 +51,7 @@ class AddNewArtistSearchResult extends Component {
|
|||
network,
|
||||
status,
|
||||
overview,
|
||||
seasonCount,
|
||||
albumCount,
|
||||
ratings,
|
||||
images,
|
||||
isExistingArtist,
|
||||
|
@ -61,8 +61,8 @@ class AddNewArtistSearchResult extends Component {
|
|||
const linkProps = isExistingArtist ? { to: `/artist/${nameSlug}` } : { onPress: this.onPress };
|
||||
let seasons = '1 Season';
|
||||
|
||||
if (seasonCount > 1) {
|
||||
seasons = `${seasonCount} Seasons`;
|
||||
if (albumCount > 1) {
|
||||
seasons = `${albumCount} Seasons`;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -115,7 +115,7 @@ class AddNewArtistSearchResult extends Component {
|
|||
}
|
||||
|
||||
{
|
||||
!!seasonCount &&
|
||||
!!albumCount &&
|
||||
<Label size={sizes.LARGE}>
|
||||
{seasons}
|
||||
</Label>
|
||||
|
@ -138,7 +138,7 @@ class AddNewArtistSearchResult extends Component {
|
|||
</div>
|
||||
|
||||
<AddNewArtistModal
|
||||
isOpen={this.state.isNewAddSeriesModalOpen && !isExistingArtist}
|
||||
isOpen={this.state.isNewAddArtistModalOpen && !isExistingArtist}
|
||||
foreignArtistId={foreignArtistId}
|
||||
artistName={artistName}
|
||||
year={year}
|
||||
|
@ -159,7 +159,7 @@ AddNewArtistSearchResult.propTypes = {
|
|||
network: PropTypes.string,
|
||||
status: PropTypes.string.isRequired,
|
||||
overview: PropTypes.string,
|
||||
seasonCount: PropTypes.number,
|
||||
albumCount: PropTypes.number,
|
||||
ratings: PropTypes.object.isRequired,
|
||||
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
isExistingArtist: PropTypes.bool.isRequired,
|
||||
|
|
|
@ -17,7 +17,7 @@ function ImportArtistRow(props) {
|
|||
languageProfileId,
|
||||
albumFolder,
|
||||
// seriesType,
|
||||
selectedSeries,
|
||||
selectedArtist,
|
||||
isExistingArtist,
|
||||
showLanguageProfile,
|
||||
isSelected,
|
||||
|
@ -31,7 +31,7 @@ function ImportArtistRow(props) {
|
|||
inputClassName={styles.selectInput}
|
||||
id={id}
|
||||
isSelected={isSelected}
|
||||
isDisabled={!selectedSeries || isExistingArtist}
|
||||
isDisabled={!selectedArtist || isExistingArtist}
|
||||
onSelectedChange={onSelectedChange}
|
||||
/>
|
||||
|
||||
|
@ -95,7 +95,7 @@ ImportArtistRow.propTypes = {
|
|||
languageProfileId: PropTypes.number.isRequired,
|
||||
// seriesType: PropTypes.string.isRequired,
|
||||
albumFolder: PropTypes.bool.isRequired,
|
||||
selectedSeries: PropTypes.object,
|
||||
selectedArtist: PropTypes.object,
|
||||
isExistingArtist: PropTypes.bool.isRequired,
|
||||
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
queued: PropTypes.bool.isRequired,
|
||||
|
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { queueLookupSeries, setImportArtistValue } from 'Store/Actions/importArtistActions';
|
||||
import { queueLookupArtist, setImportArtistValue } from 'Store/Actions/importArtistActions';
|
||||
import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
|
||||
import ImportArtistRow from './ImportArtistRow';
|
||||
|
||||
|
@ -22,8 +22,8 @@ function createMapStateToProps() {
|
|||
createImportArtistItemSelector(),
|
||||
createAllArtistSelector(),
|
||||
(item, series) => {
|
||||
const selectedSeries = item && item.selectedSeries;
|
||||
const isExistingArtist = !!selectedSeries && _.some(series, { foreignArtistId: selectedSeries.foreignArtistId });
|
||||
const selectedArtist = item && item.selectedArtist;
|
||||
const isExistingArtist = !!selectedArtist && _.some(series, { foreignArtistId: selectedArtist.foreignArtistId });
|
||||
|
||||
return {
|
||||
...item,
|
||||
|
@ -34,7 +34,7 @@ function createMapStateToProps() {
|
|||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
queueLookupSeries,
|
||||
queueLookupArtist,
|
||||
setImportArtistValue
|
||||
};
|
||||
|
||||
|
@ -84,7 +84,7 @@ ImportArtistRowConnector.propTypes = {
|
|||
// seriesType: PropTypes.string,
|
||||
albumFolder: PropTypes.bool,
|
||||
items: PropTypes.arrayOf(PropTypes.object),
|
||||
queueLookupSeries: PropTypes.func.isRequired,
|
||||
queueLookupArtist: PropTypes.func.isRequired,
|
||||
setImportArtistValue: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
|
|
|
@ -72,30 +72,30 @@ class ImportArtistTable extends Component {
|
|||
return;
|
||||
}
|
||||
|
||||
const selectedSeries = item.selectedSeries;
|
||||
const selectedArtist = item.selectedArtist;
|
||||
const isSelected = selectedState[id];
|
||||
|
||||
const isExistingArtist = !!selectedSeries &&
|
||||
_.some(prevProps.allSeries, { foreignArtistId: selectedSeries.foreignArtistId });
|
||||
const isExistingArtist = !!selectedArtist &&
|
||||
_.some(prevProps.allArtists, { foreignArtistId: selectedArtist.foreignArtistId });
|
||||
|
||||
// Props doesn't have a selected series or
|
||||
// the selected series is an existing series.
|
||||
if ((selectedSeries && !prevItem.selectedSeries) || (isExistingArtist && !prevItem.selectedSeries)) {
|
||||
// Props doesn't have a selected artist or
|
||||
// the selected artist is an existing artist.
|
||||
if ((selectedArtist && !prevItem.selectedArtist) || (isExistingArtist && !prevItem.selectedArtist)) {
|
||||
onSelectedChange({ id, value: false });
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// State is selected, but a series isn't selected or
|
||||
// the selected series is an existing series.
|
||||
if (isSelected && (!selectedSeries || isExistingArtist)) {
|
||||
// State is selected, but a artist isn't selected or
|
||||
// the selected artist is an existing artist.
|
||||
if (isSelected && (!selectedArtist || isExistingArtist)) {
|
||||
onSelectedChange({ id, value: false });
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// A series is being selected that wasn't previously selected.
|
||||
if (selectedSeries && selectedSeries !== prevItem.selectedSeries) {
|
||||
// A artist is being selected that wasn't previously selected.
|
||||
if (selectedArtist && selectedArtist !== prevItem.selectedArtist) {
|
||||
onSelectedChange({ id, value: true });
|
||||
|
||||
return;
|
||||
|
@ -198,7 +198,7 @@ ImportArtistTable.propTypes = {
|
|||
allUnselected: PropTypes.bool.isRequired,
|
||||
selectedState: PropTypes.object.isRequired,
|
||||
isSmallScreen: PropTypes.bool.isRequired,
|
||||
allSeries: PropTypes.arrayOf(PropTypes.object),
|
||||
allArtists: PropTypes.arrayOf(PropTypes.object),
|
||||
contentBody: PropTypes.object.isRequired,
|
||||
showLanguageProfile: PropTypes.bool.isRequired,
|
||||
scrollTop: PropTypes.number.isRequired,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { queueLookupSeries, setImportArtistValue } from 'Store/Actions/importArtistActions';
|
||||
import { queueLookupArtist, setImportArtistValue } from 'Store/Actions/importArtistActions';
|
||||
import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
|
||||
import ImportArtistTable from './ImportArtistTable';
|
||||
|
||||
|
@ -10,7 +10,7 @@ function createMapStateToProps() {
|
|||
(state) => state.importArtist,
|
||||
(state) => state.app.dimensions,
|
||||
createAllArtistSelector(),
|
||||
(addArtist, importArtist, dimensions, allSeries) => {
|
||||
(addArtist, importArtist, dimensions, allArtists) => {
|
||||
return {
|
||||
defaultMonitor: addArtist.defaults.monitor,
|
||||
defaultQualityProfileId: addArtist.defaults.qualityProfileId,
|
||||
|
@ -19,7 +19,7 @@ function createMapStateToProps() {
|
|||
defaultAlbumFolder: addArtist.defaults.albumFolder,
|
||||
items: importArtist.items,
|
||||
isSmallScreen: dimensions.isSmallScreen,
|
||||
allSeries
|
||||
allArtists
|
||||
};
|
||||
}
|
||||
);
|
||||
|
@ -28,7 +28,7 @@ function createMapStateToProps() {
|
|||
function createMapDispatchToProps(dispatch, props) {
|
||||
return {
|
||||
onSeriesLookup(name, path) {
|
||||
dispatch(queueLookupSeries({
|
||||
dispatch(queueLookupArtist({
|
||||
name,
|
||||
path,
|
||||
term: name
|
||||
|
|
|
@ -7,9 +7,7 @@ import styles from './ImportArtistName.css';
|
|||
function ImportArtistName(props) {
|
||||
const {
|
||||
artistName,
|
||||
overview,
|
||||
// year,
|
||||
// network,
|
||||
isExistingArtist
|
||||
} = props;
|
||||
|
||||
|
@ -18,9 +16,6 @@ function ImportArtistName(props) {
|
|||
<div className={styles.artistName}>
|
||||
{artistName}
|
||||
</div>
|
||||
<div className={styles.overview}>
|
||||
{overview}
|
||||
</div>
|
||||
|
||||
{
|
||||
isExistingArtist &&
|
||||
|
@ -36,9 +31,7 @@ function ImportArtistName(props) {
|
|||
|
||||
ImportArtistName.propTypes = {
|
||||
artistName: PropTypes.string.isRequired,
|
||||
overview: PropTypes.string.isRequired,
|
||||
// year: PropTypes.number.isRequired,
|
||||
// network: PropTypes.string,
|
||||
isExistingArtist: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
|
|
|
@ -19,9 +19,8 @@ class ImportArtistSearchResult extends Component {
|
|||
render() {
|
||||
const {
|
||||
artistName,
|
||||
overview,
|
||||
// overview,
|
||||
// year,
|
||||
// network,
|
||||
isExistingArtist
|
||||
} = this.props;
|
||||
|
||||
|
@ -32,9 +31,8 @@ class ImportArtistSearchResult extends Component {
|
|||
>
|
||||
<ImportArtistName
|
||||
artistName={artistName}
|
||||
overview={overview}
|
||||
// overview={overview}
|
||||
// year={year}
|
||||
// network={network}
|
||||
isExistingArtist={isExistingArtist}
|
||||
/>
|
||||
</Link>
|
||||
|
@ -45,9 +43,8 @@ class ImportArtistSearchResult extends Component {
|
|||
ImportArtistSearchResult.propTypes = {
|
||||
foreignArtistId: PropTypes.string.isRequired,
|
||||
artistName: PropTypes.string.isRequired,
|
||||
overview: PropTypes.string.isRequired,
|
||||
// overview: PropTypes.string.isRequired,
|
||||
// year: PropTypes.number.isRequired,
|
||||
// network: PropTypes.string,
|
||||
isExistingArtist: PropTypes.bool.isRequired,
|
||||
onPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
|
|
@ -110,7 +110,7 @@ class ImportArtistSelectArtist extends Component {
|
|||
|
||||
render() {
|
||||
const {
|
||||
selectedSeries,
|
||||
selectedArtist,
|
||||
isExistingArtist,
|
||||
isFetching,
|
||||
isPopulated,
|
||||
|
@ -146,7 +146,7 @@ class ImportArtistSelectArtist extends Component {
|
|||
}
|
||||
|
||||
{
|
||||
isPopulated && selectedSeries && isExistingArtist &&
|
||||
isPopulated && selectedArtist && isExistingArtist &&
|
||||
<Icon
|
||||
className={styles.warningIcon}
|
||||
name={icons.WARNING}
|
||||
|
@ -155,18 +155,17 @@ class ImportArtistSelectArtist extends Component {
|
|||
}
|
||||
|
||||
{
|
||||
isPopulated && selectedSeries &&
|
||||
isPopulated && selectedArtist &&
|
||||
<ImportArtistName
|
||||
artistName={selectedSeries.artistName}
|
||||
overview={selectedSeries.overview}
|
||||
// year={selectedSeries.year}
|
||||
// network={selectedSeries.network}
|
||||
artistName={selectedArtist.artistName}
|
||||
overview={selectedArtist.overview}
|
||||
// year={selectedArtist.year}
|
||||
isExistingArtist={isExistingArtist}
|
||||
/>
|
||||
}
|
||||
|
||||
{
|
||||
isPopulated && !selectedSeries &&
|
||||
isPopulated && !selectedArtist &&
|
||||
<div>
|
||||
<Icon
|
||||
className={styles.warningIcon}
|
||||
|
@ -230,9 +229,8 @@ class ImportArtistSelectArtist extends Component {
|
|||
key={item.foreignArtistId}
|
||||
foreignArtistId={item.foreignArtistId}
|
||||
artistName={item.artistName}
|
||||
overview={item.overview}
|
||||
// overview={item.overview}
|
||||
// year={item.year}
|
||||
// network={item.network}
|
||||
onPress={this.onArtistSelect}
|
||||
/>
|
||||
);
|
||||
|
@ -249,7 +247,7 @@ class ImportArtistSelectArtist extends Component {
|
|||
|
||||
ImportArtistSelectArtist.propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
selectedSeries: PropTypes.object,
|
||||
selectedArtist: PropTypes.object,
|
||||
isExistingArtist: PropTypes.bool.isRequired,
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
isPopulated: PropTypes.bool.isRequired,
|
||||
|
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { queueLookupSeries, setImportArtistValue } from 'Store/Actions/importArtistActions';
|
||||
import { queueLookupArtist, setImportArtistValue } from 'Store/Actions/importArtistActions';
|
||||
import createImportArtistItemSelector from 'Store/Selectors/createImportArtistItemSelector';
|
||||
import ImportArtistSelectArtist from './ImportArtistSelectArtist';
|
||||
|
||||
|
@ -17,7 +17,7 @@ function createMapStateToProps() {
|
|||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
queueLookupSeries,
|
||||
queueLookupArtist,
|
||||
setImportArtistValue
|
||||
};
|
||||
|
||||
|
@ -27,7 +27,7 @@ class ImportArtistSelectArtistConnector extends Component {
|
|||
// Listeners
|
||||
|
||||
onSearchInputChange = (term) => {
|
||||
this.props.queueLookupSeries({
|
||||
this.props.queueLookupArtist({
|
||||
name: this.props.id,
|
||||
term
|
||||
});
|
||||
|
@ -41,7 +41,7 @@ class ImportArtistSelectArtistConnector extends Component {
|
|||
|
||||
this.props.setImportArtistValue({
|
||||
id,
|
||||
selectedSeries: _.find(items, { foreignArtistId })
|
||||
selectedArtist: _.find(items, { foreignArtistId })
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -62,9 +62,9 @@ class ImportArtistSelectArtistConnector extends Component {
|
|||
ImportArtistSelectArtistConnector.propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
items: PropTypes.arrayOf(PropTypes.object),
|
||||
selectedSeries: PropTypes.object,
|
||||
selectedArtist: PropTypes.object,
|
||||
isSelected: PropTypes.bool,
|
||||
queueLookupSeries: PropTypes.func.isRequired,
|
||||
queueLookupArtist: PropTypes.func.isRequired,
|
||||
setImportArtistValue: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue