mirror of
https://github.com/lidarr/lidarr.git
synced 2025-08-19 21:13:28 -07:00
Fixed: Add Placeholder to tracks table for correct rendering
This commit is contained in:
parent
6da224bfc4
commit
2b342bdd95
4 changed files with 53 additions and 5 deletions
6
frontend/src/Album/Details/TrackActionsCell.css
Normal file
6
frontend/src/Album/Details/TrackActionsCell.css
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
.TrackActionsCell {
|
||||||
|
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
||||||
|
|
||||||
|
width: 70px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
34
frontend/src/Album/Details/TrackActionsCell.js
Normal file
34
frontend/src/Album/Details/TrackActionsCell.js
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import IconButton from 'Components/Link/IconButton';
|
||||||
|
import TableRowCell from 'Components/Table/Cells/TableRowCell';
|
||||||
|
import styles from './TrackActionsCell.css';
|
||||||
|
|
||||||
|
class TrackActionsCell extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
// TODO: Placeholder until we figure out what to show here.
|
||||||
|
<TableRowCell className={styles.TrackActionsCell}>
|
||||||
|
<IconButton
|
||||||
|
name={icons.DELETE}
|
||||||
|
title="Delete Track"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</TableRowCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TrackActionsCell.propTypes = {
|
||||||
|
id: PropTypes.number.isRequired,
|
||||||
|
albumId: PropTypes.number.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TrackActionsCell;
|
|
@ -6,6 +6,7 @@ import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
|
||||||
import EpisodeStatusConnector from 'Album/EpisodeStatusConnector';
|
import EpisodeStatusConnector from 'Album/EpisodeStatusConnector';
|
||||||
import TrackFileLanguageConnector from 'TrackFile/TrackFileLanguageConnector';
|
import TrackFileLanguageConnector from 'TrackFile/TrackFileLanguageConnector';
|
||||||
import MediaInfoConnector from 'TrackFile/MediaInfoConnector';
|
import MediaInfoConnector from 'TrackFile/MediaInfoConnector';
|
||||||
|
import TrackActionsCell from './TrackActionsCell';
|
||||||
import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes';
|
import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes';
|
||||||
|
|
||||||
import styles from './TrackRow.css';
|
import styles from './TrackRow.css';
|
||||||
|
@ -36,6 +37,7 @@ class TrackRow extends Component {
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
id,
|
id,
|
||||||
|
albumId,
|
||||||
mediumNumber,
|
mediumNumber,
|
||||||
trackFileId,
|
trackFileId,
|
||||||
absoluteTrackNumber,
|
absoluteTrackNumber,
|
||||||
|
@ -166,6 +168,16 @@ class TrackRow extends Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (name === 'actions') {
|
||||||
|
return (
|
||||||
|
<TrackActionsCell
|
||||||
|
key={name}
|
||||||
|
albumId={albumId}
|
||||||
|
id={id}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,17 +1,13 @@
|
||||||
/* eslint max-params: 0 */
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
|
import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
|
||||||
import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
|
|
||||||
import TrackRow from './TrackRow';
|
import TrackRow from './TrackRow';
|
||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
(state, { id }) => id,
|
(state, { id }) => id,
|
||||||
(state, { mediumNumber }) => mediumNumber,
|
|
||||||
createTrackFileSelector(),
|
createTrackFileSelector(),
|
||||||
createCommandsSelector(),
|
(id, trackFile) => {
|
||||||
(id, mediumNumber, trackFile, commands) => {
|
|
||||||
return {
|
return {
|
||||||
trackFilePath: trackFile ? trackFile.path : null,
|
trackFilePath: trackFile ? trackFile.path : null,
|
||||||
trackFileRelativePath: trackFile ? trackFile.relativePath : null
|
trackFileRelativePath: trackFile ? trackFile.relativePath : null
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue