diff --git a/src/renderer/components/item-object-list/item-list-layout.scss b/src/renderer/components/item-object-list/item-list-layout.scss index 026791ebb1..b0c4acac90 100644 --- a/src/renderer/components/item-object-list/item-list-layout.scss +++ b/src/renderer/components/item-object-list/item-list-layout.scss @@ -29,6 +29,21 @@ min-height: 200px; } + .TableHead { + .TableCell { + display: flex; + justify-content: space-between; + } + + &:hover { + .TableCell { + .resize-anchor { + opacity: 1; + } + } + } + } + .TableCell { position: relative; @@ -36,14 +51,17 @@ @include table-cell-action; } .resize-anchor { - position: absolute; - top: 0; + transition: opacity 0.3s; + opacity: 0; right: 0; - min-width: 5px; user-select: none; cursor: col-resize; - background-color: gray; - height: -webkit-fill-available; + transform: rotate(90deg); + color: var(--textColorPrimary); + + &:hover { + color: white; + } } } } diff --git a/src/renderer/components/table/table-cell.tsx b/src/renderer/components/table/table-cell.tsx index 6b80935213..2eddffc1b0 100644 --- a/src/renderer/components/table/table-cell.tsx +++ b/src/renderer/components/table/table-cell.tsx @@ -202,9 +202,16 @@ export class TableCell extends React.Component { return (
{this.renderCheckbox()} - {_nowrap ?
{content}
: content} - {this.renderSortIcon()} - {resizable && } +
+ {_nowrap ?
{content}
: content} + {this.renderSortIcon()} +
+ + {resizable && ( + + + + )}
); }