[ARVADOS-WORKBENCH2] updated: 1.3.1-418-g85c036ce
Git user
git at public.curoverse.com
Fri Mar 15 07:33:24 EDT 2019
Summary of changes:
.../data-table-filters-popover.tsx | 46 ++++++++++++++++------
src/components/data-table/data-table.tsx | 23 +++++++++--
2 files changed, 54 insertions(+), 15 deletions(-)
via 85c036ce886647c28ceebeefdf6db026c96a3a68 (commit)
via 7e718771481262388b4c89f6429b6a7c0b2ae1d9 (commit)
via 3dcd0e5228ba58a37e55193f99573845a825693e (commit)
via fac258804c46dd2fcfb8de178ded62391f652370 (commit)
via 57963d0ef4a73cc7222f93e61cb7bcf8cffc3f75 (commit)
from df60d34060e3031bdec0ea58c25bcff99d4d3817 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 85c036ce886647c28ceebeefdf6db026c96a3a68
Merge: df60d340 7e718771
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Mar 15 12:32:56 2019 +0100
Merge branch '14971-table-column-filters-ux-improvements'
refs #14971
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
commit 7e718771481262388b4c89f6429b6a7c0b2ae1d9
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Mar 15 11:34:03 2019 +0100
Update filters icon style to match sorting icon
Feature #14971
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index dbe8d970..28cf4c22 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -47,8 +47,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
},
},
icon: {
- userSelect: "none",
- fontSize: 'small'
+ fontSize: 12,
+ userSelect: 'none',
+ width: 16,
+ height: 15,
+ marginTop: 1
},
iconButton: {
color: theme.palette.text.primary,
commit 3dcd0e5228ba58a37e55193f99573845a825693e
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Mar 15 11:33:44 2019 +0100
Add hover styles to sorting arrow
Feature #14971
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index a0d047ce..3cce8f3d 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -3,12 +3,15 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core';
+import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton } from '@material-ui/core';
+import classnames from 'classnames';
import { DataColumn, SortDirection } from './data-column';
import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
import { countNodes } from '~/models/tree';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
export type DataColumns<T> = Array<DataColumn<T>>;
@@ -32,7 +35,7 @@ export interface DataTableDataProps<T> {
currentRoute?: string;
}
-type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell';
+type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
@@ -52,6 +55,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
},
tableCell: {
wordWrap: 'break-word'
+ },
+ arrow: {
+ margin: 0
+ },
+ arrowButton: {
+ color: theme.palette.text.primary
}
});
@@ -81,7 +90,7 @@ export const DataTable = withStyles(styles)(
renderNoItemsPlaceholder = () => {
return this.props.defaultView
? this.props.defaultView
- : <DataTableDefaultView/>;
+ : <DataTableDefaultView />;
}
renderHeadCell = (column: DataColumn<T>, index: number) => {
@@ -103,6 +112,8 @@ export const DataTable = withStyles(styles)(
? <TableSortLabel
active={sortDirection !== SortDirection.NONE}
direction={sortDirection !== SortDirection.NONE ? sortDirection : undefined}
+ IconComponent={this.ArrowIcon}
+ hideSortIcon
onClick={() =>
onSortToggle &&
onSortToggle(column)}>
@@ -114,6 +125,12 @@ export const DataTable = withStyles(styles)(
</TableCell>;
}
+ ArrowIcon = ({className, ...props}: SvgIconProps) => (
+ <IconButton component='span' className={this.props.classes.arrowButton}>
+ <ArrowDownwardIcon {...props} className={classnames(className, this.props.classes.arrow)}/>
+ </IconButton>
+ )
+
renderBodyRow = (item: any, index: number) => {
const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid } = this.props;
return <TableRow
commit fac258804c46dd2fcfb8de178ded62391f652370
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Mar 15 10:21:28 2019 +0100
Wrap column filters icon with an icon button
Feature #14971
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index 9da3c20c..dbe8d970 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -15,7 +15,8 @@ import {
CardActions,
Typography,
CardContent,
- Tooltip
+ Tooltip,
+ IconButton
} from "@material-ui/core";
import * as classnames from "classnames";
import { DefaultTransformOrigin } from "~/components/popover/helpers";
@@ -23,7 +24,7 @@ import { createTree } from '~/models/tree';
import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree";
import { getNodeDescendants } from '~/models/tree';
-export type CssRules = "root" | "icon" | "active" | "checkbox";
+export type CssRules = "root" | "icon" | "iconButton" | "active" | "checkbox";
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
@@ -41,16 +42,17 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
},
active: {
color: theme.palette.text.primary,
- '& $icon': {
+ '& $iconButton': {
opacity: 1,
},
},
icon: {
- marginRight: 4,
- marginLeft: 4,
- opacity: 0.7,
userSelect: "none",
- width: 16
+ fontSize: 'small'
+ },
+ iconButton: {
+ color: theme.palette.text.primary,
+ opacity: 0.7,
},
checkbox: {
width: 24,
@@ -105,9 +107,11 @@ export const DataTableFiltersPopover = withStyles(styles)(
onClick={this.open}
disableRipple>
{children}
- <i className={classnames(["fas fa-filter", classes.icon])}
- data-fa-transform="shrink-3"
- ref={this.icon} />
+ <IconButton component='span' classes={{root: classes.iconButton}}>
+ <i className={classnames(["fas fa-filter", classes.icon])}
+ data-fa-transform="shrink-3"
+ ref={this.icon} />
+ </IconButton>
</ButtonBase>
</Tooltip>
<Popover
commit 57963d0ef4a73cc7222f93e61cb7bcf8cffc3f75
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Mar 15 10:07:21 2019 +0100
Gray out filters label when all filters are selected (default behaviour)
Feature #14971
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index 4015126a..9da3c20c 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -58,10 +58,21 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
}
});
+enum SelectionMode {
+ ALL = 'all',
+ NONE = 'none'
+}
+
export interface DataTableFilterProps {
name: string;
filters: DataTableFilters;
onChange?: (filters: DataTableFilters) => void;
+
+ /**
+ * By default `all` filters selection means that label should be grayed out.
+ * Use `none` when label is supposed to be grayed out when no filter is selected.
+ */
+ defaultSelection?: SelectionMode;
}
interface DataTableFilterState {
@@ -80,8 +91,12 @@ export const DataTableFiltersPopover = withStyles(styles)(
icon = React.createRef<HTMLElement>();
render() {
- const { name, classes, children } = this.props;
- const isActive = getNodeDescendants('')(this.state.filters).some(f => f.selected);
+ const { name, classes, defaultSelection = SelectionMode.ALL, children } = this.props;
+ const isActive = getNodeDescendants('')(this.state.filters)
+ .some(f => defaultSelection === SelectionMode.ALL
+ ? !f.selected
+ : f.selected
+ );
return <>
<Tooltip title='Filters'>
<ButtonBase
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list