fergalmoran/Readarr
1
0
Fork 0
mirror of https://github.com/fergalmoran/Readarr.git synced 2025-12-22 09:29:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: Minor UI improvements to author and book details

Browse Source
This commit is contained in:
Bogdan
2023-12-24 09:05:46 +02:00
parent 34eb312426
commit dc83e0127e
16 changed files with 122 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/Author/Details/AuthorDetails.css
View File

@@ -44,6 +44,10 @@
margin-top: 20px;
}
.filterIcon {
float: right;
}
.authorNavigationButtons {
position: absolute;
right: 0;

1
frontend/src/Author/Details/AuthorDetails.css.d.ts vendored
View File

@@ -6,6 +6,7 @@ interface CssExports {
'authorUpButton': string;
'contentContainer': string;
'errorMessage': string;
'filterIcon': string;
'innerContentBody': string;
'metadataMessage': string;
'selectedTab': string;

11
frontend/src/Author/Details/AuthorDetails.js
View File

@@ -239,9 +239,14 @@ class AuthorDetails extends Component {
saveError,
isDeleting,
deleteError,
statistics
statistics = {}
} = this.props;
const {
bookFileCount = 0,
totalBookCount = 0
} = statistics;
const {
isOrganizeModalOpen,
isRetagModalOpen,
@@ -435,7 +440,7 @@ class AuthorDetails extends Component {
className={styles.tab}
selectedClassName={styles.selectedTab}
>
{translate('BooksTotal', [statistics.totalBookCount])}
{translate('BooksTotal', [totalBookCount])}
</Tab>
<Tab
@@ -463,7 +468,7 @@ class AuthorDetails extends Component {
className={styles.tab}
selectedClassName={styles.selectedTab}
>
{translate('FilesTotal', [statistics.bookFileCount])}
{translate('FilesTotal', [bookFileCount])}
</Tab>
{

9
frontend/src/Author/History/AuthorHistoryTable.css Normal file
View File

@@ -0,0 +1,9 @@
.container {
border: 1px solid var(--borderColor);
border-radius: 4px;
background-color: var(--inputBackgroundColor);
&:last-of-type {
margin-bottom: 0;
}
}

7
frontend/src/Author/History/AuthorHistoryTable.css.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'container': string;
}
export const cssExports: CssExports;
export default cssExports;

11
frontend/src/Author/History/AuthorHistoryTable.js
View File

@@ -1,6 +1,7 @@
import React from 'react';
import AuthorHistoryContentConnector from 'Author/History/AuthorHistoryContentConnector';
import AuthorHistoryTableContent from 'Author/History/AuthorHistoryTableContent';
import styles from './AuthorHistoryTable.css';
function AuthorHistoryTable(props) {
const {
@@ -8,10 +9,12 @@ function AuthorHistoryTable(props) {
} = props;
return (
<AuthorHistoryContentConnector
component={AuthorHistoryTableContent}
{...otherProps}
/>
<div className={styles.container}>
<AuthorHistoryContentConnector
component={AuthorHistoryTableContent}
{...otherProps}
/>
</div>
);
}

5
frontend/src/Author/History/AuthorHistoryTableContent.css Normal file
View File

@@ -0,0 +1,5 @@
.blankpad {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 2em;
}

7
frontend/src/Author/History/AuthorHistoryTableContent.css.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'blankpad': string;
}
export const cssExports: CssExports;
export default cssExports;

7
frontend/src/Author/History/AuthorHistoryTableContent.js
View File

@@ -7,6 +7,7 @@ import TableBody from 'Components/Table/TableBody';
import { kinds } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import AuthorHistoryRowConnector from './AuthorHistoryRowConnector';
import styles from './AuthorHistoryTableContent.css';
const columns = [
{
@@ -64,7 +65,7 @@ class AuthorHistoryTableContent extends Component {
const hasItems = !!items.length;
return (
<>
<div>
{
isFetching &&
<LoadingIndicator />
@@ -79,7 +80,7 @@ class AuthorHistoryTableContent extends Component {
{
isPopulated && !hasItems && !error &&
<div>
<div className={styles.blankpad}>
{translate('NoHistory')}
</div>
}
@@ -103,7 +104,7 @@ class AuthorHistoryTableContent extends Component {
</TableBody>
</Table>
}
</>
</div>
);
}
}

14
frontend/src/Book/Details/BookDetails.js
View File

@@ -99,9 +99,14 @@ class BookDetails extends Component {
nextBook,
isSearching,
onRefreshPress,
onSearchPress
onSearchPress,
statistics = {}
} = this.props;
const {
bookFileCount = 0
} = statistics;
const {
isOrganizeModalOpen,
isRetagModalOpen,
@@ -238,21 +243,21 @@ class BookDetails extends Component {
className={styles.tab}
selectedClassName={styles.selectedTab}
>
History
{translate('History')}
</Tab>
<Tab
className={styles.tab}
selectedClassName={styles.selectedTab}
>
Search
{translate('Search')}
</Tab>
<Tab
className={styles.tab}
selectedClassName={styles.selectedTab}
>
Files
{translate('FilesTotal', [bookFileCount])}
</Tab>
{
@@ -335,6 +340,7 @@ BookDetails.propTypes = {
ratings: PropTypes.object.isRequired,
images: PropTypes.arrayOf(PropTypes.object).isRequired,
links: PropTypes.arrayOf(PropTypes.object).isRequired,
statistics: PropTypes.object.isRequired,
monitored: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
isSaving: PropTypes.bool.isRequired,

9
frontend/src/BookFile/Editor/BookFileEditorTable.css Normal file
View File

@@ -0,0 +1,9 @@
.container {
border: 1px solid var(--borderColor);
border-radius: 4px;
background-color: var(--inputBackgroundColor);
&:last-of-type {
margin-bottom: 0;
}
}

7
frontend/src/BookFile/Editor/BookFileEditorTable.css.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'container': string;
}
export const cssExports: CssExports;
export default cssExports;

9
frontend/src/BookFile/Editor/BookFileEditorTable.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import BookFileEditorTableContentConnector from './BookFileEditorTableContentConnector';
import styles from './BookFileEditorTable.css';
function BookFileEditorTable(props) {
const {
@@ -7,9 +8,11 @@ function BookFileEditorTable(props) {
} = props;
return (
<BookFileEditorTableContentConnector
{...otherProps}
/>
<div className={styles.container}>
<BookFileEditorTableContentConnector
{...otherProps}
/>
</div>
);
}

12
frontend/src/BookFile/Editor/BookFileEditorTableContent.css
View File

@@ -1,6 +1,6 @@
.filesTable {
margin-bottom: 20px;
padding-top: 15px;
margin: 10px;
padding-top: 5px;
border: 1px solid var(--borderColor);
border-top: 1px solid var(--borderColor);
border-radius: 4px;
@@ -13,9 +13,15 @@
.actions {
display: flex;
margin-right: auto;
margin: 10px;
}
.selectInput {
margin-left: 10px;
}
.blankpad {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 2em;
}

1
frontend/src/BookFile/Editor/BookFileEditorTableContent.css.d.ts vendored
View File

@@ -2,6 +2,7 @@
// Please do not change this file!
interface CssExports {
'actions': string;
'blankpad': string;
'filesTable': string;
'selectInput': string;
}

51
frontend/src/BookFile/Editor/BookFileEditorTableContent.js
View File

@@ -1,6 +1,7 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Alert from 'Components/Alert';
import SelectInput from 'Components/Form/SelectInput';
import SpinnerButton from 'Components/Link/SpinnerButton';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -120,7 +121,7 @@ class BookFileEditorTableContent extends Component {
const hasSelectedFiles = this.getSelectedIds().length > 0;
return (
<>
<div>
{
isFetching && !isPopulated ?
<LoadingIndicator /> :
@@ -129,13 +130,13 @@ class BookFileEditorTableContent extends Component {
{
!isFetching && error ?
<div>{error}</div> :
<Alert kind={kinds.DANGER}>{error}</Alert> :
null
}
{
isPopulated && !items.length ?
<div>
<div className={styles.blankpad}>
No book files to manage.
</div> :
null
@@ -173,26 +174,30 @@ class BookFileEditorTableContent extends Component {
null
}
<div className={styles.actions}>
<SpinnerButton
kind={kinds.DANGER}
isSpinning={isDeleting}
isDisabled={!hasSelectedFiles}
onPress={this.onDeletePress}
>
Delete
</SpinnerButton>
{
isPopulated && items.length ? (
<div className={styles.actions}>
<SpinnerButton
kind={kinds.DANGER}
isSpinning={isDeleting}
isDisabled={!hasSelectedFiles}
onPress={this.onDeletePress}
>
{translate('Delete')}
</SpinnerButton>
<div className={styles.selectInput}>
<SelectInput
name="quality"
value="selectQuality"
values={qualityOptions}
isDisabled={!hasSelectedFiles}
onChange={this.onQualityChange}
/>
</div>
</div>
<div className={styles.selectInput}>
<SelectInput
name="quality"
value="selectQuality"
values={qualityOptions}
isDisabled={!hasSelectedFiles}
onChange={this.onQualityChange}
/>
</div>
</div>
) : null
}
<ConfirmModal
isOpen={isConfirmDeleteModalOpen}
@@ -203,7 +208,7 @@ class BookFileEditorTableContent extends Component {
onConfirm={this.onConfirmDelete}
onCancel={this.onConfirmDeleteModalClose}
/>
</>
</div>
);
}
}