More UI Cleanup

This commit is contained in:
Qstick 2017-10-07 18:38:31 -04:00
parent 9c88c2006d
commit 1700c471b7
96 changed files with 267 additions and 333 deletions

View file

@ -2,14 +2,14 @@ import PropTypes from 'prop-types';
import React from 'react';
import SelectInput from './SelectInput';
const seriesTypeOptions = [
const artistTypeOptions = [
{ key: 'standard', value: 'Standard' },
{ key: 'daily', value: 'Daily' },
{ key: 'anime', value: 'Anime' }
];
function SeriesTypeSelectInput(props) {
const values = [...seriesTypeOptions];
const values = [...artistTypeOptions];
const {
includeNoChange,

View file

@ -39,7 +39,7 @@ class MonitorToggleButton extends Component {
className={styles.disabledButton}
size={size}
name={iconName}
title="Cannot toogle monitored state when series is unmonitored"
title="Cannot toogle monitored state when artist is unmonitored"
/>
);
}

View file

@ -7,7 +7,7 @@ function ErrorPage(props) {
const {
version,
isLocalStorageSupported,
seriesError,
artistError,
tagsError,
qualityProfilesError,
uiSettingsError
@ -17,10 +17,10 @@ function ErrorPage(props) {
if (!isLocalStorageSupported) {
errorMessage = 'Local Storage is not supported or disabled. A plugin or private browsing may have disabled it.';
} else if (seriesError) {
errorMessage = getErrorMessage(seriesError, 'Failed to load artist from API');
} else if (artistError) {
errorMessage = getErrorMessage(artistError, 'Failed to load artist from API');
} else if (tagsError) {
errorMessage = getErrorMessage(seriesError, 'Failed to load artist from API');
errorMessage = getErrorMessage(artistError, 'Failed to load artist from API');
} else if (qualityProfilesError) {
errorMessage = getErrorMessage(qualityProfilesError, 'Failed to load quality profiles from API');
} else if (uiSettingsError) {
@ -43,7 +43,7 @@ function ErrorPage(props) {
ErrorPage.propTypes = {
version: PropTypes.string.isRequired,
isLocalStorageSupported: PropTypes.bool.isRequired,
seriesError: PropTypes.object,
artistError: PropTypes.object,
tagsError: PropTypes.object,
qualityProfilesError: PropTypes.object,
uiSettingsError: PropTypes.object

View file

@ -36,14 +36,14 @@
flex-grow: 1;
}
.seriesContainer {
.artistContainer {
@add-mixin scrollbar;
@add-mixin scrollbarTrack;
@add-mixin scrollbarThumb;
}
.containerOpen {
.seriesContainer {
.artistContainer {
position: absolute;
top: 42px;
z-index: 1;
@ -80,7 +80,7 @@
color: $disabledColor;
}
.addNewSeriesSuggestion {
.addNewArtistSuggestion {
padding: 0 3px;
cursor: pointer;
}

View file

@ -62,7 +62,7 @@ class ArtistSearchInput extends Component {
renderSuggestion(item, { query }) {
if (item.type === ADD_NEW_TYPE) {
return (
<div className={styles.addNewSeriesSuggestion}>
<div className={styles.addNewArtistSuggestion}>
Search for {query}
</div>
);
@ -76,9 +76,9 @@ class ArtistSearchInput extends Component {
);
}
goToArtist(series) {
goToArtist(artist) {
this.setState({ value: '' });
this.props.onGoToSeries(series.nameSlug);
this.props.onGoToArtist(artist.nameSlug);
}
reset() {
@ -117,8 +117,8 @@ class ArtistSearchInput extends Component {
return;
}
// If an suggestion is not selected go to the first series,
// otherwise go to the selected series.
// If an suggestion is not selected go to the first artist,
// otherwise go to the selected artist.
if (highlightedSuggestionIndex == null) {
this.goToArtist(suggestions[0]);
@ -134,12 +134,12 @@ class ArtistSearchInput extends Component {
onSuggestionsFetchRequested = ({ value }) => {
const lowerCaseValue = jdu.replace(value).toLowerCase();
const suggestions = _.filter(this.props.series, (series) => {
const suggestions = _.filter(this.props.artist, (artist) => {
// Check the title first and if there isn't a match fallback to the alternate titles
const titleMatch = jdu.replace(series.artistName).toLowerCase().contains(lowerCaseValue);
const titleMatch = jdu.replace(artist.artistName).toLowerCase().contains(lowerCaseValue);
return titleMatch || _.some(series.alternateTitles, (alternateTitle) => {
return titleMatch || _.some(artist.alternateTitles, (alternateTitle) => {
return jdu.replace(alternateTitle.title).toLowerCase().contains(lowerCaseValue);
});
});
@ -192,7 +192,7 @@ class ArtistSearchInput extends Component {
const inputProps = {
ref: this.setInputRef,
className: styles.input,
name: 'seriesSearch',
name: 'artistSearch',
value,
placeholder: 'Search',
autoComplete: 'off',
@ -206,7 +206,7 @@ class ArtistSearchInput extends Component {
const theme = {
container: styles.container,
containerOpen: styles.containerOpen,
suggestionsContainer: styles.seriesContainer,
suggestionsContainer: styles.artistContainer,
suggestionsList: styles.list,
suggestion: styles.listItem,
suggestionHighlighted: styles.highlighted
@ -241,8 +241,8 @@ class ArtistSearchInput extends Component {
}
ArtistSearchInput.propTypes = {
series: PropTypes.arrayOf(PropTypes.object).isRequired,
onGoToSeries: PropTypes.func.isRequired,
artist: PropTypes.arrayOf(PropTypes.object).isRequired,
onGoToArtist: PropTypes.func.isRequired,
onGoToAddNewArtist: PropTypes.func.isRequired,
bindShortcut: PropTypes.func.isRequired
};

View file

@ -8,9 +8,9 @@ import ArtistSearchInput from './ArtistSearchInput';
function createMapStateToProps() {
return createSelector(
createAllArtistSelector(),
(series) => {
(artist) => {
return {
series: _.sortBy(series, 'sortName')
artist: _.sortBy(artist, 'sortName')
};
}
);
@ -18,7 +18,7 @@ function createMapStateToProps() {
function createMapDispatchToProps(dispatch, props) {
return {
onGoToSeries(nameSlug) {
onGoToArtist(nameSlug) {
dispatch(push(`${window.Sonarr.urlBase}/artist/${nameSlug}`));
},

View file

@ -28,18 +28,18 @@ function testLocalStorage() {
function createMapStateToProps() {
return createSelector(
(state) => state.series,
(state) => state.artist,
(state) => state.tags,
(state) => state.settings,
(state) => state.app,
createDimensionsSelector(),
(series, tags, settings, app, dimensions) => {
const isPopulated = series.isPopulated &&
(artist, tags, settings, app, dimensions) => {
const isPopulated = artist.isPopulated &&
tags.isPopulated &&
settings.qualityProfiles.isPopulated &&
settings.ui.isPopulated;
const hasError = !!series.error ||
const hasError = !!artist.error ||
!!tags.error ||
!!settings.qualityProfiles.error ||
!!settings.ui.error;
@ -47,7 +47,7 @@ function createMapStateToProps() {
return {
isPopulated,
hasError,
seriesError: series.error,
artistError: artist.error,
tagsError: tags.error,
qualityProfilesError: settings.qualityProfiles.error,
uiSettingsError: settings.ui.error,

View file

@ -23,7 +23,7 @@ function getIconName(name) {
return icons.RSS;
case 'SeasonSearch':
return icons.SEARCH;
case 'SeriesSearch':
case 'ArtistSearch':
return icons.SEARCH;
case 'UpdateSceneMapping':
return icons.REFRESH;

View file

@ -22,7 +22,7 @@ const links = [
iconName: icons.ARTIST_CONTINUING,
title: 'Artist',
to: '/',
alias: '/series',
alias: '/artist',
children: [
{
title: 'Add New',

View file

@ -132,8 +132,8 @@ class SignalRConnector extends Component {
return;
}
if (name === 'series') {
this.handleSeries(body);
if (name === 'artist') {
this.handleArtist(body);
return;
}
@ -225,9 +225,9 @@ class SignalRConnector extends Component {
this.props.fetchHealth();
}
handleSeries = (body) => {
handleArtist = (body) => {
const action = body.action;
const section = 'series';
const section = 'artist';
if (action === 'updated') {
this.props.updateItem({ section, ...body.resource });