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

Modify table download button styling (https://github.com/woocommerce/woocommerce-admin/pull/560)

This commit is contained in:
Joshua T Flowers 2018-10-17 19:01:57 -04:00 committed by GitHub
parent 7203fa0e11
commit 34d7944988
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
plugins/woocommerce-admin/client/components/table/download-icon.js Normal file
View File

@ -0,0 +1,13 @@
/** @format */
/**
* External dependencies
*/
import React from 'react';
export default () => (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24">
<path d="M18,9c-0.009,0-0.017,0.002-0.025,0.003C17.72,5.646,14.922,3,11.5,3C7.91,3,5,5.91,5,9.5c0,0.524,0.069,1.031,0.186,1.519
C5.123,11.016,5.064,11,5,11c-2.209,0-4,1.791-4,4c0,1.202,0.541,2.267,1.38,3h18.593C22.196,17.089,23,15.643,23,14
C23,11.239,20.761,9,18,9z M12,16l-4-5h3V8h2v3h3L12,16z" />
</svg>
);

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

@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
import './style.scss';
import Card from 'components/card';
import CompareButton from 'components/filters/compare/button';
import DowloadIcon from './download-icon';
import EllipsisMenu from 'components/ellipsis-menu';
import { getIdsFromQuery } from 'lib/nav-utils';
import MenuItem from 'components/ellipsis-menu/menu-item';
@ -222,10 +223,9 @@ class TableCard extends Component {
key="download"
className="woocommerce-table__download-button"
onClick={ onClickDownload }
icon="arrow-down"
size={ 18 }
isDefault
isLink
>
<DowloadIcon />
{ labels.downloadButton || __( 'Download', 'wc-admin' ) }
</IconButton>
),

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

@ -22,13 +22,23 @@
.woocommerce-search {
margin: 0 $gap;
}
.woocommerce-compare-button,
.woocommerce-table__download-button {
.woocommerce-compare-button {
padding: 3px $gap-small;
height: auto;
}
}
button.woocommerce-table__download-button.is-link {
padding: 6px $gap-small;
color: #000000;
text-decoration: none;
svg {
margin-right: $gap-smaller;
max-width: 18px;
width: 24px;
max-width: 24px;
}
.woocommerce-pagination {
padding-top: $gap;
padding-bottom: $gap;