From bf3b8ed9b3061423e2cf70c4110368a86de30fa3 Mon Sep 17 00:00:00 2001 From: heswell Date: Fri, 27 Oct 2023 22:08:20 +0100 Subject: [PATCH] final adjustments to table column header styling --- .../measured-container/MeasuredContainer.tsx | 6 ++++++ .../src/column-list/ColumnList.css | 1 + .../src/column-list/ColumnList.tsx | 2 +- .../packages/vuu-table/src/table-next/Row.css | 2 +- .../column-header-pill/ColumnHeaderPill.css | 3 ++- .../src/table-next/column-menu/ColumnMenu.css | 4 +++- .../column-resizing/ColumnResizer.css | 10 ++++++---- .../src/table-next/header-cell/HeaderCell.css | 18 +++++++++++++----- .../src/table-next/table-cell/TableCell.css | 2 +- 9 files changed, 34 insertions(+), 14 deletions(-) diff --git a/vuu-ui/packages/vuu-layout/src/measured-container/MeasuredContainer.tsx b/vuu-ui/packages/vuu-layout/src/measured-container/MeasuredContainer.tsx index 17b4548f2..a76471c5c 100644 --- a/vuu-ui/packages/vuu-layout/src/measured-container/MeasuredContainer.tsx +++ b/vuu-ui/packages/vuu-layout/src/measured-container/MeasuredContainer.tsx @@ -6,6 +6,12 @@ import cx from "classnames"; import "./MeasuredContainer.css"; export interface MeasuredContainerProps extends HTMLAttributes { + /** + * A numeric value for height will result in a fixed height. To adapt to container + * use either a percentage height or 'auto'. Always use 'auto' when rendering + * within a column based flex container, together with a flex value (use the + * --vuuMeasuredContainer-flex CSS custom property)) + */ height?: number | string; onResize?: (size: MeasuredSize) => void; width?: number | string; diff --git a/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.css b/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.css index 4c8615080..eeafbcb29 100644 --- a/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.css +++ b/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.css @@ -1,6 +1,7 @@ .vuuColumnList { + --vuuMeasuredContainer-flex: 1 1 1px; --vuu-svg-function: url('data:image/svg+xml;utf8,'); --vuuList-borderStyle: none; --vuuListItem-padding: 0; diff --git a/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx b/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx index d70e53484..8831f89f8 100644 --- a/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx +++ b/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx @@ -117,7 +117,7 @@ export const ColumnList = ({ ListItem={ColumnListItem} allowDragDrop - height="100%" + height="auto" onChange={handleChange} onClick={handleClick} onMoveListItem={onMoveListItem} diff --git a/vuu-ui/packages/vuu-table/src/table-next/Row.css b/vuu-ui/packages/vuu-table/src/table-next/Row.css index 9efc9efd4..4fccc0fb9 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/Row.css +++ b/vuu-ui/packages/vuu-table/src/table-next/Row.css @@ -54,7 +54,7 @@ } .vuuTableNextRow-selectionDecorator { - background-color: var(--vuu-selection-decorator-bg, inherit); + background-color: var(--vuu-selection-decorator-bg, white); display: inline-block; position: relative; height: var(--row-height); diff --git a/vuu-ui/packages/vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.css b/vuu-ui/packages/vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.css index af1a15e5b..2d9140740 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.css +++ b/vuu-ui/packages/vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.css @@ -3,11 +3,12 @@ --menu-item-icon-color: black; --vuu-icon-color: white; --vuu-icon-height: 12px; - --vuu-icon-width: 13px; + --vuu-icon-width: 12px; align-items: center; background: var(--salt-taggable-background-active); color: white; border-radius: 4px; + flex: var(--vuuColumnHeaderPill-flex, none); font-size: 11px; gap: 4px; height: 16px; diff --git a/vuu-ui/packages/vuu-table/src/table-next/column-menu/ColumnMenu.css b/vuu-ui/packages/vuu-table/src/table-next/column-menu/ColumnMenu.css index a42cef5d2..3c4e712ac 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/column-menu/ColumnMenu.css +++ b/vuu-ui/packages/vuu-table/src/table-next/column-menu/ColumnMenu.css @@ -13,9 +13,11 @@ border-radius: 4px; cursor: pointer; display: inline-block; + flex: 0 0 20px; padding: 2px; - left: var(--column-menu-left, 0); + /* left: var(--column-menu-left, 0); */ margin: var(--vuuTable-columnMenu-margin, 0); + width: auto; } .vuuTable-columnMenu:hover { diff --git a/vuu-ui/packages/vuu-table/src/table-next/column-resizing/ColumnResizer.css b/vuu-ui/packages/vuu-table/src/table-next/column-resizing/ColumnResizer.css index 360052e7b..8c3568df2 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/column-resizing/ColumnResizer.css +++ b/vuu-ui/packages/vuu-table/src/table-next/column-resizing/ColumnResizer.css @@ -3,12 +3,14 @@ cursor: col-resize; height: var(--header-height); margin-left: var(--columnResizer-left, auto); - position: relative; - width: 2px; + position: absolute; + right: -5px; + width: 8px; + z-index:1; } .vuuColumnResizerNext:hover { - --columnResizer-color: var(--salt-color-blue-500); + --columnResizer-color: var(--vuu-color-purple-10); } .vuuColumnResizerNext:after { @@ -17,7 +19,7 @@ content: ''; position: absolute; top: 0; - right: 0px; + right: 3px; height: var(--columnResizer-height, 0); width: 2px; } \ No newline at end of file diff --git a/vuu-ui/packages/vuu-table/src/table-next/header-cell/HeaderCell.css b/vuu-ui/packages/vuu-table/src/table-next/header-cell/HeaderCell.css index 02c9bcd82..8522a0901 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/header-cell/HeaderCell.css +++ b/vuu-ui/packages/vuu-table/src/table-next/header-cell/HeaderCell.css @@ -1,6 +1,7 @@ .vuuTableNextHeaderCell { --cell-align: 'flex-start'; - --vuuColumnHeaderPill-margin: 0 0 0 3px; + --vuuColumnHeaderPill-margin: 0; + --vuuColumnHeaderPill-flex: 0 0 24px; align-items: center; background-color: var(--vuuTableNextHeaderCell-background, inherit); @@ -11,7 +12,10 @@ box-sizing: border-box; cursor: default; display: inline-flex; + gap: 4px; height: var(--header-height); + padding: 0 12px 0 4px; + position: relative; vertical-align: top; } @@ -20,16 +24,20 @@ --vuuTable-columnMenu-margin: 0; --vuuColumnHeaderPill-margin: 0 3px 0 0; --column-menu-left: 2px; - justify-content: flex-end; + padding: 0 3px 0 12px; } - .vuuTableNextHeaderCell .vuuColumnResizerNext:hover { - --columnResizer-color: var(--vuu-color-purple-10); -} .vuuTableNextHeaderCell-label { + flex: 0 1 auto; line-height: calc(var(--header-height) - 1px); + overflow: hidden; + text-overflow: ellipsis; +} + +.vuuTableNextHeaderCell-right .vuuTableNextHeaderCell-label { + text-align: right; } .vuuTableNextHeaderCell-resizing { diff --git a/vuu-ui/packages/vuu-table/src/table-next/table-cell/TableCell.css b/vuu-ui/packages/vuu-table/src/table-next/table-cell/TableCell.css index 9b91a2a51..e9dde62b6 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/table-cell/TableCell.css +++ b/vuu-ui/packages/vuu-table/src/table-next/table-cell/TableCell.css @@ -5,7 +5,7 @@ display: inline-block; height: 100%; overflow:hidden; - padding: 0 8px; + padding: 0 11px 0 12px; text-overflow: ellipsis; vertical-align: top; }