[UI Work] Misc UI Fixes and Tweaks

This commit is contained in:
Qstick 2017-09-16 16:22:06 -04:00
parent 2a6decdc4c
commit 44cc642ad4
80 changed files with 267 additions and 349 deletions

View file

@ -20,7 +20,7 @@
height: 250px;
}
.title {
.name {
font-weight: 300;
font-size: 36px;
}

View file

@ -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,

View file

@ -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,

View file

@ -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
};

View file

@ -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,

View file

@ -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

View file

@ -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
};

View file

@ -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
};

View file

@ -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,

View file

@ -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
};