diff --git a/src/components/viewtypes/ListViewTable.tsx b/src/components/viewtypes/ListViewTable.tsx index 4ef16e3..61a5d2b 100644 --- a/src/components/viewtypes/ListViewTable.tsx +++ b/src/components/viewtypes/ListViewTable.tsx @@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react'; import _ from 'lodash'; import path from 'path'; import settings from 'electron-settings'; +import styled from 'styled-components'; import { useQueryClient } from 'react-query'; import { useHotkeys } from 'react-hotkeys-hook'; import { nanoid } from 'nanoid'; @@ -36,6 +37,19 @@ import { toggleSelected, } from '../../redux/multiSelectSlice'; +const StyledTable = styled(Table)<{ rowHeight: number }>` + .rs-table-row.selected { + background: ${(props) => props.theme.primary.rowSelected}; + // Resolve bug from rsuite-table where certain scrollpoints show a horizontal border + height: ${(props) => `${props.rowHeight + 1}px !important`}; + } + .rs-table-row, + .rs-table-cell-group, + .rs-table-cell { + transition: none; + } +`; + const ListViewTable = ({ tableRef, height, @@ -250,13 +264,20 @@ const ListViewTable = ({ return ( <> - + multiSelect?.selected.find((e: any) => e?.uniqueId === rowData?.uniqueId) + ? 'selected' + : '' + } ref={tableRef} height={height} data={sortColumn && !nowPlaying ? sortedData : data} virtualized={virtualized} rowHeight={rowHeight} hover + cellBordered={false} + bordered={false} affixHeader autoHeight={autoHeight} affixHorizontalScrollbar @@ -346,17 +367,17 @@ const ListViewTable = ({ {(rowData: any, rowIndex: any) => { return ( e.uniqueId === rowData.uniqueId) + ? 'custom-cell selected' + : 'custom-cell' + } playing={ (rowData.uniqueId === playQueue?.currentSongUniqueId && nowPlaying) || (!nowPlaying && rowData.id === playQueue?.currentSongId) ? 'true' : 'false' } - rowselected={ - multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId) - ? 'true' - : 'false' - } height={rowHeight} onClick={(e: any) => { if (!dnd) { @@ -450,11 +471,6 @@ const ListViewTable = ({ {(rowData: any, rowIndex: any) => { return ( e.uniqueId === rowData.uniqueId) - ? 'true' - : 'false' - } onClick={(e: any) => handleRowClick(e, { ...rowData, @@ -616,11 +632,6 @@ const ListViewTable = ({ {(rowData: any) => { return ( e.uniqueId === rowData.uniqueId) - ? 'true' - : 'false' - } height={rowHeight} onMouseDown={(e: any) => handleSelectMouseDown(e, rowData)} onMouseEnter={() => handleSelectMouseEnter(rowData)} @@ -675,11 +686,6 @@ const ListViewTable = ({ ? 'true' : 'false' } - rowselected={ - multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId) - ? 'true' - : 'false' - } height={rowHeight} onClick={(e: any) => { if (!column.dataKey?.match(/starred|songCount|duration|userRating/)) { @@ -798,7 +804,7 @@ const ListViewTable = ({ )} ))} -
+ ); }; diff --git a/src/components/viewtypes/styled.tsx b/src/components/viewtypes/styled.tsx index 3b81cf4..edf15f8 100644 --- a/src/components/viewtypes/styled.tsx +++ b/src/components/viewtypes/styled.tsx @@ -25,14 +25,11 @@ export const RsuiteLinkButton = styled(Button)<{ `; export const TableCellWrapper = styled.div<{ - rowselected: string; playing?: string; height?: number; dragover?: string; dragfield?: string; }>` - background: ${(props) => - props.rowselected === 'true' ? props.theme.primary.rowSelected : undefined}; color: ${(props) => (props.playing === 'true' ? props.theme.primary.main : undefined)}; line-height: ${(props) => (props.height ? `${props.height}px` : undefined)}; box-shadow: ${(props) =>