diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css index 5442cfacb..b9c367067 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css @@ -191,23 +191,54 @@ } .header-content { + display: flex; + align-items: center; overflow: hidden; text-overflow: ellipsis; + font-size: var(--theme-font-size-sm); white-space: nowrap; } .header-content.center { + justify-content: center; text-align: center; } .header-content.left { + justify-content: flex-start; text-align: left; } .header-content.right { + justify-content: flex-end; text-align: right; } +.header-icon-wrapper { + display: inline-flex; + flex-shrink: 0; + align-items: center; + font-size: var(--theme-font-size-sm); + line-height: 1; +} + +.header-icon-wrapper :global(svg) { + width: var(--theme-font-size-sm); + height: var(--theme-font-size-sm); +} + +.header-content.center .header-icon-wrapper { + justify-content: center; +} + +.header-content.left .header-icon-wrapper { + justify-content: flex-start; +} + +.header-content.right .header-icon-wrapper { + justify-content: flex-end; +} + .container :global(.hover-only), .container :global(.hover-only-flex) { display: none; diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx index f8e8f3629..20ed4aa2b 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx @@ -32,6 +32,7 @@ import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list'; import { ItemControls, ItemListItem } from '/@/renderer/components/item-list/types'; import { useDragDrop } from '/@/renderer/hooks/use-drag-drop'; +import { Flex } from '/@/shared/components/flex/flex'; import { Icon } from '/@/shared/components/icon/icon'; import { Skeleton } from '/@/shared/components/skeleton/skeleton'; import { Text } from '/@/shared/components/text/text'; @@ -653,7 +654,7 @@ export const TableColumnHeaderContainer = ( }, ) => { return ( -
{columnLabelMap[props.type]} -
+ ); }; const columnLabelMap: Record = { - [TableColumn.ACTIONS]: , + [TableColumn.ACTIONS]: ( + + + + ), [TableColumn.ALBUM]: i18n.t('table.column.album', { postProcess: 'upperCase' }) as string, [TableColumn.ALBUM_ARTIST]: i18n.t('table.column.albumArtist', { postProcess: 'upperCase', @@ -698,10 +703,16 @@ const columnLabelMap: Record = { [TableColumn.DATE_ADDED]: i18n.t('table.column.dateAdded', { postProcess: 'upperCase', }) as string, - [TableColumn.DISC_NUMBER]: i18n.t('table.column.discNumber', { - postProcess: 'upperCase', - }) as string, - [TableColumn.DURATION]: , + [TableColumn.DISC_NUMBER]: ( + + + + ), + [TableColumn.DURATION]: ( + + + + ), [TableColumn.GENRE]: i18n.t('table.column.genre', { postProcess: 'upperCase' }) as string, [TableColumn.GENRE_BADGE]: i18n.t('table.column.genre', { postProcess: 'upperCase', @@ -719,7 +730,11 @@ const columnLabelMap: Record = { [TableColumn.RELEASE_DATE]: i18n.t('table.column.releaseDate', { postProcess: 'upperCase', }) as string, - [TableColumn.ROW_INDEX]: , + [TableColumn.ROW_INDEX]: ( + + + + ), [TableColumn.SIZE]: i18n.t('table.column.size', { postProcess: 'upperCase' }) as string, [TableColumn.SKIP]: '', [TableColumn.SONG_COUNT]: i18n.t('table.column.songCount', { @@ -729,10 +744,16 @@ const columnLabelMap: Record = { [TableColumn.TITLE_COMBINED]: i18n.t('table.column.title', { postProcess: 'upperCase', }) as string, - [TableColumn.TRACK_NUMBER]: i18n.t('table.column.trackNumber', { - postProcess: 'upperCase', - }) as string, - [TableColumn.USER_FAVORITE]: , + [TableColumn.TRACK_NUMBER]: ( + + + + ), + [TableColumn.USER_FAVORITE]: ( + + + + ), [TableColumn.USER_RATING]: i18n.t('table.column.rating', { postProcess: 'upperCase', }) as string, diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx index 2d389c573..5e8ce6148 100644 --- a/src/shared/components/icon/icon.tsx +++ b/src/shared/components/icon/icon.tsx @@ -33,6 +33,7 @@ import { LuCloudDownload, LuCornerUpRight, LuDelete, + LuDisc, LuDisc3, LuDownload, LuEllipsis, @@ -141,6 +142,7 @@ export const AppIcon = { check: LuCheck, clipboardCopy: LuClipboardCopy, delete: LuDelete, + disc: LuDisc, download: LuDownload, dragHorizontal: LuGripHorizontal, dragVertical: LuGripVertical,