Table: Update style to match design (https://github.com/woocommerce/woocommerce-admin/pull/289)
* Table: Add a hover state for rows * Expand target area for table links to take over entire cell * Add a purple link style for default links * Increase contrast for links-on-hover-color * Add “isNumeric” column identifier & right-align these cols
This commit is contained in:
Kelly Dwan
GitHub
parent
2b92b62ccd
commit
ff8217165d
|
|
@ -87,36 +87,42 @@ class RevenueReport extends Component {
|
|||
key: 'gross_revenue',
|
||||
required: true,
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
{
|
||||
label: __( 'Refunds', 'wc-admin' ),
|
||||
key: 'refunds',
|
||||
required: false,
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
{
|
||||
label: __( 'Coupons', 'wc-admin' ),
|
||||
key: 'coupons',
|
||||
required: false,
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
{
|
||||
label: __( 'Taxes', 'wc-admin' ),
|
||||
key: 'taxes',
|
||||
required: false,
|
||||
isSortable: false, // For example
|
||||
isNumeric: true,
|
||||
},
|
||||
{
|
||||
label: __( 'Shipping', 'wc-admin' ),
|
||||
key: 'shipping',
|
||||
required: false,
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
{
|
||||
label: __( 'Net Revenue', 'wc-admin' ),
|
||||
key: 'net_revenue',
|
||||
required: false,
|
||||
isSortable: true,
|
||||
isNumeric: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,30 +74,33 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-filter-picker__content-list-item-btn {
|
||||
padding: 1em 1em 1em 3em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background-color: $core-grey-light-100;
|
||||
color: $core-grey-dark-500;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: $core-grey-light-200;
|
||||
color: $core-grey-dark-500;
|
||||
}
|
||||
|
||||
&.components-button:not(:disabled):not([aria-disabled='true']):focus {
|
||||
.woocommerce-filter-picker__content-list-item-btn {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 1em 1em 1em 3em;
|
||||
background-color: $core-grey-light-100;
|
||||
}
|
||||
text-align: left;
|
||||
|
||||
.dashicon {
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
&.components-button {
|
||||
color: $core-grey-dark-500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $core-grey-light-200;
|
||||
color: $core-grey-dark-500;
|
||||
}
|
||||
|
||||
&.components-button:not(:disabled):not([aria-disabled='true']):focus {
|
||||
background-color: $core-grey-light-100;
|
||||
}
|
||||
|
||||
.dashicon {
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ render: function() {
|
|||
* `className`: Optional additional classes
|
||||
* `headers`: An array of column headers, as objects with the following properties:
|
||||
* `headers[].defaultSort`: Boolean, true if this column is the default for sorting. Only one column should have this set.
|
||||
* `headers[].isNumeric`: Boolean, true if this column is a number value.
|
||||
* `headers[].isSortable`: Boolean, true if this column is sortable.
|
||||
* `headers[].key`: The API parameter name for this column, passed to `orderby` when sorting via API.
|
||||
* `headers[].label`: The display label for this column.
|
||||
|
|
|
|||
|
|
@ -25,6 +25,11 @@
|
|||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr:hover,
|
||||
tr:focus-within {
|
||||
background-color: $core-grey-light-200;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-table__header,
|
||||
|
|
@ -32,6 +37,29 @@
|
|||
padding: $gap $gap-large;
|
||||
border-bottom: 1px solid $core-grey-light-500;
|
||||
text-align: left;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: ($gap*-1) ($gap-large*-1);
|
||||
padding: $gap $gap-large;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $woocommerce-700;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-numeric {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-table__header,
|
||||
|
|
@ -50,9 +78,9 @@ th.woocommerce-table__item {
|
|||
}
|
||||
|
||||
.components-button.is-button {
|
||||
padding: $gap-smaller $gap $gap-smaller 0;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: $gap-smaller $gap-large $gap-smaller 0;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -85,11 +85,12 @@ class Table extends Component {
|
|||
<tbody>
|
||||
<tr>
|
||||
{ headers.map( ( header, i ) => {
|
||||
const { isSortable, key, label } = header;
|
||||
const { isSortable, isNumeric, key, label } = header;
|
||||
const thProps = {
|
||||
className: classnames( 'woocommerce-table__header', {
|
||||
'is-sortable': isSortable,
|
||||
'is-sorted': sortedBy === key,
|
||||
'is-numeric': isNumeric,
|
||||
} ),
|
||||
};
|
||||
if ( isSortable ) {
|
||||
|
|
@ -135,18 +136,18 @@ class Table extends Component {
|
|||
</tr>
|
||||
{ rows.map( ( row, i ) => (
|
||||
<tr key={ i }>
|
||||
{ row.map(
|
||||
( cell, j ) =>
|
||||
rowHeader === j ? (
|
||||
<th scope="row" key={ j } className="woocommerce-table__item">
|
||||
{ getDisplay( cell ) }
|
||||
</th>
|
||||
) : (
|
||||
<td key={ j } className="woocommerce-table__item">
|
||||
{ getDisplay( cell ) }
|
||||
</td>
|
||||
)
|
||||
) }
|
||||
{ row.map( ( cell, j ) => {
|
||||
const { isNumeric } = headers[ j ];
|
||||
const Cell = rowHeader === j ? 'th' : 'td';
|
||||
const cellClasses = classnames( 'woocommerce-table__item', {
|
||||
'is-numeric': isNumeric,
|
||||
} );
|
||||
return (
|
||||
<Cell scope="row" key={ j } className={ cellClasses }>
|
||||
{ getDisplay( cell ) }
|
||||
</Cell>
|
||||
);
|
||||
} ) }
|
||||
</tr>
|
||||
) ) }
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -29,3 +29,24 @@
|
|||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-layout {
|
||||
a:link,
|
||||
a:visited,
|
||||
.components-button.is-link {
|
||||
color: $woocommerce-500;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus,
|
||||
.components-button.is-link:hover,
|
||||
.components-button.is-link:active,
|
||||
.components-button.is-link:focus {
|
||||
color: $woocommerce-400;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
box-shadow: 0 0 0 1px $woocommerce-300, 0 0 2px 1px rgba($woocommerce-300, 0.8);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue