github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(ui): add sorting icon component and table header cell styling EE-3626 (#7165) 

* feat(ui): add sorting icons EE-3626

feat(ui): Add react component for sorting icons

feat(ui) make component usable in angular 

* feat(ui): update angular example EE-3626
pull/7202/head
Ali 2022-07-08 01:20:33 +12:00 committed by GitHub
parent 712207e69f
commit 14a8b1d897
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 272 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/__mocks__/svg.js Normal file
View File

@ -0,0 +1,2 @@
export default 'SvgrURL';
export const ReactComponent = 'div';

4
app/assets/css/rdash.css
View File

@ -111,10 +111,10 @@ div.input-mask {
background: var(--bg-widget-table-color);
}
.widget .widget-body table thead * {
font-size: 14px !important;
font-size: 14px;
}
.widget .widget-body table tbody * {
font-size: 13px !important;
font-size: 13px;
}
.widget .widget-body .error {
color: #ff0000;

9
app/assets/css/theme.css
View File

@ -264,6 +264,9 @@
--bg-multiselect-helpercontainer: var(--white-color);
--text-input-textarea: var(--white-color);
--sort-icon-muted: var(--ui-gray-5);
--sort-icon-hover: var(--ui-gray-6);
--sort-icon: var(--ui-gray-9);
--border-checkbox: var(--ui-gray-5);
--bg-checkbox: var(--white-color);
--border-searchbar: var(--ui-gray-5);
@ -443,6 +446,9 @@
--bg-multiselect-helpercontainer: var(--grey-1);
--text-input-textarea: var(--grey-1);
--sort-icon-muted: var(--ui-gray-7);
--sort-icon-hover: var(--ui-gray-6);
--sort-icon: var(--ui-gray-3);
--border-checkbox: var(--ui-gray-5);
--bg-checkbox: var(--white-color);
--border-searchbar: var(--ui-gray-5);
@ -614,6 +620,9 @@
--text-cm-string-color: var(--red-7);
--text-progress-bar-color: var(--black-color);
--sort-icon-muted: var(--ui-gray-7);
--sort-icon-hover: var(--ui-gray-6);
--sort-icon: var(--ui-gray-3);
--border-checkbox: var(--ui-gray-5);
--bg-checkbox: var(--white-color);
--border-searchbar: var(--ui-gray-5);

4
app/portainer/components/datatables/datatable-columns-visibility/datatable-columns-visibility.html
View File

@ -1,5 +1,7 @@
<span class="setting" ng-class="{ 'setting-active': $ctrl.state.isOpen }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.state.isOpen">
<span uib-dropdown-toggle aria-label="Columns"><i class="fa fa-columns space-right" aria-hidden="true"></i></span>
<span uib-dropdown-toggle aria-label="Columns">
<pr-icon icon="'columns'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Show / Hide Columns </div>

44
app/portainer/components/datatables/datatable.css
View File

@ -1,7 +1,7 @@
.datatable .toolBar {
background-color: var(--bg-card-color);
overflow: auto;
padding: 20px 10px;
padding: 20px;
font-size: 16px;
border-radius: 8px;
@ -26,7 +26,7 @@
.datatable .toolBar .settings {
float: right;
margin-right: 5px;
margin-top: 5px;
}
.datatable .toolBar .setting {
@ -38,23 +38,29 @@
@apply text-blue-7;
}
.datatable tr > td a {
color: var(--ui-blue-8);
}
.datatable tr > td a:hover,
.datatable tr > td a:focus {
text-decoration: underline;
}
.toolBar .actionBar {
margin-right: 10px;
display: inline-flex;
}
.toolBar .settings {
width: 60px;
text-align: right;
display: inline-flex;
}
.datatable .searchBar {
border: 1px solid var(--border-searchbar);
padding: 5px;
background: var(--bg-searchbar) !important;
border-radius: 5px;
padding: 4px 10px !important;
padding: 4px 10px;
font-size: 14px;
}
@ -67,7 +73,6 @@
.toolBar .searchBar {
flex: right;
margin-right: 10px;
width: 500px;
height: 30px;
display: inline-flex;
}
@ -146,6 +151,15 @@
padding: 15px 0;
}
.table > tbody > tr > td {
vertical-align: middle;
}
.table > tbody > tr {
height: 50px;
vertical-align: middle;
}
[data-reach-menu-list],
[data-reach-menu-items] {
padding: 0px;
@ -172,7 +186,7 @@
}
.datatable .table-filters thead tr > th {
height: 32px;
white-space: nowrap;
vertical-align: middle;
}
@ -316,16 +330,14 @@
width: 30px;
}
.table th button.sortable {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--text-link-color);
.table tr > th:first-child,
.table tr > td:first-child {
padding-left: 20px;
}
.table th button.sortable:hover .sortable-label {
text-decoration: underline;
.table tr > th:last-child,
.table tr > last-child {
padding-right: 20px;
}
.datatable .table-setting-menu-btn {

168
app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
View File

@ -1,37 +1,52 @@
<div class="datatable">
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle"><i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
<datatable-searchbar value="$ctrl.state.textFilter" placeholder="'Search...'" on-change="($ctrl.onTextFilterChange)" data-cy="stack-searchInput"></datatable-searchbar>
<div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
<div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<div class="toolBarTitle vertical-center">
<pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for a stack..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="stack-searchInput"
/>
</div>
<div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
<button
type="button"
class="btn btn-sm btn-danger"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="PortainerStackDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="stack-removeStackButton"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
<pr-icon icon="'trash'" feather="true" mode="'danger'"></pr-icon>Remove
</button>
<button
ng-disabled="!$ctrl.createEnabled"
type="button"
class="btn btn-sm btn-primary"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ui-sref="docker.stacks.newstack"
authorization="PortainerStackCreate"
data-cy="stack-addStackButton"
>
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack
<pr-icon icon="'plus'" feather="true"></pr-icon>Add stack
</button>
</div>
<div class="settings">
<datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<span uib-dropdown-toggle aria-label="Settings"><i class="fa fa-cog" aria-hidden="true"></i></span>
<span class="setting ml-2" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'settings'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -55,7 +70,7 @@
<option value="300">5min</option>
</select>
<span>
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
<pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
</span>
</div>
</div>
@ -74,68 +89,81 @@
<thead>
<tr>
<th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<a ng-click="$ctrl.changeOrderBy('Name')">
Name
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
</a>
<div>
<span uib-dropdown-toggle ng-class="['table-filter', { 'filter-active': $ctrl.filters.state.enabled }]">
Filter
<i ng-class="['fa', { 'fa-filter': !$ctrl.filters.state.enabled, 'fa-check': $ctrl.filters.state.enabled }]" aria-hidden="true"></i>
<div class="flex flex-row flex-no-wrap gap-1">
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="PortainerStackCreate, PortainerStackDelete">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
</div>
<div class="dropdown-menu" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Filter by activity </div>
<div class="menuContent">
<div class="md-checkbox">
<input id="filter_usage_activeStacks" type="checkbox" ng-model="$ctrl.filters.state.showActiveStacks" ng-change="$ctrl.onFilterChange()" />
<label for="filter_usage_activeStacks">Active stacks</label>
<table-column-header
col-title="'Name'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
<div>
<span uib-dropdown-toggle ng-class="['table-filter vertical-center !ml-1', { 'filter-active': $ctrl.filters.state.enabled }]">
Filter
<pr-icon ng-if="$ctrl.filters.state.enabled" icon="'check'" feather="true" size="'sm'"></pr-icon>
<pr-icon ng-if="!$ctrl.filters.state.enabled" icon="'filter'" feather="true" size="'sm'"></pr-icon>
</span>
</div>
<div class="dropdown-menu" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Filter by activity </div>
<div class="menuContent">
<div class="md-checkbox">
<input id="filter_usage_activeStacks" type="checkbox" ng-model="$ctrl.filters.state.showActiveStacks" ng-change="$ctrl.onFilterChange()" />
<label for="filter_usage_activeStacks">Active stacks</label>
</div>
<div class="md-checkbox">
<input id="filter_usage_unactiveStacks" type="checkbox" ng-model="$ctrl.filters.state.showUnactiveStacks" ng-change="$ctrl.onFilterChange()" />
<label for="filter_usage_unactiveStacks">Inactive stacks</label>
</div>
</div>
<div class="md-checkbox">
<input id="filter_usage_unactiveStacks" type="checkbox" ng-model="$ctrl.filters.state.showUnactiveStacks" ng-change="$ctrl.onFilterChange()" />
<label for="filter_usage_unactiveStacks">Inactive stacks</label>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
</div>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
</div>
</div>
</div>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Type')">
Type
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Type'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Type'"
is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Type')"
></table-column-header>
</th>
<th>Control</th>
<th><table-column-header col-title="'Control'" can-sort="false"></table-column-header></th>
<th>
<a ng-click="$ctrl.changeOrderBy('ResourceControl.CreationDate')">
Created
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Created'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'ResourceControl.CreationDate'"
is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.CreationDate' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.CreationDate')"
></table-column-header>
</th>
<th ng-if="$ctrl.columnVisibility.columns.updated.display">
<a ng-click="$ctrl.changeOrderBy('ResourceControl.UpdateDate')">
Updated
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Updated'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'ResourceControl.UpdateDate'"
is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.UpdateDate' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.UpdateDate')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
Ownership
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Ownership'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
></table-column-header>
</th>
</tr>
</thead>
@ -155,29 +183,31 @@
>{{ item.Name }}</a
>
<span ng-if="$ctrl.offlineMode">{{ item.Name }}</span>
<span ng-if="item.Regular && item.Status == 2" style="margin-left: 10px" class="label label-warning image-tag space-left">Inactive</span>
<span ng-if="item.Regular && item.Status == 2" class="label label-warning image-tag ml-2">Inactive</span>
</td>
<td>{{ item.Type === 1 ? 'Swarm' : 'Compose' }}</td>
<td>
<span
ng-if="item.Orphaned"
class="interactive"
class="interactive vertical-center"
tooltip-append-to-body="true"
tooltip-placement="bottom"
tooltip-class="portainer-tooltip"
uib-tooltip="This stack was created inside an environment that is no longer registered inside Portainer."
>
Orphaned <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-left: 2px"></i>
Orphaned
<pr-icon icon="'alert-circle'" feather="true" class-name="'ml-0.5'" mode="'warning'"></pr-icon>
</span>
<span
ng-if="item.External"
class="interactive"
class="interactive vertical-center"
tooltip-append-to-body="true"
tooltip-placement="bottom"
tooltip-class="portainer-tooltip"
uib-tooltip="This stack was created outside of Portainer. Control over this stack is limited."
>
Limited <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-left: 2px"></i>
Limited
<pr-icon icon="'alert-circle'" feather="true" class-name="'ml-0.5'" mode="'warning'"></pr-icon>
</span>
<span ng-if="item.Regular">Total</span>
</td>
@ -190,8 +220,8 @@
<span ng-if="!item.UpdateDate"> - </span>
</td>
<td>
<span>
<i ng-class="item.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
<span class="vertical-center">
<pr-icon ng-attr-icon="item.ResourceControl.Ownership | ownershipicon" feather="true" class-name="'icon ml-0.5'"></pr-icon>
{{ item.ResourceControl.Ownership ? item.ResourceControl.Ownership : item.ResourceControl.Ownership = $ctrl.RCO.ADMINISTRATORS }}
</span>
</td>
@ -213,7 +243,7 @@
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">
<span style="margin-right: 5px"> Items per page </span>
<span class="mr-1"> Items per page </span>
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
<option value="0">All</option>
<option value="10">10</option>

7
app/portainer/components/datatables/stacks-datatable/stacksDatatableController.js
View File

@ -33,13 +33,6 @@ angular.module('portainer.app').controller('StacksDatatableController', [
DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
}
this.onTextFilterChange = onTextFilterChange.bind(this);
function onTextFilterChange(value) {
this.state.textFilter = value;
this.onTextFilterChangeGeneric();
}
/**
* Do not allow external items
*/

8
app/portainer/filters/filters.js
View File

@ -106,13 +106,13 @@ export function environmentTypeIcon(type) {
export function ownershipIcon(ownership) {
switch (ownership) {
case RCO.PRIVATE:
return 'fa fa-eye-slash';
return 'eye-off';
case RCO.ADMINISTRATORS:
return 'fa fa-eye-slash';
return 'eye-off';
case RCO.RESTRICTED:
return 'fa fa-users';
return 'users';
default:
return 'fa fa-eye';
return 'eye';
}
}

10
app/portainer/react/components/index.ts
View File

@ -10,6 +10,7 @@ import { Loading } from '@@/Widget/Loading';
import { PasswordCheckHint } from '@@/PasswordCheckHint';
import { ViewLoading } from '@@/ViewLoading';
import { Tooltip } from '@@/Tip/Tooltip';
import { TableColumnHeaderAngular } from '@@/datatables/TableHeaderCell';
import { DashboardItem } from '@@/DashboardItem';
import { SearchBar } from '@@/datatables/SearchBar';
@ -31,6 +32,15 @@ export const componentsModule = angular
r2a(PasswordCheckHint, ['forceChangePassword', 'passwordValid'])
)
.component('rdLoading', r2a(Loading, []))
.component(
'tableColumnHeader',
r2a(TableColumnHeaderAngular, [
'colTitle',
'canSort',
'isSorted',
'isSortedDesc',
])
)
.component('viewLoading', r2a(ViewLoading, ['message']))
.component(
'pageHeader',

8
app/react-tools/react2angular.tsx
View File

@ -67,7 +67,13 @@ export function react2angular<T, U extends PropNames<T>[]>(
el
);
};
this.$onDestroy = () => ReactDOM.unmountComponentAtNode(el);
this.$onDestroy = () => {
// eslint-disable-next-line react/no-find-dom-node
const domNode = ReactDOM.findDOMNode(el);
if (domNode != null && domNode.parentElement != null) {
ReactDOM.unmountComponentAtNode(domNode.parentElement);
}
};
}
}

