diff --git a/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx b/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx index 4d193ea24..cf5a0dbd1 100644 --- a/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx @@ -15,9 +15,9 @@ export const ActionsColumn = (props: ItemTableListInnerColumn) => { icon="ellipsisHorizontal" iconProps={{ color: 'muted', + size: 'lg', }} - size="lg" - variant="transparent" + variant="subtle" /> ); diff --git a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx b/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx index 8f4ca95b8..907e3a17d 100644 --- a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx @@ -18,9 +18,9 @@ export const FavoriteColumn = (props: ItemTableListInnerColumn) => { iconProps={{ color: row ? 'primary' : 'muted', fill: row ? 'primary' : undefined, + size: 'lg', }} - size="lg" - variant="transparent" + variant="subtle" /> ); diff --git a/src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css b/src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css new file mode 100644 index 000000000..b3cd7c080 --- /dev/null +++ b/src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css @@ -0,0 +1,3 @@ +.expand { + position: absolute; +} diff --git a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx b/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx index 6780abb5d..4069f57ff 100644 --- a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx @@ -1,8 +1,40 @@ +import clsx from 'clsx'; + +import styles from './row-index-column.module.css'; + import { ItemTableListInnerColumn, + TableColumnContainer, TableColumnTextContainer, } from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; +import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; +import { Text } from '/@/shared/components/text/text'; export const RowIndexColumn = (props: ItemTableListInnerColumn) => { + const { controls, enableExpansion } = props; + + if (enableExpansion) { + return ( + + + controls.onItemExpand?.( + props.data[props.rowIndex] as any, + props.itemType, + e, + ) + } + variant="subtle" + /> + + {props.rowIndex} + + + ); + } + return {props.rowIndex}; }; 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 1bba91ec7..7f797673f 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 @@ -93,3 +93,12 @@ .container.data-row.row-hovered :global(.hover-only-flex) { display: flex; } + +.container :global(.hide-on-hover) { + display: block; +} + +.container.data-row:hover :global(.hide-on-hover), +.container.data-row.row-hovered :global(.hide-on-hover) { + display: none; +}