diff --git a/frontend/src/Author/Details/AuthorDetails.css b/frontend/src/Author/Details/AuthorDetails.css index 91d47fb0a..67fad84b7 100644 --- a/frontend/src/Author/Details/AuthorDetails.css +++ b/frontend/src/Author/Details/AuthorDetails.css @@ -44,6 +44,10 @@ margin-top: 20px; } +.filterIcon { + float: right; +} + .authorNavigationButtons { position: absolute; right: 0; diff --git a/frontend/src/Author/Details/AuthorDetails.css.d.ts b/frontend/src/Author/Details/AuthorDetails.css.d.ts index e08c9fe88..89278b810 100644 --- a/frontend/src/Author/Details/AuthorDetails.css.d.ts +++ b/frontend/src/Author/Details/AuthorDetails.css.d.ts @@ -6,6 +6,7 @@ interface CssExports { 'authorUpButton': string; 'contentContainer': string; 'errorMessage': string; + 'filterIcon': string; 'innerContentBody': string; 'metadataMessage': string; 'selectedTab': string; diff --git a/frontend/src/Author/Details/AuthorDetails.js b/frontend/src/Author/Details/AuthorDetails.js index d0e0ecda8..a3ca4a606 100644 --- a/frontend/src/Author/Details/AuthorDetails.js +++ b/frontend/src/Author/Details/AuthorDetails.js @@ -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])} - {translate('FilesTotal', [statistics.bookFileCount])} + {translate('FilesTotal', [bookFileCount])} { diff --git a/frontend/src/Author/History/AuthorHistoryTable.css b/frontend/src/Author/History/AuthorHistoryTable.css new file mode 100644 index 000000000..788a53cc3 --- /dev/null +++ b/frontend/src/Author/History/AuthorHistoryTable.css @@ -0,0 +1,9 @@ +.container { + border: 1px solid var(--borderColor); + border-radius: 4px; + background-color: var(--inputBackgroundColor); + + &:last-of-type { + margin-bottom: 0; + } +} diff --git a/frontend/src/Author/History/AuthorHistoryTable.css.d.ts b/frontend/src/Author/History/AuthorHistoryTable.css.d.ts new file mode 100644 index 000000000..a86ddf1ff --- /dev/null +++ b/frontend/src/Author/History/AuthorHistoryTable.css.d.ts @@ -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; diff --git a/frontend/src/Author/History/AuthorHistoryTable.js b/frontend/src/Author/History/AuthorHistoryTable.js index c92c40751..dac7bcdfc 100644 --- a/frontend/src/Author/History/AuthorHistoryTable.js +++ b/frontend/src/Author/History/AuthorHistoryTable.js @@ -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 ( - +
+ +
); } diff --git a/frontend/src/Author/History/AuthorHistoryTableContent.css b/frontend/src/Author/History/AuthorHistoryTableContent.css new file mode 100644 index 000000000..34be6dff1 --- /dev/null +++ b/frontend/src/Author/History/AuthorHistoryTableContent.css @@ -0,0 +1,5 @@ +.blankpad { + padding-top: 10px; + padding-bottom: 10px; + padding-left: 2em; +} diff --git a/frontend/src/Author/History/AuthorHistoryTableContent.css.d.ts b/frontend/src/Author/History/AuthorHistoryTableContent.css.d.ts new file mode 100644 index 000000000..d81da8811 --- /dev/null +++ b/frontend/src/Author/History/AuthorHistoryTableContent.css.d.ts @@ -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; diff --git a/frontend/src/Author/History/AuthorHistoryTableContent.js b/frontend/src/Author/History/AuthorHistoryTableContent.js index bab6f3714..14e8efd80 100644 --- a/frontend/src/Author/History/AuthorHistoryTableContent.js +++ b/frontend/src/Author/History/AuthorHistoryTableContent.js @@ -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 ( - <> +
{ isFetching && @@ -79,7 +80,7 @@ class AuthorHistoryTableContent extends Component { { isPopulated && !hasItems && !error && -
+
{translate('NoHistory')}
} @@ -103,7 +104,7 @@ class AuthorHistoryTableContent extends Component { } - +
); } } diff --git a/frontend/src/Book/Details/BookDetails.js b/frontend/src/Book/Details/BookDetails.js index 04d155e3d..d9968bbb5 100644 --- a/frontend/src/Book/Details/BookDetails.js +++ b/frontend/src/Book/Details/BookDetails.js @@ -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')} - Search + {translate('Search')} - Files + {translate('FilesTotal', [bookFileCount])} { @@ -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, diff --git a/frontend/src/BookFile/Editor/BookFileEditorTable.css b/frontend/src/BookFile/Editor/BookFileEditorTable.css new file mode 100644 index 000000000..788a53cc3 --- /dev/null +++ b/frontend/src/BookFile/Editor/BookFileEditorTable.css @@ -0,0 +1,9 @@ +.container { + border: 1px solid var(--borderColor); + border-radius: 4px; + background-color: var(--inputBackgroundColor); + + &:last-of-type { + margin-bottom: 0; + } +} diff --git a/frontend/src/BookFile/Editor/BookFileEditorTable.css.d.ts b/frontend/src/BookFile/Editor/BookFileEditorTable.css.d.ts new file mode 100644 index 000000000..a86ddf1ff --- /dev/null +++ b/frontend/src/BookFile/Editor/BookFileEditorTable.css.d.ts @@ -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; diff --git a/frontend/src/BookFile/Editor/BookFileEditorTable.js b/frontend/src/BookFile/Editor/BookFileEditorTable.js index c1b12efe8..043fcd155 100644 --- a/frontend/src/BookFile/Editor/BookFileEditorTable.js +++ b/frontend/src/BookFile/Editor/BookFileEditorTable.js @@ -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 ( - +
+ +
); } diff --git a/frontend/src/BookFile/Editor/BookFileEditorTableContent.css b/frontend/src/BookFile/Editor/BookFileEditorTableContent.css index d5c5cd0ae..d287edde0 100644 --- a/frontend/src/BookFile/Editor/BookFileEditorTableContent.css +++ b/frontend/src/BookFile/Editor/BookFileEditorTableContent.css @@ -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; +} diff --git a/frontend/src/BookFile/Editor/BookFileEditorTableContent.css.d.ts b/frontend/src/BookFile/Editor/BookFileEditorTableContent.css.d.ts index b5d678f73..1bcbb7f13 100644 --- a/frontend/src/BookFile/Editor/BookFileEditorTableContent.css.d.ts +++ b/frontend/src/BookFile/Editor/BookFileEditorTableContent.css.d.ts @@ -2,6 +2,7 @@ // Please do not change this file! interface CssExports { 'actions': string; + 'blankpad': string; 'filesTable': string; 'selectInput': string; } diff --git a/frontend/src/BookFile/Editor/BookFileEditorTableContent.js b/frontend/src/BookFile/Editor/BookFileEditorTableContent.js index a4bf1847c..21b0c0c2e 100644 --- a/frontend/src/BookFile/Editor/BookFileEditorTableContent.js +++ b/frontend/src/BookFile/Editor/BookFileEditorTableContent.js @@ -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 ( - <> +
{ isFetching && !isPopulated ? : @@ -129,13 +130,13 @@ class BookFileEditorTableContent extends Component { { !isFetching && error ? -
{error}
: + {error} : null } { isPopulated && !items.length ? -
+
No book files to manage.
: null @@ -173,26 +174,30 @@ class BookFileEditorTableContent extends Component { null } -
- - Delete - - -
- -
-
+ { + isPopulated && items.length ? ( +
+ + {translate('Delete')} + + +
+ +
+
+ ) : null + } - +
); } }