remove horizontal padding from favorite/rating/actions

This commit is contained in:
jeffvli
2026-02-09 04:16:11 -08:00
parent d99ecd485f
commit 42b51f104c
5 changed files with 35 additions and 3 deletions
@@ -246,6 +246,11 @@
overflow: hidden;
}
.row .track-cell-no-h-padding {
padding-right: 0;
padding-left: 0;
}
.track-row-dragging {
opacity: 0.5;
}
@@ -32,6 +32,7 @@ import { parseTableColumns } from '/@/renderer/components/item-list/helpers/pars
import { getDetailListCellComponent } from '/@/renderer/components/item-list/item-detail-list/columns';
import {
getTrackColumnFixed,
isNoHorizontalPaddingColumn,
shouldShowHoverOnlyColumnContent,
} from '/@/renderer/components/item-list/item-detail-list/utils';
import {
@@ -250,6 +251,7 @@ const TrackRow = memo(
const CellComponent = getDetailListCellComponent(col.id);
const isTitleColumn = col.id === TableColumn.TITLE;
const isImageColumn = col.id === TableColumn.IMAGE;
const isIconActionColumn = isNoHorizontalPaddingColumn(col.id);
const showHoverContent = shouldShowHoverOnlyColumnContent(
col.id,
isRowHovered,
@@ -278,6 +280,7 @@ const TrackRow = memo(
className={clsx(styles.trackCell, {
[styles.trackCellImage]: isImageColumn,
[styles.trackCellMuted]: !isTitleColumn,
[styles.trackCellNoHPadding]: isIconActionColumn,
[styles.trackCellVerticalBorderVisible]:
enableVerticalBorders && !isLastColumn,
[styles.trackCellWithVerticalBorder]: !isLastColumn,
@@ -1,10 +1,10 @@
import { TableColumn } from '/@/shared/types/types';
const FIXED_TRACK_COLUMN_WIDTHS: Partial<Record<TableColumn, number>> = {
[TableColumn.ACTIONS]: 48,
[TableColumn.ACTIONS]: 32,
[TableColumn.TRACK_NUMBER]: 56,
[TableColumn.USER_FAVORITE]: 48,
[TableColumn.USER_RATING]: 76,
[TableColumn.USER_FAVORITE]: 32,
[TableColumn.USER_RATING]: 64,
};
const HOVER_ONLY_COLUMNS: TableColumn[] = [
@@ -13,6 +13,12 @@ const HOVER_ONLY_COLUMNS: TableColumn[] = [
TableColumn.USER_RATING,
];
const NO_HORIZONTAL_PADDING_COLUMNS: TableColumn[] = [
TableColumn.ACTIONS,
TableColumn.USER_FAVORITE,
TableColumn.USER_RATING,
];
export function getTrackColumnFixed(columnId: TableColumn): {
fixedWidth: number;
isFixedColumn: boolean;
@@ -23,6 +29,10 @@ export function getTrackColumnFixed(columnId: TableColumn): {
: { fixedWidth: 0, isFixedColumn: false };
}
export function isNoHorizontalPaddingColumn(columnId: TableColumn): boolean {
return NO_HORIZONTAL_PADDING_COLUMNS.includes(columnId);
}
export function isTrackColumnHoverOnly(columnId: TableColumn): boolean {
return HOVER_ONLY_COLUMNS.includes(columnId);
}
@@ -26,6 +26,11 @@
padding: var(--theme-spacing-xs) var(--theme-spacing-xl);
}
.container.no-horizontal-padding {
padding-right: 0;
padding-left: 0;
}
.container.center {
align-items: center;
text-align: center;
@@ -205,6 +210,11 @@
padding: 0 var(--theme-spacing-xl);
}
.header-container.no-horizontal-padding {
padding-right: 0;
padding-left: 0;
}
.header-dragging {
cursor: grabbing;
opacity: 0.5;
@@ -26,6 +26,7 @@ import styles from './item-table-list-column.module.css';
import i18n from '/@/i18n/i18n';
import { useItemSelectionState } from '/@/renderer/components/item-list/helpers/item-list-state';
import { isNoHorizontalPaddingColumn } from '/@/renderer/components/item-list/item-detail-list/utils';
import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
@@ -479,6 +480,7 @@ export const TableColumnTextContainer = (
[styles.dragging]: isDataRow && isDragging,
[styles.large]: props.size === 'large',
[styles.left]: props.columns[props.columnIndex].align === 'start',
[styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
[styles.paddingLg]: props.cellPadding === 'lg',
[styles.paddingMd]: props.cellPadding === 'md',
[styles.paddingSm]: props.cellPadding === 'sm',
@@ -632,6 +634,7 @@ export const TableColumnContainer = (
[styles.dragging]: isDataRow && isDragging,
[styles.large]: props.size === 'large',
[styles.left]: props.columns[props.columnIndex].align === 'start',
[styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
[styles.paddingLg]: props.cellPadding === 'lg',
[styles.paddingMd]: props.cellPadding === 'md',
[styles.paddingSm]: props.cellPadding === 'sm',
@@ -850,6 +853,7 @@ export const TableColumnHeaderContainer = (
[styles.headerDraggedOverLeft]: isDraggedOver === 'left',
[styles.headerDraggedOverRight]: isDraggedOver === 'right',
[styles.headerDragging]: isDragging,
[styles.noHorizontalPadding]: isNoHorizontalPaddingColumn(props.type),
[styles.paddingLg]: props.cellPadding === 'lg',
[styles.paddingMd]: props.cellPadding === 'md',
[styles.paddingSm]: props.cellPadding === 'sm',