New: Custom formats in episode history

Details part of actions in episode history
This commit is contained in:
Bogdan 2023-12-31 16:30:47 +02:00 committed by Mark McDowall
parent d172f2e6d9
commit cd2ce34f10
9 changed files with 38 additions and 48 deletions

View File

@ -30,13 +30,9 @@ const columns = [
isVisible: true isVisible: true
}, },
{ {
name: 'date', name: 'customFormats',
label: () => translate('Date'), label: () => translate('CustomFormats'),
isVisible: true isSortable: false,
},
{
name: 'details',
label: () => translate('Details'),
isVisible: true isVisible: true
}, },
{ {
@ -48,9 +44,13 @@ const columns = [
isSortable: true, isSortable: true,
isVisible: true isVisible: true
}, },
{
name: 'date',
label: () => translate('Date'),
isVisible: true
},
{ {
name: 'actions', name: 'actions',
label: () => translate('Actions'),
isVisible: true isVisible: true
} }
]; ];

View File

@ -1,4 +1,3 @@
.details,
.actions { .actions {
composes: cell from '~Components/Table/Cells/TableRowCell.css'; composes: cell from '~Components/Table/Cells/TableRowCell.css';

View File

@ -2,7 +2,6 @@
// Please do not change this file! // Please do not change this file!
interface CssExports { interface CssExports {
'actions': string; 'actions': string;
'details': string;
} }
export const cssExports: CssExports; export const cssExports: CssExports;
export default cssExports; export default cssExports;

View File

@ -9,7 +9,6 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
import TableRowCell from 'Components/Table/Cells/TableRowCell'; import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow'; import TableRow from 'Components/Table/TableRow';
import Popover from 'Components/Tooltip/Popover'; import Popover from 'Components/Tooltip/Popover';
import Tooltip from 'Components/Tooltip/Tooltip';
import EpisodeFormats from 'Episode/EpisodeFormats'; import EpisodeFormats from 'Episode/EpisodeFormats';
import EpisodeLanguages from 'Episode/EpisodeLanguages'; import EpisodeLanguages from 'Episode/EpisodeLanguages';
import EpisodeQuality from 'Episode/EpisodeQuality'; import EpisodeQuality from 'Episode/EpisodeQuality';
@ -102,11 +101,19 @@ class EpisodeHistoryRow extends Component {
/> />
</TableRowCell> </TableRowCell>
<TableRowCell>
<EpisodeFormats formats={customFormats} />
</TableRowCell>
<TableRowCell>
{formatCustomFormatScore(customFormatScore, customFormats.length)}
</TableRowCell>
<RelativeDateCellConnector <RelativeDateCellConnector
date={date} date={date}
/> />
<TableRowCell className={styles.details}> <TableRowCell className={styles.actions}>
<Popover <Popover
anchor={ anchor={
<Icon <Icon
@ -124,24 +131,13 @@ class EpisodeHistoryRow extends Component {
} }
position={tooltipPositions.LEFT} position={tooltipPositions.LEFT}
/> />
</TableRowCell>
<TableRowCell className={styles.customFormatScore}>
<Tooltip
anchor={
formatCustomFormatScore(customFormatScore, customFormats.length)
}
tooltip={<EpisodeFormats formats={customFormats} />}
position={tooltipPositions.BOTTOM}
/>
</TableRowCell>
<TableRowCell className={styles.actions}>
{ {
eventType === 'grabbed' && eventType === 'grabbed' &&
<IconButton <IconButton
title={translate('MarkAsFailed')} title={translate('MarkAsFailed')}
name={icons.REMOVE} name={icons.REMOVE}
size={14}
onPress={this.onMarkAsFailedPress} onPress={this.onMarkAsFailedPress}
/> />
} }

View File

@ -1,6 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import Modal from 'Components/Modal/Modal'; import Modal from 'Components/Modal/Modal';
import { sizes } from 'Helpers/Props';
import SeriesHistoryModalContentConnector from './SeriesHistoryModalContentConnector'; import SeriesHistoryModalContentConnector from './SeriesHistoryModalContentConnector';
function SeriesHistoryModal(props) { function SeriesHistoryModal(props) {
@ -13,6 +14,7 @@ function SeriesHistoryModal(props) {
return ( return (
<Modal <Modal
isOpen={isOpen} isOpen={isOpen}
size={sizes.EXTRA_LARGE}
onModalClose={onModalClose} onModalClose={onModalClose}
> >
<SeriesHistoryModalContentConnector <SeriesHistoryModalContentConnector

View File

@ -41,13 +41,9 @@ const columns = [
isVisible: true isVisible: true
}, },
{ {
name: 'date', name: 'customFormats',
label: () => translate('Date'), label: () => translate('CustomFormats'),
isVisible: true isSortable: false,
},
{
name: 'details',
label: () => translate('Details'),
isVisible: true isVisible: true
}, },
{ {
@ -59,9 +55,13 @@ const columns = [
isSortable: true, isSortable: true,
isVisible: true isVisible: true
}, },
{
name: 'date',
label: () => translate('Date'),
isVisible: true
},
{ {
name: 'actions', name: 'actions',
label: () => translate('Actions'),
isVisible: true isVisible: true
} }
]; ];

View File

@ -4,7 +4,6 @@
word-break: break-word; word-break: break-word;
} }
.details,
.actions { .actions {
composes: cell from '~Components/Table/Cells/TableRowCell.css'; composes: cell from '~Components/Table/Cells/TableRowCell.css';

View File

@ -2,7 +2,6 @@
// Please do not change this file! // Please do not change this file!
interface CssExports { interface CssExports {
'actions': string; 'actions': string;
'details': string;
'sourceTitle': string; 'sourceTitle': string;
} }
export const cssExports: CssExports; export const cssExports: CssExports;

View File

@ -9,7 +9,6 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
import TableRowCell from 'Components/Table/Cells/TableRowCell'; import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow'; import TableRow from 'Components/Table/TableRow';
import Popover from 'Components/Tooltip/Popover'; import Popover from 'Components/Tooltip/Popover';
import Tooltip from 'Components/Tooltip/Tooltip';
import EpisodeFormats from 'Episode/EpisodeFormats'; import EpisodeFormats from 'Episode/EpisodeFormats';
import EpisodeLanguages from 'Episode/EpisodeLanguages'; import EpisodeLanguages from 'Episode/EpisodeLanguages';
import EpisodeNumber from 'Episode/EpisodeNumber'; import EpisodeNumber from 'Episode/EpisodeNumber';
@ -122,11 +121,19 @@ class SeriesHistoryRow extends Component {
/> />
</TableRowCell> </TableRowCell>
<TableRowCell>
<EpisodeFormats formats={customFormats} />
</TableRowCell>
<TableRowCell>
{formatCustomFormatScore(customFormatScore, customFormats.length)}
</TableRowCell>
<RelativeDateCellConnector <RelativeDateCellConnector
date={date} date={date}
/> />
<TableRowCell className={styles.details}> <TableRowCell className={styles.actions}>
<Popover <Popover
anchor={ anchor={
<Icon <Icon
@ -144,24 +151,13 @@ class SeriesHistoryRow extends Component {
} }
position={tooltipPositions.LEFT} position={tooltipPositions.LEFT}
/> />
</TableRowCell>
<TableRowCell className={styles.customFormatScore}>
<Tooltip
anchor={
formatCustomFormatScore(customFormatScore, customFormats.length)
}
tooltip={<EpisodeFormats formats={customFormats} />}
position={tooltipPositions.BOTTOM}
/>
</TableRowCell>
<TableRowCell className={styles.actions}>
{ {
eventType === 'grabbed' && eventType === 'grabbed' &&
<IconButton <IconButton
title={translate('MarkAsFailed')} title={translate('MarkAsFailed')}
name={icons.REMOVE} name={icons.REMOVE}
size={14}
onPress={this.onMarkAsFailedPress} onPress={this.onMarkAsFailedPress}
/> />
} }