New: Custom formats in episode history

Details part of actions in episode history

frontend/src/Episode/History/EpisodeHistory.js

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

frontend/src/Episode/History/EpisodeHistoryRow.css

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

frontend/src/Episode/History/EpisodeHistoryRow.css.d.ts

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

frontend/src/Episode/History/EpisodeHistoryRow.js

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

frontend/src/Series/History/SeriesHistoryModal.js

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

frontend/src/Series/History/SeriesHistoryModalContent.js

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

frontend/src/Series/History/SeriesHistoryRow.css

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

frontend/src/Series/History/SeriesHistoryRow.css.d.ts

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

frontend/src/Series/History/SeriesHistoryRow.js

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