7
app/react/components/datatables/TableHeaderCell.module.css
View File

@ -1,5 +1,4 @@
.sort-icon {
width: 1em;
height: 1em;
display: inline-block;
/* highlight the sort icons for columns that aren't actively sorting */
button:not(.sortingActive):hover path {
fill: var(--sort-icon-hover);
}

85
app/react/components/datatables/TableHeaderCell.tsx
View File

@ -2,9 +2,8 @@ import clsx from 'clsx';
import { PropsWithChildren, ReactNode } from 'react';
import { TableHeaderProps } from 'react-table';
import { Button } from '@@/buttons';
import { useTableContext } from './TableContainer';
import { TableHeaderSortIcons } from './TableHeaderSortIcons';
import styles from './TableHeaderCell.module.css';
interface Props {
@ -32,15 +31,17 @@ export function TableHeaderCell({
return (
<th role={role} style={style} className={className}>
<SortWrapper
canSort={canSort}
onClick={onSortClick}
isSorted={isSorted}
isSortedDesc={isSortedDesc}
>
{render()}
</SortWrapper>
{canFilter ? renderFilter() : null}
<div className="flex flex-row flex-nowrap h-full items-center gap-1">
<SortWrapper
canSort={canSort}
onClick={onSortClick}
isSorted={isSorted}
isSortedDesc={isSortedDesc}
>
{render()}
</SortWrapper>
{canFilter ? renderFilter() : null}
</div>
</th>
);
}
@ -49,13 +50,13 @@ interface SortWrapperProps {
canSort: boolean;
isSorted: boolean;
isSortedDesc?: boolean;
onClick: (desc: boolean) => void;
onClick?: (desc: boolean) => void;
}
function SortWrapper({
canSort,
children,
onClick,
onClick = () => {},
isSorted,
isSortedDesc,
}: PropsWithChildren<SortWrapperProps>) {
@ -64,27 +65,47 @@ function SortWrapper({
}
return (
<Button
color="link"
<button
type="button"
onClick={() => onClick(!isSortedDesc)}
className="sortable"
>
<span className="sortable-label">{children}</span>
{isSorted ? (
<i
className={clsx(
'fa',
'space-left',
isSortedDesc ? 'fa-sort-alpha-up' : 'fa-sort-alpha-down',
styles.sortIcon
)}
aria-hidden="true"
/>
) : (
<div className={styles.sortIcon} />
className={clsx(
'sortable !bg-transparent w-full h-full !ml-0 !px-0 border-none focus:border-none',
isSorted && styles.sortingActive
)}
</Button>
>
<div className="flex flex-row justify-start items-center w-full h-full">
{children}
<TableHeaderSortIcons
sorted={isSorted}
descending={isSorted && !!isSortedDesc}
/>
</div>
</button>
);
}
interface TableColumnHeaderAngularProps {
colTitle: string;
canSort: boolean;
isSorted?: boolean;
isSortedDesc?: boolean;
}
export function TableColumnHeaderAngular({
canSort,
isSorted,
colTitle,
isSortedDesc,
}: TableColumnHeaderAngularProps) {
return (
<div className="flex flex-row flex-nowrap h-full">
<SortWrapper
canSort={canSort}
isSorted={!!isSorted}
isSortedDesc={isSortedDesc}
>
{colTitle}
</SortWrapper>
</div>
);
}

12
app/react/components/datatables/TableHeaderSortIcons.module.css Normal file
View File

@ -0,0 +1,12 @@
.sort-icon > path {
fill: var(--sort-icon-muted);
}
.active-sort-icon > path {
fill: var(--sort-icon);
}
.sort-icon {
display: inline-block;
font-size: 12px !important;
}

33
app/react/components/datatables/TableHeaderSortIcons.tsx Normal file
View File

@ -0,0 +1,33 @@
import clsx from 'clsx';
import SortDownIcon from './sort-arrow-down.svg?c';
import SortUpIcon from './sort-arrow-up.svg?c';
import styles from './TableHeaderSortIcons.module.css';
interface Props {
sorted: boolean;
descending: boolean;
}
export function TableHeaderSortIcons({ sorted, descending }: Props) {
return (
<div className="flex flex-row no-wrap w-min-max">
<SortDownIcon
className={clsx(
'space-left',
sorted && !descending && styles.activeSortIcon,
styles.sortIcon
)}
aria-hidden="true"
/>
<SortUpIcon
className={clsx(
'-ml-1', // shift closer to SortDownIcon to match the mockup
sorted && descending && styles.activeSortIcon,
styles.sortIcon
)}
aria-hidden="true"
/>
</div>
);
}

3
app/react/components/datatables/sort-arrow-down.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.4734 0.727041C4.4734 0.399398 4.2078 0.133789 3.88015 0.133789C3.55251 0.133789 3.2869 0.399398 3.2869 0.727041H4.4734ZM3.88015 11.2737L3.47355 11.7057C3.70705 11.9255 4.07293 11.9199 4.29966 11.6931L3.88015 11.2737ZM6.93628 9.0563C7.16795 8.82464 7.16795 8.44901 6.93618 8.21734C6.70452 7.98568 6.32891 7.98568 6.09723 8.21734L6.93628 9.0563ZM1.48521 8.20479C1.24663 7.98024 0.871167 7.99161 0.646611 8.2302C0.422046 8.46878 0.433416 8.84431 0.672003 9.06886L1.48521 8.20479ZM3.2869 0.727041V11.2737H4.4734V0.727041H3.2869ZM6.09723 8.21734L3.46064 10.8542L4.29966 11.6931L6.93628 9.0563L6.09723 8.21734ZM4.28676 10.8417L1.48521 8.20479L0.672003 9.06886L3.47355 11.7057L4.28676 10.8417Z" fill="#D0D5DD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 818 B

3
app/react/components/datatables/sort-arrow-up.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.52627 11.2732C3.52627 11.6008 3.79185 11.8664 4.11952 11.8664C4.4472 11.8664 4.71278 11.6008 4.71278 11.2732H3.52627ZM4.11952 0.726556L4.5261 0.29456C4.29265 0.0747795 3.92672 0.0803264 3.7 0.307077L4.11952 0.726556ZM1.06338 2.94393C0.83172 3.17561 0.83172 3.55124 1.06348 3.7829C1.29515 4.01458 1.67078 4.01456 1.90244 3.78286L1.06338 2.94393ZM6.51448 3.79539C6.75307 4.01996 7.1285 4.00859 7.35304 3.77C7.57759 3.53141 7.56622 3.15595 7.32763 2.9314L6.51448 3.79539ZM4.71278 11.2732V0.726556H3.52627V11.2732H4.71278ZM1.90244 3.78286L4.53905 1.14602L3.7 0.307077L1.06338 2.94393L1.90244 3.78286ZM3.71295 1.15855L6.51448 3.79539L7.32763 2.9314L4.5261 0.29456L3.71295 1.15855Z" fill="#D0D5DD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 807 B

1
jest.config.js
View File

@ -84,6 +84,7 @@ module.exports = {
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/app/__mocks__/fileMock.js',
'\\.(css|less)$': '<rootDir>/app/__mocks__/styleMock.js',
'\\.svg\\?c$': '<rootDir>/app/__mocks__/svg.js',
'^@@/(.*)$': '<rootDir>/app/react/components/$1',
'^@/(.*)$': '<rootDir>/app/$1',
'^Agent/(.*)?': '<rootDir>/app/agent/$1',