Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update table gradient code to be more similar to chart legend gradient code (https://github.com/woocommerce/woocommerce-admin/pull/817)

This commit is contained in:
Albert Juhé Lluveras 2018-11-12 12:04:38 -06:00 committed by GitHub
parent 687a728e64
commit 3637ae5054
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/client/components/table/style.scss
View File

@ -144,11 +144,13 @@
width: 41px;
height: 100%;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
&.is-scrollable::after {
visibility: visible;
opacity: 1;
}
table {

6
plugins/woocommerce-admin/client/components/table/table.js
View File

@ -95,7 +95,7 @@ class Table extends Component {
const table = this.container.current;
const scrolledToEnd = table.scrollWidth - table.scrollLeft <= table.offsetWidth;
this.setState( {
isScrollable: scrolledToEnd ? false : true,
isScrollable: ! scrolledToEnd,
} );
};
@ -110,9 +110,9 @@ class Table extends Component {
rowHeader,
rows,
} = this.props;
const { tabIndex } = this.state;
const { isScrollable, tabIndex } = this.state;
const classes = classnames( 'woocommerce-table__table', classNames, {
'is-scrollable': this.state.isScrollable,
'is-scrollable': isScrollable,
} );
const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false );
const sortDir = query.order || DESC;