diff --git a/package.json b/package.json index bcaa7b3..aa4f3d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@itwin/synchronization-report-react", - "version": "2.3.3", + "version": "2.3.4", "files": [ "dist" ], diff --git a/src/components/ProblemsTable.scss b/src/components/ProblemsTable.scss index a8d8d9a..c6a4428 100644 --- a/src/components/ProblemsTable.scss +++ b/src/components/ProblemsTable.scss @@ -7,6 +7,47 @@ height: 100%; flex: 1; min-height: 0; + + [class*='table-header'] [class*='table-cell'] { + min-height: 32px; + padding-block: 4px; + } + + // Hide filter button by default, show on hover + [class*='table-header-actions-container'] button, + .iui-table-header-actions-container button { + &[class*='table-filter-button'], + &.iui-table-filter-button { + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; + } + } + + // Show filter button when hovering over the header cell + [class*='table-header'] [class*='table-cell']:hover, + thead th:hover { + [class*='table-header-actions-container'] button, + .iui-table-header-actions-container button { + &[class*='table-filter-button'], + &.iui-table-filter-button { + opacity: 1; + visibility: visible; + } + } + } + + // Keep filter button visible when it's active + [class*='table-header-actions-container'] button[data-iui-active='true'], + .iui-table-header-actions-container button[data-iui-active='true'], + [class*='table-header-actions-container'] button:focus-visible, + .iui-table-header-actions-container button:focus-visible { + &[class*='table-filter-button'], + &.iui-table-filter-button { + opacity: 1; + visibility: visible; + } + } } .isr-problems-message { @@ -53,8 +94,10 @@ min-width: 360px; border-radius: 2px; top: -6%; + .tour-Container { padding: 12px 12px 12px 12px; + .tour-arrow-left { position: absolute; background: #fff; @@ -90,6 +133,7 @@ border-width: 12px; margin-top: -12px; } + .tour-Got-It { padding: 10px 10px 10px 10px; border: none; diff --git a/src/components/ProblemsTable.tsx b/src/components/ProblemsTable.tsx index 5cd6247..ab6e910 100644 --- a/src/components/ProblemsTable.tsx +++ b/src/components/ProblemsTable.tsx @@ -296,6 +296,38 @@ export const ProblemsTable = ({ const columns = React.useMemo( () => [ + { + id: 'level', + accessor: 'level', + Header: displayStrings.level, + Filter: tableFilters.TextFilter(), + minWidth: 50, + maxWidth: 170, + sortType: sortByLevel, + cellRenderer: ({ cellElementProps, cellProps }: CellRendererProps) => { + const level = cellProps.row.original.level; + const _isError = level === 'Error' || level === 'Fatal' || level === 'Critical'; + const _isWarning = level === 'Warning'; + + return ( + + ) : _isWarning ? ( + + ) : level ? ( + + ) : undefined + } + > + {level} + + ); + }, + }, { id: 'issueid', accessor: 'issueid', @@ -333,38 +365,6 @@ export const ProblemsTable = ({ return
{row.value}
; }, }, - { - id: 'level', - accessor: 'level', - Header: displayStrings.level, - Filter: tableFilters.TextFilter(), - minWidth: 50, - maxWidth: 170, - sortType: sortByLevel, - cellRenderer: ({ cellElementProps, cellProps }: CellRendererProps) => { - const level = cellProps.row.original.level; - const _isError = level === 'Error' || level === 'Fatal' || level === 'Critical'; - const _isWarning = level === 'Warning'; - - return ( - - ) : _isWarning ? ( - - ) : level ? ( - - ) : undefined - } - > - {level} - - ); - }, - }, { id: 'fileName', accessor: ({ fileName, fileId }: Partial) => fileName ?? getFileNameFromId(fileId), @@ -519,6 +519,7 @@ export const ProblemsTable = ({ >[]} data={data}